Skip to content

S
sweepstake
Commit 24165bc2 by Arjun Jhukal
Options

seperated the theme palatte for the admin and user

parent 8515c989
Showing with 349 additions and 96 deletions
src/app/ProviderWrapper.tsx
......@@ -7,12 +7,12 @@ import React from 'react'
export default function ProviderWrapper({ children }: { children: React.ReactNode }) {
return (
<ThemeContextProvider>
<ThemeCustomization>
<ClientProvider>
<ThemeCustomization>
{children}
<Toast />
</ClientProvider>
</ThemeCustomization>
</ClientProvider>
</ThemeContextProvider>
)
}
src/app/globals.css
......@@ -86,7 +86,7 @@
padding: 12px 16px;
}
input.rounded {
/* input.rounded {
border-radius: 27px !important;
border: 0.576px solid rgba(255, 255, 255, 0.04);
background: rgba(118, 107, 120, 0.55);
......@@ -101,7 +101,7 @@
input.rounded:focus {
@apply outline-secondary
}
} */
.error {
@apply text-[12px] leading-[120%] text-red-500 block mt-1;
......@@ -147,12 +147,10 @@
}
body {
@apply !bg-white;
@apply bg-white;
}
/* .MuiInputBase-input {
padding: 0 !important;
} */
}
.general-content-box p {
......
src/app/layout.tsx
......@@ -23,7 +23,7 @@ export default function RootLayout({
return (
<html lang="en">
{/* className="dark" */}
<body className="scroll-smooth" style={{ fontFamily: inter.style.fontFamily }}>
<body className={`${inter.className} scroll-smooth dark`}>
<ProviderWrapper>
{children}
</ProviderWrapper>
......
src/components/molecules/PasswordField.tsx
......@@ -46,6 +46,9 @@ export default function PasswordField({
onMouseDown={handleMouseDownPassword}
edge="end"
color="secondary"
sx={{
padding: 0,
}}
>
{showPassword ? <Eye /> : <EyeSlash />}
</IconButton>
......
src/components/organism/Header/AdminHeader/index.tsx
......@@ -17,7 +17,6 @@ export default function AdminHeader() {
return (
<Box className='flex items-center gap-4 justify-between w-full'>
<AdminSearchBar />
{/* <Input /> */}
<div className="right flex items-center gap-4">
<IconButton
color="inherit"
......@@ -28,7 +27,7 @@ export default function AdminHeader() {
]}
className='!bg-light-gray'
>
<Add className='!text-primary-light' />
<Add className='!text-para-light' />
</IconButton>
<NotificationPage />
<Profile />
......
src/components/organism/Header/Notification.tsx
......@@ -26,7 +26,7 @@ export default function NotificationPage({ badgeCount = 0, width = 300, children
<Box>
<IconButton ref={anchorRef} onClick={handleToggle} className='!bg-light-gray'>
<Badge badgeContent={badgeCount} color="success" sx={{ '& .MuiBadge-badge': { top: 2, right: 4 } }}>
<Notification variant="Bold" className="!text-primary-light" />
<Notification variant="Bold" className="!text-para-light" />
</Badge>
</IconButton>
......
src/components/organism/Header/index.tsx
......@@ -62,7 +62,7 @@ export default function Header({ open, handleDrawerOpen }: {
]}
className='!bg-light-gray'
>
<HambergerMenu className='!text-primary-light' />
<HambergerMenu className='!text-para-light' />
</IconButton>
{
user?.role.toUpperCase() === 'ADMIN' ? (
......
src/components/pages/auth/login/index.tsx
......@@ -63,7 +63,7 @@ export default function LoginPage() {
user: response.data?.user,
}),
);
router.replace(PATH.AUTH.VERIFY_EMAIL.ROOT)
router.replace(PATH.DASHBOARD.ROOT);
}
catch (e) {
dispatch(
......
src/components/pages/auth/register/index.tsx
......@@ -63,7 +63,7 @@ export default function RegisterPage() {
autoTime: true,
}),
);
router.replace(PATH.AUTH.LOGIN.ROOT)
router.replace(PATH.AUTH.VERIFY_EMAIL.ROOT);
}
catch (e) {
dispatch(
......
src/components/pages/dashboard/adminDashboard/players/addPlayerForm/index.tsx
......@@ -6,13 +6,14 @@ import { useAppDispatch } from '@/hooks/hook'
import { useCreatePlayerMutation } from '@/services/playerApi'
import { showToast, ToastVariant } from '@/slice/toastSlice'
import { initialPlayerValues } from '@/types/player'
import { Button, Input, InputLabel } from '@mui/material'
import { Button, Input, InputLabel, OutlinedInput } from '@mui/material'
import { useFormik } from 'formik'
import { useRouter } from 'next/navigation'
import React from 'react'
import * as Yup from "yup";
export const PlayerValidationSchema = Yup.object().shape({
name: Yup.string().required("Username is required"),
email: Yup.string()
.email("Invalid email address")
.required("Email is required"),
......@@ -59,9 +60,12 @@ export default function AddPlayerForm({ id }: { id?: string | number }) {
}
else {
try {
console.log(values);
const formData = new FormData();
// Required fields
formData.append("name", values.name);
formData.append("email", values.email);
formData.append("first_name", values.first_name);
formData.append("last_name", values.last_name);
......@@ -87,7 +91,7 @@ export default function AddPlayerForm({ id }: { id?: string | number }) {
dispatch(
showToast({
message: response.data.message,
message: response.message,
variant: ToastVariant.SUCCESS
})
);
......@@ -98,7 +102,7 @@ export default function AddPlayerForm({ id }: { id?: string | number }) {
console.log(e);
dispatch(
showToast({
message: e.error,
message: e.data.message,
variant: ToastVariant.ERROR
})
)
......@@ -114,8 +118,24 @@ export default function AddPlayerForm({ id }: { id?: string | number }) {
</div>
<div className="form__fields p-6 lg:p-10 flex flex-col gap-4 lg:gap-6 lg:grid grid-cols-2">
<div className="input__field">
<InputLabel htmlFor="name">Username<span className="text-red-500">*</span></InputLabel>
<OutlinedInput
fullWidth
id="name"
name="name"
type="name"
placeholder="Enter Username"
value={formik.values.name}
onChange={formik.handleChange}
onBlur={formik.handleBlur}
/>
<span className="error">
{formik.touched.name && formik.errors.name ? formik.errors.name : ""}
</span>
</div>
<div className="input__field">
<InputLabel htmlFor="email">Email<span className="text-red-500">*</span></InputLabel>
<Input
<OutlinedInput
fullWidth
id="email"
name="email"
......@@ -132,7 +152,7 @@ export default function AddPlayerForm({ id }: { id?: string | number }) {
<div className="input__field">
<InputLabel htmlFor="first_name">First Name<span className="text-red-500">*</span></InputLabel>
<Input
<OutlinedInput
fullWidth
id="first_name"
name="first_name"
......@@ -148,7 +168,7 @@ export default function AddPlayerForm({ id }: { id?: string | number }) {
<div className="input__field">
<InputLabel htmlFor="last_name">Last Name<span className="text-red-500">*</span></InputLabel>
<Input
<OutlinedInput
fullWidth
id="last_name"
name="last_name"
......@@ -164,7 +184,7 @@ export default function AddPlayerForm({ id }: { id?: string | number }) {
<div className="input__field">
<InputLabel htmlFor="wallet_address">Wallet Address</InputLabel>
<Input
<OutlinedInput
fullWidth
id="wallet_address"
name="wallet_address"
......@@ -180,7 +200,7 @@ export default function AddPlayerForm({ id }: { id?: string | number }) {
<div className="input__field">
<InputLabel htmlFor="address">Address</InputLabel>
<Input
<OutlinedInput
fullWidth
id="address"
name="address"
......@@ -196,7 +216,7 @@ export default function AddPlayerForm({ id }: { id?: string | number }) {
<div className="input__field">
<InputLabel htmlFor="city">City</InputLabel>
<Input
<OutlinedInput
fullWidth
id="city"
name="city"
......@@ -212,7 +232,7 @@ export default function AddPlayerForm({ id }: { id?: string | number }) {
<div className="input__field">
<InputLabel htmlFor="phone">Phone</InputLabel>
<Input
<OutlinedInput
fullWidth
id="phone"
name="phone"
......
src/config.ts
......@@ -26,7 +26,7 @@ export enum Gender {
const config: DefaultConfigProps = {
fontFamily: inter.style.fontFamily,
i18n: 'en',
mode: ThemeMode.LIGHT,
mode: ThemeMode.DARK,
miniDrawer: false
}
......
src/services/baseQuery.ts
......@@ -6,6 +6,8 @@ export const baseQuery = fetchBaseQuery({
prepareHeaders(headers, { getState }) {
const token = (getState() as RootState).auth.access_token;
// headers.set("Accept", "application/json");
// headers.set("Content-Type", "application/json");
if (token) {
headers.set("Authorization", `Bearer ${token}`);
}
......
src/theme/adminPalette.ts 0 → 100644
// 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",
h1: {
fontSize: "24px",
fontWeight: 700,
lineHeight: "133%"
},
h2: {
fontSize: "20px",
fontWeight: 600,
lineHeight: "140%"
},
h3: {
fontSize: "18px",
fontWeight: 600,
},
h4: {
fontSize: "16px",
lineHeight: "140%"
}
},
palette: {
mode: mode as PaletteMode,
common: {
black: "#000",
white: "#fff",
},
...paletteColor,
background: {
default: mode === ThemeMode.DARK ? grayColors[1] : "#fff",
paper: mode === ThemeMode.DARK ? grayColors[0] : "#fff"
},
text: {
primary: mode === ThemeMode.DARK ? titleColors[0] : titleColors[0],
secondary: mode === ThemeMode.DARK ? grayColors[0] : grayColors[1]
}
},
components: {
MuiInputLabel: {
styleOverrides: {
root: {
color: titleColors[0],
fontSize: '16px',
fontWeight: 400,
lineHeight: 'normal',
display: 'block',
marginBottom: '4px',
},
},
},
MuiOutlinedInput: {
styleOverrides: {
root: {
fontSize: "14px",
width: "100%",
borderRadius: "var(--border-radius-lg, 10px)",
// border: "1px solid var(--Gray, #E0E0E3)",
background: "transparent",
color: "inherit",
padding: "8px 12px",
"&:hover": {
borderColor: "#B801C0",
},
"&.Mui-focused": {
borderColor: "#B801C0",
},
},
input: {
padding: 0,
"&::placeholder": {
color: "var(--Gray, #999)",
fontWeight: 400,
fontSize: "14px",
},
},
},
},
MuiIconButton: {
styleOverrides: {
root: {
borderRadius: "8px"
}
}
},
MuiTextField: {
styleOverrides: {
root: {
"& .MuiInputBase-root": {
borderRadius: "8px",
background: "#FFF",
},
},
},
},
MuiSelect: {
styleOverrides: {
root: {
borderRadius: "8px",
background: "#FFF",
"&.Mui-focused": {
borderColor: "#B801C0",
},
},
},
},
MuiButton: {
styleOverrides: {
root: {
borderRadius: '27px',
padding: '12px 24px',
textAlign: 'center',
textTransform: 'capitalize',
width: '100%',
'&:disabled': {
opacity: 0.2,
cursor: 'not-allowed',
color: "#fff"
},
},
},
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: {
// minHeight: 48,
// paddingLeft: "20px",
// paddingRight: "20px",
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
}
}
}
}
},
});
}
\ No newline at end of file
src/theme/index.tsx
......@@ -3,20 +3,40 @@ import { CssBaseline, GlobalStyles } from '@mui/material'
import { StyledEngineProvider, ThemeProvider } from '@mui/material/styles'
import React from 'react'
import Palette from './palette';
import AdminPalette from './adminPalette';
import { ThemeMode } from '@/config';
import { NextAppDirEmotionCacheProvider } from './emotionCache';
import { useAppSelector } from '@/hooks/hook';
export default function ThemeCustomization({ children }: { children: React.ReactNode }) {
const [theme, setTheme] = React.useState(ThemeMode.DARK);
const user = useAppSelector((state) => state.auth.user);
const globalStyles = {
};
const theme = Palette(ThemeMode.LIGHT);
const [palette, setPalette] = React.useState(() => Palette(ThemeMode.DARK));
React.useEffect(() => {
if (!user || !user.role) {
setTheme(ThemeMode.DARK);
setPalette(Palette(ThemeMode.DARK));
} else if (user.role.toUpperCase() === "ADMIN") {
setTheme(ThemeMode.LIGHT);
setPalette(AdminPalette(ThemeMode.LIGHT));
} else {
setTheme(ThemeMode.LIGHT);
setPalette(Palette(ThemeMode.LIGHT));
}
}, [user]);
// const customTheme = Palette(theme);
return (
<StyledEngineProvider injectFirst>
<NextAppDirEmotionCacheProvider options={{ key: 'mui' }}>
<ThemeProvider theme={theme}>
<ThemeProvider theme={palette}>
<CssBaseline enableColorScheme />
<GlobalStyles styles={globalStyles}
/>
......
src/theme/palette.ts
......@@ -6,9 +6,9 @@ import { PaletteThemeProps } from "@/types/theme";
export default function Palette(mode: ThemeMode) {
const contrastText = "#fff";
// Base Colors - Light Mode
let primaryColors = ['#71717A', '#B801C0', '#3A013F'];
let secondaryColors = ["#93E0D8", "#69A29D", "#4A7D78"]; // Added dark and light variants
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%)'];
......@@ -32,8 +32,8 @@ export default function Palette(mode: ThemeMode) {
},
secondary: {
light: secondaryColors[0],
main: secondaryColors[0], // Use the same main color since we only have one base
dark: secondaryColors[0], // Use the same dark color
main: secondaryColors[0],
dark: secondaryColors[0],
contrastText
},
title: {
......@@ -60,12 +60,12 @@ export default function Palette(mode: ThemeMode) {
},
...paletteColor,
background: {
default: mode === ThemeMode.LIGHT ? grayColors[1] : "#fff", // Fixed: use gray instead of secondary
paper: mode === ThemeMode.LIGHT ? grayColors[0] : "#fff" // Fixed: use gray instead of secondary
default: mode === ThemeMode.DARK ? grayColors[1] : "#fff",
paper: mode === ThemeMode.DARK ? grayColors[0] : "#fff"
},
text: {
primary: mode === ThemeMode.LIGHT ? titleColors[0] : titleColors[0], // Fixed: use title colors
secondary: mode === ThemeMode.LIGHT ? grayColors[0] : grayColors[1] // Fixed: use gray colors
primary: mode === ThemeMode.DARK ? titleColors[0] : titleColors[0],
secondary: mode === ThemeMode.DARK ? grayColors[0] : grayColors[1]
}
},
components: {
......@@ -99,7 +99,7 @@ export default function Palette(mode: ThemeMode) {
},
},
input: {
padding: '8px 12px',
padding: '12px 16px',
'&::placeholder': {
color: 'rgba(255, 255, 255, 0.2)',
fontWeight: 300,
......@@ -108,60 +108,7 @@ export default function Palette(mode: ThemeMode) {
},
},
},
MuiInput: {
defaultProps: {
disableUnderline: true,
},
styleOverrides: {
root: {
width: "100%",
borderRadius: "var(--border-radius-lg, 10px)",
border: "1px solid var(--Gray, #E0E0E3)",
background: "transparent",
color: "inherit",
padding: "8px 12px",
"&:hover": {
borderColor: "#B801C0",
},
"&.Mui-focused": {
borderColor: "#B801C0",
},
},
input: {
padding: 0,
"&::placeholder": {
color: "var(--Gray, #999)",
fontWeight: 400,
fontSize: "14px",
},
},
},
},
MuiTextField: {
styleOverrides: {
root: {
"& .MuiInputBase-root": {
borderRadius: "8px",
background: "#FFF",
},
},
},
},
MuiSelect: {
styleOverrides: {
root: {
borderRadius: "8px",
background: "#FFF",
"&.Mui-focused": {
borderColor: "#B801C0",
},
},
},
},
MuiButton: {
styleOverrides: {
root: {
borderRadius: '27px',
......@@ -216,9 +163,6 @@ export default function Palette(mode: ThemeMode) {
MuiListItemButton: {
styleOverrides: {
root: {
// minHeight: 48,
// paddingLeft: "20px",
// paddingRight: "20px",
padding: "12px 12px 12px 16px",
transition: "justify-content 0.2s ease",
"&.collapsed": {
......
src/types/player.ts
......@@ -33,9 +33,7 @@ export interface PlayerItem extends PlayerProps {
}
export interface PlayerResponseProps {
data: {
data: PlayerItem;
message: string;
status: string;
}
}
\ 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