feat: style improvements

packages/app/src/components/prompt-input.tsx

@@ -1681,7 +1681,7 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
                 disabled={!prompt.dirty() && !working()}
                 icon={working() ? "stop" : "arrow-up"}
                 variant="primary"
-                class="h-6 w-4.5"
+                class="h-6 w-6"
               />
             </Tooltip>
           </div>

packages/app/src/components/session/session-header.tsx

@@ -236,6 +236,7 @@ export function SessionHeader() {
               <Show when={shareEnabled() && currentSession()}>
                 <div class="flex items-center">
                   <Popover
+                    gutter={16}
                     title="Publish on web"
                     description={
                       shareUrl()
@@ -298,7 +299,7 @@ export function SessionHeader() {
                     </div>
                   </Popover>
                   <Show when={shareUrl()} fallback={<div class="size-6" aria-hidden="true" />}>
-                    <Tooltip value={state.copied ? "Copied" : "Copy link"} placement="top" gutter={8}>
+                    <Tooltip value={state.copied ? "Copied" : "Copy link"} placement="top-end" gutter={12}>
                       <IconButton
                         icon={state.copied ? "check" : "copy"}
                         variant="secondary"

packages/ui/src/components/button.css

@@ -16,7 +16,7 @@
 
   &[data-variant="primary"] {
     background-color: var(--icon-strong-base);
-    border-color: var(--border-weak-base);
+    border-color: var(--border-weaker-base);
     color: var(--icon-invert-base);
 
     [data-slot="icon-svg"] {

packages/ui/src/components/dropdown-menu.css

@@ -2,21 +2,24 @@
 [data-component="dropdown-menu-sub-content"] {
   min-width: 8rem;
   overflow: hidden;
+  border: none;
   border-radius: var(--radius-md);
-  border: 1px solid color-mix(in oklch, var(--border-base) 50%, transparent);
+  box-shadow: var(--shadow-xs-border);
   background-clip: padding-box;
   background-color: var(--surface-raised-stronger-non-alpha);
   padding: 4px;
-  box-shadow: var(--shadow-md);
+  z-index: 100;
-  z-index: 50;
   transform-origin: var(--kb-menu-content-transform-origin);
  
-  &[data-closed] {
+  animation: dropdownMenuContentHide 200ms cubic-bezier(0.25, 0, 0.5, 1) forwards;
-    animation: dropdown-menu-close 0.15s ease-out;
+
+  @starting-style {
+    animation: none;
   }
 
   &[data-expanded] {
-    animation: dropdown-menu-open 0.15s ease-out;
+    pointer-events: auto;
+    animation: dropdownMenuContentShow 200ms cubic-bezier(0.25, 0, 0.5, 1) forwards;
   }
 }
 
@@ -33,18 +36,23 @@
     padding: 4px 8px;
     border-radius: var(--radius-sm);
     cursor: default;
-    user-select: none;
     outline: none;
 
     font-family: var(--font-family-sans);
-    font-size: var(--font-size-small);
+    font-size: var(--font-size-base);
     font-weight: var(--font-weight-medium);
     line-height: var(--line-height-large);
     letter-spacing: var(--letter-spacing-normal);
     color: var(--text-strong);
 
-    &[data-highlighted] {
+    transition:
-      background: var(--surface-raised-base-hover);
+      background-color 200ms cubic-bezier(0.25, 0, 0.5, 1),
+      color 200ms cubic-bezier(0.25, 0, 0.5, 1);
+    outline: none;
+    user-select: none;
+
+    &:hover {
+      background-color: var(--surface-raised-base-hover);
     }
 
     &[data-disabled] {
@@ -56,6 +64,8 @@
   [data-slot="dropdown-menu-sub-trigger"] {
     &[data-expanded] {
       background: var(--surface-raised-base-hover);
+      outline: none;
+      border: none;
     }
   }
 
@@ -97,24 +107,24 @@
   }
 }
 
-@keyframes dropdown-menu-open {
+@keyframes dropdownMenuContentShow {
   from {
     opacity: 0;
-    transform: scale(0.96);
+    transform: scaleY(0.95);
   }
   to {
     opacity: 1;
-    transform: scale(1);
+    transform: scaleY(1);
   }
 }
 
-@keyframes dropdown-menu-close {
+@keyframes dropdownMenuContentHide {
   from {
     opacity: 1;
-    transform: scale(1);
+    transform: scaleY(1);
   }
   to {
     opacity: 0;
-    transform: scale(0.96);
+    transform: scaleY(0.95);
   }
 }

packages/ui/src/components/message-nav.css

@@ -15,7 +15,7 @@
 [data-slot="message-nav-list"] {
   --message-nav-item-height: 11px;
   --message-nav-item-width: 40px;
-  --message-nav-expanded-width: 240px;
+  --message-nav-expanded-width: 260px;
 
   list-style: none;
   padding: 4px;

packages/ui/src/components/message-nav.tsx

@@ -149,7 +149,7 @@ export const MessageNav = (props: MessageNavProps) => {
                       stopScrollAnimation(scrollAnimationState, titleRef)
                       scrollAnimationState = startScrollAnimation(titleRef)
                     }
-                  }, 500)
+                  }, 300)
                 }
 
                 const handleTitleMouseLeave = () => {

packages/ui/src/components/popover.css

@@ -15,6 +15,14 @@
 
   transform-origin: var(--kb-popover-content-transform-origin);
 
+  [data-origin-top-right] {
+    transform-origin: top right;
+  }
+
+  [data-origin-top-left] {
+    transform-origin: top left;
+  }
+
   &:focus-within {
     outline: none;
   }

packages/ui/src/components/select.css

@@ -141,7 +141,7 @@
 @keyframes selectContentShow {
   from {
     opacity: 0;
-    transform: scaleY(0.9);
+    transform: scaleY(0.95);
   }
   to {
     opacity: 1;
@@ -156,6 +156,6 @@
   }
   to {
     opacity: 0;
-    transform: scaleY(0.9);
+    transform: scaleY(0.95);
   }
 }