root
/
NAM-APJATEL
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: styling UI palette

This commit is contained in:
HasanMu 2025-02-12 11:51:36 +07:00
parent 0dceaf49c8
commit d4ac8fff4e
11 changed files with 237 additions and 102 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
src/layouts/AuthLayout.tsx
View File

@ -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>
);
}

1
src/layouts/Dashboard/Sidebar.tsx
View File

@ -100,6 +100,7 @@ export default function Sidebar({
{item.title}
</ListSubheader>
}
sx={{ px: 2}}
>
{item.menus.map((menu, key) => {
return (

50
src/pages/Backbone.tsx Normal file
View File

@ -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>
);
}

12
src/pages/auth/Login.tsx
View File

@ -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>
);
}

2
src/routes/index.tsx
View File

@ -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 />}>

15
src/theme/components/Card.ts Normal file
View File

@ -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
},
},
},
};
}

2
src/theme/components/index.ts
View File

@ -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),

2
src/theme/index.tsx
View File

@ -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";

145
src/theme/palette.ts Normal file
View File

@ -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;

81
src/theme/pallete.ts
View File

@ -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;

2
src/theme/shadows.ts
View File

@ -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)}`