feat: improve usability and ui minor changes

src/components/AppHeader.jsx

@@ -8,8 +8,8 @@ export default function AppHeader({ zone = 'public' }) {
 
   const bgColor = {
     public: '#40120EFF',
-    restricted: '#e0e0ff',
-    private: '#d0f0e0',
+    restricted: '#40120EFF',
+    private: '#40120EFF',
   };
 
   const [menuOpen, setMenuOpen] = useState(false);
@@ -22,7 +22,7 @@ export default function AppHeader({ zone = 'public' }) {
     <AppBar position="static"
       sx={{
         textAlign: 'center',
-        bgcolor: bgColor[zone],
+        backgroundColor: bgColor[zone],
         mt: 'auto',
         fontSize: { xs: '0.75rem', md: '1rem' },
       }} >
@@ -44,7 +44,6 @@ export default function AppHeader({ zone = 'public' }) {
                 pr: 2,
                 py: 0.5,
                 borderRadius: 1,
-                bgcolor: '#000000a0',
                 color: '#A68A72FF',
                 width: { md: '300px', lg: '400px' }
               }}

src/components/Footer.jsx

@@ -3,9 +3,9 @@ import fendiLogo from '/logo.png'
 
 export default function Footer({ zone = 'public' }) {
     const bgColor = {
-        public: '#000000a0',
-        restricted: '#e0e0ff',
-        private: '#d0f0e0',
+        public: '#40120EFF',
+        restricted: '#40120EFF',
+        private: '#40120EFF',
     };
 
     const year = new Date().getFullYear();