fix: styling UI palette

2025-02-12 11:51:36 +07:00 · 2025-02-12 11:51:36 +07:00 · d4ac8fff4e
parent 0dceaf49c8
commit d4ac8fff4e
11 changed files with 237 additions and 102 deletions
--- a/src/layouts/AuthLayout.tsx
+++ b/src/layouts/AuthLayout.tsx
@ -1,20 +1,21 @@
 import { Outlet } from "react-router";
-import Container from "@mui/material/Container";
 import Box from "@mui/material/Box";
+import { useTheme } from "@mui/material";

 export default function AuthLayout() {
+  const theme = useTheme();
  return (
-    <Container component="main" maxWidth="xs">
-      <Box
-        sx={{
-          mt: 8,
-          display: "flex",
-          flexDirection: "column",
-          alignItems: "center",
-        }}
-      >
-        <Outlet />
-      </Box>
-    </Container>
+    <Box
+      sx={{
+        height: "100vh",
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        backgroundColor: theme.palette.background.default,
+      }}
+    >
+      <Outlet />
+    </Box>
  );
 }
--- a/src/layouts/Dashboard/Sidebar.tsx
+++ b/src/layouts/Dashboard/Sidebar.tsx
@ -100,6 +100,7 @@ export default function Sidebar({
                {item.title}
            </ListSubheader>
          }
+          sx={{ px: 2}}
        >
          {item.menus.map((menu, key) => {
            return (
--- a/src/pages/Backbone.tsx
+++ b/src/pages/Backbone.tsx
@ -0,0 +1,50 @@
+import Box from "@mui/material/Box";
+import Breadcrumbs from "@mui/material/Breadcrumbs";
+import Button from "@mui/material/Button";
+import Card from "@mui/material/Card";
+import CardContent from "@mui/material/CardContent";
+import Link from "@mui/material/Link";
+import Grid from "@mui/material/Grid2";
+import Typography from "@mui/material/Typography";
+import AddIcon from "@mui/icons-material/Add";
+import { Home } from "@mui/icons-material";
+
+export default function Backbone() {
+  return (
+    <Box component="main">
+      <Grid container spacing={2} alignItems={"center"} mb={4}>
+        <Grid size="grow">
+          <Typography variant="h3">Backbone</Typography>
+        </Grid>
+        <Grid size="auto">
+          <Button variant="contained" startIcon={<AddIcon color="inherit" />}>
+            Add New
+          </Button>
+        </Grid>
+        <Grid size={12}>
+          <Breadcrumbs aria-label="breadcrumb">
+            <Link underline="hover" color="inherit" href="/dashboard">
+              <Home />
+            </Link>
+            <Typography sx={{ color: "text.primary" }}>Backbone</Typography>
+          </Breadcrumbs>
+        </Grid>
+      </Grid>
+
+      <Card sx={{ display: "flex" }}>
+        <CardContent sx={{ flex: "1 0 auto" }}>
+          <Typography component="div" variant="h5">
+            Live From Space
+          </Typography>
+          <Typography
+            variant="subtitle1"
+            component="div"
+            sx={{ color: "text.secondary" }}
+          >
+            Mac Miller
+          </Typography>
+        </CardContent>
+      </Card>
+    </Box>
+  );
+}
--- a/src/pages/auth/Login.tsx
+++ b/src/pages/auth/Login.tsx
@ -1,7 +1,7 @@
 import Button from "@mui/material/Button";
 import Box from "@mui/material/Box";
 import TextField from "@mui/material/TextField";
-import Paper from "@mui/material/Paper";
+import Card from "@mui/material/Card";
 import FormControlLabel from "@mui/material/FormControlLabel";
 import Checkbox from "@mui/material/Checkbox";
 import Typography from "@mui/material/Typography";
@ -19,8 +19,8 @@ export default function Login() {
  };

  return (
-    <Paper elevation={2} sx={{ p: 5, borderRadius: "8px" }}>
-      <Typography component="h1" variant="h5">
+    <Card sx={{ p: 5, borderRadius: "8px" }}>
+      <Typography component="h1" variant="h4">
        Sign in
      </Typography>

@ -52,16 +52,16 @@ export default function Login() {
              label="Remember me"
            />
          </Grid>
-          <Grid>
+          {/* <Grid>
            <Link href="/forgot-password" variant="body2">
              Forgot password?
            </Link>
-          </Grid>
+          </Grid> */}
        </Grid>
        <Button type="submit" fullWidth variant="contained" sx={{ my: 2 }}>
          Sign In
        </Button>
      </Box>
-    </Paper>
+    </Card>
  );
 }
--- a/src/routes/index.tsx
+++ b/src/routes/index.tsx
@ -4,6 +4,7 @@ import AuthLayout from "../layouts/AuthLayout";
 import Login from "../pages/auth/Login";
 import Dashboard from "../pages/Dashboard";
 import DashboardLayout from "../layouts/DashboardLayout";
+import Backbone from "../pages/Backbone";

 export default function Routes() {
  return (
@ -12,6 +13,7 @@ export default function Routes() {

      <Route element={<DashboardLayout />}>
        <Route path="/dashboard" element={<Dashboard />} />
+        <Route path="/backbone" element={<Backbone />} />
      </Route>
      {/* Auth routes */}
      <Route element={<AuthLayout />}>
--- a/src/theme/components/Card.ts
+++ b/src/theme/components/Card.ts
@ -0,0 +1,15 @@
+import { Theme } from "@mui/material";
+
+export default function Card(theme: Theme) {
+  return {
+    MuiCard: {
+      styleOverrides: {
+        root: {
+          borderRadius: 4,
+          borderColor: theme.palette.divider,
+          boxShadow: theme.customShadows.z1
+        },
+      },
+    },
+  };
+}
--- a/src/theme/components/index.ts
+++ b/src/theme/components/index.ts
@ -49,6 +49,7 @@ import ToggleButton from './ToggleButton';
 import Tooltip from './Tooltip';
 import TreeItem from './TreeItem';
 import Typography from './Typography';
+import Card from "./Card";

 export default function ComponentsOverrides(theme: Theme) {
  return merge(
@ -64,6 +65,7 @@ export default function ComponentsOverrides(theme: Theme) {
    Button(theme),
    ButtonBase(),
    ButtonGroup(),
+    Card(theme),
    CardContent(),
    Checkbox(theme),
    Chip(theme),
--- a/src/theme/index.tsx
+++ b/src/theme/index.tsx
@ -7,7 +7,7 @@ import {
 } from "@mui/material";
 import React, { useMemo } from "react";
 import ComponentsOverrides from "./components";
-import Palette from "./pallete";
+import Palette from "./palette";
 import CustomShadows from "./shadows";
 import Typography from "./typography";
 import { ThemeMode } from "../types/config";
--- a/src/theme/palette.ts
+++ b/src/theme/palette.ts
@ -0,0 +1,145 @@
+import { alpha, createTheme } from '@mui/material';
+import { PaletteMode, SimplePaletteColorOptions } from '@mui/material';
+import { ThemeMode } from '../types/config';
+
+export type PaletteThemeProps = {
+  primary: SimplePaletteColorOptions;
+  secondary: SimplePaletteColorOptions;
+  error: SimplePaletteColorOptions;
+  warning: SimplePaletteColorOptions;
+  info: SimplePaletteColorOptions;
+  success: SimplePaletteColorOptions;
+};
+
+// ==============================|| DEFAULT THEME - PALETTE  ||============================== //
+
+const Palette = (mode: ThemeMode) => {
+  const paletteColor: PaletteThemeProps = {
+    primary: {
+      50: "#fef2f2",
+      lighter: "#fef2f2",
+      100: "#fee2e2",
+      200: "#fecaca",
+      300: "#fca5a5",
+      light: "#fca5a5",
+      400: "#f87171",
+      500: "#ef4444",
+      main: "#b71c1c",
+      600: "#dc2626",
+      dark: "#dc2626",
+      700: "#b71c1c",
+      darker: "#991b1b",
+      900: "#7f1d1d",
+    },
+    secondary: {
+      lighter: "#f5f6f8",
+      100: "#ecf0f3",
+      200: "#dce2e9",
+      300: '#c7ceda',
+      light: "#c7ceda",
+      400: "#afb7ca",
+      500: "#9aa2ba",
+      main: "#9aa2ba",
+      600: "#838aa8",
+      dark: "#7b809a",
+      700: "#7b809a",
+      800: "#5c6077",
+      darker: "#5c6077",
+      900: "#4e5161",
+    },
+    error: {
+      lighter: "#fef3f2",
+      light: "#ffe3e1",
+      main: "#f44334",
+      dark: "#e22f20",
+      darker: "#be2417",
+      '50': '#fef3f2',
+      '100': '#ffe3e1',
+      '200': '#ffccc8',
+      '300': '#ffa9a2',
+      '400': '#fc786d',
+      '500': '#f44334',
+      '600': '#e22f20',
+      '700': '#be2417',
+      '800': '#9d2117',
+      '900': '#82221a',
+    },
+    warning: {
+      lighter: "#fffbec",
+      light: "#ffd96d",
+      main: "#fb8c00",
+      dark: "#cc6902",
+      darker: "#a1500b",
+      '50': '#fffbec',
+      '100': '#fff6d3',
+      '200': '#ffeaa5',
+      '300': '#ffd96d',
+      '400': '#ffbd32',
+      '500': '#ffa60a',
+      '600': '#fb8c00',
+      '700': '#cc6902',
+      '800': '#a1500b',
+      '900': '#82430c'
+    },
+    info: {
+      lighter: "#ecfdff",
+      light: "#a7edfa",
+      main: "#16c0e8",
+      dark: "#106c8e",
+      darker: "#175873",
+      '50': '#ecfdff',
+      '100': '#d0f6fd',
+      '200': '#a7edfa',
+      '300': '#6adef6',
+      '400': '#16c0e8',
+      '500': '#0aa7d0',
+      '600': '#0b85af',
+      '700': '#106c8e',
+      '800': '#175873',
+      '900': '#174962',
+    },
+    success: {
+      lighter: "#f3faf3",
+      light: "#e3f5e3",
+      main: "#4caf50",
+      dark: "#358438",
+      darker: "#2d6830",
+      '50': '#f3faf3',
+      '100': '#e3f5e3',
+      '200': '#c8eac9',
+      '300': '#9dd89f',
+      '400': '#6bbd6e',
+      '500': '#4caf50',
+      '600': '#358438',
+      '700': '#2d6830',
+      '800': '#275429',
+      '900': '#224525'
+    },
+  };
+
+  return createTheme({
+    palette: {
+      mode: mode as PaletteMode,
+      common: {
+        black: '#000',
+        white: '#fff'
+      },
+      ...paletteColor,
+      text: {
+        primary: mode === ThemeMode.DARK ? alpha(paletteColor.secondary.darker!, 0.87) : paletteColor.secondary[800],
+        secondary: mode === ThemeMode.DARK ? alpha(paletteColor.secondary.darker!, 0.45) : paletteColor.secondary.main,
+        disabled: mode === ThemeMode.DARK ? alpha(paletteColor.secondary.darker!, 0.1) : paletteColor.secondary[400]
+      },
+      action: {
+        disabled: paletteColor.secondary.light
+      },
+      divider: mode === ThemeMode.DARK ? alpha(paletteColor.secondary.darker!, 0.05) : alpha(paletteColor.secondary.light!, 0.65),
+      background: {
+        paper: mode === ThemeMode.DARK ? paletteColor.secondary[100] : '#fff',
+        default: mode !== ThemeMode.DARK ? '#fff' : paletteColor.secondary.lighter
+      }
+    }
+  });
+};
+
+export default Palette;
--- a/src/theme/pallete.ts
+++ b/src/theme/pallete.ts
@ -1,81 +0,0 @@
-import { createTheme } from '@mui/material';
-import { PaletteMode, SimplePaletteColorOptions } from '@mui/material';
-import { ThemeMode } from '../types/config';
-
-export type PaletteThemeProps = {
-  primary: SimplePaletteColorOptions;
-  secondary: SimplePaletteColorOptions;
-  error: SimplePaletteColorOptions;
-  warning: SimplePaletteColorOptions;
-  info: SimplePaletteColorOptions;
-  success: SimplePaletteColorOptions;
-};
-
-// ==============================|| DEFAULT THEME - PALETTE  ||============================== //
-
-const Palette = (mode: ThemeMode) => {
-  const paletteColor: PaletteThemeProps = {
-    primary: {
-      lighter: "#fef2f2",
-      100: "#fee2e2",
-      200: "#fecaca",
-      light: "#fca5a5",
-      400: "#f87171",
-      main: "#ef4444",
-      dark: "#dc2626",
-      700: "#b71c1c",
-      darker: "#991b1b",
-      900: "#7f1d1d",
-    },
-    secondary: {
-      lighter: "#ffeff2",
-      100: "#ffe0e7",
-      200: "#ffc6d6",
-      light: "#ff97b3",
-      400: "#ff5d8c",
-      main: "#ff246a",
-      dark: "#f50057",
-      700: "#d7004c",
-      darker: "#b40048",
-      900: "#990244",
-    },
-    error: {
-      main: "#f44336"
-    },
-    warning: {
-      main: "#ff9800"
-    },
-    info: {
-      main: "#2196f3"
-    },
-    success: {
-      main: "#4caf50"
-    }
-  };
-
-  return createTheme({
-    palette: {
-      mode: mode as PaletteMode,
-      common: {
-        black: '#000',
-        white: '#fff'
-      },
-      ...paletteColor,
-      // text: {
-      //   primary: mode === ThemeMode.DARK ? alpha(paletteColor.secondary.darker!, 0.87) : paletteColor.secondary[800],
-      //   secondary: mode === ThemeMode.DARK ? alpha(paletteColor.secondary.darker!, 0.45) : paletteColor.secondary.main,
-      //   disabled: mode === ThemeMode.DARK ? alpha(paletteColor.secondary.darker!, 0.1) : paletteColor.secondary[400]
-      // },
-      action: {
-        disabled: paletteColor.secondary.light
-      },
-      // divider: mode === ThemeMode.DARK ? alpha(paletteColor.secondary.darker!, 0.05) : alpha(paletteColor.secondary.light!, 0.65),
-      // background: {
-      //   paper: mode === ThemeMode.DARK ? paletteColor.secondary[100] : '#fff',
-      //   default: themeContrast && mode !== ThemeMode.DARK ? '#fff' : paletteColor.secondary.lighter
-      // }
-    }
-  });
-};
-
-export default Palette;
--- a/src/theme/shadows.ts
+++ b/src/theme/shadows.ts
@ -14,7 +14,7 @@ const CustomShadows = (theme: Theme): CustomShadowProps => ({
  z1:
    theme.palette.mode === ThemeMode.DARK
      ? `0px 8px 24px ${alpha(theme.palette.secondary[200]!, 0.3)}`
-      : `0px 8px 24px  ${alpha(theme.palette.secondary.dark, 0.08)}`,
+      : `0px 8px 24px  ${alpha(theme.palette.secondary.dark, 0.15)}`,
  z2:
    theme.palette.mode === ThemeMode.DARK
      ? `0px 2px 8px ${alpha(theme.palette.secondary[200]!, 0.3)}`