chore: design the ui based on figmas
This commit is contained in:
Rodolfo Ruiz
parent
ff2dd6b095
commit
4eb3fa590c
BIN
public/Catalog.png
Normal file
BIN
public/Catalog.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 507 B |
BIN
public/Dashboard.png
Normal file
BIN
public/Dashboard.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 270 B |
BIN
public/logo.png
BIN
public/logo.png
Binary file not shown.
|
Before Width: | Height: | Size: 14 KiB After Width: | Height: | Size: 3.3 KiB |
@ -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 SearchIcon from '@mui/icons-material/Search';
|
||||
import { AppBar, Toolbar, Typography, IconButton, Box, Avatar } from '@mui/material';
|
||||
|
||||
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>
|
||||
|
||||
@ -1,30 +1,25 @@
|
||||
import { Drawer, List, ListItem, ListItemText, ListItemIcon, Avatar, Typography, Box, useMediaQuery } 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 { Drawer, List, ListItem, ListItemText, ListItemIcon, Typography, Box, useMediaQuery, InputBase } from '@mui/material';
|
||||
import { useAuth } from '../context/AuthContext';
|
||||
|
||||
import { useState } from 'react';
|
||||
import ExitToAppIcon from '@mui/icons-material/ExitToApp';
|
||||
|
||||
|
||||
const menuOptions = {
|
||||
public: [
|
||||
{ text: 'Admin', icon: <AdminPanelSettingsIcon /> },
|
||||
{ text: 'Categories', icon: <CategoryIcon /> },
|
||||
{ text: 'Clients', icon: <PeopleIcon /> },
|
||||
{ text: 'Products', icon: <InventoryIcon /> },
|
||||
{ text: 'Providers', icon: <LocalShippingIcon /> },
|
||||
{ text: 'Dashboard', icon: <img src="/Dashboard.png" alt="Dashboard" width={24} height={24} />},
|
||||
{ text: 'Logout', icon: <ExitToAppIcon /> },
|
||||
],
|
||||
restricted: [],
|
||||
private: [
|
||||
{ text: 'Admin', icon: <AdminPanelSettingsIcon /> },
|
||||
{ text: 'Categories', icon: <CategoryIcon /> },
|
||||
{ text: 'Clients', icon: <PeopleIcon /> },
|
||||
{ text: 'Products', icon: <InventoryIcon /> },
|
||||
{ text: 'Providers', icon: <LocalShippingIcon /> },
|
||||
{ text: 'Dashboard', icon: <img src="/Dashboard.png" alt="Dashboard" width={24} height={24} /> },
|
||||
{ text: 'Catalog', icon: <img src="/Catalog.png" alt="Catalog" width={24} height={24} /> },
|
||||
{ text: 'Define your style', icon: <img src="/DefineYourStyle.png" alt="Define your style" width={24} height={24} /> },
|
||||
{ text: 'Ambient Design', icon: <img src="/AmbientDesign.png" alt="Ambient Design" width={24} height={24} /> },
|
||||
{ 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',
|
||||
width: isMobile ? '100vw' : 250,
|
||||
color: '#DFCCBCFF'
|
||||
backgroundColor: '#FFFFFFFF',
|
||||
width: isMobile ? '100vw' : 300,
|
||||
color: '#40120EFF'
|
||||
},
|
||||
},
|
||||
}}>
|
||||
<Box textAlign="center" p={3}>
|
||||
<Avatar
|
||||
src="/favicon.png"
|
||||
alt="User"
|
||||
sx={{ width: 64, height: 64, mx: 'auto', mb: 1 }}
|
||||
<img
|
||||
src="/logo.png"
|
||||
alt="Dream Views"
|
||||
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',
|
||||
},
|
||||
},
|
||||
|
||||
@ -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',
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
Loading…
Reference in New Issue
Block a user