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 361 additions and 110 deletions
src/app/(dashboard)/(user)/(outsideAuth)/exclusive-games/loading.tsx
......@@ -5,7 +5,7 @@ export default function Loading() {
{Array.from({ length: 6 }).map((_, i) => (
<div
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>
......
src/app/(dashboard)/(user)/(outsideAuth)/page.tsx
......@@ -128,11 +128,11 @@ export default async function Home() {
{subBannersError ? (
<p></p>
) : 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) => (
<div
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={{
background:
index % 2 === 0
......
src/app/globals.css
......@@ -113,7 +113,8 @@
button,
.ss-btn {
padding: 12px 24px;
/* padding: 12px 24px; */
@apply py-2 px-4 lg:px-6 lg:py-3;
border-radius: 27px;
text-align: center;
width: 100%;
......
src/components/atom/Avatar.tsx
......@@ -10,7 +10,7 @@ interface Props extends MuiAvatarProps {
const AvatarStyle = styled(MuiAvatar, {
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,
height: 40,
borderRadius: 8,
......
src/components/organism/Header/Profile.tsx
......@@ -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} />
{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>
<p className='text-[12px] text-left leading-[120%] font-[500] text-para-light text-nowrap'>
{user?.role || "User"}
......
src/components/organism/Header/UserHeader/UserCoinCard.tsx
......@@ -20,7 +20,7 @@ export default function UserCoinCard() {
<GoldCoinIcon />
<div className="coins">
<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>
</Box>
</Box>
......@@ -36,7 +36,7 @@ export default function UserCoinCard() {
<SilverCoinIcon />
<div className="coins">
<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>
</Box>
</Box >
......
src/components/organism/Header/UserHeader/index.tsx
......@@ -14,7 +14,7 @@ import { PATH } from '@/routes/PATH'
export default function UserHeader() {
const isAuth = CheckAuth();
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 /> */}
......
src/components/organism/Sidebar/index.tsx
......@@ -9,7 +9,11 @@ import Image from 'next/image';
import AdminMenu from './AdminSidebar';
import UserMenu from './UserSidebar';
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 openedMixin = (theme: Theme): CSSObject => ({
......@@ -79,12 +83,27 @@ export default function Sidebar({ open, handleDrawerOpen }: {
}) {
const user = useAppSelector((state) => state.auth.user);
// const user = { role: "USER" }
return (
<Drawer variant="permanent" open={open}>
<DrawerHeader sx={{ justifyContent: "center" }}>
{/* <HambergerMenu /> */}
<Image src="/assets/images/logo.png" alt="Logo" width={102} height={56} />
<Link href="/">
<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>
<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[] }) {
const [current, setCurrent] = useState(0);
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) {
setCurrent((prev) => prev + 1);
} else if (info.offset.x > swipeThreshold && current > 0) {
......@@ -24,7 +24,7 @@ export default function Dashboard({ slides }: { slides: BannerProps[] }) {
<AnimatePresence mode="wait">
<motion.div
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 }}
animate={{ opacity: 1, x: 0 }}
exit={{ opacity: 0, x: -100 }}
......@@ -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 text-center">
{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}
</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
import { createTheme, PaletteMode } from "@mui/material/styles";
import { ThemeMode } from "@/config";
......@@ -6,52 +235,58 @@ import { PaletteThemeProps } from "@/types/theme";
export default function Palette(mode: ThemeMode) {
const contrastText = "#fff";
let primaryColors = ['#71717A', '#B801C0', '#3A013F'];
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%)'];
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'];
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)"];
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
contrastText,
},
secondary: {
light: secondaryColors[0],
main: secondaryColors[0],
dark: secondaryColors[0],
contrastText
contrastText,
},
title: {
main: titleColors[0],
contrastText
contrastText,
},
lightGray: {
light: grayColors[1],
main: grayColors[0],
contrastText
contrastText,
},
};
// Final MUI Theme
return createTheme({
typography: {
fontFamily: "Inter, sans-serif",
},
// Step 1️⃣ — create base theme so we can access breakpoints
const baseTheme = createTheme({
palette: {
mode: mode as PaletteMode,
common: {
......@@ -61,24 +296,44 @@ export default function Palette(mode: ThemeMode) {
...paletteColor,
background: {
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: {
primary: mode === ThemeMode.DARK ? titleColors[0] : titleColors[0],
secondary: mode === ThemeMode.DARK ? grayColors[0] : grayColors[1]
}
primary: titleColors[0],
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: {
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',
fontSize: "12px",
fontWeight: 400,
lineHeight: 'normal',
display: 'block',
marginBottom: '4px',
lineHeight: "normal",
display: "block",
marginBottom: "4px",
},
},
},
......@@ -86,23 +341,23 @@ export default function Palette(mode: ThemeMode) {
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)',
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',
"&.Mui-focused .MuiOutlinedInput-notchedOutline": {
borderColor: "#B801C0",
},
},
input: {
padding: '12px 16px',
'&::placeholder': {
color: 'rgba(255, 255, 255, 0.2)',
padding: "12px 16px",
"&::placeholder": {
color: "rgba(255, 255, 255, 0.2)",
fontWeight: 300,
fontSize: '12px',
fontSize: "12px",
},
},
},
......@@ -110,14 +365,17 @@ export default function Palette(mode: ThemeMode) {
MuiButton: {
styleOverrides: {
root: {
borderRadius: '27px',
padding: '12px 24px',
textAlign: 'center',
textTransform: 'capitalize',
width: '100%',
'&:disabled': {
borderRadius: "27px",
padding: "12px 24px",
textAlign: "center",
textTransform: "capitalize",
width: "100%",
"&:disabled": {
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) {
style: {
background: primaryGradColors[0],
color: "#fff",
"&:hover": {
opacity: 0.9,
},
"&:hover": { opacity: 0.9 },
},
},
{
......@@ -137,48 +393,33 @@ export default function Palette(mode: ThemeMode) {
style: {
background: secondaryGradColors[0],
color: "#fff",
"&:hover": {
opacity: 0.9,
},
"&:hover": { opacity: 0.9 },
},
},
],
},
MuiList: {
styleOverrides: {
root: {
padding: 0
}
}
styleOverrides: { root: { padding: 0 } },
},
MuiListItem: {
styleOverrides: {
root: {
display: "block",
padding: 0
}
}
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"
},
"&.collapsed": { justifyContent: "center" },
"&.expanded": { justifyContent: "flex-start" },
"&.active": {
backgroundColor: "#FEEFFF",
color: primaryColors[1],
"& .MuiListItemIcon-root": {
color: primaryColors[1],
}
}
},
},
},
}
},
},
MuiListItemIcon: {
styleOverrides: {
......@@ -186,29 +427,20 @@ export default function Palette(mode: ThemeMode) {
minWidth: 0,
justifyContent: "center",
transition: "margin 0.2s ease",
"&.collapsed": {
marginRight: "auto"
},
"&.expanded": {
marginRight: "12px"
}
}
}
"&.collapsed": { marginRight: "auto" },
"&.expanded": { marginRight: "12px" },
},
},
},
MuiListItemText: {
styleOverrides: {
root: {
transition: "opacity 0.2s ease",
"&.collapsed": {
opacity: 0
},
"&.expanded": {
opacity: 1
}
}
}
}
"&.collapsed": { opacity: 0 },
"&.expanded": { opacity: 1 },
},
},
},
},
});
}
\ No newline at end of file
}
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