Skip to content
Open
16 changes: 9 additions & 7 deletions packages/app/src/components/session/session-header.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -449,17 +449,19 @@ export function SessionHeader() {
class="rounded-xl [&_[data-slot=popover-close-button]]:hidden"
triggerAs={Button}
triggerProps={{
variant: "ghost",
class:
"rounded-md h-[24px] px-3 border border-border-weak-base bg-surface-panel shadow-none data-[expanded]:bg-surface-base-active",
classList: {
"rounded-r-none": share.shareUrl() !== undefined,
"border-r-0": share.shareUrl() !== undefined,
},
variant: "secondary",
class: "rounded-sm w-[60px] h-[24px] hover:bg-surface-raised-base-hover",
classList: { "rounded-r-none": shareUrl() !== undefined },
style: { scale: 1 },
}}
trigger={<span class="text-12-regular">{language.t("session.share.action.share")}</span>}
>
<input
type="text"
autofocus
style="position:absolute; left:-10000px; width:1px; height:1px; opacity:0;"
aria-hidden="true"
/>
<div class="flex flex-col gap-2">
<Show
when={share.shareUrl()}
Expand Down
5 changes: 4 additions & 1 deletion packages/ui/src/components/button.css
Original file line number Diff line number Diff line change
Expand Up @@ -20,8 +20,11 @@
color: var(--icon-invert-base);
}

/* Clear, darker hover fill for primary button */
&:hover:not(:disabled) {
background-color: var(--icon-strong-hover);
/* Subtler darken on hover to avoid overly dark button */
background-color: color-mix(in oklab, var(--button-primary-base) 75%, black 25%);
transition: background-color 100ms ease;
}
&:focus:not(:disabled) {
background-color: var(--icon-strong-focus);
Expand Down
3 changes: 2 additions & 1 deletion packages/ui/src/components/icon-button.css
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,8 @@
}

&:hover:not(:disabled) {
background-color: var(--icon-strong-hover);
/* Align hover color with primary button hover to keep consistency */
background-color: color-mix(in oklab, var(--button-primary-base) 75%, black 25%);
}
&:focus:not(:disabled) {
background-color: var(--icon-strong-focus);
Expand Down