chore: change some styles

chore: change the font to montserrat
2025-06-09 21:42:58 -06:00 · 2025-06-09 20:42:57 -06:00
6 changed files with 104 additions and 33 deletions
--- a/index.html
+++ b/index.html
@@ -1,15 +1,22 @@
 <!doctype html>
 <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>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="/src/main.jsx"></script>
-  </body>
-</html>
+<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" />
+
+  <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>
--- a/src/components/AppHeader.jsx
+++ b/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>
--- a/src/index.css
+++ b/src/index.css
@@ -1,7 +1,7 @@
 :root {
-  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
+  font-family: "Montserrat", sans-serif !important; 
  line-height: 1.5;
-  font-weight: 400;
+  font-weight: 100 !important;

  color-scheme: light dark;
  color: rgba(255, 255, 255, 0.87);
--- a/src/main.jsx
+++ b/src/main.jsx
@@ -1,16 +1,15 @@
 import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'

-import '@fontsource/roboto/300.css';
-import '@fontsource/roboto/400.css';
-import '@fontsource/roboto/500.css';
-import '@fontsource/roboto/700.css';
-
+import { ThemeProvider } from '@mui/material/styles';
+import theme from './theme';
 import './index.css'
 import App from './App.jsx'

 createRoot(document.getElementById('root')).render(
  <StrictMode>
-    <App />
+    <ThemeProvider theme={theme}>
+      <App />
+    </ThemeProvider>
  </StrictMode>,
 )
--- a/src/private/Admin.jsx
+++ b/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>

--- a/src/theme.jsx
+++ b/src/theme.jsx
@@ -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;
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