Skip to content

S
sweepstake
Commit a15dd87f by Arjun Jhukal
Options

updated the responsive view for the user dashboard and game lisitng

parent 0866c63b
Showing with 357 additions and 105 deletions
src/app/(dashboard)/(user)/(outsideAuth)/exclusive-games/loading.tsx
...@@ -5,7 +5,7 @@ export default function Loading() { ...@@ -5,7 +5,7 @@ export default function Loading() {
{Array.from({ length: 6 }).map((_, i) => ( {Array.from({ length: 6 }).map((_, i) => (
<div <div
key={i} key={i}
className="rounded-xl bg-gray-200 w-full h-[220px]" className="rounded-xl bg-gray-200 w-full h-[220px] aspect-square"
/> />
))} ))}
</div> </div>
......
src/app/(dashboard)/(user)/(outsideAuth)/page.tsx
...@@ -128,11 +128,11 @@ export default async function Home() { ...@@ -128,11 +128,11 @@ export default async function Home() {
{subBannersError ? ( {subBannersError ? (
<p></p> <p></p>
) : subBanners?.data?.length ? ( ) : subBanners?.data?.length ? (
<div className="dashboard-card-wrapper grid grid-cols-2 gap-5 justify-center"> <div className="dashboard-card-wrapper flex flex-col md:grid md:grid-cols-2 gap-5 justify-center">
{subBanners.data.map((subBanner, index) => ( {subBanners.data.map((subBanner, index) => (
<div <div
key={subBanner.name || index} key={subBanner.name || index}
className="dashboard-card1 flex justify-between px-10 gap-2 rounded-[24px]" className="dashboard-card1 col-span-1 flex justify-between px-10 gap-2 rounded-[24px]"
style={{ style={{
background: background:
index % 2 === 0 index % 2 === 0
......
src/app/globals.css
...@@ -113,7 +113,8 @@ ...@@ -113,7 +113,8 @@
button, button,
.ss-btn { .ss-btn {
padding: 12px 24px; /* padding: 12px 24px; */
@apply py-2 px-4 lg:px-6 lg:py-3;
border-radius: 27px; border-radius: 27px;
text-align: center; text-align: center;
width: 100%; width: 100%;
......
src/components/atom/Avatar.tsx
...@@ -10,7 +10,7 @@ interface Props extends MuiAvatarProps { ...@@ -10,7 +10,7 @@ interface Props extends MuiAvatarProps {
const AvatarStyle = styled(MuiAvatar, { const AvatarStyle = styled(MuiAvatar, {
shouldForwardProp: (prop) => !['color', 'type', 'size'].includes(prop as string), shouldForwardProp: (prop) => !['color', 'type', 'size'].includes(prop as string),
})<Props>(({ theme, color, type, size }: { theme: Theme } & Props) => ({ })<Props>(({ theme, type }: { theme: Theme } & Props) => ({
width: 40, width: 40,
height: 40, height: 40,
borderRadius: 8, borderRadius: 8,
......
src/components/organism/Header/Profile.tsx
...@@ -85,10 +85,10 @@ export default function ProfileBlock() { ...@@ -85,10 +85,10 @@ export default function ProfileBlock() {
}} }}
> >
<div className='hidden lg:flex items-center gap-1'> <div className=' lg:flex items-center gap-1'>
<Avatar alt="profile user" src={avataur1} /> <Avatar alt="profile user" src={avataur1} />
{user?.role && user.role.toLowerCase() !== "user" ? <> {user?.role && user.role.toLowerCase() !== "user" ? <>
<div> <div className=' hidden lg:block'>
<strong className='text-[14px] leading-[120%] font-bold text-text-title block mb-1 text-nowrap'>{user?.name}</strong> <strong className='text-[14px] leading-[120%] font-bold text-text-title block mb-1 text-nowrap'>{user?.name}</strong>
<p className='text-[12px] text-left leading-[120%] font-[500] text-para-light text-nowrap'> <p className='text-[12px] text-left leading-[120%] font-[500] text-para-light text-nowrap'>
{user?.role || "User"} {user?.role || "User"}
......
src/components/organism/Header/UserHeader/UserCoinCard.tsx
...@@ -20,7 +20,7 @@ export default function UserCoinCard() { ...@@ -20,7 +20,7 @@ export default function UserCoinCard() {
<GoldCoinIcon /> <GoldCoinIcon />
<div className="coins"> <div className="coins">
<strong className="text-[12px] leading-4 font-[600] text-[#FBA027] block">{data?.data[1]?.value || 0}</strong> <strong className="text-[12px] leading-4 font-[600] text-[#FBA027] block">{data?.data[1]?.value || 0}</strong>
<span className="text-[9px] mt-[-2px] block">Gold Coins</span> <span className="text-[9px] mt-[-2px] hidden md:block">Gold Coins</span>
</div> </div>
</Box> </Box>
</Box> </Box>
...@@ -36,7 +36,7 @@ export default function UserCoinCard() { ...@@ -36,7 +36,7 @@ export default function UserCoinCard() {
<SilverCoinIcon /> <SilverCoinIcon />
<div className="coins"> <div className="coins">
<strong className="text-[12px] leading-4 font-[600] text-[#93E0D8] block">{data?.data[0]?.value || 0}</strong> <strong className="text-[12px] leading-4 font-[600] text-[#93E0D8] block">{data?.data[0]?.value || 0}</strong>
<span className="text-[9px] mt-[-2px] block">Sweeps Coins</span> <span className="text-[9px] mt-[-2px] hidden md:block">Sweeps Coins</span>
</div> </div>
</Box> </Box>
</Box > </Box >
......
src/components/organism/Header/UserHeader/index.tsx
...@@ -14,7 +14,7 @@ import { PATH } from '@/routes/PATH' ...@@ -14,7 +14,7 @@ import { PATH } from '@/routes/PATH'
export default function UserHeader() { export default function UserHeader() {
const isAuth = CheckAuth(); const isAuth = CheckAuth();
return ( return (
<Box className='flex items-center gap-4 justify-end w-full'> <Box className='flex items-center gap-2 md:gap-4 justify-end w-full'>
{/* <AdminSearchBar /> */} {/* <AdminSearchBar /> */}
......
src/components/organism/Sidebar/index.tsx
...@@ -9,7 +9,11 @@ import Image from 'next/image'; ...@@ -9,7 +9,11 @@ import Image from 'next/image';
import AdminMenu from './AdminSidebar'; import AdminMenu from './AdminSidebar';
import UserMenu from './UserSidebar'; import UserMenu from './UserSidebar';
import { useAppSelector } from '@/hooks/hook'; import { useAppSelector } from '@/hooks/hook';
import useMediaQuery from '@mui/material/useMediaQuery';
import { useThemeContext } from '@/context/ThemeContext';
import { IconButton } from '@mui/material';
import { CloseCircle } from '@wandersonalwes/iconsax-react';
import Link from 'next/link';
const drawerWidth = DRAWER_WIDTH; const drawerWidth = DRAWER_WIDTH;
const openedMixin = (theme: Theme): CSSObject => ({ const openedMixin = (theme: Theme): CSSObject => ({
...@@ -79,12 +83,27 @@ export default function Sidebar({ open, handleDrawerOpen }: { ...@@ -79,12 +83,27 @@ export default function Sidebar({ open, handleDrawerOpen }: {
}) { }) {
const user = useAppSelector((state) => state.auth.user); const user = useAppSelector((state) => state.auth.user);
// const user = { role: "USER" }
return ( return (
<Drawer variant="permanent" open={open}> <Drawer variant="permanent" open={open}>
<DrawerHeader sx={{ justifyContent: "center" }}> <DrawerHeader sx={{ justifyContent: "center" }}>
{/* <HambergerMenu /> */} {/* <HambergerMenu /> */}
<Link href="/">
<Image src="/assets/images/logo.png" alt="Logo" width={102} height={56} /> <Image src="/assets/images/logo.png" alt="Logo" width={102} height={56} />
</Link>
{/* <IconButton
color="inherit"
aria-label="open drawer"
edge="start"
sx={[
{
maxWidth: "fit-content"
},
]}
className='!bg-light-gray !md:hidden'
>
<CloseCircle className='!text-para-light' />
</IconButton> */}
</DrawerHeader> </DrawerHeader>
<Box className={`mt-8 menu__wrapper ${open ? "px-3" : ""}`} > <Box className={`mt-8 menu__wrapper ${open ? "px-3" : ""}`} >
......
src/components/pages/dashboard/index.tsx
...@@ -11,7 +11,7 @@ export default function Dashboard({ slides }: { slides: BannerProps[] }) { ...@@ -11,7 +11,7 @@ export default function Dashboard({ slides }: { slides: BannerProps[] }) {
const [current, setCurrent] = useState(0); const [current, setCurrent] = useState(0);
const handleDragEnd = (_: any, info: any) => { const handleDragEnd = (_: any, info: any) => {
const swipeThreshold = 100; // min distance to trigger slide change const swipeThreshold = 100;
if (info.offset.x < -swipeThreshold && current < slides.length - 1) { if (info.offset.x < -swipeThreshold && current < slides.length - 1) {
setCurrent((prev) => prev + 1); setCurrent((prev) => prev + 1);
} else if (info.offset.x > swipeThreshold && current > 0) { } else if (info.offset.x > swipeThreshold && current > 0) {
...@@ -24,7 +24,7 @@ export default function Dashboard({ slides }: { slides: BannerProps[] }) { ...@@ -24,7 +24,7 @@ export default function Dashboard({ slides }: { slides: BannerProps[] }) {
<AnimatePresence mode="wait"> <AnimatePresence mode="wait">
<motion.div <motion.div
key={slides[current]?.name || current} key={slides[current]?.name || current}
className="relative aspect-[1105/240] rounded-3xl overflow-hidden flex justify-center items-center text-center cursor-grab active:cursor-grabbing" className="relative md:aspect-[1105/240] aspect-video rounded-3xl overflow-hidden flex justify-center items-center text-center cursor-grab active:cursor-grabbing"
initial={{ opacity: 0, x: 100 }} initial={{ opacity: 0, x: 100 }}
animate={{ opacity: 1, x: 0 }} animate={{ opacity: 1, x: 0 }}
exit={{ opacity: 0, x: -100 }} exit={{ opacity: 0, x: -100 }}
...@@ -43,7 +43,7 @@ export default function Dashboard({ slides }: { slides: BannerProps[] }) { ...@@ -43,7 +43,7 @@ export default function Dashboard({ slides }: { slides: BannerProps[] }) {
<div className="content relative z-10 px-6"> <div className="content relative z-10 px-6">
<div className="content relative z-10 px-6 text-center"> <div className="content relative z-10 px-6 text-center">
{slides[current]?.name && ( {slides[current]?.name && (
<h1 className="text-[48px] leading-[50%] text-[#3A013F] mb-8"> <h1 className="text-[32px] md:text-[48px] leading-[50%] text-[#3A013F] mb-8">
{slides[current].name} {slides[current].name}
</h1> </h1>
)} )}
......
src/theme/palette.ts
// // src/theme/Palette.ts
// import { createTheme, PaletteMode } from "@mui/material/styles";
// import { ThemeMode } from "@/config";
// import { PaletteThemeProps } from "@/types/theme";
// export default function Palette(mode: ThemeMode) {
// const contrastText = "#fff";
// let primaryColors = ['#71717A', '#B801C0', '#3A013F'];
// let secondaryColors = ["#93E0D8", "#69A29D", "#4A7D78"];
// let grayColors = ["#E0E0E3", '#F3F4F6'];
// let titleColors = ["#0E0E11", "rgba(0, 0, 0, 0.80)", "rgba(0, 0, 0, 0.90)"];
// let primaryGradColors = ['linear-gradient(90deg, #B100B8 0%, #F335ED 100%)'];
// let secondaryGradColors = ['linear-gradient(90deg, #69A29D 0%, #93E0D9 100%)'];
// if (mode === ThemeMode.DARK) {
// primaryColors = ['#A0A0A7', '#D958DF', '#7D0182'];
// secondaryColors = ["#93E0D8", "#69A29D", "#4A7D78"];
// grayColors = ["#2D2D30", '#1F1F23'];
// titleColors = ["#F0F0F0", "rgba(0, 0, 0, 0.80)", "rgba(0, 0, 0, 0.90)"];
// }
// const paletteColor: PaletteThemeProps = {
// primary: {
// light: primaryColors[0],
// main: primaryColors[1],
// dark: primaryColors[2],
// contrastText
// },
// secondary: {
// light: secondaryColors[0],
// main: secondaryColors[0],
// dark: secondaryColors[0],
// contrastText
// },
// title: {
// main: titleColors[0],
// contrastText
// },
// lightGray: {
// light: grayColors[1],
// main: grayColors[0],
// contrastText
// },
// };
// // Final MUI Theme
// return createTheme({
// typography: {
// fontFamily: "Inter, sans-serif",
// },
// palette: {
// mode: mode as PaletteMode,
// common: {
// black: "#000",
// white: "#fff",
// },
// ...paletteColor,
// background: {
// default: mode === ThemeMode.DARK ? "#11011E" : "#fff",
// paper: mode === ThemeMode.DARK ? "rgba(41, 1, 57, 0.81)" : "#fff"
// },
// text: {
// primary: mode === ThemeMode.DARK ? titleColors[0] : titleColors[0],
// secondary: mode === ThemeMode.DARK ? grayColors[0] : grayColors[1]
// },
// },
// components: {
// MuiPaper: {
// styleOverrides: {
// root: {
// ...(mode === ThemeMode.DARK && {
// backdropFilter: "blur(10px)",
// WebkitBackdropFilter: "blur(10px)",
// }),
// },
// },
// },
// MuiInputLabel: {
// styleOverrides: {
// root: {
// // color: 'rgba(255, 255, 255, 0.80)',
// color: titleColors[0],
// fontSize: '12px',
// fontWeight: 400,
// lineHeight: 'normal',
// display: 'block',
// marginBottom: '4px',
// },
// },
// },
// MuiOutlinedInput: {
// styleOverrides: {
// root: {
// width: "100%",
// borderRadius: '27px',
// background: 'rgba(118, 107, 120, 0.55)',
// border: '0.576px solid rgba(255, 255, 255, 0.04)',
// color: '#fff',
// '&:hover .MuiOutlinedInput-notchedOutline': {
// borderColor: 'rgba(255,255,255,0.2)',
// },
// '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
// borderColor: '#B801C0',
// },
// },
// input: {
// padding: '12px 16px',
// '&::placeholder': {
// color: 'rgba(255, 255, 255, 0.2)',
// fontWeight: 300,
// fontSize: '12px',
// },
// },
// },
// },
// MuiButton: {
// styleOverrides: {
// root: {
// borderRadius: '27px',
// padding: '12px 24px',
// textAlign: 'center',
// textTransform: 'capitalize',
// width: '100%',
// '&:disabled': {
// opacity: 0.5,
// cursor: 'not-allowed',
// },
// },
// [theme.breakpoints.down("md")]: {
// padding: "8px 16px", // or "8px 6px" as you mentioned
// },
// },
// variants: [
// {
// props: { variant: "contained", color: "primary" },
// style: {
// background: primaryGradColors[0],
// color: "#fff",
// "&:hover": {
// opacity: 0.9,
// },
// },
// },
// {
// props: { variant: "contained", color: "secondary" },
// style: {
// background: secondaryGradColors[0],
// color: "#fff",
// "&:hover": {
// opacity: 0.9,
// },
// },
// },
// ],
// },
// MuiList: {
// styleOverrides: {
// root: {
// padding: 0
// }
// }
// },
// MuiListItem: {
// styleOverrides: {
// root: {
// display: "block",
// padding: 0
// }
// }
// },
// MuiListItemButton: {
// styleOverrides: {
// root: {
// padding: "12px 12px 12px 16px",
// transition: "justify-content 0.2s ease",
// "&.collapsed": {
// justifyContent: "center"
// },
// "&.expanded": {
// justifyContent: "flex-start"
// },
// "&.active": {
// backgroundColor: "#FEEFFF",
// color: primaryColors[1],
// "& .MuiListItemIcon-root": {
// color: primaryColors[1],
// }
// }
// },
// }
// },
// MuiListItemIcon: {
// styleOverrides: {
// root: {
// minWidth: 0,
// justifyContent: "center",
// transition: "margin 0.2s ease",
// "&.collapsed": {
// marginRight: "auto"
// },
// "&.expanded": {
// marginRight: "12px"
// }
// }
// }
// },
// MuiListItemText: {
// styleOverrides: {
// root: {
// transition: "opacity 0.2s ease",
// "&.collapsed": {
// opacity: 0
// },
// "&.expanded": {
// opacity: 1
// }
// }
// }
// }
// },
// });
// }
// src/theme/Palette.ts // src/theme/Palette.ts
import { createTheme, PaletteMode } from "@mui/material/styles"; import { createTheme, PaletteMode } from "@mui/material/styles";
import { ThemeMode } from "@/config"; import { ThemeMode } from "@/config";
...@@ -6,52 +235,58 @@ import { PaletteThemeProps } from "@/types/theme"; ...@@ -6,52 +235,58 @@ import { PaletteThemeProps } from "@/types/theme";
export default function Palette(mode: ThemeMode) { export default function Palette(mode: ThemeMode) {
const contrastText = "#fff"; const contrastText = "#fff";
let primaryColors = ["#71717A", "#B801C0", "#3A013F"];
let primaryColors = ['#71717A', '#B801C0', '#3A013F'];
let secondaryColors = ["#93E0D8", "#69A29D", "#4A7D78"]; let secondaryColors = ["#93E0D8", "#69A29D", "#4A7D78"];
let grayColors = ["#E0E0E3", '#F3F4F6']; let grayColors = ["#E0E0E3", "#F3F4F6"];
let titleColors = ["#0E0E11", "rgba(0, 0, 0, 0.80)", "rgba(0, 0, 0, 0.90)"]; let titleColors = [
let primaryGradColors = ['linear-gradient(90deg, #B100B8 0%, #F335ED 100%)']; "#0E0E11",
let secondaryGradColors = ['linear-gradient(90deg, #69A29D 0%, #93E0D9 100%)']; "rgba(0, 0, 0, 0.80)",
"rgba(0, 0, 0, 0.90)",
];
let primaryGradColors = [
"linear-gradient(90deg, #B100B8 0%, #F335ED 100%)",
];
let secondaryGradColors = [
"linear-gradient(90deg, #69A29D 0%, #93E0D9 100%)",
];
if (mode === ThemeMode.DARK) { if (mode === ThemeMode.DARK) {
primaryColors = ['#A0A0A7', '#D958DF', '#7D0182']; primaryColors = ["#A0A0A7", "#D958DF", "#7D0182"];
secondaryColors = ["#93E0D8", "#69A29D", "#4A7D78"]; secondaryColors = ["#93E0D8", "#69A29D", "#4A7D78"];
grayColors = ["#2D2D30", '#1F1F23']; grayColors = ["#2D2D30", "#1F1F23"];
titleColors = ["#F0F0F0", "rgba(0, 0, 0, 0.80)", "rgba(0, 0, 0, 0.90)"]; titleColors = [
"#F0F0F0",
"rgba(0, 0, 0, 0.80)",
"rgba(0, 0, 0, 0.90)",
];
} }
const paletteColor: PaletteThemeProps = { const paletteColor: PaletteThemeProps = {
primary: { primary: {
light: primaryColors[0], light: primaryColors[0],
main: primaryColors[1], main: primaryColors[1],
dark: primaryColors[2], dark: primaryColors[2],
contrastText contrastText,
}, },
secondary: { secondary: {
light: secondaryColors[0], light: secondaryColors[0],
main: secondaryColors[0], main: secondaryColors[0],
dark: secondaryColors[0], dark: secondaryColors[0],
contrastText contrastText,
}, },
title: { title: {
main: titleColors[0], main: titleColors[0],
contrastText contrastText,
}, },
lightGray: { lightGray: {
light: grayColors[1], light: grayColors[1],
main: grayColors[0], main: grayColors[0],
contrastText contrastText,
}, },
}; };
// Final MUI Theme // Step 1️⃣ — create base theme so we can access breakpoints
return createTheme({ const baseTheme = createTheme({
typography: {
fontFamily: "Inter, sans-serif",
},
palette: { palette: {
mode: mode as PaletteMode, mode: mode as PaletteMode,
common: { common: {
...@@ -61,24 +296,44 @@ export default function Palette(mode: ThemeMode) { ...@@ -61,24 +296,44 @@ export default function Palette(mode: ThemeMode) {
...paletteColor, ...paletteColor,
background: { background: {
default: mode === ThemeMode.DARK ? "#11011E" : "#fff", default: mode === ThemeMode.DARK ? "#11011E" : "#fff",
paper: mode === ThemeMode.DARK ? "rgba(41, 1, 57, 0.81)" : "#fff" paper:
mode === ThemeMode.DARK
? "rgba(41, 1, 57, 0.81)"
: "#fff",
}, },
text: { text: {
primary: mode === ThemeMode.DARK ? titleColors[0] : titleColors[0], primary: titleColors[0],
secondary: mode === ThemeMode.DARK ? grayColors[0] : grayColors[1] secondary:
} mode === ThemeMode.DARK ? grayColors[0] : grayColors[1],
},
},
typography: {
fontFamily: "Inter, sans-serif",
}, },
});
// Step 2️⃣ — extend with component overrides using baseTheme.breakpoints
return createTheme(baseTheme, {
components: { components: {
MuiPaper: {
styleOverrides: {
root: {
...(mode === ThemeMode.DARK && {
backdropFilter: "blur(10px)",
WebkitBackdropFilter: "blur(10px)",
}),
},
},
},
MuiInputLabel: { MuiInputLabel: {
styleOverrides: { styleOverrides: {
root: { root: {
// color: 'rgba(255, 255, 255, 0.80)',
color: titleColors[0], color: titleColors[0],
fontSize: '12px', fontSize: "12px",
fontWeight: 400, fontWeight: 400,
lineHeight: 'normal', lineHeight: "normal",
display: 'block', display: "block",
marginBottom: '4px', marginBottom: "4px",
}, },
}, },
}, },
...@@ -86,23 +341,23 @@ export default function Palette(mode: ThemeMode) { ...@@ -86,23 +341,23 @@ export default function Palette(mode: ThemeMode) {
styleOverrides: { styleOverrides: {
root: { root: {
width: "100%", width: "100%",
borderRadius: '27px', borderRadius: "27px",
background: 'rgba(118, 107, 120, 0.55)', background: "rgba(118, 107, 120, 0.55)",
border: '0.576px solid rgba(255, 255, 255, 0.04)', border: "0.576px solid rgba(255, 255, 255, 0.04)",
color: '#fff', color: "#fff",
'&:hover .MuiOutlinedInput-notchedOutline': { "&:hover .MuiOutlinedInput-notchedOutline": {
borderColor: 'rgba(255,255,255,0.2)', borderColor: "rgba(255,255,255,0.2)",
}, },
'&.Mui-focused .MuiOutlinedInput-notchedOutline': { "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
borderColor: '#B801C0', borderColor: "#B801C0",
}, },
}, },
input: { input: {
padding: '12px 16px', padding: "12px 16px",
'&::placeholder': { "&::placeholder": {
color: 'rgba(255, 255, 255, 0.2)', color: "rgba(255, 255, 255, 0.2)",
fontWeight: 300, fontWeight: 300,
fontSize: '12px', fontSize: "12px",
}, },
}, },
}, },
...@@ -110,14 +365,17 @@ export default function Palette(mode: ThemeMode) { ...@@ -110,14 +365,17 @@ export default function Palette(mode: ThemeMode) {
MuiButton: { MuiButton: {
styleOverrides: { styleOverrides: {
root: { root: {
borderRadius: '27px', borderRadius: "27px",
padding: '12px 24px', padding: "12px 24px",
textAlign: 'center', textAlign: "center",
textTransform: 'capitalize', textTransform: "capitalize",
width: '100%', width: "100%",
'&:disabled': { "&:disabled": {
opacity: 0.5, opacity: 0.5,
cursor: 'not-allowed', cursor: "not-allowed",
},
[baseTheme.breakpoints.down("md")]: {
padding: "8px 16px",
}, },
}, },
}, },
...@@ -127,9 +385,7 @@ export default function Palette(mode: ThemeMode) { ...@@ -127,9 +385,7 @@ export default function Palette(mode: ThemeMode) {
style: { style: {
background: primaryGradColors[0], background: primaryGradColors[0],
color: "#fff", color: "#fff",
"&:hover": { "&:hover": { opacity: 0.9 },
opacity: 0.9,
},
}, },
}, },
{ {
...@@ -137,48 +393,33 @@ export default function Palette(mode: ThemeMode) { ...@@ -137,48 +393,33 @@ export default function Palette(mode: ThemeMode) {
style: { style: {
background: secondaryGradColors[0], background: secondaryGradColors[0],
color: "#fff", color: "#fff",
"&:hover": { "&:hover": { opacity: 0.9 },
opacity: 0.9,
},
}, },
}, },
], ],
}, },
MuiList: { MuiList: {
styleOverrides: { styleOverrides: { root: { padding: 0 } },
root: {
padding: 0
}
}
}, },
MuiListItem: { MuiListItem: {
styleOverrides: { styleOverrides: { root: { display: "block", padding: 0 } },
root: {
display: "block",
padding: 0
}
}
}, },
MuiListItemButton: { MuiListItemButton: {
styleOverrides: { styleOverrides: {
root: { root: {
padding: "12px 12px 12px 16px", padding: "12px 12px 12px 16px",
transition: "justify-content 0.2s ease", transition: "justify-content 0.2s ease",
"&.collapsed": { "&.collapsed": { justifyContent: "center" },
justifyContent: "center" "&.expanded": { justifyContent: "flex-start" },
},
"&.expanded": {
justifyContent: "flex-start"
},
"&.active": { "&.active": {
backgroundColor: "#FEEFFF", backgroundColor: "#FEEFFF",
color: primaryColors[1], color: primaryColors[1],
"& .MuiListItemIcon-root": { "& .MuiListItemIcon-root": {
color: primaryColors[1], color: primaryColors[1],
}
}
}, },
} },
},
},
}, },
MuiListItemIcon: { MuiListItemIcon: {
styleOverrides: { styleOverrides: {
...@@ -186,29 +427,20 @@ export default function Palette(mode: ThemeMode) { ...@@ -186,29 +427,20 @@ export default function Palette(mode: ThemeMode) {
minWidth: 0, minWidth: 0,
justifyContent: "center", justifyContent: "center",
transition: "margin 0.2s ease", transition: "margin 0.2s ease",
"&.collapsed": { "&.collapsed": { marginRight: "auto" },
marginRight: "auto" "&.expanded": { marginRight: "12px" },
},
}, },
"&.expanded": {
marginRight: "12px"
}
}
}
}, },
MuiListItemText: { MuiListItemText: {
styleOverrides: { styleOverrides: {
root: { root: {
transition: "opacity 0.2s ease", transition: "opacity 0.2s ease",
"&.collapsed": { "&.collapsed": { opacity: 0 },
opacity: 0 "&.expanded": { opacity: 1 },
},
},
}, },
"&.expanded": {
opacity: 1
}
}
}
}
}, },
}); });
} }
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment