chore: design the ui based on figmas

src/components/AppHeader.jsx

@@ -1,7 +1,7 @@
 import { useState } from 'react';
 import fendiLogo from '/favicon.png'
-import { AppBar, Toolbar, Typography, InputBase, IconButton, Box, Avatar } from '@mui/material';
+import { AppBar, Toolbar, Typography, IconButton, Box, Avatar } from '@mui/material';
-import SearchIcon from '@mui/icons-material/Search';
+
 import MenuDrawer from './MenuDrawer';
 import MenuIcon from '@mui/icons-material/Menu';
 import { useAuth } from '../context/AuthContext';
@@ -39,24 +39,6 @@ export default function AppHeader({ zone = 'public', onSelectMenuItem }) {
           </IconButton>
         </Box>
 
-        {/* Search only visible for restricted or private zones */}
-        {(isRestricted || isPrivate || isPublic) && (
-          <Box sx={{ position: 'relative', display: { xs: 'none', md: 'flex' } }}>
-            <SearchIcon sx={{ position: 'absolute', left: 10, top: '50%', transform: 'translateY(-50%)', color: '#A68A72FF' }} />
-            <InputBase
-              placeholder="Search…"
-              sx={{
-                pl: 4,
-                pr: 2,
-                py: 0.5,
-                borderRadius: 1,
-                color: '#A68A72FF',
-                width: { md: '300px', lg: '400px' }
-              }}
-            />
-          </Box>
-        )}
-
         {/* Login button only visible for public zone */}
         {isPublic && !user && (
           <Box>

src/components/MenuDrawer.jsx

@@ -1,30 +1,25 @@
-import { Drawer, List, ListItem, ListItemText, ListItemIcon, Avatar, Typography, Box, useMediaQuery } from '@mui/material';
+import { Drawer, List, ListItem, ListItemText, ListItemIcon, Typography, Box, useMediaQuery, InputBase } from '@mui/material';
-import CategoryIcon from '@mui/icons-material/Category';
-import PeopleIcon from '@mui/icons-material/People';
-import InventoryIcon from '@mui/icons-material/Inventory';
-import LocalShippingIcon from '@mui/icons-material/LocalShipping';
-import ExitToAppIcon from '@mui/icons-material/ExitToApp';
-import AdminPanelSettingsIcon from '@mui/icons-material/AdminPanelSettings';
 import { useAuth } from '../context/AuthContext';
 
-import { useState } from 'react';
+import ExitToAppIcon from '@mui/icons-material/ExitToApp';
+
 
 const menuOptions = {
   public: [
-    { text: 'Admin', icon: <AdminPanelSettingsIcon /> },
+    { text: 'Dashboard', icon: <img src="/Dashboard.png" alt="Dashboard" width={24} height={24} />},
-    { text: 'Categories', icon: <CategoryIcon /> },
-    { text: 'Clients', icon: <PeopleIcon /> },
-    { text: 'Products', icon: <InventoryIcon /> },
-    { text: 'Providers', icon: <LocalShippingIcon /> },
     { text: 'Logout', icon: <ExitToAppIcon /> },
   ],
   restricted: [],
   private: [
-    { text: 'Admin', icon: <AdminPanelSettingsIcon /> },
+    { text: 'Dashboard', icon: <img src="/Dashboard.png" alt="Dashboard" width={24} height={24} /> },
-    { text: 'Categories', icon: <CategoryIcon /> },
+    { text: 'Catalog', icon: <img src="/Catalog.png" alt="Catalog" width={24} height={24} /> },
-    { text: 'Clients', icon: <PeopleIcon /> },
+    { text: 'Define your style', icon: <img src="/DefineYourStyle.png" alt="Define your style" width={24} height={24} /> },
-    { text: 'Products', icon: <InventoryIcon /> },
+    { text: 'Ambient Design', icon: <img src="/AmbientDesign.png" alt="Ambient Design" width={24} height={24} /> },
-    { text: 'Providers', icon: <LocalShippingIcon /> },
+    { text: 'Flat Layouts and assets', icon: <img src="/FlatLayouts.png" alt="Flat Layouts and assets" width={24} height={24} /> },
+    { text: 'Export and sharing', icon: <img src="/ExportAndSharing.png" alt="Export and sharing" width={24} height={24} /> },
+    { text: 'Shopping cart', icon: <img src="/ShoppingCart.png" alt="Shopping cart" width={24} height={24} /> },
+    { text: 'Settings', icon: <img src="/Settings.png" alt="Settings" width={24} height={24} /> },
+    { text: 'Help', icon: <img src="/Help.png" alt="Help" width={24} height={24} /> },
     { text: 'Logout', icon: <ExitToAppIcon /> },
   ],
 };
@@ -39,22 +34,35 @@ export default function MenuDrawer({ zone = 'public', open, onClose, onSelect })
     <Drawer anchor="left" open={open} onClose={onClose} slotProps={{
       paper: {
         sx: {
-          backgroundColor: '#40120EFF',
+          backgroundColor: '#FFFFFFFF',
-          width: isMobile ? '100vw' : 250,
+          width: isMobile ? '100vw' : 300,
-          color: '#DFCCBCFF'
+          color: '#40120EFF'
         },
       },
     }}>
       <Box textAlign="center" p={3}>
-        <Avatar
+        <img
-          src="/favicon.png"
+          src="/logo.png"
-          alt="User"
+          alt="Dream Views"
-          sx={{ width: 64, height: 64, mx: 'auto', mb: 1 }}
+          style={{ margin: 'auto', marginBottom: 8 }}
         />
-        <Typography variant="subtitle1" fontWeight={600}>Fendi Casa</Typography>
+
-        <Typography variant="body2">Administrator</Typography>
+        <Box sx={{ position: 'relative', display: { xs: 'none', md: 'flex' } }}>
+          <InputBase
+            placeholder="Filter options..."
+            sx={{
+              pl: 4,
+              pr: 2,
+              py: 0.5,
+              borderRadius: 2,
+              border: '1px solid #40120EFF', // Borde visible
+              color: '#40120EFF',
+              width: { md: '300px', lg: '400px' }
+            }}
+          />
+        </Box>
       </Box>
-      <List sx={{ width: isMobile ? '100vw' : 250, marginTop: 2 }}>
+      <List sx={{ width: isMobile ? '100vw' : 250, marginTop: 0 }}>
         {items.map(({ text, icon }, index) => (
           <ListItem key={index} onClick={() => {
             onClose(); // Close drawer
@@ -67,13 +75,13 @@ export default function MenuDrawer({ zone = 'public', open, onClose, onSelect })
             }
           }}>
 
-            <ListItemIcon sx={{ color: '#DFCCBCFF' }}>{icon}</ListItemIcon>
+            <ListItemIcon sx={{ color: '#40120EFF' }}>{icon}</ListItemIcon>
             <ListItemText
               primary={text}
               slotProps={{
                 primary: {
                   sx: {
-                    color: '#DFCCBCFF',
+                    color: '#40120EFF',
                     fontWeight: 'medium',
                   },
                 },

src/theme.jsx

@@ -21,7 +21,7 @@ const theme = createTheme({
             backgroundColor: '#f0eae3',
           },
           '&.Mui-selected': {
-            backgroundColor: '#DFCCBCFF',
+            backgroundColor: '#40120EFF',
             color: '#26201A',
           },
           '&.Mui-selected:hover': {
@@ -31,7 +31,7 @@ const theme = createTheme({
         },
         cell: {
           '&:focus-within': {
-            outline: '2px solid #DFCCBCFF', // custom Fendi focus
+            outline: '2px solid #40120EFF', // custom Fendi focus
             outlineOffset: '-2px', // tighten the outline
             backgroundColor: '#f5f0eb', // optional subtle highlight
           },
@@ -43,10 +43,10 @@ const theme = createTheme({
         root: {
           /* your current styles... */
           '&:focus': {
-            outline: '2px solid #DFCCBCFF',
+            outline: '2px solid #fff4ec',
           },
           '&:focusVisible': {
-            outline: '2px solid #DFCCBCFF',
+            outline: '2px solid #fff4ec',
           },
         },
       },
@@ -55,7 +55,7 @@ const theme = createTheme({
       styleOverrides: {
         root: {
           '&:focus, &:focus-visible': {
-            outline: '2px solid #DFCCBCFF',
+            outline: '2px solid #fff4ec',
             outlineOffset: '2px',
           },
         },
@@ -66,7 +66,7 @@ const theme = createTheme({
         root: {
           transition: 'background-color 0.2s ease-in-out',
           '&:hover': {
-            backgroundColor: '#AA7665FF',
+            backgroundColor: '#fff4ec',
           },
         },
       },