+
-
+
-
+ );
+ return (
+
+ {isMobile ? (
+ {
+ viewPort.setBounds({
+ x: [0, window.innerWidth],
+ y: [0, window.innerHeight],
+ });
+ }}
+ >
+ {renderContent}
+
+ ) : (
+ <>{renderContent}
+ )}
+
);
};
-export default LoginRegisterPage;
+export default BookPage;
const DidYouKnowBox = () => {
return (
diff --git a/src/pages/LoginRegisterPage/style.scss b/src/pages/Book/style.scss
similarity index 99%
rename from src/pages/LoginRegisterPage/style.scss
rename to src/pages/Book/style.scss
index daf16d3..41c872e 100644
--- a/src/pages/LoginRegisterPage/style.scss
+++ b/src/pages/Book/style.scss
@@ -17,6 +17,7 @@ $login-btn-color: rgb(41, 9, 129);
height: calc($baseline * 42.6);
box-shadow: 0 0 100px rgba(0, 0, 0, 0.3);
margin: auto;
+ margin-top: 40px;
@media (max-width: 500px) {
$scale: 0.5;
width: calc($baseline * 60);
diff --git a/src/pages/ContentPage/index.jsx b/src/pages/Content/index.jsx
similarity index 98%
rename from src/pages/ContentPage/index.jsx
rename to src/pages/Content/index.jsx
index 4d8f3a8..5a38403 100644
--- a/src/pages/ContentPage/index.jsx
+++ b/src/pages/Content/index.jsx
@@ -4,7 +4,7 @@ import Tab from '@mui/material/Tab';
import { Divider, Avatar } from '@mui/material';
import { FaTwitter } from 'react-icons/fa';
import Annotation from 'react-image-annotation'
-import Layout from 'src/components/Layout';
+import Page from 'src/components/Page';
import { mockAnnotations } from './mockData'
import VaniImg from 'src/assets/demo/vaniiveRepo5.jpg'
import { InkPenIcon, HourglassIcon } from 'src/components/VanitasIcons';
@@ -63,8 +63,7 @@ const ContentPage = () => {
};
return (
-
-
+
@@ -179,8 +178,7 @@ const ContentPage = () => {
-
-
)
+ )
};
export default ContentPage;
diff --git a/src/pages/ContentPage/mockData.js b/src/pages/Content/mockData.js
similarity index 100%
rename from src/pages/ContentPage/mockData.js
rename to src/pages/Content/mockData.js
diff --git a/src/pages/ContentPage/style.scss b/src/pages/Content/style.scss
similarity index 100%
rename from src/pages/ContentPage/style.scss
rename to src/pages/Content/style.scss
diff --git a/src/pages/DashboardPage/index.jsx b/src/pages/Dashboard/index.jsx
similarity index 100%
rename from src/pages/DashboardPage/index.jsx
rename to src/pages/Dashboard/index.jsx
diff --git a/src/pages/DashboardPage/style.scss b/src/pages/Dashboard/style.scss
similarity index 100%
rename from src/pages/DashboardPage/style.scss
rename to src/pages/Dashboard/style.scss
diff --git a/src/pages/EmailVerifiedPage/index.jsx b/src/pages/EmailVerified/index.jsx
similarity index 61%
rename from src/pages/EmailVerifiedPage/index.jsx
rename to src/pages/EmailVerified/index.jsx
index e98c75d..b4bebb7 100644
--- a/src/pages/EmailVerifiedPage/index.jsx
+++ b/src/pages/EmailVerified/index.jsx
@@ -1,17 +1,17 @@
import axios from 'axios';
import React, { useEffect } from 'react';
-import Layout from 'src/components/Layout';
+import Page from 'src/components/Page';
import { baseUrl } from '../../utils/constants';
-const Page = () => {
+const EmailVerifiedPage = () => {
useEffect(() => {
axios.get(baseUrl + window.location.pathname.replaceAll(':','.'));
}, []);
return (
-
your Email verified
+
your Email verified
);
};
-export default Page;
+export default EmailVerifiedPage;
diff --git a/src/pages/Home/index.jsx b/src/pages/Home/index.jsx
new file mode 100644
index 0000000..625a2bd
--- /dev/null
+++ b/src/pages/Home/index.jsx
@@ -0,0 +1,26 @@
+import React from 'react';
+import Page from 'src/components/Page';
+import AnimatedLogo from 'src/components/AnimatedLogo';
+import { LinksParticles } from 'src/components/ParticlesEffects';
+
+import './style.scss';
+
+const HomePage = () => {
+ return (
+
+
+
+ );
+};
+export default HomePage;
diff --git a/src/pages/HomePage/style.scss b/src/pages/Home/style.scss
similarity index 66%
rename from src/pages/HomePage/style.scss
rename to src/pages/Home/style.scss
index 6fe1950..896f937 100644
--- a/src/pages/HomePage/style.scss
+++ b/src/pages/Home/style.scss
@@ -9,6 +9,15 @@
justify-content: center;
align-items: center;
}
+ &__bg{
+ position: fixed;
+ top:0;
+ left: 0;
+ background: linear-gradient(180deg, rgba(2, 0, 36, 1) 0%, rgba(0, 25, 78, 1) 43%, rgba(0, 54, 139, 1) 100%);
+ width: 100%;
+ height: 100%;
+ z-index: 0;
+ }
}
.animated-logo-container {
diff --git a/src/pages/HomePage/index.jsx b/src/pages/HomePage/index.jsx
deleted file mode 100644
index c613e3c..0000000
--- a/src/pages/HomePage/index.jsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import React, { useCallback } from 'react';
-import { Link } from 'react-router-dom';
-import Layout from 'src/components/Layout';
-import AnimatedLogo from 'src/components/AnimatedLogo';
-import { LinksParticles } from 'src/components/ParticlesEffects';
-
-import './style.scss';
-
-const HomePage = () => {
- return (
-
- );
-};
-export default HomePage;
diff --git a/src/pages/NotFoundPage/index.jsx b/src/pages/NotFound/index.jsx
similarity index 100%
rename from src/pages/NotFoundPage/index.jsx
rename to src/pages/NotFound/index.jsx
diff --git a/src/routes/AppRouter.jsx b/src/routes/AppRouter.jsx
index 73e3926..5023774 100644
--- a/src/routes/AppRouter.jsx
+++ b/src/routes/AppRouter.jsx
@@ -1,78 +1,57 @@
-import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
+import { Navigate, useRoutes, Outlet } from 'react-router-dom';
import useAuth from '../context/AuthContext';
-import HomePage from 'src/pages/HomePage';
-import NotFoundPage from 'src/pages/NotFoundPage';
-import ContentPage from 'src/pages/ContentPage';
-import AddContentPage from 'src/pages/AddContentPage';
-
-import LoginRegisterPage from 'src/pages/LoginRegisterPage';
-import EmailVerifiedPage from 'src/pages/EmailVerifiedPage';
-
-import DashboardPage from 'src/pages/DashboardPage';
-
-const AppRouter = () => {
- return (
-
-
- } />
- } />
- } />
- } />
-
-
-
- }
- />
-
-
-
- }
- />
-
-
-
- }
- />
-
- {' '}
-
-
- }
- />
-
- } />
-
-
- );
-};
-
-const AnonymousRoute = ({ children }) => {
+// layouts
+import MainLayout from 'src/layouts/Main';
+
+import HomePage from 'src/pages/Home';
+import NotFoundPage from 'src/pages/NotFound';
+
+import ContentPage from 'src/pages/Content';
+import AddContentPage from 'src/pages/AddContent';
+
+import BookPage from 'src/pages/Book';
+import EmailVerifiedPage from 'src/pages/EmailVerified';
+
+
+export default function AppRouter() {
+ return useRoutes([
+ {
+ path: '/',
+ element:
,
+ children: [
+ { path: '/', element:
},
+ { path: 'contents/demo', element:
},
+ { path: 'contents/new', element:
},
+ { path: 'contents/mock', element: },
+ { path: '404', element: },
+ {
+ path: '/',
+ element: ,
+ children: [
+ { path: 'login', element: },
+ { path: 'register', element: },
+ { path: '/accounts/confirm-email/:token', element: },
+ ],
+ },
+ ],
+ },
+ { path: '*', element: },
+ ]);
+}
+
+const AnonymousRoute = () => {
const { isLoggedIn } = useAuth();
if (isLoggedIn) {
return ;
}
- return children;
+ return ;
};
-const UserRoute = ({ children }) => {
+const UserRoute = () => {
const { isLoggedIn } = useAuth();
if (!isLoggedIn) {
return ;
}
- return children;
+ return ;
};
-
-export default AppRouter;
diff --git a/src/theme/index.jsx b/src/theme/index.jsx
new file mode 100644
index 0000000..54084d0
--- /dev/null
+++ b/src/theme/index.jsx
@@ -0,0 +1,41 @@
+import PropTypes from 'prop-types';
+import { useMemo } from 'react';
+// material
+import { CssBaseline } from '@mui/material';
+import { ThemeProvider as MUIThemeProvider, createTheme, StyledEngineProvider } from '@mui/material/styles';
+//
+import palette from './palette';
+import typography from './typography';
+import componentsOverride from './overrides';
+import shadows, { customShadows } from './shadows';
+
+// ----------------------------------------------------------------------
+
+ThemeProvider.propTypes = {
+ children: PropTypes.node,
+};
+
+export default function ThemeProvider({ children }) {
+ const themeOptions = useMemo(
+ () => ({
+ palette,
+ shape: { borderRadius: 8 },
+ typography,
+ shadows,
+ customShadows,
+ }),
+ []
+ );
+
+ const theme = createTheme(themeOptions);
+ theme.components = componentsOverride(theme);
+
+ return (
+
+
+
+ {children}
+
+
+ );
+}
diff --git a/src/theme/main.scss b/src/theme/main.scss
index 594f5e6..3c63db3 100644
--- a/src/theme/main.scss
+++ b/src/theme/main.scss
@@ -1,7 +1,6 @@
-@import './colors.scss';
-@import './css_colors';
-@import './settings.scss';
-@import './fonts.scss';
+@import './styles/colors.scss';
+@import './styles/css_colors';
+@import './styles/fonts.scss';
// reset common styles
* {
diff --git a/src/theme/overrides/Autocomplete.jsx b/src/theme/overrides/Autocomplete.jsx
new file mode 100644
index 0000000..0a2db49
--- /dev/null
+++ b/src/theme/overrides/Autocomplete.jsx
@@ -0,0 +1,13 @@
+// ----------------------------------------------------------------------
+
+export default function Autocomplete(theme) {
+ return {
+ MuiAutocomplete: {
+ styleOverrides: {
+ paper: {
+ boxShadow: theme.customShadows.z20,
+ },
+ },
+ },
+ };
+}
diff --git a/src/theme/overrides/Backdrop.jsx b/src/theme/overrides/Backdrop.jsx
new file mode 100644
index 0000000..4ce3278
--- /dev/null
+++ b/src/theme/overrides/Backdrop.jsx
@@ -0,0 +1,26 @@
+import { alpha } from '@mui/material/styles';
+
+// ----------------------------------------------------------------------
+
+export default function Backdrop(theme) {
+ const varLow = alpha(theme.palette.grey[900], 0.48);
+ const varHigh = alpha(theme.palette.grey[900], 1);
+
+ return {
+ MuiBackdrop: {
+ styleOverrides: {
+ root: {
+ background: [
+ `rgb(22,28,36)`,
+ `-moz-linear-gradient(75deg, ${varLow} 0%, ${varHigh} 100%)`,
+ `-webkit-linear-gradient(75deg, ${varLow} 0%, ${varHigh} 100%)`,
+ `linear-gradient(75deg, ${varLow} 0%, ${varHigh} 100%)`,
+ ],
+ '&.MuiBackdrop-invisible': {
+ background: 'transparent',
+ },
+ },
+ },
+ },
+ };
+}
diff --git a/src/theme/overrides/Button.jsx b/src/theme/overrides/Button.jsx
new file mode 100644
index 0000000..0f72b7a
--- /dev/null
+++ b/src/theme/overrides/Button.jsx
@@ -0,0 +1,42 @@
+// ----------------------------------------------------------------------
+
+export default function Button(theme) {
+ return {
+ MuiButton: {
+ styleOverrides: {
+ root: {
+ '&:hover': {
+ boxShadow: 'none',
+ },
+ },
+ sizeLarge: {
+ height: 48,
+ },
+ containedInherit: {
+ color: theme.palette.grey[800],
+ boxShadow: theme.customShadows.z8,
+ '&:hover': {
+ backgroundColor: theme.palette.grey[400],
+ },
+ },
+ containedPrimary: {
+ boxShadow: theme.customShadows.primary,
+ },
+ containedSecondary: {
+ boxShadow: theme.customShadows.secondary,
+ },
+ outlinedInherit: {
+ border: `1px solid ${theme.palette.grey[500_32]}`,
+ '&:hover': {
+ backgroundColor: theme.palette.action.hover,
+ },
+ },
+ textInherit: {
+ '&:hover': {
+ backgroundColor: theme.palette.action.hover,
+ },
+ },
+ },
+ },
+ };
+}
diff --git a/src/theme/overrides/Card.jsx b/src/theme/overrides/Card.jsx
new file mode 100644
index 0000000..12b2465
--- /dev/null
+++ b/src/theme/overrides/Card.jsx
@@ -0,0 +1,34 @@
+// ----------------------------------------------------------------------
+
+export default function Card(theme) {
+ return {
+ MuiCard: {
+ styleOverrides: {
+ root: {
+ boxShadow: theme.shadows[2],
+ borderRadius: Number(theme.shape.borderRadius) * 2,
+ position: 'relative',
+ zIndex: 0, // Fix Safari overflow: hidden with border radius
+ },
+ },
+ },
+ MuiCardHeader: {
+ defaultProps: {
+ titleTypographyProps: { variant: 'h6' },
+ subheaderTypographyProps: { variant: 'body2' },
+ },
+ styleOverrides: {
+ root: {
+ padding: theme.spacing(3, 3, 0),
+ },
+ },
+ },
+ MuiCardContent: {
+ styleOverrides: {
+ root: {
+ padding: theme.spacing(3),
+ },
+ },
+ },
+ };
+}
diff --git a/src/theme/overrides/CssBaseline.jsx b/src/theme/overrides/CssBaseline.jsx
new file mode 100644
index 0000000..2840f9c
--- /dev/null
+++ b/src/theme/overrides/CssBaseline.jsx
@@ -0,0 +1,23 @@
+// ----------------------------------------------------------------------
+
+export default function CssBaseline() {
+ return {
+ MuiCssBaseline: {
+ styleOverrides: {
+ input: {
+ '&[type=number]': {
+ MozAppearance: 'textfield',
+ '&::-webkit-outer-spin-button': {
+ margin: 0,
+ WebkitAppearance: 'none',
+ },
+ '&::-webkit-inner-spin-button': {
+ margin: 0,
+ WebkitAppearance: 'none',
+ },
+ },
+ }
+ },
+ },
+ };
+}
diff --git a/src/theme/overrides/IconButton.jsx b/src/theme/overrides/IconButton.jsx
new file mode 100644
index 0000000..2a78cc2
--- /dev/null
+++ b/src/theme/overrides/IconButton.jsx
@@ -0,0 +1,22 @@
+// ----------------------------------------------------------------------
+
+export default function IconButton(theme) {
+ return {
+ MuiIconButton: {
+ variants: [
+ {
+ props: { color: 'default' },
+ style: {
+ '&:hover': { backgroundColor: theme.palette.action.hover },
+ },
+ },
+ {
+ props: { color: 'inherit' },
+ style: {
+ '&:hover': { backgroundColor: theme.palette.action.hover },
+ },
+ },
+ ],
+ },
+ };
+}
diff --git a/src/theme/overrides/Input.jsx b/src/theme/overrides/Input.jsx
new file mode 100644
index 0000000..b407608
--- /dev/null
+++ b/src/theme/overrides/Input.jsx
@@ -0,0 +1,65 @@
+// ----------------------------------------------------------------------
+
+export default function Input(theme) {
+ return {
+ MuiInputBase: {
+ styleOverrides: {
+ root: {
+ '&.Mui-disabled': {
+ '& svg': { color: theme.palette.text.disabled },
+ },
+ },
+ input: {
+ '&::placeholder': {
+ opacity: 1,
+ color: theme.palette.text.disabled,
+ },
+ },
+ },
+ },
+ MuiInput: {
+ styleOverrides: {
+ underline: {
+ '&:before': {
+ borderBottomColor: theme.palette.grey[500_56],
+ },
+ },
+ },
+ },
+ MuiFilledInput: {
+ styleOverrides: {
+ root: {
+ backgroundColor: theme.palette.grey[500_12],
+ '&:hover': {
+ backgroundColor: theme.palette.grey[500_16],
+ },
+ '&.Mui-focused': {
+ backgroundColor: theme.palette.action.focus,
+ },
+ '&.Mui-disabled': {
+ backgroundColor: theme.palette.action.disabledBackground,
+ },
+ },
+ underline: {
+ '&:before': {
+ borderBottomColor: theme.palette.grey[500_56],
+ },
+ },
+ },
+ },
+ MuiOutlinedInput: {
+ styleOverrides: {
+ root: {
+ '& .MuiOutlinedInput-notchedOutline': {
+ borderColor: theme.palette.grey[500_32],
+ },
+ '&.Mui-disabled': {
+ '& .MuiOutlinedInput-notchedOutline': {
+ borderColor: theme.palette.action.disabledBackground,
+ },
+ },
+ },
+ },
+ },
+ };
+}
diff --git a/src/theme/overrides/Lists.jsx b/src/theme/overrides/Lists.jsx
new file mode 100644
index 0000000..2ef1abc
--- /dev/null
+++ b/src/theme/overrides/Lists.jsx
@@ -0,0 +1,35 @@
+// ----------------------------------------------------------------------
+
+export default function Lists(theme) {
+ return {
+ MuiListItemIcon: {
+ styleOverrides: {
+ root: {
+ color: 'inherit',
+ minWidth: 'auto',
+ marginRight: theme.spacing(2),
+ },
+ },
+ },
+ MuiListItemAvatar: {
+ styleOverrides: {
+ root: {
+ minWidth: 'auto',
+ marginRight: theme.spacing(2),
+ },
+ },
+ },
+ MuiListItemText: {
+ styleOverrides: {
+ root: {
+ marginTop: 0,
+ marginBottom: 0,
+ },
+ multiline: {
+ marginTop: 0,
+ marginBottom: 0,
+ },
+ },
+ },
+ };
+}
diff --git a/src/theme/overrides/Paper.jsx b/src/theme/overrides/Paper.jsx
new file mode 100644
index 0000000..333d837
--- /dev/null
+++ b/src/theme/overrides/Paper.jsx
@@ -0,0 +1,17 @@
+// ----------------------------------------------------------------------
+
+export default function Paper() {
+ return {
+ MuiPaper: {
+ defaultProps: {
+ elevation: 0,
+ },
+
+ styleOverrides: {
+ root: {
+ backgroundImage: 'none',
+ },
+ },
+ },
+ };
+}
diff --git a/src/theme/overrides/Tooltip.jsx b/src/theme/overrides/Tooltip.jsx
new file mode 100644
index 0000000..c93a93c
--- /dev/null
+++ b/src/theme/overrides/Tooltip.jsx
@@ -0,0 +1,16 @@
+// ----------------------------------------------------------------------
+
+export default function Tooltip(theme) {
+ return {
+ MuiTooltip: {
+ styleOverrides: {
+ tooltip: {
+ backgroundColor: theme.palette.grey[800],
+ },
+ arrow: {
+ color: theme.palette.grey[800],
+ },
+ },
+ },
+ };
+}
diff --git a/src/theme/overrides/Typography.jsx b/src/theme/overrides/Typography.jsx
new file mode 100644
index 0000000..9ed4205
--- /dev/null
+++ b/src/theme/overrides/Typography.jsx
@@ -0,0 +1,16 @@
+// ----------------------------------------------------------------------
+
+export default function Typography(theme) {
+ return {
+ MuiTypography: {
+ styleOverrides: {
+ paragraph: {
+ marginBottom: theme.spacing(2),
+ },
+ gutterBottom: {
+ marginBottom: theme.spacing(1),
+ },
+ },
+ },
+ };
+}
diff --git a/src/theme/overrides/index.jsx b/src/theme/overrides/index.jsx
new file mode 100644
index 0000000..16f3b03
--- /dev/null
+++ b/src/theme/overrides/index.jsx
@@ -0,0 +1,27 @@
+//
+
+import Card from './Card';
+import Paper from './Paper';
+import Input from './Input';
+import Button from './Button';
+import Tooltip from './Tooltip';
+import Backdrop from './Backdrop';
+import Typography from './Typography';
+import CssBaseline from './CssBaseline';
+import Autocomplete from './Autocomplete';
+
+// ----------------------------------------------------------------------
+
+export default function ComponentsOverrides(theme) {
+ return Object.assign(
+ Card(theme),
+ Input(theme),
+ Paper(theme),
+ Button(theme),
+ Tooltip(theme),
+ Backdrop(theme),
+ Typography(theme),
+ CssBaseline(theme),
+ Autocomplete(theme)
+ );
+}
diff --git a/src/theme/palette.jsx b/src/theme/palette.jsx
new file mode 100644
index 0000000..d13158a
--- /dev/null
+++ b/src/theme/palette.jsx
@@ -0,0 +1,127 @@
+import { alpha } from '@mui/material/styles';
+
+// ----------------------------------------------------------------------
+
+function createGradient(color1, color2) {
+ return `linear-gradient(to bottom, ${color1}, ${color2})`;
+}
+
+// SETUP COLORS
+const GREY = {
+ 0: '#FFFFFF',
+ 100: '#F9FAFB',
+ 200: '#F4F6F8',
+ 300: '#DFE3E8',
+ 400: '#C4CDD5',
+ 500: '#919EAB',
+ 600: '#637381',
+ 700: '#454F5B',
+ 800: '#212B36',
+ 900: '#161C24',
+ 500_8: alpha('#919EAB', 0.08),
+ 500_12: alpha('#919EAB', 0.12),
+ 500_16: alpha('#919EAB', 0.16),
+ 500_24: alpha('#919EAB', 0.24),
+ 500_32: alpha('#919EAB', 0.32),
+ 500_48: alpha('#919EAB', 0.48),
+ 500_56: alpha('#919EAB', 0.56),
+ 500_80: alpha('#919EAB', 0.8),
+};
+
+const PRIMARY = {
+ lighter: '#D1E9FC',
+ light: '#76B0F1',
+ main: '#2065D1',
+ dark: '#103996',
+ darker: '#061B64',
+ contrastText: '#fff',
+};
+
+const SECONDARY = {
+ lighter: '#D6E4FF',
+ light: '#84A9FF',
+ main: '#3366FF',
+ dark: '#1939B7',
+ darker: '#091A7A',
+ contrastText: '#fff',
+};
+
+const INFO = {
+ lighter: '#D0F2FF',
+ light: '#74CAFF',
+ main: '#1890FF',
+ dark: '#0C53B7',
+ darker: '#04297A',
+ contrastText: '#fff',
+};
+
+const SUCCESS = {
+ lighter: '#E9FCD4',
+ light: '#AAF27F',
+ main: '#54D62C',
+ dark: '#229A16',
+ darker: '#08660D',
+ contrastText: GREY[800],
+};
+
+const WARNING = {
+ lighter: '#FFF7CD',
+ light: '#FFE16A',
+ main: '#FFC107',
+ dark: '#B78103',
+ darker: '#7A4F01',
+ contrastText: GREY[800],
+};
+
+const ERROR = {
+ lighter: '#FFE7D9',
+ light: '#FFA48D',
+ main: '#FF4842',
+ dark: '#B72136',
+ darker: '#7A0C2E',
+ contrastText: '#fff',
+};
+
+const GRADIENTS = {
+ primary: createGradient(PRIMARY.light, PRIMARY.main),
+ info: createGradient(INFO.light, INFO.main),
+ success: createGradient(SUCCESS.light, SUCCESS.main),
+ warning: createGradient(WARNING.light, WARNING.main),
+ error: createGradient(ERROR.light, ERROR.main),
+};
+
+const CHART_COLORS = {
+ violet: ['#826AF9', '#9E86FF', '#D0AEFF', '#F7D2FF'],
+ blue: ['#2D99FF', '#83CFFF', '#A5F3FF', '#CCFAFF'],
+ green: ['#2CD9C5', '#60F1C8', '#A4F7CC', '#C0F2DC'],
+ yellow: ['#FFE700', '#FFEF5A', '#FFF7AE', '#FFF3D6'],
+ red: ['#FF6C40', '#FF8F6D', '#FFBD98', '#FFF2D4'],
+};
+
+const palette = {
+ common: { black: '#000', white: '#fff' },
+ primary: { ...PRIMARY },
+ secondary: { ...SECONDARY },
+ info: { ...INFO },
+ success: { ...SUCCESS },
+ warning: { ...WARNING },
+ error: { ...ERROR },
+ grey: GREY,
+ gradients: GRADIENTS,
+ chart: CHART_COLORS,
+ divider: GREY[500_24],
+ text: { primary: GREY[800], secondary: GREY[600], disabled: GREY[500] },
+ background: { paper: '#fff', default: GREY[100], neutral: GREY[200] },
+ action: {
+ active: GREY[600],
+ hover: GREY[500_8],
+ selected: GREY[500_16],
+ disabled: GREY[500_80],
+ disabledBackground: GREY[500_24],
+ focus: GREY[500_24],
+ hoverOpacity: 0.08,
+ disabledOpacity: 0.48,
+ },
+};
+
+export default palette;
diff --git a/src/theme/settings.scss b/src/theme/settings.scss
deleted file mode 100644
index b366eee..0000000
--- a/src/theme/settings.scss
+++ /dev/null
@@ -1 +0,0 @@
-$mobile-breakpoint: 768px;
diff --git a/src/theme/shadows.jsx b/src/theme/shadows.jsx
new file mode 100644
index 0000000..24686a7
--- /dev/null
+++ b/src/theme/shadows.jsx
@@ -0,0 +1,65 @@
+// material
+import { alpha } from '@mui/material/styles';
+import palette from './palette';
+
+// ----------------------------------------------------------------------
+
+const LIGHT_MODE = palette.grey[500];
+
+const createShadow = (color) => {
+ const transparent1 = alpha(color, 0.2);
+ const transparent2 = alpha(color, 0.14);
+ const transparent3 = alpha(color, 0.12);
+ return [
+ 'none',
+ `0px 2px 1px -1px ${transparent1},0px 1px 1px 0px ${transparent2},0px 1px 3px 0px ${transparent3}`,
+ `0px 3px 1px -2px ${transparent1},0px 2px 2px 0px ${transparent2},0px 1px 5px 0px ${transparent3}`,
+ `0px 3px 3px -2px ${transparent1},0px 3px 4px 0px ${transparent2},0px 1px 8px 0px ${transparent3}`,
+ `0px 2px 4px -1px ${transparent1},0px 4px 5px 0px ${transparent2},0px 1px 10px 0px ${transparent3}`,
+ `0px 3px 5px -1px ${transparent1},0px 5px 8px 0px ${transparent2},0px 1px 14px 0px ${transparent3}`,
+ `0px 3px 5px -1px ${transparent1},0px 6px 10px 0px ${transparent2},0px 1px 18px 0px ${transparent3}`,
+ `0px 4px 5px -2px ${transparent1},0px 7px 10px 1px ${transparent2},0px 2px 16px 1px ${transparent3}`,
+ `0px 5px 5px -3px ${transparent1},0px 8px 10px 1px ${transparent2},0px 3px 14px 2px ${transparent3}`,
+ `0px 5px 6px -3px ${transparent1},0px 9px 12px 1px ${transparent2},0px 3px 16px 2px ${transparent3}`,
+ `0px 6px 6px -3px ${transparent1},0px 10px 14px 1px ${transparent2},0px 4px 18px 3px ${transparent3}`,
+ `0px 6px 7px -4px ${transparent1},0px 11px 15px 1px ${transparent2},0px 4px 20px 3px ${transparent3}`,
+ `0px 7px 8px -4px ${transparent1},0px 12px 17px 2px ${transparent2},0px 5px 22px 4px ${transparent3}`,
+ `0px 7px 8px -4px ${transparent1},0px 13px 19px 2px ${transparent2},0px 5px 24px 4px ${transparent3}`,
+ `0px 7px 9px -4px ${transparent1},0px 14px 21px 2px ${transparent2},0px 5px 26px 4px ${transparent3}`,
+ `0px 8px 9px -5px ${transparent1},0px 15px 22px 2px ${transparent2},0px 6px 28px 5px ${transparent3}`,
+ `0px 8px 10px -5px ${transparent1},0px 16px 24px 2px ${transparent2},0px 6px 30px 5px ${transparent3}`,
+ `0px 8px 11px -5px ${transparent1},0px 17px 26px 2px ${transparent2},0px 6px 32px 5px ${transparent3}`,
+ `0px 9px 11px -5px ${transparent1},0px 18px 28px 2px ${transparent2},0px 7px 34px 6px ${transparent3}`,
+ `0px 9px 12px -6px ${transparent1},0px 19px 29px 2px ${transparent2},0px 7px 36px 6px ${transparent3}`,
+ `0px 10px 13px -6px ${transparent1},0px 20px 31px 3px ${transparent2},0px 8px 38px 7px ${transparent3}`,
+ `0px 10px 13px -6px ${transparent1},0px 21px 33px 3px ${transparent2},0px 8px 40px 7px ${transparent3}`,
+ `0px 10px 14px -6px ${transparent1},0px 22px 35px 3px ${transparent2},0px 8px 42px 7px ${transparent3}`,
+ `0px 11px 14px -7px ${transparent1},0px 23px 36px 3px ${transparent2},0px 9px 44px 8px ${transparent3}`,
+ `0px 11px 15px -7px ${transparent1},0px 24px 38px 3px ${transparent2},0px 9px 46px 8px ${transparent3}`,
+ ];
+};
+
+const createCustomShadow = (color) => {
+ const transparent = alpha(color, 0.24);
+
+ return {
+ z1: `0 1px 2px 0 ${transparent}`,
+ z8: `0 8px 16px 0 ${transparent}`,
+ z12: `0 0 2px 0 ${transparent}, 0 12px 24px 0 ${transparent}`,
+ z16: `0 0 2px 0 ${transparent}, 0 16px 32px -4px ${transparent}`,
+ z20: `0 0 2px 0 ${transparent}, 0 20px 40px -4px ${transparent}`,
+ z24: `0 0 4px 0 ${transparent}, 0 24px 48px 0 ${transparent}`,
+ primary: `0 8px 16px 0 ${alpha(palette.primary.main, 0.24)}`,
+ secondary: `0 8px 16px 0 ${alpha(palette.secondary.main, 0.24)}`,
+ info: `0 8px 16px 0 ${alpha(palette.info.main, 0.24)}`,
+ success: `0 8px 16px 0 ${alpha(palette.success.main, 0.24)}`,
+ warning: `0 8px 16px 0 ${alpha(palette.warning.main, 0.24)}`,
+ error: `0 8px 16px 0 ${alpha(palette.error.main, 0.24)}`,
+ };
+};
+
+export const customShadows = createCustomShadow(LIGHT_MODE);
+
+const shadows = createShadow(LIGHT_MODE);
+
+export default shadows;
diff --git a/src/theme/colors.scss b/src/theme/styles/colors.scss
similarity index 100%
rename from src/theme/colors.scss
rename to src/theme/styles/colors.scss
diff --git a/src/theme/css_colors.css b/src/theme/styles/css_colors.css
similarity index 100%
rename from src/theme/css_colors.css
rename to src/theme/styles/css_colors.css
diff --git a/src/theme/fonts.scss b/src/theme/styles/fonts.scss
similarity index 100%
rename from src/theme/fonts.scss
rename to src/theme/styles/fonts.scss
diff --git a/src/theme/theme.js b/src/theme/theme.js
deleted file mode 100644
index eac0f70..0000000
--- a/src/theme/theme.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import { createTheme, responsiveFontSizes } from '@mui/material/styles';
-
-export default responsiveFontSizes(
- createTheme({
- typography: {
- button: {
- textTransform: 'none'
- }
- }
- })
-);
diff --git a/src/theme/typography.jsx b/src/theme/typography.jsx
new file mode 100644
index 0000000..4abab97
--- /dev/null
+++ b/src/theme/typography.jsx
@@ -0,0 +1,101 @@
+// ----------------------------------------------------------------------
+
+function pxToRem(value) {
+ return `${value / 16}rem`;
+}
+
+function responsiveFontSizes({ sm, md, lg }) {
+ return {
+ '@media (min-width:600px)': {
+ fontSize: pxToRem(sm),
+ },
+ '@media (min-width:900px)': {
+ fontSize: pxToRem(md),
+ },
+ '@media (min-width:1200px)': {
+ fontSize: pxToRem(lg),
+ },
+ };
+}
+
+const FONT_PRIMARY = 'Public Sans, sans-serif';
+
+const typography = {
+ fontFamily: FONT_PRIMARY,
+ fontWeightRegular: 400,
+ fontWeightMedium: 600,
+ fontWeightBold: 700,
+ h1: {
+ fontWeight: 700,
+ lineHeight: 80 / 64,
+ fontSize: pxToRem(40),
+ ...responsiveFontSizes({ sm: 52, md: 58, lg: 64 }),
+ },
+ h2: {
+ fontWeight: 700,
+ lineHeight: 64 / 48,
+ fontSize: pxToRem(32),
+ ...responsiveFontSizes({ sm: 40, md: 44, lg: 48 }),
+ },
+ h3: {
+ fontWeight: 700,
+ lineHeight: 1.5,
+ fontSize: pxToRem(24),
+ ...responsiveFontSizes({ sm: 26, md: 30, lg: 32 }),
+ },
+ h4: {
+ fontWeight: 700,
+ lineHeight: 1.5,
+ fontSize: pxToRem(20),
+ ...responsiveFontSizes({ sm: 20, md: 24, lg: 24 }),
+ },
+ h5: {
+ fontWeight: 700,
+ lineHeight: 1.5,
+ fontSize: pxToRem(18),
+ ...responsiveFontSizes({ sm: 19, md: 20, lg: 20 }),
+ },
+ h6: {
+ fontWeight: 700,
+ lineHeight: 28 / 18,
+ fontSize: pxToRem(17),
+ ...responsiveFontSizes({ sm: 18, md: 18, lg: 18 }),
+ },
+ subtitle1: {
+ fontWeight: 600,
+ lineHeight: 1.5,
+ fontSize: pxToRem(16),
+ },
+ subtitle2: {
+ fontWeight: 600,
+ lineHeight: 22 / 14,
+ fontSize: pxToRem(14),
+ },
+ body1: {
+ lineHeight: 1.5,
+ fontSize: pxToRem(16),
+ },
+ body2: {
+ lineHeight: 22 / 14,
+ fontSize: pxToRem(14),
+ },
+ caption: {
+ lineHeight: 1.5,
+ fontSize: pxToRem(12),
+ },
+ overline: {
+ fontWeight: 700,
+ lineHeight: 1.5,
+ fontSize: pxToRem(12),
+ letterSpacing: 1.1,
+ textTransform: 'uppercase',
+ },
+ button: {
+ fontWeight: 700,
+ lineHeight: 24 / 14,
+ fontSize: pxToRem(14),
+ textTransform: 'capitalize',
+ },
+};
+
+export default typography;