Refactor approval button styling

This commit is contained in:
dwrz
2026-11-01 12:54:12 +00:00
parent a70634a1e9
commit 37cc4b9498
2 changed files with 13 additions and 19 deletions
+8 -14
View File
@@ -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>