@liiift-studio/sales-portal 1.2.1

package/styles/sales-portal.theme.js

@@ -0,0 +1,799 @@
+import { createTheme } from '@mui/material';
+
+export const marginY = '64px';
+export const marginX = '66px';
+export const marginXMobile = '32px';
+export const marginYMobile = '33px';
+export const margin = marginY + ' ' + marginX;
+export const marginMobile = marginYMobile + ' ' + marginXMobile;
+
+let size = createTheme({
+	spacing: 4,
+
+	breakpoints: {
+		values: {
+			xs: 0,
+			sm: 600,
+			md: 960,
+			lg: 1200,
+			xl: 1920,
+		}
+	},
+});
+
+///////////////////////////////////////////////////////////////////////////
+////TYPOGRAPHY
+///////////////////////////////////////////////////////////////////////////
+let typography = createTheme({
+
+	typography: {
+		fontFamily: '"Ordinary", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
+		h1: {
+			maxWidth: '95%',
+			fontStyle: 'normal',
+			lineHeight: 1.1,
+			fontSize: 'clamp(2.5rem, 7vw,7rem)',
+			fontWeight: 860,
+			textWrap: "balance",
+			'&.heroText': {
+				maxWidth: 'none',
+				width: '110%',
+				textAlign: 'center',
+				overflow: 'hidden',
+				lineHeight: 1,
+				fontWeight: 'initial',
+				letterSpacing: 'initial',
+				fontSize: '9.5625rem',
+				[size.breakpoints.down('md')]: {
+					fontSize: '2.25rem',
+					lineHeight: 1.33,
+				},
+				[size.breakpoints.up('xl')]: {
+					fontSize: '5rem',
+				}
+			},
+			'&.MuiTypographyAlignCenter': {
+				marginLeft: 'auto',
+				marginRight: 'auto',
+			},
+		},
+		h2: {
+			maxWidth: '95%',
+			fontStyle: 'normal',
+			fontSize: 'clamp(2rem, 7vw, 5rem)',
+			lineHeight: 1.1,
+			letterSpacing: '0.01em',
+			textTransform: 'uppercase',
+			fontWeight: 500,
+			textWrap: "balance",
+			'&.MuiTypographyAlignCenter': {
+				marginLeft: 'auto',
+				marginRight: 'auto',
+			},
+		},
+		h3: {
+			maxWidth: '95%',
+			fontStyle: 'normal',
+			fontSize: '2.25rem',
+			lineHeight: 1.39,
+			fontWeight: 700,
+			textWrap: "balance",
+			'&.thin': {
+				fontWeight: 300,
+				lineHeight: 1.17,
+			},
+			'&.regular': {
+				fontWeight: 500,
+				lineHeight: 1.17,
+			},
+			'&.MuiTypographyAlignCenter': {
+				marginLeft: 'auto',
+				marginRight: 'auto',
+			},
+			[size.breakpoints.down('md')]: {
+				fontSize: '1.75rem',
+			},
+			[size.breakpoints.down('sm')]: {
+				fontSize: '1.25rem',
+			},
+		},
+		h4: {
+			maxWidth: '95%',
+			fontStyle: 'normal',
+			fontSize: '1.6875rem',
+			lineHeight: 1.33,
+			letterSpacing: '0.06em',
+			textTransform: 'uppercase',
+			textWrap: "balance",
+			fontWeight: 510,
+			'&.light': {
+				fontWeight: 400,
+			},
+			'&.bold, strong': {
+				fontWeight: 860,
+			},
+			'&.MuiTypographyAlignCenter': {
+				marginLeft: 'auto',
+				marginRight: 'auto',
+			},
+			[size.breakpoints.down('md')]: {
+				fontSize: '1.375rem',
+				lineHeight: 1.27,
+			},
+		},
+		h5: {
+			maxWidth: '95%',
+			fontStyle: 'normal',
+			fontSize: '1.1rem',
+			lineHeight: 1.25,
+			letterSpacing: '0.05em',
+			textTransform: 'uppercase',
+			textWrap: "balance",
+			fontWeight: 510,
+			transform: 'translateY(0.1em)',
+			'&.medium': {
+				fontWeight: 640,
+			},
+			'&.bold, strong': {
+				fontWeight: 860,
+			},
+			'&.MuiTypographyAlignCenter': {
+				marginLeft: 'auto',
+				marginRight: 'auto',
+			},
+			[size.breakpoints.down('md')]: {
+				fontSize: '1rem',
+			},
+		},
+		h6: {
+			maxWidth: '95%',
+			fontStyle: 'normal',
+			fontSize: '.875rem',
+			lineHeight: 1.42,
+			fontWeight: 510,
+			'&.light': {
+				fontWeight: 400,
+				opacity: 0.7,
+			},
+			'&.uppercase': {
+				textTransform: 'uppercase',
+				letterSpacing: '0.05em',
+			},
+			'&.bold, strong': {
+				fontWeight: 860,
+			},
+			'&.MuiTypographyAlignCenter': {
+				marginLeft: 'auto',
+				marginRight: 'auto',
+			},
+		},
+		body1: {
+			'&.MuiTypography-body1': {
+				maxWidth: '750px',
+				fontStyle: 'normal',
+				fontSize: '1.5rem',
+				lineHeight: 1.33,
+				wordSpacing: '-0.04em',
+				fontWeight: 400,
+				'&.uppercase': {
+					textTransform: 'uppercase',
+					letterSpacing: '0.01em',
+				},
+				'&.bold, strong': {
+					fontWeight: 700,
+				},
+				[size.breakpoints.down('md')]: {
+					fontSize: '1.25rem',
+					lineHeight: 1.4,
+				},
+				[size.breakpoints.up('lg')]: {
+					maxWidth: '850px',
+				},
+				[size.breakpoints.up('xl')]: {
+					maxWidth: '1000px',
+				},
+				'&.MuiTypographyAlignCenter': {
+					marginLeft: 'auto',
+					marginRight: 'auto',
+				},
+			},
+		},
+		body2: {
+			maxWidth: '750px',
+			fontStyle: 'normal',
+			wordSpacing: '-0.04em',
+			fontSize: '.9375rem',
+			lineHeight: 1.22,
+			fontWeight: 500,
+			[size.breakpoints.down('md')]: {
+				fontSize: '1rem',
+				lineHeight: 1.25,
+			},
+			[size.breakpoints.up('lg')]: {
+				maxWidth: '850px',
+			},
+			[size.breakpoints.up('xl')]: {
+				maxWidth: '1000px',
+			},
+			'&.bold, strong,  b': {
+				fontWeight: 700,
+			},
+			'&.MuiTypographyAlignCenter': {
+				marginLeft: 'auto',
+				marginRight: 'auto',
+			},
+		},
+	},
+});
+
+let overrides = createTheme({
+	///////////////////////////////////
+	//////Overrides
+	///////////////////////////////////
+	components: {
+
+		MuiCssBaseline: {
+			styleOverrides: ''
+		},
+
+		MuiAppBar: {
+			defaultProps: {
+				elevation: 0,
+			},
+			styleOverrides: {
+				root: {
+					zIndex: 1300,
+				},
+			},
+		},
+
+		MuiToolbar: {
+			styleOverrides: {
+				root: {
+					padding: `0 ${marginX} 0 ${marginX}`,
+					minHeight: marginY,
+					[size.breakpoints.down('md')]: {
+						padding: `0 0 0 ${marginXMobile}`,
+					},
+				},
+			},
+		},
+		MuiDrawer: {
+			defaultProps: {
+				elevation: 0,
+			},
+			styleOverrides: {
+				root: {
+					height: '100%',
+					zIndex: '1200',
+					'&#menuDrawer, &#cartDrawer': {
+						'& .MuiDrawer-paper': {
+							backgroundColor: 'var(--black)',
+							paddingBottom: 0,
+							marginTop: marginY,
+							marginBottom: marginY,
+							'@media (max-width: 600px)': {
+								marginTop: marginY,
+								marginBottom: 0,
+							}
+						},
+					},
+					'&#loginDrawer': {
+						zIndex: 1300,
+					},
+					'.MuiBackdrop-root': {
+						top: marginY,
+					},
+					'@media (max-width: 960px)': {
+						left: '0',
+					},
+				},
+				paper: {
+					height: '100%',
+				},
+			},
+		},
+		MuiPopover: {
+			styleOverrides: {
+				root: {
+					'&.menuDrawer': {
+						right: '0',
+					},
+				},
+			},
+		},
+		MuiMenu: {
+			defaultProps: {
+				transformOrigin: {
+					vertical: 'top',
+					horizontal: 'right',
+				},
+				elevation: 0,
+			},
+		},
+		MuiContainer: {
+			defaultProps: {
+				disableGutters: true,
+				maxWidth: 'false',
+			},
+			styleOverrides: {
+				root: {
+					position: 'relative',
+					width: 'auto',
+					margin: '0px' + ' ' + marginX,
+					[size.breakpoints.down('md')]: {
+						margin: '0px' + ' ' + marginXMobile,
+					},
+					'&.MuiContainer-maxWidthFalse': {
+						marginLeft: marginX,
+						marginRight: marginX,
+						paddingLeft: 0,
+						paddingRight: 0,
+						[size.breakpoints.down('md')]: {
+							marginLeft: marginXMobile,
+							marginRight: marginXMobile,
+						},
+						'&.noMargin': {
+							// overflow : 'hidden',
+							marginLeft: '0px',
+							marginRight: '0px',
+							[size.breakpoints.down('md')]: {
+								marginLeft: '0px',
+								marginRight: '0px',
+							},
+						},
+					},
+					'&.noRightMargin': {
+						marginRight: '0px',
+					},
+					'&.typefaceContainer': {
+						transition: 'all 0.3s ease-in-out',
+					},
+					'&.fullHeight': {
+						height: `calc(100vh - ${marginY}*2)`,
+						[size.breakpoints.down('md')]: {
+							height: `calc(100vh - ${marginYMobile}*2)`,
+						},
+					},
+					'&.designSpace': {
+						maxHeight: `calc(100vh - ${marginY}*2)`,
+						height: 'fit-content',
+						[size.breakpoints.down('md')]: {
+							maxHeight: `calc(100vh - ${marginYMobile}*2)`,
+						},
+					}
+				},
+
+			},
+		},
+		MuiLink: {
+			styleOverrides: {
+				root: {
+					height: 'inherit',
+					textDecoration: 'none',
+					display: 'flex',
+					alignItems: 'center',
+				},
+			},
+		},
+		MuiList: {
+			styleOverrides: {
+				root: {
+					display: 'flex',
+					flexDirection: 'column',
+					paddingBottom: '0px',
+					paddingTop: '0px',
+					// alignItems: 'flex-end',()
+					// marginRight: marginX,
+				},
+			},
+		},
+		MuiMenuItem: {
+			styleOverrides: {
+				root: {
+					paddingLeft: 0,
+					paddingRight: 0,
+					paddingBottom: 0,
+					paddingTop: 0,
+				},
+			},
+		},
+		MuiButtonBase: {
+			defaultProps: {
+				// disableElevation: true,
+				disableRipple: true,
+			},
+			variants: [
+				{
+					props: { variant: 'outlined' },
+					style: {
+						borderRadius: '0px',
+						border: `1px solid red`,
+						color: 'var(--white, white)',
+						padding: '60px, 10px',
+						maxHeight: '80%',
+						'&:hover': {
+							backgroundColor: 'var(--white, white)',
+							color: 'var(--black, black)',
+							borderColor: 'var(--white, white)',
+						},
+					},
+				},
+				{
+					props: { variant: 'contained' },
+					style:{
+						borderRadius:'var(--borderRadius)',
+						backgroundColor:'var(--red)',
+						width:'fit-content',
+						color:'var(--white)',
+						px:5,
+						py:3,
+						'&:hover':{
+							backgroundColor:'var(--black)',
+							color:'var(--green)',
+						}
+					}
+				}
+			],
+			styleOverrides: {
+				root: {
+					position: 'relative',
+				},
+			},
+		},
+		MuiIconButton: {
+			defaultProps: {
+				disableRipple: true,
+			},
+			styleOverrides: {
+				root: {
+				},
+			},
+		},
+		MuiCard: {
+			defaultProps: {
+				elevation: 0,
+			},
+			styleOverrides: {
+				root: {
+					overflow: 'visible',
+					borderRadius: '0px',
+
+				},
+			},
+		},
+		MuiCardActionArea: {
+			defaultProps: {
+				disableRipple: true,
+				disableTouchRipple: true,
+			},
+			styleOverrides: {
+				root: {
+					'&:hover': {
+						'.MuiCardActionArea-focusHighlight': {
+							opacity: 0,
+						},
+					},
+				},
+			},
+		},
+		MuiFormControl: {
+			variants: [
+				{
+					props: { variant: 'tester' },
+					style: {
+					},
+				},
+			],
+			styleOverrides: {
+				root: {
+				},
+			},
+		},
+		MuiSelect: {
+			variants: [
+				{
+					props: { variant: 'standard' },
+					style: {
+						'&:before': {
+							content: 'none',
+						},
+						'svg': {
+							color: 'var(--black, black)',
+						},
+
+					}
+				}
+			],
+			styleOverrides: {
+				root: {
+					border: 'none!important',
+					outline: 'none!important',
+					boxShadow: 'none!important',
+
+					'svg': {
+						color: 'var(--white, white)',
+					},
+
+					'&:focus': {
+						border: 'none',
+						backgroundColor: 'var(--white, white)',
+					},
+					'&.white': {
+						border: 'none',
+						backgroundColor: 'var(--white, white)',
+						color: 'var(--black, black)',
+						'svg': {
+							color: 'var(--black, black)',
+						},
+
+					},
+				},
+			},
+		},
+		MuiInputBase: {
+			styleOverrides: {
+				root: {
+					textOverflow: 'ellipsis',
+					fontStyle: 'normal',
+					fontWeight: '500',
+					fontSize: '.9375rem',
+					lineHeight: 1.22,
+					[size.breakpoints.down('md')]: {
+						fontSize: '1rem',
+						lineHeight: 1.25,
+						maxWidth: '75vw',
+
+					},
+					width: '100%',
+					border: 'none',
+					'&.globalInput': {
+						fontSize: '1.1rem',
+						lineHeight: 1.25,
+						letterSpacing: '0.05em',
+						'input::placeholder': {
+							opacity: 1,
+							color:'var(--white)',
+							fontSize: '1.1rem',
+							lineHeight: 1.25,
+							letterSpacing: '0.05em',
+							transform: 'translateY(0)',
+						},
+					},
+					'.MuiNativeSelect-select': {
+						textOverflow: 'ellipsis',
+						'option': {
+							color: 'var(--white, white)',
+							backgroundColor: 'var(--black, black)',
+						},
+						'&:not([multiple]) option': {
+							color: 'var(--white, white)',
+							backgroundColor: 'var(--black, black)',
+						},
+						'&:not([multiple]) optgroup': {
+							color: 'var(--white, white)',
+							backgroundColor: 'var(--black, black)',
+						}
+					},
+					'&:after': {
+						display: 'none',
+					},
+					'&:before': {
+						display: 'none'
+					},
+				}
+			}
+		},
+		MuiTextField: {
+			styleOverrides: {
+				root: {
+					'&.autoComplete': {
+						padding: '1rem 0',
+						textTransform: 'uppercase',
+						'& .MuiFormLabel-root ': {
+							display: 'none',
+							padding: 0,
+							margin: 0,
+						},
+						'& .MuiInputBase-root': {
+							padding: 0,
+							margin: 0,
+							'& .MuiAutocomplete-root': {
+								padding: 0,
+								'& .MuiAutocomplete-inputRoot': {
+									padding: 0,
+									'& .MuiAutocomplete-input': {
+										padding: 0,
+									},
+								},
+							},
+							'&::after': {
+								borderBottom: 'none',
+							},
+							'&::before': {
+								borderBottom: 'none',
+							},
+							'& .MuiInputBase-input': {
+								padding: 0,
+								margin: 0,
+							},
+							'&:hover': {
+								'&::after': {
+									borderBottom: 'none',
+								},
+								'&::before': {
+									borderBottom: 'none',
+								},
+							},
+							'& .MuiOutlinedInput-notchedOutline': {
+								display: 'none',
+							}
+						},
+						'& .MuiInputAdornment-root': {
+							display: 'none',
+						},
+					}
+				},
+			},
+		},
+		MuiPaper: {
+			defaultProps: {
+				square: true,
+			},
+			styleOverrides: {
+				root: {
+					'&.white': {
+						backgroundColor: 'var(--white, white)',
+						color: 'var(--black, black)',
+						'ul': {
+							color: 'var(--black, black)',
+						},
+					},
+					'&.MuiAccordion-root': {
+						'&::before': {
+							content: 'none',
+						}
+					},
+					'& .MuiList-root': {
+						color: 'var(--black, black)',
+						borderRadius: '0px',
+						'& .MuiMenuItem-root': {
+							padding: '0 14px',
+							'&.Mui-selected': {
+								backgroundColor: 'var(--green, green)',
+							},
+						},
+					}
+				},
+			},
+		},
+		MuiAccordion: {
+			styleOverrides: {
+				root: {
+					backgroundColor: 'var(--black)',
+				},
+			},
+		},
+		MuiAccordionSummary: {
+			styleOverrides: {
+				root: {
+					backgroundColor: 'var(--black)',
+					'&.Mui-focusVisible': {
+						backgroundColor: 'var(--black)',
+					},
+				},
+			},
+		},
+	},
+});
+
+
+
+
+// Export enhanced sales dashboard theme
+export let salesTheme = createTheme({
+	spacing: size.spacing,
+	breakpoints: size.breakpoints,
+	typography: typography.typography,
+	// Add specific palette for sales dashboard
+	palette: {
+		primary: {
+			main: '#000000',
+			contrastText: '#FFFFFF',
+		},
+		secondary: {
+			main: '#4CAF50', // Green for positive indicators
+			contrastText: '#FFFFFF',
+		},
+		error: {
+			main: '#F44336', // Red for negative indicators/refunds
+			contrastText: '#FFFFFF',
+		},
+		info: {
+			main: '#2196F3', // Blue for neutral information
+		},
+		warning: {
+			main: '#FF9800', // Orange for warnings
+		},
+		dashboard: {
+			card: '#F5F5F5',
+			cardHover: '#EEEEEE',
+			positive: '#4CAF50',
+			negative: '#F44336',
+			neutral: '#757575',
+			chart1: '#1565C0', // Primary chart line
+			chart2: '#757575', // Secondary chart line (comparison)
+			chartBar1: 'rgba(33, 150, 243, 0.7)', // Bar chart primary
+			chartBar2: 'rgba(156, 39, 176, 0.7)', // Bar chart secondary
+		},
+	},
+	components: {
+		...overrides.components,
+		// Enhance paper component for dashboard cards
+		MuiPaper: {
+			...overrides.components.MuiPaper,
+			styleOverrides: {
+				...overrides.components.MuiPaper.styleOverrides,
+				root: {
+					...overrides.components.MuiPaper.styleOverrides.root,
+					'&.dashboardCard': {
+						padding: '16px',
+						borderRadius: '4px',
+						transition: 'all 0.3s ease',
+						boxShadow: '0 2px 4px rgba(0,0,0,0.05)',
+						'&:hover': {
+							boxShadow: '0 4px 8px rgba(0,0,0,0.1)',
+							transform: 'translateY(-2px)',
+						},
+					},
+				},
+			},
+		},
+		// Enhance data grid for better table appearance
+		MuiDataGrid: {
+			styleOverrides: {
+				root: {
+					border: 'none',
+					'& .MuiDataGrid-columnHeaders': {
+						backgroundColor: 'rgba(0, 0, 0, 0.04)',
+						borderBottom: '1px solid rgba(0, 0, 0, 0.1)',
+					},
+					'& .MuiDataGrid-cell': {
+						borderBottom: '1px solid rgba(0, 0, 0, 0.05)',
+					},
+					'& .MuiDataGrid-row:hover': {
+						backgroundColor: 'rgba(0, 0, 0, 0.02)',
+					},
+					'& .MuiDataGrid-columnHeader--sorted': {
+						backgroundColor: 'rgba(25, 118, 210, 0.12)',
+					},
+					'& .MuiDataGrid-columnHeader--sorted:hover': {
+						backgroundColor: 'rgba(25, 118, 210, 0.18)',
+					},
+				},
+			},
+		},
+		// Enhance charts
+		MuiResponsiveContainer: {
+			styleOverrides: {
+				root: {
+					'& .recharts-surface': {
+						overflow: 'visible',
+					},
+				},
+			},
+		},
+		// Improve toggle buttons for view switching
+		MuiToggleButton: {
+			styleOverrides: {
+				root: {
+					textTransform: 'none',
+					'&.Mui-selected': {
+						backgroundColor: 'rgba(0, 0, 0, 0.1)',
+						color: 'var(--black, black)',
+					},
+				},
+			},
+		},
+	},
+});