rodolfo_ruiz/fendi-react-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: rodolfo_ruiz:49a012dbeb81d5b88a68bf5760aca7a515a61d83
Branches Tags
rodolfo_ruiz:main
..
compare: rodolfo_ruiz:c667d7e6066e0c1122db53b75ef4cd102688275d
Branches Tags
rodolfo_ruiz:main

2 Commits
49a012dbeb ... c667d7e606

Author SHA1 Message Date
Rodolfo Ruiz
c667d7e606 chore: change some styles 2025-06-09 21:42:58 -06:00
Rodolfo Ruiz
d6468b533e chore: change the font to montserrat 2025-06-09 20:42:57 -06:00
6 changed files with 104 additions and 33 deletions
Expand all files Collapse all files

29
index.html
View File

@@ -1,15 +1,22 @@
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/png" href="/favicon.png" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Fendi</title>
<meta name="viewport" content="initial-scale=1, width=device-width" /> <head>
</head> <meta charset="UTF-8" />
<body> <link rel="icon" type="image/png" href="/favicon.png" />
<div id="root"></div> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script type="module" src="/src/main.jsx"></script>
</body> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
<title>Fendi</title>
<meta name="viewport" content="initial-scale=1, width=device-width" />
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
</body>
</html> </html>

11
src/components/AppHeader.jsx
View File

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

4
src/index.css
View File

@@ -1,7 +1,7 @@
:root { :root {
font-family: system-ui, Avenir, Helvetica, Arial, sans-serif; font-family: "Montserrat", sans-serif !important;
line-height: 1.5; line-height: 1.5;
font-weight: 400; font-weight: 100 !important;
color-scheme: light dark; color-scheme: light dark;
color: rgba(255, 255, 255, 0.87); color: rgba(255, 255, 255, 0.87);

11
src/main.jsx
View File

@@ -1,16 +1,15 @@
import { StrictMode } from 'react' import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client' import { createRoot } from 'react-dom/client'
import '@fontsource/roboto/300.css'; import { ThemeProvider } from '@mui/material/styles';
import '@fontsource/roboto/400.css'; import theme from './theme';
import '@fontsource/roboto/500.css';
import '@fontsource/roboto/700.css';
import './index.css' import './index.css'
import App from './App.jsx' import App from './App.jsx'
createRoot(document.getElementById('root')).render( createRoot(document.getElementById('root')).render(
<StrictMode> <StrictMode>
<App /> <ThemeProvider theme={theme}>
<App />
</ThemeProvider>
</StrictMode>, </StrictMode>,
) )

13
src/private/Admin.jsx
View File

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

67
src/theme.jsx Normal file
View File

@@ -0,0 +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: '#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;