Refactor approval button styling
This commit is contained in:
@@ -1493,37 +1493,31 @@ body {
|
|||||||
|
|
||||||
.message__approval-btn {
|
.message__approval-btn {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
padding: 0.25rem var(--s-1);
|
padding: var(--s-2) var(--s-1);
|
||||||
font-size: var(--s-1);
|
font-size: var(--s-1);
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
color: var(--color-text);
|
text-transform: uppercase;
|
||||||
background: var(--color-surface);
|
letter-spacing: 0.05em;
|
||||||
border: var(--border-width) solid var(--color-border);
|
color: white;
|
||||||
|
border: var(--border-width) solid transparent;
|
||||||
border-radius: var(--radius);
|
border-radius: var(--radius);
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.message__approval-btn--approve {
|
.message__approval-btn--approve {
|
||||||
color: white;
|
|
||||||
background: var(--color-green);
|
background: var(--color-green);
|
||||||
border-color: var(--color-green);
|
border-color: var(--color-green);
|
||||||
}
|
}
|
||||||
|
|
||||||
.message__approval-btn--deny {
|
.message__approval-btn--deny {
|
||||||
color: var(--color-red);
|
background: var(--color-red);
|
||||||
border-color: var(--color-red);
|
border-color: var(--color-red);
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (hover: hover) {
|
@media (hover: hover) {
|
||||||
.message__approval-btn--approve:hover {
|
.message__approval-btn--approve:hover,
|
||||||
background: var(--color-green);
|
|
||||||
filter: brightness(1.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.message__approval-btn--deny:hover {
|
.message__approval-btn--deny:hover {
|
||||||
color: white;
|
filter: brightness(1.1);
|
||||||
background: var(--color-red);
|
|
||||||
border-color: var(--color-red);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -223,16 +223,16 @@
|
|||||||
</div>
|
</div>
|
||||||
</details>
|
</details>
|
||||||
<div class="message__approval" hidden>
|
<div class="message__approval" hidden>
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
class="message__approval-btn message__approval-btn--approve"
|
|
||||||
aria-label="Approve tool call"
|
|
||||||
>Approve</button>
|
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
class="message__approval-btn message__approval-btn--deny"
|
class="message__approval-btn message__approval-btn--deny"
|
||||||
aria-label="Deny tool call"
|
aria-label="Deny tool call"
|
||||||
>Deny</button>
|
>Deny</button>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
class="message__approval-btn message__approval-btn--approve"
|
||||||
|
aria-label="Approve tool call"
|
||||||
|
>Approve</button>
|
||||||
</div>
|
</div>
|
||||||
<div class="message__actions">
|
<div class="message__actions">
|
||||||
<svg class="message__icon" aria-hidden="true"><use href="/static/icons.svg#assistant"></use></svg>
|
<svg class="message__icon" aria-hidden="true"><use href="/static/icons.svg#assistant"></use></svg>
|
||||||
|
|||||||
Reference in New Issue
Block a user