website refactor

apps/website/ui/ControlBar.tsx

@@ -5,33 +5,35 @@ import { Surface } from './Surface';
 export interface ControlBarProps {
   children: ReactNode;
   leftContent?: ReactNode;
-  variant?: 'default' | 'dark';
 }
 
-export const ControlBar = ({ 
-  children, 
-  leftContent,
-  variant = 'default'
-}: ControlBarProps) => {
+export const ControlBar = ({ children, leftContent }: ControlBarProps) => {
   return (
-    <Surface 
-      variant={variant === 'dark' ? 'dark' : 'muted'} 
-      padding={4} 
+    <Surface
+      as="header"
+      variant="precision"
+      paddingX={0}
+      height="56px"
       position="sticky"
       top="0"
-      zIndex={50}
-      style={{ borderBottom: '1px solid var(--ui-color-border-default)' }}
+      zIndex={100}
+      borderBottom={true}
+      backgroundColor="rgba(10, 10, 11, 0.92)"
+      className="backdrop-blur-xl"
+      style={{
+        boxShadow: '0 1px 0 0 rgba(255, 255, 255, 0.05), 0 10px 30px rgba(0, 0, 0, 0.35)',
+      }}
     >
-      <Box display="flex" alignItems="center" justifyContent="between" flexWrap="wrap" gap={4}>
+      <Box display="flex" alignItems="center" justifyContent="between" h="full" width="full" px={4}>
         {leftContent && (
-          <Box display="flex" alignItems="center" gap={4} flex={1}>
+          <Box display="flex" alignItems="center" h="full" minWidth="0" flex={1}>
             {leftContent}
           </Box>
         )}
-        <Box display="flex" alignItems="center" gap={4} justifyContent="end" flex={leftContent ? 0 : 1}>
+        <Box display="flex" alignItems="center" justifyContent="end" minWidth="0" flex={leftContent ? 0 : 1}>
           {children}
         </Box>
       </Box>
     </Surface>
   );
-};
+};