Fix some more styles

src-web/components/CommandPalette.tsx

@@ -392,8 +392,8 @@ export function CommandPalette({ onClose }: { onClose: () => void }) {
   );
 
   return (
-    <div className="h-full w-[400px] grid grid-rows-[auto_minmax(0,1fr)] overflow-hidden">
-      <div className="px-2 py-2 w-full">
+    <div className="h-full w-[400px] grid grid-rows-[auto_minmax(0,1fr)] overflow-hidden py-2">
+      <div className="px-2 w-full">
         <PlainInput
           hideLabel
           leftSlot={
@@ -410,7 +410,7 @@ export function CommandPalette({ onClose }: { onClose: () => void }) {
           onKeyDownCapture={handleKeyDown}
         />
       </div>
-      <div className="h-full px-1.5 overflow-y-auto pb-1">
+      <div className="h-full px-1.5 overflow-y-auto pt-2 pb-1">
         {filteredGroups.map((g) => (
           <div key={g.key} className="mb-1.5 w-full">
             <Heading size={2} className="!text-xs uppercase px-1.5 h-sm flex items-center">
@@ -459,8 +459,8 @@ function CommandPaletteItem({
       justify="start"
       className={classNames(
         'w-full h-sm flex items-center rounded px-1.5',
-        'hover:text',
-        active && 'bg-surface-highlight-secondary text',
+        'hover:text-text',
+        active && 'bg-surface-highlight',
         !active && 'text-text-subtle',
       )}
     >

src-web/components/GrpcConnectionMessagesPane.tsx

@@ -188,7 +188,7 @@ function EventRow({
         className={classNames(
           'w-full grid grid-cols-[auto_minmax(0,3fr)_auto] gap-2 items-center text-left',
           'px-1.5 py-1 font-mono cursor-default group focus:outline-none rounded',
-          isActive && '!bg-surface-highlight-secondary !text',
+          isActive && '!bg-surface-highlight !text',
           'text-text-subtle hover:text',
         )}
       >

src-web/components/Sidebar.tsx

@@ -872,9 +872,8 @@ function SidebarItem({
           className={classNames(
             'w-full flex gap-1.5 items-center h-xs px-1.5 rounded-md focus-visible:ring focus-visible:ring-border-focus outline-0',
             editing && 'ring-1 focus-within:ring-focus',
-            isActive && 'bg-surface-highlight-secondary text',
-            !isActive &&
-              'text-text-subtle group-hover/item:text-text active:bg-surface-highlight-secondary',
+            isActive && 'bg-surface-highlight text',
+            !isActive && 'text-text-subtle group-hover/item:text-text active:bg-surface-highlight',
             selected && useProminentStyles && '!bg-surface-active',
           )}
         >

src-web/components/WindowControls.tsx

@@ -23,7 +23,7 @@ export function WindowControls({ className, onlyX }: Props) {
       {!onlyX && (
         <>
           <Button
-            className="!h-full px-4 text-text-subtle hocus:text hocus:bg-surface-highlight-secondary rounded-none"
+            className="!h-full px-4 text-text-subtle hocus:text hocus:bg-surface-highlight rounded-none"
             color="custom"
             onClick={() => getCurrentWebviewWindow().minimize()}
           >

src-web/components/core/FormattedError.tsx

@@ -9,7 +9,7 @@ export function FormattedError({ children }: Props) {
   return (
     <pre
       className={classNames(
-        'font-mono text-sm w-full select-auto cursor-text bg-surface-highlight-secondary p-3 rounded',
+        'font-mono text-sm w-full select-auto cursor-text bg-surface-highlight p-3 rounded',
         'whitespace-pre-wrap border border-danger border-dashed overflow-x-auto',
       )}
     >

src-web/components/core/InlineCode.tsx

@@ -6,7 +6,7 @@ export function InlineCode({ className, ...props }: HTMLAttributes<HTMLSpanEleme
     <code
       className={classNames(
         className,
-        'font-mono text-shrink bg-surface-highlight-secondary border border-border-subtle',
+        'font-mono text-shrink bg-surface-highlight border border-border-subtle',
         'px-1.5 py-0.5 rounded text shadow-inner break-words',
       )}
       {...props}