layout header icon styles

apps/studio/components/layouts/AppLayout/AssistantButton.tsx

@@ -13,7 +13,7 @@ export const AssistantButton = () => {
       type="text"
       size="tiny"
       id="assistant-trigger"
-      className="w-[24px] h-[24px] flex items-center justify-center p-0"
+      className="rounded-none w-[32px] h-[30px] flex items-center justify-center p-0 hover:bg-brand-400"
       onClick={() => {
         snap.toggleAssistant()
         setEditorPanel({ open: false })

apps/studio/components/layouts/AppLayout/InlineEditorButton.tsx

@@ -13,7 +13,7 @@ export const InlineEditorButton = () => {
       type="text"
       size="tiny"
       id="editor-trigger"
-      className="w-[24px] h-[24px] flex items-center justify-center p-0 text-foreground-light hover:text-foreground"
+      className="rounded-none w-[32px] h-[30px] flex items-center justify-center p-0 text-foreground-light hover:text-foreground"
       onClick={() => {
         closeAssistant()
         setEditorPanel({ open: !editorPanel.open })
@@ -29,7 +29,7 @@ export const InlineEditorButton = () => {
         },
       }}
     >
-      <SqlEditor size={16} strokeWidth={1.5} />
+      <SqlEditor size={18} strokeWidth={1.5} />
     </ButtonTooltip>
   )
 }

apps/studio/components/layouts/ProjectLayout/LayoutHeader/FeedbackDropdown/FeedbackDropdown.tsx

@@ -29,6 +29,7 @@ const FeedbackDropdown = () => {
             setStage('select')
           }}
           type="outline"
+          className="rounded-full h-[32px] border-border"
         >
           <span className="hidden md:flex">Feedback</span>
         </Button>

apps/studio/components/layouts/ProjectLayout/LayoutHeader/HelpPopover.tsx

@@ -37,8 +37,14 @@ export const HelpPopover = () => {
         <ButtonTooltip
           id="help-popover-button"
           type="text"
-          className="px-1"
-          icon={<HelpCircle size={16} strokeWidth={1.5} className="text-foreground-light" />}
+          className="rounded-none w-[32px] h-[30px] group"
+          icon={
+            <HelpCircle
+              size={18}
+              strokeWidth={1.5}
+              className="!h-[18px] !w-[18px] text-foreground-light group-hover:text-foreground"
+            />
+          }
           tooltip={{ content: { side: 'bottom', text: 'Help' } }}
           onClick={() => {
             sendEvent({

apps/studio/components/layouts/ProjectLayout/LayoutHeader/LayoutHeader.tsx

@@ -188,8 +188,19 @@ const LayoutHeader = ({
           {IS_PLATFORM ? (
             <>
               <FeedbackDropdown />
-              <NotificationsPopoverV2 />
-              <HelpPopover />
+
+              <div className="overflow-hidden flex items-center rounded-full border">
+                <HelpPopover />
+                <NotificationsPopoverV2 />
+                <AnimatePresence initial={false}>
+                  {!!projectRef && (
+                    <>
+                      <InlineEditorButton />
+                      <AssistantButton />
+                    </>
+                  )}
+                </AnimatePresence>
+              </div>
               <UserDropdown />
             </>
           ) : (
@@ -200,25 +211,6 @@ const LayoutHeader = ({
           )}
         </div>
       </div>
-
-      <AnimatePresence initial={false}>
-        {!!projectRef && (
-          <motion.div
-            className="border-l h-full flex items-center justify-center flex-shrink-0"
-            initial={{ opacity: 0, x: 0, width: 0 }}
-            animate={{ opacity: 1, x: 0, width: 'auto' }}
-            exit={{ opacity: 0, x: 0, width: 0 }}
-            transition={{ duration: 0.15, ease: 'easeOut' }}
-          >
-            <div className="border-r h-full flex items-center justify-center px-2">
-              <InlineEditorButton />
-            </div>
-            <div className="px-2">
-              <AssistantButton />
-            </div>
-          </motion.div>
-        )}
-      </AnimatePresence>
     </header>
   )
 }

apps/studio/components/layouts/ProjectLayout/LayoutHeader/NotificationsPopoverV2/NotificationsPopover.tsx

@@ -105,7 +105,7 @@ export const NotificationsPopoverV2 = () => {
           }}
           type={hasNewNotifications ? 'outline' : 'text'}
           className={cn(
-            'h-[26px]',
+            'rounded-none h-[30px] w-[32px]',
             // !hasCritical || !hasWarning || !hasNewNotifications ? 'w-[26px]' : '',
             'group',
             hasNewNotifications ? 'rounded-full px-1.5' : 'px-1',
@@ -136,7 +136,7 @@ export const NotificationsPopoverV2 = () => {
             <InboxIcon
               size={18}
               strokeWidth={1.5}
-              className="transition group-hover:text-foreground text-foreground-light"
+              className="!h-[18] !w-[18] transition group-hover:text-foreground text-foreground-light"
             />
           }
         />

packages/ui/src/layout/ai-icon-animation/ai-icon-animation.tsx

@@ -17,7 +17,7 @@ const AiIconAnimationComponent = ({
   className,
   allowHoverEffect = false,
 }: AiIconAnimationProps) => {
-  const strokeWidth = Math.max(1, size / 46) // Ensure minimum stroke width of 1
+  const strokeWidth = Math.max(1.5, size / 46) // Ensure minimum stroke width of 1
   const containerRef = useRef<HTMLDivElement>(null)
   const [isHovering, setIsHovering] = useState(false)