feat: improve admin panel design (#14464)

packages/frontend/admin/src/modules/header.tsx

@@ -17,25 +17,24 @@ export const Header = ({
   const isSmallScreen = useMediaQuery('(max-width: 768px)');
 
   return (
-    <div>
-      <div className="flex items-center px-6 gap-4 h-[56px]">
+    <div className="border-b border-border/60 bg-background/80 backdrop-blur-sm">
+      <div className="flex h-14 items-center gap-4 px-6">
         {isSmallScreen ? (
           <div className="h-7 w-7 p-1" />
         ) : (
           <Button
             variant="ghost"
             size="icon"
-            className="h-7 w-7 p-1 hover:bg-gray-200 cursor-pointer"
+            className="h-7 w-7 cursor-pointer p-1 text-muted-foreground hover:bg-accent hover:text-foreground"
             onClick={togglePanel}
           >
             <SidebarIcon width={20} height={20} />
           </Button>
         )}
         <Separator orientation="vertical" className="h-5" />
-        <div className="text-[15px] font-semibold">{title}</div>
+        <div className="text-sm font-semibold tracking-tight">{title}</div>
         {endFix && <div className="ml-auto">{endFix}</div>}
       </div>
-      <Separator />
     </div>
   );
 };
@@ -52,30 +51,29 @@ export const RightPanelHeader = ({
   canSave: boolean;
 }) => {
   return (
-    <div>
-      <div className=" flex justify-between items-center h-[56px] px-6">
+    <div className="border-b border-border/60 bg-card/80 backdrop-blur-sm">
+      <div className="flex h-14 items-center justify-between px-4">
         <Button
           type="button"
           size="icon"
-          className="w-7 h-7"
+          className="h-7 w-7 text-muted-foreground hover:text-foreground"
           variant="ghost"
           onClick={handleClose}
         >
-          <XIcon size={20} />
+          <XIcon size={18} />
         </Button>
-        <span className="text-base font-medium">{title}</span>
+        <span className="text-sm font-semibold tracking-tight">{title}</span>
         <Button
           type="submit"
           size="icon"
-          className="w-7 h-7"
+          className="h-7 w-7 text-primary hover:text-primary"
           variant="ghost"
           onClick={handleConfirm}
           disabled={!canSave}
         >
-          <CheckIcon size={20} />
+          <CheckIcon size={18} />
         </Button>
       </div>
-      <Separator />
     </div>
   );
 };