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