From e0cb35e783f9202170af9fa8ae1f0016925b30a9 Mon Sep 17 00:00:00 2001 From: jaanvi Date: Thu, 6 Mar 2025 18:41:53 +0530 Subject: [PATCH] Profile Role page changes --- src/components/Header/index.tsx | 45 +- src/components/MainGrid/index.tsx | 2 +- src/components/OptionsMenu/index.tsx | 98 +-- src/layouts/DashboardLayout/index.tsx | 21 +- src/pages/AddEditRolePage/index.tsx | 26 +- src/pages/Auth/Login/index.tsx | 1 - src/pages/ProfilePage/index.tsx | 54 +- src/shared-theme/AppTheme.tsx | 2 +- src/shared-theme/customizations/surfaces.js | 2 +- src/shared-theme/themePrimitives.js | 690 +++++++++--------- src/shared-theme/themePrimitives.ts | 729 ++++++++++---------- 11 files changed, 808 insertions(+), 862 deletions(-) diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx index 116c3ce..83dca3c 100644 --- a/src/components/Header/index.tsx +++ b/src/components/Header/index.tsx @@ -14,6 +14,7 @@ import { useDispatch, useSelector } from "react-redux"; import { AppDispatch, RootState } from "../../redux/store/store"; import { fetchAdminProfile } from "../../redux/slices/profileSlice"; import OptionsMenu from "../OptionsMenu"; +import NotificationsNoneIcon from "@mui/icons-material/NotificationsNone"; export default function Header() { const [showNotifications, setShowNotifications] = React.useState(false); @@ -34,16 +35,16 @@ export default function Header() { - - {/* Custom Bell Icon */} - - - + + + + + {user?.name || "No Admin"} + - - - - - {user?.name || "No Admin"} - - - - - {/* */} + + {showNotifications && ( theme.spacing(2) }} + // sx={{ mb: (theme) => theme.spacing(2) }} > {data.map((card, index) => ( diff --git a/src/components/OptionsMenu/index.tsx b/src/components/OptionsMenu/index.tsx index 6501a32..42a89f9 100644 --- a/src/components/OptionsMenu/index.tsx +++ b/src/components/OptionsMenu/index.tsx @@ -1,22 +1,15 @@ import * as React from "react"; import { styled } from "@mui/material/styles"; -import Divider, { dividerClasses } from "@mui/material/Divider"; import Menu from "@mui/material/Menu"; import MuiMenuItem from "@mui/material/MenuItem"; -import { paperClasses } from "@mui/material/Paper"; -import { listClasses } from "@mui/material/List"; -import ListItemText from "@mui/material/ListItemText"; -import ListItemIcon, { listItemIconClasses } from "@mui/material/ListItemIcon"; -import LogoutRoundedIcon from "@mui/icons-material/LogoutRounded"; -import MoreVertRoundedIcon from "@mui/icons-material/MoreVertRounded"; -import MenuButton from "../MenuButton"; -import { Avatar } from "@mui/material"; -import { useNavigate } from "react-router-dom"; +import ExpandMoreIcon from "@mui/icons-material/ExpandMore"; +import Link from "@mui/material/Link"; import Logout from "../LogOutFunction/LogOutFunction"; -import { ArrowDropDownIcon } from "@mui/x-date-pickers"; - +import ListItemIcon, { listItemIconClasses } from "@mui/material/ListItemIcon"; +import { ListItemText } from "@mui/material"; const MenuItem = styled(MuiMenuItem)({ margin: "2px 0", + borderBottom: "none", }); export default function OptionsMenu({ avatar }: { avatar?: boolean }) { @@ -29,74 +22,44 @@ export default function OptionsMenu({ avatar }: { avatar?: boolean }) { const handleClose = () => { setAnchorEl(null); }; - //Eknoor singh and jaanvi - //date:- 12-Feb-2025 - //Made a navigation page for the profile page - const navigate = useNavigate(); - const handleProfile = () => { - navigate("/panel/profile"); - }; - - //jaanvi - //date:- 13-Feb-2025 return ( - - {/* {avatar ? ( - - ) : ( - - )} */} - - + - - Profile - - {/* My account - - Add another account - Settings */} - {/* */} - + Profile + + { e.stopPropagation(); @@ -106,14 +69,11 @@ export default function OptionsMenu({ avatar }: { avatar?: boolean }) { > Logout + - - {/* - - */} diff --git a/src/layouts/DashboardLayout/index.tsx b/src/layouts/DashboardLayout/index.tsx index 3fe127c..6cb37b1 100644 --- a/src/layouts/DashboardLayout/index.tsx +++ b/src/layouts/DashboardLayout/index.tsx @@ -16,7 +16,7 @@ const DashboardLayout: React.FC = ({ customStyles }) => { = ({ customStyles }) => { ...customStyles, mt: { xs: 8, md: 0 }, padding: 0, + })} > - -
- + + = ({ customStyles }) => { mt: { xs: 3, md: 0 }, }} > - +
diff --git a/src/pages/AddEditRolePage/index.tsx b/src/pages/AddEditRolePage/index.tsx index 3ee8144..9a50015 100644 --- a/src/pages/AddEditRolePage/index.tsx +++ b/src/pages/AddEditRolePage/index.tsx @@ -137,8 +137,8 @@ const AddEditRolePage: React.FC = () => { display: "flex", justifyContent: "space-between", alignItems: "center", - backgroundColor: "#1976D2", - color: "#fff", + backgroundColor: "#52ACDF", + color: "#fffff", p: 2, borderRadius: "8px", mb: 2, @@ -147,18 +147,14 @@ const AddEditRolePage: React.FC = () => { Role Permissions - {/* Role Name Input */} - - + + { fullWidth required variant="outlined" - - sx={{ mb: 2 ,mt:2}} + sx={{ mb: 2, mt: 2 }} /> {/* Table Container */} {/* Table Head */} - + @@ -200,7 +198,7 @@ const AddEditRolePage: React.FC = () => { key={index} sx={{ "&:nth-of-type(odd)": { - backgroundColor: "#FAFAFA", + backgroundColor: "#1C1C1C", }, }} > diff --git a/src/pages/Auth/Login/index.tsx b/src/pages/Auth/Login/index.tsx index 89f01cb..cf478df 100644 --- a/src/pages/Auth/Login/index.tsx +++ b/src/pages/Auth/Login/index.tsx @@ -54,7 +54,6 @@ export default function Login(props: { disableCustomTheme?: boolean }) { } } catch (error: any) { console.log("Login failed:", error); - toast.error("Login failed: " + error); } }; diff --git a/src/pages/ProfilePage/index.tsx b/src/pages/ProfilePage/index.tsx index f1d2f32..f6567a2 100644 --- a/src/pages/ProfilePage/index.tsx +++ b/src/pages/ProfilePage/index.tsx @@ -46,7 +46,12 @@ const ProfilePage = () => { Account Info - + { {user?.name || "No Admin"} - + {user?.userType || "N/A"} @@ -86,65 +88,61 @@ const ProfilePage = () => { > Personal Information - + Edit - + - Name: + Full Name: - + {user?.name || "N/A"} Phone: - + {user?.phone || "N/A"} Email: - + {user?.email || "N/A"} - - + Bio: - + {user?.bio || "No bio available."} diff --git a/src/shared-theme/AppTheme.tsx b/src/shared-theme/AppTheme.tsx index 44ea419..8171aab 100644 --- a/src/shared-theme/AppTheme.tsx +++ b/src/shared-theme/AppTheme.tsx @@ -32,7 +32,7 @@ export default function AppTheme(props: AppThemeProps) { palette: { mode: "dark", // Enforcing dark mode across the app background: { - default: "#121212", // Dark background color + default: "#111111", // Dark background color paper: "#1e1e1e", // Darker background for cards, containers, etc. }, text: { diff --git a/src/shared-theme/customizations/surfaces.js b/src/shared-theme/customizations/surfaces.js index 0cc5229..cadabb5 100644 --- a/src/shared-theme/customizations/surfaces.js +++ b/src/shared-theme/customizations/surfaces.js @@ -67,7 +67,7 @@ export const surfacesCustomizations = { border: `1px solid ${(theme.vars || theme).palette.divider}`, boxShadow: 'none', ...theme.applyStyles('dark', { - backgroundColor: gray[800], + backgroundColor:"#1C1C1C", }), variants: [ { diff --git a/src/shared-theme/themePrimitives.js b/src/shared-theme/themePrimitives.js index c7a9fcb..4a8c52b 100644 --- a/src/shared-theme/themePrimitives.js +++ b/src/shared-theme/themePrimitives.js @@ -1,380 +1,384 @@ -import { createTheme, alpha } from '@mui/material/styles'; +import { createTheme, alpha } from "@mui/material/styles"; const defaultTheme = createTheme(); const customShadows = [...defaultTheme.shadows]; export const brand = { - 50: 'hsl(210, 100%, 95%)', - 100: 'hsl(210, 100%, 92%)', - 200: 'hsl(210, 100%, 80%)', - 300: 'hsl(210, 100%, 65%)', - 400: 'hsl(210, 98%, 48%)', - 500: 'hsl(210, 98%, 42%)', - 600: 'hsl(210, 98%, 55%)', - 700: 'hsl(210, 100%, 35%)', - 800: 'hsl(210, 100%, 16%)', - 900: 'hsl(210, 100%, 21%)', + 50: "hsl(210, 100%, 95%)", + 100: "hsl(210, 100%, 92%)", + 200: "hsl(210, 100%, 80%)", + 300: "hsl(210, 100%, 65%)", + 400: "hsl(210, 98%, 48%)", + 500: "hsl(210, 98%, 42%)", + 600: "hsl(210, 98%, 55%)", + 700: "hsl(210, 100%, 35%)", + 800: "hsl(210, 100%, 16%)", + 900: "hsl(210, 100%, 21%)", }; export const gray = { - 50: 'hsl(220, 35%, 97%)', - 100: 'hsl(220, 30%, 94%)', - 200: 'hsl(220, 20%, 88%)', - 300: 'hsl(220, 20%, 80%)', - 400: 'hsl(220, 20%, 65%)', - 500: 'hsl(220, 20%, 42%)', - 600: 'hsl(220, 20%, 35%)', - 700: 'hsl(220, 20%, 25%)', - 800: 'hsl(220, 30%, 6%)', - 900: 'hsl(220, 35%, 3%)', + 50: "hsl(220, 35%, 97%)", + 100: "hsl(220, 30%, 94%)", + 200: "hsl(220, 20%, 88%)", + 300: "hsl(220, 20%, 80%)", + 400: "hsl(220, 20%, 65%)", + 500: "hsl(220, 20%, 42%)", + 600: "hsl(220, 20%, 35%)", + 700: "hsl(220, 20%, 25%)", + 800: "hsl(220, 30%, 6%)", + 900: "hsl(220, 35%, 3%)", }; export const green = { - 50: 'hsl(120, 80%, 98%)', - 100: 'hsl(120, 75%, 94%)', - 200: 'hsl(120, 75%, 87%)', - 300: 'hsl(120, 61%, 77%)', - 400: 'hsl(120, 44%, 53%)', - 500: 'hsl(120, 59%, 30%)', - 600: 'hsl(120, 70%, 25%)', - 700: 'hsl(120, 75%, 16%)', - 800: 'hsl(120, 84%, 10%)', - 900: 'hsl(120, 87%, 6%)', + 50: "hsl(120, 80%, 98%)", + 100: "hsl(120, 75%, 94%)", + 200: "hsl(120, 75%, 87%)", + 300: "hsl(120, 61%, 77%)", + 400: "hsl(120, 44%, 53%)", + 500: "hsl(120, 59%, 30%)", + 600: "hsl(120, 70%, 25%)", + 700: "hsl(120, 75%, 16%)", + 800: "hsl(120, 84%, 10%)", + 900: "hsl(120, 87%, 6%)", }; export const orange = { - 50: 'hsl(45, 100%, 97%)', - 100: 'hsl(45, 92%, 90%)', - 200: 'hsl(45, 94%, 80%)', - 300: 'hsl(45, 90%, 65%)', - 400: 'hsl(45, 90%, 40%)', - 500: 'hsl(45, 90%, 35%)', - 600: 'hsl(45, 91%, 25%)', - 700: 'hsl(45, 94%, 20%)', - 800: 'hsl(45, 95%, 16%)', - 900: 'hsl(45, 93%, 12%)', + 50: "hsl(45, 100%, 97%)", + 100: "hsl(45, 92%, 90%)", + 200: "hsl(45, 94%, 80%)", + 300: "hsl(45, 90%, 65%)", + 400: "hsl(45, 90%, 40%)", + 500: "hsl(45, 90%, 35%)", + 600: "hsl(45, 91%, 25%)", + 700: "hsl(45, 94%, 20%)", + 800: "hsl(45, 95%, 16%)", + 900: "hsl(45, 93%, 12%)", }; export const red = { - 50: 'hsl(0, 100%, 97%)', - 100: 'hsl(0, 92%, 90%)', - 200: 'hsl(0, 94%, 80%)', - 300: 'hsl(0, 90%, 65%)', - 400: 'hsl(0, 90%, 40%)', - 500: 'hsl(0, 90%, 30%)', - 600: 'hsl(0, 91%, 25%)', - 700: 'hsl(0, 94%, 18%)', - 800: 'hsl(0, 95%, 12%)', - 900: 'hsl(0, 93%, 6%)', + 50: "hsl(0, 100%, 97%)", + 100: "hsl(0, 92%, 90%)", + 200: "hsl(0, 94%, 80%)", + 300: "hsl(0, 90%, 65%)", + 400: "hsl(0, 90%, 40%)", + 500: "hsl(0, 90%, 30%)", + 600: "hsl(0, 91%, 25%)", + 700: "hsl(0, 94%, 18%)", + 800: "hsl(0, 95%, 12%)", + 900: "hsl(0, 93%, 6%)", }; export const getDesignTokens = (mode) => { - customShadows[1] = - mode === 'dark' - ? 'hsla(220, 30%, 5%, 0.7) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.8) 0px 8px 16px -5px' - : 'hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px'; + customShadows[1] = + mode === "dark" + ? "hsla(220, 30%, 5%, 0.7) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.8) 0px 8px 16px -5px" + : "hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px"; - return { - palette: { - mode, - primary: { - light: brand[200], - main: brand[400], - dark: brand[700], - contrastText: brand[50], - ...(mode === 'dark' && { - contrastText: brand[50], - light: brand[300], - main: brand[400], - dark: brand[700], - }), - }, - info: { - light: brand[100], - main: brand[300], - dark: brand[600], - contrastText: gray[50], - ...(mode === 'dark' && { - contrastText: brand[300], - light: brand[500], - main: brand[700], - dark: brand[900], - }), - }, - warning: { - light: orange[300], - main: orange[400], - dark: orange[800], - ...(mode === 'dark' && { - light: orange[400], - main: orange[500], - dark: orange[700], - }), - }, - error: { - light: red[300], - main: red[400], - dark: red[800], - ...(mode === 'dark' && { - light: red[400], - main: red[500], - dark: red[700], - }), - }, - success: { - light: green[300], - main: green[400], - dark: green[800], - ...(mode === 'dark' && { - light: green[400], - main: green[500], - dark: green[700], - }), - }, - grey: { - ...gray, - }, - divider: mode === 'dark' ? alpha(gray[700], 0.6) : alpha(gray[300], 0.4), - background: { - default: 'hsl(0, 0%, 99%)', - paper: 'hsl(220, 35%, 97%)', - ...(mode === 'dark' && { default: gray[900], paper: 'hsl(220, 30%, 7%)' }), - }, - text: { - primary: gray[800], - secondary: gray[600], - warning: orange[400], - ...(mode === 'dark' && { - primary: 'hsl(0, 0%, 100%)', - secondary: gray[400], - }), - }, - action: { - hover: alpha(gray[200], 0.2), - selected: `${alpha(gray[200], 0.3)}`, - ...(mode === 'dark' && { - hover: alpha(gray[600], 0.2), - selected: alpha(gray[600], 0.3), - }), - }, - }, - typography: { - fontFamily: 'Inter, sans-serif', - h1: { - fontSize: defaultTheme.typography.pxToRem(48), - fontWeight: 600, - lineHeight: 1.2, - letterSpacing: -0.5, - }, - h2: { - fontSize: defaultTheme.typography.pxToRem(36), - fontWeight: 600, - lineHeight: 1.2, - }, - h3: { - fontSize: defaultTheme.typography.pxToRem(30), - lineHeight: 1.2, - }, - h4: { - fontSize: defaultTheme.typography.pxToRem(24), - fontWeight: 600, - lineHeight: 1.5, - }, - h5: { - fontSize: defaultTheme.typography.pxToRem(20), - fontWeight: 600, - }, - h6: { - fontSize: defaultTheme.typography.pxToRem(18), - fontWeight: 600, - }, - subtitle1: { - fontSize: defaultTheme.typography.pxToRem(18), - }, - subtitle2: { - fontSize: defaultTheme.typography.pxToRem(14), - fontWeight: 500, - }, - body1: { - fontSize: defaultTheme.typography.pxToRem(14), - }, - body2: { - fontSize: defaultTheme.typography.pxToRem(14), - fontWeight: 400, - }, - caption: { - fontSize: defaultTheme.typography.pxToRem(12), - fontWeight: 400, - }, - }, - shape: { - borderRadius: 8, - }, - shadows: customShadows, - }; + return { + palette: { + mode, + primary: { + light: brand[200], + main: brand[400], + dark: brand[700], + contrastText: brand[50], + ...(mode === "dark" && { + contrastText: brand[50], + light: brand[300], + main: brand[400], + dark: brand[700], + }), + }, + info: { + light: brand[100], + main: brand[300], + dark: brand[600], + contrastText: gray[50], + ...(mode === "dark" && { + contrastText: brand[300], + light: brand[500], + main: brand[700], + dark: brand[900], + }), + }, + warning: { + light: orange[300], + main: orange[400], + dark: orange[800], + ...(mode === "dark" && { + light: orange[400], + main: orange[500], + dark: orange[700], + }), + }, + error: { + light: red[300], + main: red[400], + dark: red[800], + ...(mode === "dark" && { + light: red[400], + main: red[500], + dark: red[700], + }), + }, + success: { + light: green[300], + main: green[400], + dark: green[800], + ...(mode === "dark" && { + light: green[400], + main: green[500], + dark: green[700], + }), + }, + grey: { + ...gray, + }, + divider: + mode === "dark" ? alpha(gray[700], 0.6) : alpha(gray[300], 0.4), + background: { + default: "hsl(0, 0%, 99%)", + paper: "hsl(220, 35%, 97%)", + ...(mode === "dark" && { + default: gray[900], + paper: "hsl(220, 30%, 7%)", + }), + }, + text: { + primary: gray[800], + secondary: gray[600], + warning: orange[400], + ...(mode === "dark" && { + primary: "hsl(0, 0%, 100%)", + secondary: gray[400], + }), + }, + action: { + hover: alpha(gray[200], 0.2), + selected: `${alpha(gray[200], 0.3)}`, + ...(mode === "dark" && { + hover: alpha(gray[600], 0.2), + selected: alpha(gray[600], 0.3), + }), + }, + }, + typography: { + fontFamily: "Gilory", + h1: { + fontSize: defaultTheme.typography.pxToRem(48), + fontWeight: 600, + lineHeight: 1.2, + letterSpacing: -0.5, + }, + h2: { + fontSize: defaultTheme.typography.pxToRem(36), + fontWeight: 600, + lineHeight: 1.2, + }, + h3: { + fontSize: defaultTheme.typography.pxToRem(30), + lineHeight: 1.2, + }, + h4: { + fontSize: defaultTheme.typography.pxToRem(24), + fontWeight: 600, + lineHeight: 1.5, + }, + h5: { + fontSize: defaultTheme.typography.pxToRem(20), + fontWeight: 600, + }, + h6: { + fontSize: defaultTheme.typography.pxToRem(18), + fontWeight: 600, + }, + subtitle1: { + fontSize: defaultTheme.typography.pxToRem(18), + }, + subtitle2: { + fontSize: defaultTheme.typography.pxToRem(14), + fontWeight: 500, + }, + body1: { + fontSize: defaultTheme.typography.pxToRem(14), + }, + body2: { + fontSize: defaultTheme.typography.pxToRem(14), + fontWeight: 400, + }, + caption: { + fontSize: defaultTheme.typography.pxToRem(12), + fontWeight: 400, + }, + }, + shape: { + borderRadius: 8, + }, + shadows: customShadows, + }; }; export const colorSchemes = { - light: { - palette: { - primary: { - light: brand[200], - main: brand[400], - dark: brand[700], - contrastText: brand[50], - }, - info: { - light: brand[100], - main: brand[300], - dark: brand[600], - contrastText: gray[50], - }, - warning: { - light: orange[300], - main: orange[400], - dark: orange[800], - }, - error: { - light: red[300], - main: red[400], - dark: red[800], - }, - success: { - light: green[300], - main: green[400], - dark: green[800], - }, - grey: { - ...gray, - }, - divider: alpha(gray[300], 0.4), - background: { - default: 'hsl(0, 0%, 99%)', - paper: 'hsl(220, 35%, 97%)', - }, - text: { - primary: gray[800], - secondary: gray[600], - warning: orange[400], - }, - action: { - hover: alpha(gray[200], 0.2), - selected: `${alpha(gray[200], 0.3)}`, - }, - baseShadow: - 'hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px', - }, - }, - dark: { - palette: { - primary: { - contrastText: brand[50], - light: brand[300], - main: brand[400], - dark: brand[700], - }, - info: { - contrastText: brand[300], - light: brand[500], - main: brand[700], - dark: brand[900], - }, - warning: { - light: orange[400], - main: orange[500], - dark: orange[700], - }, - error: { - light: red[400], - main: red[500], - dark: red[700], - }, - success: { - light: green[400], - main: green[500], - dark: green[700], - }, - grey: { - ...gray, - }, - divider: alpha(gray[700], 0.6), - background: { - default: gray[900], - paper: 'hsl(220, 30%, 7%)', - }, - text: { - primary: 'hsl(0, 0%, 100%)', - secondary: gray[400], - }, - action: { - hover: alpha(gray[600], 0.2), - selected: alpha(gray[600], 0.3), - }, - baseShadow: - 'hsla(220, 30%, 5%, 0.7) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.8) 0px 8px 16px -5px', - }, - }, + light: { + palette: { + primary: { + light: brand[200], + main: brand[400], + dark: brand[700], + contrastText: brand[50], + }, + info: { + light: brand[100], + main: brand[300], + dark: brand[600], + contrastText: gray[50], + }, + warning: { + light: orange[300], + main: orange[400], + dark: orange[800], + }, + error: { + light: red[300], + main: red[400], + dark: red[800], + }, + success: { + light: green[300], + main: green[400], + dark: green[800], + }, + grey: { + ...gray, + }, + divider: alpha(gray[300], 0.4), + background: { + default: "hsl(0, 0%, 99%)", + paper: "hsl(220, 35%, 97%)", + }, + text: { + primary: gray[800], + secondary: gray[600], + warning: orange[400], + }, + action: { + hover: alpha(gray[200], 0.2), + selected: `${alpha(gray[200], 0.3)}`, + }, + baseShadow: + "hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px", + }, + }, + dark: { + palette: { + primary: { + contrastText: brand[50], + light: brand[300], + main: brand[400], + dark: brand[700], + }, + info: { + contrastText: brand[300], + light: brand[500], + main: brand[700], + dark: brand[900], + }, + warning: { + light: orange[400], + main: orange[500], + dark: orange[700], + }, + error: { + light: red[400], + main: red[500], + dark: red[700], + }, + success: { + light: green[400], + main: green[500], + dark: green[700], + }, + grey: { + ...gray, + }, + divider: alpha(gray[700], 0.6), + background: { + default: gray[900], + paper: "hsl(220, 30%, 7%)", + }, + text: { + primary: "hsl(0, 0%, 100%)", + secondary: gray[400], + }, + action: { + hover: alpha(gray[600], 0.2), + selected: alpha(gray[600], 0.3), + }, + baseShadow: + "hsla(220, 30%, 5%, 0.7) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.8) 0px 8px 16px -5px", + }, + }, }; export const typography = { - fontFamily: 'Inter, sans-serif', - h1: { - fontSize: defaultTheme.typography.pxToRem(48), - fontWeight: 600, - lineHeight: 1.2, - letterSpacing: -0.5, - }, - h2: { - fontSize: defaultTheme.typography.pxToRem(36), - fontWeight: 600, - lineHeight: 1.2, - }, - h3: { - fontSize: defaultTheme.typography.pxToRem(30), - lineHeight: 1.2, - }, - h4: { - fontSize: defaultTheme.typography.pxToRem(24), - fontWeight: 600, - lineHeight: 1.5, - }, - h5: { - fontSize: defaultTheme.typography.pxToRem(20), - fontWeight: 600, - }, - h6: { - fontSize: defaultTheme.typography.pxToRem(18), - fontWeight: 600, - }, - subtitle1: { - fontSize: defaultTheme.typography.pxToRem(18), - }, - subtitle2: { - fontSize: defaultTheme.typography.pxToRem(14), - fontWeight: 500, - }, - body1: { - fontSize: defaultTheme.typography.pxToRem(14), - }, - body2: { - fontSize: defaultTheme.typography.pxToRem(14), - fontWeight: 400, - }, - caption: { - fontSize: defaultTheme.typography.pxToRem(12), - fontWeight: 400, - }, + fontFamily: "Gilory", + h1: { + fontSize: defaultTheme.typography.pxToRem(48), + fontWeight: 600, + lineHeight: 1.2, + letterSpacing: -0.5, + }, + h2: { + fontSize: defaultTheme.typography.pxToRem(36), + fontWeight: 600, + lineHeight: 1.2, + }, + h3: { + fontSize: defaultTheme.typography.pxToRem(30), + lineHeight: 1.2, + }, + h4: { + fontSize: defaultTheme.typography.pxToRem(24), + fontWeight: 600, + lineHeight: 1.5, + }, + h5: { + fontSize: defaultTheme.typography.pxToRem(20), + fontWeight: 600, + }, + h6: { + fontSize: defaultTheme.typography.pxToRem(18), + fontWeight: 600, + }, + subtitle1: { + fontSize: defaultTheme.typography.pxToRem(18), + }, + subtitle2: { + fontSize: defaultTheme.typography.pxToRem(14), + fontWeight: 500, + }, + body1: { + fontSize: defaultTheme.typography.pxToRem(14), + }, + body2: { + fontSize: defaultTheme.typography.pxToRem(14), + fontWeight: 400, + }, + caption: { + fontSize: defaultTheme.typography.pxToRem(12), + fontWeight: 400, + }, }; export const shape = { - borderRadius: 8, + borderRadius: 8, }; const defaultShadows = [ - 'none', - 'var(--template-palette-baseShadow)', - ...defaultTheme.shadows.slice(2), + "none", + "var(--template-palette-baseShadow)", + ...defaultTheme.shadows.slice(2), ]; export const shadows = defaultShadows; diff --git a/src/shared-theme/themePrimitives.ts b/src/shared-theme/themePrimitives.ts index a12eb21..63dd01a 100644 --- a/src/shared-theme/themePrimitives.ts +++ b/src/shared-theme/themePrimitives.ts @@ -1,29 +1,29 @@ -import { createTheme, alpha, PaletteMode, Shadows } from '@mui/material/styles'; +import { createTheme, alpha, PaletteMode, Shadows } from "@mui/material/styles"; -declare module '@mui/material/Paper' { - interface PaperPropsVariantOverrides { - highlighted: true; - } +declare module "@mui/material/Paper" { + interface PaperPropsVariantOverrides { + highlighted: true; + } } -declare module '@mui/material/styles/createPalette' { - interface ColorRange { - 50: string; - 100: string; - 200: string; - 300: string; - 400: string; - 500: string; - 600: string; - 700: string; - 800: string; - 900: string; - } +declare module "@mui/material/styles/createPalette" { + interface ColorRange { + 50: string; + 100: string; + 200: string; + 300: string; + 400: string; + 500: string; + 600: string; + 700: string; + 800: string; + 900: string; + } - interface PaletteColor extends ColorRange {} + interface PaletteColor extends ColorRange {} - interface Palette { - baseShadow: string; - } + interface Palette { + baseShadow: string; + } } const defaultTheme = createTheme(); @@ -31,373 +31,380 @@ const defaultTheme = createTheme(); const customShadows: Shadows = [...defaultTheme.shadows]; export const brand = { - 50: 'hsl(210, 100%, 95%)', - 100: 'hsl(210, 100%, 92%)', - 200: 'hsl(210, 100%, 80%)', - 300: 'hsl(210, 100%, 65%)', - 400: 'hsl(210, 98%, 48%)', - 500: 'hsl(210, 98%, 42%)', - 600: 'hsl(210, 98%, 55%)', - 700: 'hsl(210, 100%, 35%)', - 800: 'hsl(210, 100%, 16%)', - 900: 'hsl(210, 100%, 21%)', + 50: "hsl(210, 100%, 95%)", + 100: "hsl(210, 100%, 92%)", + 200: "hsl(210, 100%, 80%)", + 300: "hsl(210, 100%, 65%)", + 400: "hsl(210, 98%, 48%)", + 500: "hsl(210, 98%, 42%)", + 600: "hsl(210, 98%, 55%)", + 700: "hsl(210, 100%, 35%)", + 800: "hsl(210, 100%, 16%)", + 900: "hsl(210, 100%, 21%)", }; export const gray = { - 50: 'hsl(220, 35%, 97%)', - 100: 'hsl(220, 30%, 94%)', - 200: 'hsl(220, 20%, 88%)', - 300: 'hsl(220, 20%, 80%)', - 400: 'hsl(220, 20%, 65%)', - 500: 'hsl(220, 20%, 42%)', - 600: 'hsl(220, 20%, 35%)', - 700: 'hsl(220, 20%, 25%)', - 800: 'hsl(220, 30%, 6%)', - 900: 'hsl(220, 35%, 3%)', + 50: "hsl(220, 35%, 97%)", + 100: "hsl(220, 30%, 94%)", + 200: "hsl(220, 20%, 88%)", + 300: "hsl(220, 20%, 80%)", + 400: "hsl(220, 20%, 65%)", + 500: "hsl(220, 20%, 42%)", + 600: "hsl(220, 20%, 35%)", + 700: "hsl(220, 20%, 25%)", + 800: "hsl(220, 30%, 6%)", + 900: "hsl(220, 35%, 3%)", }; export const green = { - 50: 'hsl(120, 80%, 98%)', - 100: 'hsl(120, 75%, 94%)', - 200: 'hsl(120, 75%, 87%)', - 300: 'hsl(120, 61%, 77%)', - 400: 'hsl(120, 44%, 53%)', - 500: 'hsl(120, 59%, 30%)', - 600: 'hsl(120, 70%, 25%)', - 700: 'hsl(120, 75%, 16%)', - 800: 'hsl(120, 84%, 10%)', - 900: 'hsl(120, 87%, 6%)', + 50: "hsl(120, 80%, 98%)", + 100: "hsl(120, 75%, 94%)", + 200: "hsl(120, 75%, 87%)", + 300: "hsl(120, 61%, 77%)", + 400: "hsl(120, 44%, 53%)", + 500: "hsl(120, 59%, 30%)", + 600: "hsl(120, 70%, 25%)", + 700: "hsl(120, 75%, 16%)", + 800: "hsl(120, 84%, 10%)", + 900: "hsl(120, 87%, 6%)", }; export const orange = { - 50: 'hsl(45, 100%, 97%)', - 100: 'hsl(45, 92%, 90%)', - 200: 'hsl(45, 94%, 80%)', - 300: 'hsl(45, 90%, 65%)', - 400: 'hsl(45, 90%, 40%)', - 500: 'hsl(45, 90%, 35%)', - 600: 'hsl(45, 91%, 25%)', - 700: 'hsl(45, 94%, 20%)', - 800: 'hsl(45, 95%, 16%)', - 900: 'hsl(45, 93%, 12%)', + 50: "hsl(45, 100%, 97%)", + 100: "hsl(45, 92%, 90%)", + 200: "hsl(45, 94%, 80%)", + 300: "hsl(45, 90%, 65%)", + 400: "hsl(45, 90%, 40%)", + 500: "hsl(45, 90%, 35%)", + 600: "hsl(45, 91%, 25%)", + 700: "hsl(45, 94%, 20%)", + 800: "hsl(45, 95%, 16%)", + 900: "hsl(45, 93%, 12%)", }; export const red = { - 50: 'hsl(0, 100%, 97%)', - 100: 'hsl(0, 92%, 90%)', - 200: 'hsl(0, 94%, 80%)', - 300: 'hsl(0, 90%, 65%)', - 400: 'hsl(0, 90%, 40%)', - 500: 'hsl(0, 90%, 30%)', - 600: 'hsl(0, 91%, 25%)', - 700: 'hsl(0, 94%, 18%)', - 800: 'hsl(0, 95%, 12%)', - 900: 'hsl(0, 93%, 6%)', + 50: "hsl(0, 100%, 97%)", + 100: "hsl(0, 92%, 90%)", + 200: "hsl(0, 94%, 80%)", + 300: "hsl(0, 90%, 65%)", + 400: "hsl(0, 90%, 40%)", + 500: "hsl(0, 90%, 30%)", + 600: "hsl(0, 91%, 25%)", + 700: "hsl(0, 94%, 18%)", + 800: "hsl(0, 95%, 12%)", + 900: "hsl(0, 93%, 6%)", }; export const getDesignTokens = (mode: PaletteMode) => { - customShadows[1] = - mode === 'dark' - ? 'hsla(220, 30%, 5%, 0.7) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.8) 0px 8px 16px -5px' - : 'hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px'; + customShadows[1] = + mode === "dark" + ? "hsla(220, 30%, 5%, 0.7) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.8) 0px 8px 16px -5px" + : "hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px"; - return { - palette: { - mode, - primary: { - light: brand[200], - main: brand[400], - dark: brand[700], - contrastText: brand[50], - ...(mode === 'dark' && { - contrastText: brand[50], - light: brand[300], - main: brand[400], - dark: brand[700], - }), - }, - info: { - light: brand[100], - main: brand[300], - dark: brand[600], - contrastText: gray[50], - ...(mode === 'dark' && { - contrastText: brand[300], - light: brand[500], - main: brand[700], - dark: brand[900], - }), - }, - warning: { - light: orange[300], - main: orange[400], - dark: orange[800], - ...(mode === 'dark' && { - light: orange[400], - main: orange[500], - dark: orange[700], - }), - }, - error: { - light: red[300], - main: red[400], - dark: red[800], - ...(mode === 'dark' && { - light: red[400], - main: red[500], - dark: red[700], - }), - }, - success: { - light: green[300], - main: green[400], - dark: green[800], - ...(mode === 'dark' && { - light: green[400], - main: green[500], - dark: green[700], - }), - }, - grey: { - ...gray, - }, - divider: mode === 'dark' ? alpha(gray[700], 0.6) : alpha(gray[300], 0.4), - background: { - default: 'hsl(0, 0%, 99%)', - paper: 'hsl(220, 35%, 97%)', - ...(mode === 'dark' && { default: gray[900], paper: 'hsl(220, 30%, 7%)' }), - }, - text: { - primary: gray[800], - secondary: gray[600], - warning: orange[400], - ...(mode === 'dark' && { primary: 'hsl(0, 0%, 100%)', secondary: gray[400] }), - }, - action: { - hover: alpha(gray[200], 0.2), - selected: `${alpha(gray[200], 0.3)}`, - ...(mode === 'dark' && { - hover: alpha(gray[600], 0.2), - selected: alpha(gray[600], 0.3), - }), - }, - }, - typography: { - fontFamily: 'Inter, sans-serif', - h1: { - fontSize: defaultTheme.typography.pxToRem(48), - fontWeight: 600, - lineHeight: 1.2, - letterSpacing: -0.5, - }, - h2: { - fontSize: defaultTheme.typography.pxToRem(36), - fontWeight: 600, - lineHeight: 1.2, - }, - h3: { - fontSize: defaultTheme.typography.pxToRem(30), - lineHeight: 1.2, - }, - h4: { - fontSize: defaultTheme.typography.pxToRem(24), - fontWeight: 600, - lineHeight: 1.5, - }, - h5: { - fontSize: defaultTheme.typography.pxToRem(20), - fontWeight: 600, - }, - h6: { - fontSize: defaultTheme.typography.pxToRem(18), - fontWeight: 600, - }, - subtitle1: { - fontSize: defaultTheme.typography.pxToRem(18), - }, - subtitle2: { - fontSize: defaultTheme.typography.pxToRem(14), - fontWeight: 500, - }, - body1: { - fontSize: defaultTheme.typography.pxToRem(14), - }, - body2: { - fontSize: defaultTheme.typography.pxToRem(14), - fontWeight: 400, - }, - caption: { - fontSize: defaultTheme.typography.pxToRem(12), - fontWeight: 400, - }, - }, - shape: { - borderRadius: 8, - }, - shadows: customShadows, - }; + return { + palette: { + mode, + primary: { + light: brand[200], + main: brand[400], + dark: brand[700], + contrastText: brand[50], + ...(mode === "dark" && { + contrastText: brand[50], + light: brand[300], + main: brand[400], + dark: brand[700], + }), + }, + info: { + light: brand[100], + main: brand[300], + dark: brand[600], + contrastText: gray[50], + ...(mode === "dark" && { + contrastText: brand[300], + light: brand[500], + main: brand[700], + dark: brand[900], + }), + }, + warning: { + light: orange[300], + main: orange[400], + dark: orange[800], + ...(mode === "dark" && { + light: orange[400], + main: orange[500], + dark: orange[700], + }), + }, + error: { + light: red[300], + main: red[400], + dark: red[800], + ...(mode === "dark" && { + light: red[400], + main: red[500], + dark: red[700], + }), + }, + success: { + light: green[300], + main: green[400], + dark: green[800], + ...(mode === "dark" && { + light: green[400], + main: green[500], + dark: green[700], + }), + }, + grey: { + ...gray, + }, + divider: + mode === "dark" ? alpha(gray[700], 0.6) : alpha(gray[300], 0.4), + background: { + default: "hsl(0, 0%, 99%)", + paper: "hsl(220, 35%, 97%)", + ...(mode === "dark" && { + default: gray[900], + paper: "hsl(220, 30%, 7%)", + }), + }, + text: { + primary: gray[800], + secondary: gray[600], + warning: orange[400], + ...(mode === "dark" && { + primary: "hsl(0, 0%, 100%)", + secondary: gray[400], + }), + }, + action: { + hover: alpha(gray[200], 0.2), + selected: `${alpha(gray[200], 0.3)}`, + ...(mode === "dark" && { + hover: alpha(gray[600], 0.2), + selected: alpha(gray[600], 0.3), + }), + }, + }, + typography: { + fontFamily: "Gilroy", + h1: { + fontSize: defaultTheme.typography.pxToRem(48), + fontWeight: 600, + lineHeight: 1.2, + letterSpacing: -0.5, + }, + h2: { + fontSize: defaultTheme.typography.pxToRem(36), + fontWeight: 600, + lineHeight: 1.2, + }, + h3: { + fontSize: defaultTheme.typography.pxToRem(30), + lineHeight: 1.2, + }, + h4: { + fontSize: defaultTheme.typography.pxToRem(24), + fontWeight: 600, + lineHeight: 1.5, + }, + h5: { + fontSize: defaultTheme.typography.pxToRem(20), + fontWeight: 600, + }, + h6: { + fontSize: defaultTheme.typography.pxToRem(18), + fontWeight: 600, + }, + subtitle1: { + fontSize: defaultTheme.typography.pxToRem(18), + }, + subtitle2: { + fontSize: defaultTheme.typography.pxToRem(14), + fontWeight: 500, + }, + body1: { + fontSize: defaultTheme.typography.pxToRem(14), + }, + body2: { + fontSize: defaultTheme.typography.pxToRem(14), + fontWeight: 400, + }, + caption: { + fontSize: defaultTheme.typography.pxToRem(12), + fontWeight: 400, + }, + }, + shape: { + borderRadius: 8, + }, + shadows: customShadows, + }; }; export const colorSchemes = { - light: { - palette: { - primary: { - light: brand[200], - main: brand[400], - dark: brand[700], - contrastText: brand[50], - }, - info: { - light: brand[100], - main: brand[300], - dark: brand[600], - contrastText: gray[50], - }, - warning: { - light: orange[300], - main: orange[400], - dark: orange[800], - }, - error: { - light: red[300], - main: red[400], - dark: red[800], - }, - success: { - light: green[300], - main: green[400], - dark: green[800], - }, - grey: { - ...gray, - }, - divider: alpha(gray[300], 0.4), - background: { - default: 'hsl(0, 0%, 99%)', - paper: 'hsl(220, 35%, 97%)', - }, - text: { - primary: gray[800], - secondary: gray[600], - warning: orange[400], - }, - action: { - hover: alpha(gray[200], 0.2), - selected: `${alpha(gray[200], 0.3)}`, - }, - baseShadow: - 'hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px', - }, - }, - dark: { - palette: { - primary: { - contrastText: brand[50], - light: brand[300], - main: brand[400], - dark: brand[700], - }, - info: { - contrastText: brand[300], - light: brand[500], - main: brand[700], - dark: brand[900], - }, - warning: { - light: orange[400], - main: orange[500], - dark: orange[700], - }, - error: { - light: red[400], - main: red[500], - dark: red[700], - }, - success: { - light: green[400], - main: green[500], - dark: green[700], - }, - grey: { - ...gray, - }, - divider: alpha(gray[700], 0.6), - background: { - default: gray[900], - paper: 'hsl(220, 30%, 7%)', - }, - text: { - primary: 'hsl(0, 0%, 100%)', - secondary: gray[400], - }, - action: { - hover: alpha(gray[600], 0.2), - selected: alpha(gray[600], 0.3), - }, - baseShadow: - 'hsla(220, 30%, 5%, 0.7) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.8) 0px 8px 16px -5px', - }, - }, + light: { + palette: { + primary: { + light: brand[200], + main: brand[400], + dark: brand[700], + contrastText: brand[50], + }, + info: { + light: brand[100], + main: brand[300], + dark: brand[600], + contrastText: gray[50], + }, + warning: { + light: orange[300], + main: orange[400], + dark: orange[800], + }, + error: { + light: red[300], + main: red[400], + dark: red[800], + }, + success: { + light: green[300], + main: green[400], + dark: green[800], + }, + grey: { + ...gray, + }, + divider: alpha(gray[300], 0.4), + background: { + default: "hsl(0, 0%, 99%)", + paper: "hsl(220, 35%, 97%)", + }, + text: { + primary: gray[800], + secondary: gray[600], + warning: orange[400], + }, + action: { + hover: alpha(gray[200], 0.2), + selected: `${alpha(gray[200], 0.3)}`, + }, + baseShadow: + "hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px", + }, + }, + dark: { + palette: { + primary: { + contrastText: brand[50], + light: brand[300], + main: brand[400], + dark: brand[700], + }, + info: { + contrastText: brand[300], + light: brand[500], + main: brand[700], + dark: brand[900], + }, + warning: { + light: orange[400], + main: orange[500], + dark: orange[700], + }, + error: { + light: red[400], + main: red[500], + dark: red[700], + }, + success: { + light: green[400], + main: green[500], + dark: green[700], + }, + grey: { + ...gray, + }, + divider: alpha(gray[700], 0.6), + background: { + default: gray[900], + paper: "hsl(220, 30%, 7%)", + }, + text: { + primary: "hsl(0, 0%, 100%)", + secondary: gray[400], + }, + action: { + hover: alpha(gray[600], 0.2), + selected: alpha(gray[600], 0.3), + }, + baseShadow: + "hsla(220, 30%, 5%, 0.7) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.8) 0px 8px 16px -5px", + }, + }, }; export const typography = { - fontFamily: 'Inter, sans-serif', - h1: { - fontSize: defaultTheme.typography.pxToRem(48), - fontWeight: 600, - lineHeight: 1.2, - letterSpacing: -0.5, - }, - h2: { - fontSize: defaultTheme.typography.pxToRem(36), - fontWeight: 600, - lineHeight: 1.2, - }, - h3: { - fontSize: defaultTheme.typography.pxToRem(30), - lineHeight: 1.2, - }, - h4: { - fontSize: defaultTheme.typography.pxToRem(24), - fontWeight: 600, - lineHeight: 1.5, - }, - h5: { - fontSize: defaultTheme.typography.pxToRem(20), - fontWeight: 600, - }, - h6: { - fontSize: defaultTheme.typography.pxToRem(18), - fontWeight: 600, - }, - subtitle1: { - fontSize: defaultTheme.typography.pxToRem(18), - }, - subtitle2: { - fontSize: defaultTheme.typography.pxToRem(14), - fontWeight: 500, - }, - body1: { - fontSize: defaultTheme.typography.pxToRem(14), - }, - body2: { - fontSize: defaultTheme.typography.pxToRem(14), - fontWeight: 400, - }, - caption: { - fontSize: defaultTheme.typography.pxToRem(12), - fontWeight: 400, - }, + fontFamily: "Gilroy", + h1: { + fontSize: defaultTheme.typography.pxToRem(48), + fontWeight: 600, + lineHeight: 1.2, + letterSpacing: -0.5, + }, + h2: { + fontSize: defaultTheme.typography.pxToRem(36), + fontWeight: 600, + lineHeight: 1.2, + }, + h3: { + fontSize: defaultTheme.typography.pxToRem(30), + lineHeight: 1.2, + }, + h4: { + fontSize: defaultTheme.typography.pxToRem(24), + fontWeight: 600, + lineHeight: 1.5, + }, + h5: { + fontSize: defaultTheme.typography.pxToRem(20), + fontWeight: 600, + }, + h6: { + fontSize: defaultTheme.typography.pxToRem(18), + fontWeight: 600, + }, + subtitle1: { + fontSize: defaultTheme.typography.pxToRem(18), + }, + subtitle2: { + fontSize: defaultTheme.typography.pxToRem(14), + fontWeight: 500, + }, + body1: { + fontSize: defaultTheme.typography.pxToRem(14), + }, + body2: { + fontSize: defaultTheme.typography.pxToRem(14), + fontWeight: 400, + }, + caption: { + fontSize: defaultTheme.typography.pxToRem(12), + fontWeight: 400, + }, }; export const shape = { - borderRadius: 8, + borderRadius: 8, }; // @ts-ignore const defaultShadows: Shadows = [ - 'none', - 'var(--template-palette-baseShadow)', - ...defaultTheme.shadows.slice(2), + "none", + "var(--template-palette-baseShadow)", + ...defaultTheme.shadows.slice(2), ]; export const shadows = defaultShadows;