chore: change some styles

src/components/AppHeader.jsx

@@ -7,7 +7,7 @@ import MenuDrawer from './MenuDrawer';
 export default function AppHeader({ zone = 'public' }) {
 
   const bgColor = {
-      public: '#000000a0',
+      public: '#40120EFF',
       restricted: '#e0e0ff',
       private: '#d0f0e0',
   };
@@ -31,15 +31,12 @@ export default function AppHeader({ zone = 'public' }) {
           <IconButton edge="start" color="inherit" onClick={() => setMenuOpen(true)}>
             <img src={fendiLogo} alt="Fendi logo" style={{ height: 40 }} />
           </IconButton>
-          <Typography variant="h6" noWrap sx={{ ml: 1 }}>
-            {isPrivate ? "Private" : isRestricted ? "Restricted" : "Fendi Casa Experience"}
-          </Typography>
         </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%)' }} />
+            <SearchIcon sx={{ position: 'absolute', left: 10, top: '50%', transform: 'translateY(-50%)', color: '#A68A72FF' }} />
             <InputBase
               placeholder="Search…"
               sx={{
@@ -48,7 +45,7 @@ export default function AppHeader({ zone = 'public' }) {
                 py: 0.5,
                 borderRadius: 1,
                 bgcolor: '#000000a0',
-                color: 'gray',
+                color: '#A68A72FF',
                 width: { md: '300px', lg: '400px' }
               }}
             />
@@ -59,7 +56,7 @@ export default function AppHeader({ zone = 'public' }) {
         {isPublic && (
           <Box>
             <IconButton color="inherit">
-              <Typography variant="button" color="inherit">
+              <Typography variant="button" color="#A68A72FF">
                 Login
               </Typography>
             </IconButton>

src/private/Admin.jsx

@@ -8,25 +8,26 @@ import EditIcon from '@mui/icons-material/Edit';
 import DeleteIcon from '@mui/icons-material/Delete';
 
 import '../App.css';
+import { Visibility } from '@mui/icons-material';
 
 const columnsBase = [
-    { field: 'id', headerName: 'ID', width: 70 },
+    { field: 'id', headerName: 'ID', width: 70, hide: false },
     { field: 'company', headerName: 'Company', flex: 1 },
     { field: 'name', headerName: 'Name', flex: 1 },
-    { field: 'price', headerName: '$', width: 100, type: 'number' },
+    { field: 'price', headerName: '$', width: 120, type: 'number' },
     { field: 'provider', headerName: 'Provider', flex: 1 },
-    { field: 'stock', headerName: 'Stock', width: 100, type: 'number' },
+    { field: 'stock', headerName: 'Stock', width: 120, type: 'number' },
     { field: 'category', headerName: 'Category', flex: 1 },
     {
         field: 'representation',
         headerName: 'Representation',
-        width: 120,
+        width: 200,
         renderCell: (params) => (
             <Box display="flex" justifyContent="center" width="100%">
                 <Avatar
                     variant="rounded"
                     src={params.value}
-                    sx={{ width: 100, height: 48 }}
+                    sx={{ width: 180, height: 48 }}
                     imgProps={{
                         style: {
                             objectFit: 'contain', // or 'cover' if you want it to fill and crop
@@ -104,7 +105,7 @@ export default function Admin({ children, maxWidth = 'lg', sx = {} }) {
 
     return (
         <SectionContainer sx={{ width: '100%' }}>
-            <Typography variant="h6" gutterBottom>
+            <Typography variant="h6" gutterBottom color='#26201AFF'>
                 Product Catalog
             </Typography>
 

src/theme.jsx

@@ -1,15 +1,67 @@
 // src/theme.js
+import { colors } from '@mui/material';
 import { createTheme } from '@mui/material/styles';
 
 const theme = createTheme({
   typography: {
     fontFamily: 'Montserrat, sans-serif',
   },
+
   palette: {
     text: {
-      primary: '#26201A',
+      primary: '#40120EFF',
     },
   },
+
+  components: {
+    MuiDataGrid: {
+      styleOverrides: {
+        row: {
+          '&:hover': {
+            backgroundColor: '#f0eae3',
+          },
+          '&.Mui-selected': {
+            backgroundColor: '#DFCCBCFF',
+            color: '#26201A',
+          },
+          '&.Mui-selected:hover': {
+            backgroundColor: '#d0b9a8',
+          },
+          color: '#26201A',
+        },
+        cell: {
+          '&:focus-within': {
+            outline: '2px solid #DFCCBCFF', // custom Fendi focus
+            outlineOffset: '-2px', // tighten the outline
+            backgroundColor: '#f5f0eb', // optional subtle highlight
+          },
+        },
+      },
+    },
+    MuiButton: {
+      styleOverrides: {
+        root: {
+          /* your current styles... */
+          '&:focus': {
+            outline: '2px solid #DFCCBCFF',
+          },
+          '&:focusVisible': {
+            outline: '2px solid #DFCCBCFF',
+          },
+        },
+      },
+    },
+    MuiIconButton: {
+      styleOverrides: {
+        root: {
+          '&:focus, &:focus-visible': {
+            outline: '2px solid #DFCCBCFF',
+            outlineOffset: '2px',
+          },
+        },
+      },
+    },
+  }
 });
 
 export default theme;