RC-11-update-config-according-to-ui-kit #3
@@ -1,10 +1,7 @@
|
|||||||
import { fuseDark, skyBlue } from '@fuse/colors';
|
|
||||||
import { blueGrey } from '@mui/material/colors';
|
|
||||||
|
|
||||||
export const lightPaletteText = {
|
export const lightPaletteText = {
|
||||||
primary: 'rgb(17, 24, 39)',
|
primary: '#151B30',
|
||||||
secondary: 'rgb(107, 114, 128)',
|
secondary: '#6D6D6D',
|
||||||
disabled: 'rgb(149, 156, 169)',
|
disabled: '#D9D9D9',
|
||||||
};
|
};
|
||||||
|
|
||||||
export const darkPaletteText = {
|
export const darkPaletteText = {
|
||||||
@@ -22,35 +19,34 @@ const themesConfig = {
|
|||||||
common: {
|
common: {
|
||||||
black: 'rgb(17, 24, 39)',
|
black: 'rgb(17, 24, 39)',
|
||||||
white: 'rgb(255, 255, 255)',
|
white: 'rgb(255, 255, 255)',
|
||||||
|
layout: '#141D39',
|
||||||
|
...lightPaletteText,
|
||||||
},
|
},
|
||||||
primary: {
|
primary: {
|
||||||
light: '#64748b',
|
light: '#64748b',
|
||||||
main: '#1e293b',
|
main: '#F1F5F9',
|
||||||
dark: '#0f172a',
|
dark: '#F1F1FB',
|
||||||
contrastText: darkPaletteText.primary,
|
contrastText: darkPaletteText.primary,
|
||||||
},
|
},
|
||||||
secondary: {
|
secondary: {
|
||||||
light: '#818cf8',
|
light: '#1AD079',
|
||||||
main: '#4f46e5',
|
main: '#4D53FF',
|
||||||
dark: '#3730a3',
|
dark: '#3730a3',
|
||||||
contrastText: darkPaletteText.primary,
|
contrastText: darkPaletteText.primary,
|
||||||
},
|
},
|
||||||
background: {
|
background: {
|
||||||
paper: '#FFFFFF',
|
paper: '#FFFFFF',
|
||||||
authPaper: '#F1F5F9',
|
default: '#F1F5F9',
|
||||||
default: '#f1f5f9',
|
},
|
||||||
|
accept: {
|
||||||
|
light: '#E8FAF2',
|
||||||
|
main: '#10A75F',
|
||||||
},
|
},
|
||||||
error: {
|
error: {
|
||||||
light: '#ffcdd2',
|
light: '#FBEBEA',
|
||||||
main: '#f44336',
|
main: '#D83529',
|
||||||
dark: '#b71c1c',
|
dark: '#b71c1c',
|
||||||
},
|
},
|
||||||
border: {
|
|
||||||
light: '#D9D9D9',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
status: {
|
|
||||||
danger: 'orange',
|
|
||||||
},
|
},
|
||||||
size: {
|
size: {
|
||||||
inputRadius: '10px',
|
inputRadius: '10px',
|
||||||
@@ -79,7 +75,7 @@ const themesConfig = {
|
|||||||
},
|
},
|
||||||
background: {
|
background: {
|
||||||
paper: '#1e293b',
|
paper: '#1e293b',
|
||||||
default: '#111827',
|
default: '#141D39',
|
||||||
},
|
},
|
||||||
error: {
|
error: {
|
||||||
light: '#ffcdd2',
|
light: '#ffcdd2',
|
||||||
@@ -91,816 +87,6 @@ const themesConfig = {
|
|||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
legacy: {
|
|
||||||
palette: {
|
|
||||||
mode: 'light',
|
|
||||||
divider: '#e2e8f0',
|
|
||||||
text: lightPaletteText,
|
|
||||||
common: {
|
|
||||||
black: 'rgb(17, 24, 39)',
|
|
||||||
white: 'rgb(255, 255, 255)',
|
|
||||||
},
|
|
||||||
primary: {
|
|
||||||
light: fuseDark[200],
|
|
||||||
main: fuseDark[500],
|
|
||||||
dark: fuseDark[800],
|
|
||||||
contrastText: darkPaletteText.primary,
|
|
||||||
},
|
|
||||||
secondary: {
|
|
||||||
light: skyBlue[100],
|
|
||||||
main: skyBlue[500],
|
|
||||||
dark: skyBlue[900],
|
|
||||||
contrastText: lightPaletteText.primary,
|
|
||||||
},
|
|
||||||
background: {
|
|
||||||
paper: '#FFFFFF',
|
|
||||||
default: '#f6f7f9',
|
|
||||||
},
|
|
||||||
error: {
|
|
||||||
light: '#ffcdd2',
|
|
||||||
main: '#f44336',
|
|
||||||
dark: '#b71c1c',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
status: {
|
|
||||||
danger: 'orange',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
light1: {
|
|
||||||
palette: {
|
|
||||||
mode: 'light',
|
|
||||||
divider: '#e2e8f0',
|
|
||||||
text: lightPaletteText,
|
|
||||||
primary: {
|
|
||||||
light: '#b3d1d1',
|
|
||||||
main: '#006565',
|
|
||||||
dark: '#003737',
|
|
||||||
contrastText: darkPaletteText.primary,
|
|
||||||
},
|
|
||||||
secondary: {
|
|
||||||
light: '#ffecc0',
|
|
||||||
main: '#FFBE2C',
|
|
||||||
dark: '#ff9910',
|
|
||||||
contrastText: lightPaletteText.primary,
|
|
||||||
},
|
|
||||||
background: {
|
|
||||||
paper: '#FFFFFF',
|
|
||||||
default: '#F0F7F7',
|
|
||||||
},
|
|
||||||
error: {
|
|
||||||
light: '#ffcdd2',
|
|
||||||
main: '#f44336',
|
|
||||||
dark: '#b71c1c',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
status: {
|
|
||||||
danger: 'orange',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
light2: {
|
|
||||||
palette: {
|
|
||||||
mode: 'light',
|
|
||||||
divider: '#e2e8f0',
|
|
||||||
text: lightPaletteText,
|
|
||||||
primary: {
|
|
||||||
light: '#fdf3da',
|
|
||||||
main: '#f8d683',
|
|
||||||
dark: '#f3bc53',
|
|
||||||
contrastText: lightPaletteText.primary,
|
|
||||||
},
|
|
||||||
secondary: {
|
|
||||||
light: '#FADCB3',
|
|
||||||
main: '#F3B25F',
|
|
||||||
dark: '#ec9339',
|
|
||||||
contrastText: lightPaletteText.primary,
|
|
||||||
},
|
|
||||||
background: {
|
|
||||||
paper: '#FAFBFD',
|
|
||||||
default: '#FFFFFF',
|
|
||||||
},
|
|
||||||
error: {
|
|
||||||
light: '#ffcdd2',
|
|
||||||
main: '#f44336',
|
|
||||||
dark: '#b71c1c',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
status: {
|
|
||||||
danger: 'orange',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
light3: {
|
|
||||||
palette: {
|
|
||||||
mode: 'light',
|
|
||||||
divider: '#e2e8f0',
|
|
||||||
text: lightPaletteText,
|
|
||||||
primary: {
|
|
||||||
light: '#D9C8CE',
|
|
||||||
main: '#80485B',
|
|
||||||
dark: '#50212F',
|
|
||||||
contrastText: darkPaletteText.primary,
|
|
||||||
},
|
|
||||||
secondary: {
|
|
||||||
light: '#FFE3BF',
|
|
||||||
main: '#FFB049',
|
|
||||||
dark: '#FF8619',
|
|
||||||
contrastText: lightPaletteText.primary,
|
|
||||||
},
|
|
||||||
background: {
|
|
||||||
paper: '#FFF0DF',
|
|
||||||
default: '#FAFAFE',
|
|
||||||
},
|
|
||||||
error: {
|
|
||||||
light: '#ffcdd2',
|
|
||||||
main: '#f44336',
|
|
||||||
dark: '#b71c1c',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
status: {
|
|
||||||
danger: 'orange',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
light4: {
|
|
||||||
palette: {
|
|
||||||
mode: 'light',
|
|
||||||
divider: '#e2e8f0',
|
|
||||||
text: lightPaletteText,
|
|
||||||
primary: {
|
|
||||||
light: '#CDCCE8',
|
|
||||||
main: '#5854B1',
|
|
||||||
dark: '#2D2988',
|
|
||||||
contrastText: darkPaletteText.primary,
|
|
||||||
},
|
|
||||||
secondary: {
|
|
||||||
light: '#F8EBF2',
|
|
||||||
main: '#E7BDD3',
|
|
||||||
dark: '#D798B7',
|
|
||||||
contrastText: lightPaletteText.primary,
|
|
||||||
},
|
|
||||||
background: {
|
|
||||||
paper: '#FFFFFF',
|
|
||||||
default: '#F6F7FB',
|
|
||||||
},
|
|
||||||
error: {
|
|
||||||
light: '#ffcdd2',
|
|
||||||
main: '#f44336',
|
|
||||||
dark: '#b71c1c',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
status: {
|
|
||||||
danger: 'orange',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
light5: {
|
|
||||||
palette: {
|
|
||||||
mode: 'light',
|
|
||||||
divider: '#e2e8f0',
|
|
||||||
text: lightPaletteText,
|
|
||||||
primary: {
|
|
||||||
light: '#C2C7F1',
|
|
||||||
main: '#3543D0',
|
|
||||||
dark: '#161EB3',
|
|
||||||
contrastText: darkPaletteText.primary,
|
|
||||||
},
|
|
||||||
secondary: {
|
|
||||||
light: '#B3F1FE',
|
|
||||||
main: '#00CFFD',
|
|
||||||
dark: '#00B2FC',
|
|
||||||
contrastText: lightPaletteText.primary,
|
|
||||||
},
|
|
||||||
background: {
|
|
||||||
paper: '#FFFFFF',
|
|
||||||
default: '#F7FAFF',
|
|
||||||
},
|
|
||||||
error: {
|
|
||||||
light: '#ffcdd2',
|
|
||||||
main: '#f44336',
|
|
||||||
dark: '#b71c1c',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
status: {
|
|
||||||
danger: 'orange',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
light6: {
|
|
||||||
palette: {
|
|
||||||
mode: 'light',
|
|
||||||
divider: '#e2e8f0',
|
|
||||||
text: lightPaletteText,
|
|
||||||
primary: {
|
|
||||||
light: '#BBE2DA',
|
|
||||||
main: '#1B9E85',
|
|
||||||
dark: '#087055',
|
|
||||||
contrastText: darkPaletteText.primary,
|
|
||||||
},
|
|
||||||
secondary: {
|
|
||||||
light: '#FFD0C1',
|
|
||||||
main: '#FF6231',
|
|
||||||
dark: '#FF3413',
|
|
||||||
contrastText: darkPaletteText.primary,
|
|
||||||
},
|
|
||||||
background: {
|
|
||||||
paper: '#FFFFFF',
|
|
||||||
default: '#F2F8F1',
|
|
||||||
},
|
|
||||||
error: {
|
|
||||||
light: '#ffcdd2',
|
|
||||||
main: '#f44336',
|
|
||||||
dark: '#b71c1c',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
status: {
|
|
||||||
danger: 'orange',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
light7: {
|
|
||||||
palette: {
|
|
||||||
mode: 'light',
|
|
||||||
divider: '#e2e8f0',
|
|
||||||
text: lightPaletteText,
|
|
||||||
primary: {
|
|
||||||
light: '#BFC4E6',
|
|
||||||
main: '#2A3BAB',
|
|
||||||
dark: '#0F1980',
|
|
||||||
contrastText: darkPaletteText.primary,
|
|
||||||
},
|
|
||||||
secondary: {
|
|
||||||
light: '#C2ECF0',
|
|
||||||
main: '#33C1CD',
|
|
||||||
dark: '#149EAE',
|
|
||||||
contrastText: lightPaletteText.primary,
|
|
||||||
},
|
|
||||||
background: {
|
|
||||||
paper: '#FFFFFF',
|
|
||||||
default: '#EDF0F6',
|
|
||||||
},
|
|
||||||
error: {
|
|
||||||
light: '#ffcdd2',
|
|
||||||
main: '#f44336',
|
|
||||||
dark: '#b71c1c',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
status: {
|
|
||||||
danger: 'orange',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
light8: {
|
|
||||||
palette: {
|
|
||||||
mode: 'light',
|
|
||||||
divider: '#e2e8f0',
|
|
||||||
text: lightPaletteText,
|
|
||||||
primary: {
|
|
||||||
light: '#D2EFF2',
|
|
||||||
main: '#68C8D5',
|
|
||||||
dark: '#3AA7BA',
|
|
||||||
contrastText: lightPaletteText.primary,
|
|
||||||
},
|
|
||||||
secondary: {
|
|
||||||
light: '#FFF2C6',
|
|
||||||
main: '#FED441',
|
|
||||||
dark: '#FDB91C',
|
|
||||||
contrastText: lightPaletteText.primary,
|
|
||||||
},
|
|
||||||
background: {
|
|
||||||
paper: '#FAF6F3',
|
|
||||||
default: '#FFFFFF',
|
|
||||||
},
|
|
||||||
error: {
|
|
||||||
light: '#ffcdd2',
|
|
||||||
main: '#f44336',
|
|
||||||
dark: '#b71c1c',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
status: {
|
|
||||||
danger: 'orange',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
light9: {
|
|
||||||
palette: {
|
|
||||||
mode: 'light',
|
|
||||||
divider: '#e2e8f0',
|
|
||||||
text: lightPaletteText,
|
|
||||||
primary: {
|
|
||||||
light: '#D3C0CD',
|
|
||||||
main: '#6B2C57',
|
|
||||||
dark: '#3C102C',
|
|
||||||
contrastText: darkPaletteText.primary,
|
|
||||||
},
|
|
||||||
secondary: {
|
|
||||||
light: '#FDEAC9',
|
|
||||||
main: '#F9B84B',
|
|
||||||
dark: '#F59123',
|
|
||||||
contrastText: lightPaletteText.primary,
|
|
||||||
},
|
|
||||||
background: {
|
|
||||||
paper: '#FFFFFF',
|
|
||||||
default: '#FAFAFE',
|
|
||||||
},
|
|
||||||
error: {
|
|
||||||
light: '#ffcdd2',
|
|
||||||
main: '#f44336',
|
|
||||||
dark: '#b71c1c',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
status: {
|
|
||||||
danger: 'orange',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
light10: {
|
|
||||||
palette: {
|
|
||||||
mode: 'light',
|
|
||||||
divider: '#e2e8f0',
|
|
||||||
text: lightPaletteText,
|
|
||||||
primary: {
|
|
||||||
light: '#C6C9CD',
|
|
||||||
main: '#404B57',
|
|
||||||
dark: '#1C232C',
|
|
||||||
contrastText: darkPaletteText.primary,
|
|
||||||
},
|
|
||||||
secondary: {
|
|
||||||
light: '#FEEDC7',
|
|
||||||
main: '#FCC344',
|
|
||||||
dark: '#FAA11F',
|
|
||||||
contrastText: lightPaletteText.primary,
|
|
||||||
},
|
|
||||||
background: {
|
|
||||||
paper: '#FFFFFF',
|
|
||||||
default: '#F5F4F6',
|
|
||||||
},
|
|
||||||
error: {
|
|
||||||
light: '#ffcdd2',
|
|
||||||
main: '#f44336',
|
|
||||||
dark: '#b71c1c',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
status: {
|
|
||||||
danger: 'orange',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
light11: {
|
|
||||||
palette: {
|
|
||||||
mode: 'light',
|
|
||||||
divider: '#e2e8f0',
|
|
||||||
text: lightPaletteText,
|
|
||||||
primary: {
|
|
||||||
light: '#C4C4C4',
|
|
||||||
main: '#3A3A3A',
|
|
||||||
dark: '#181818',
|
|
||||||
contrastText: darkPaletteText.primary,
|
|
||||||
},
|
|
||||||
secondary: {
|
|
||||||
light: '#EFEFED',
|
|
||||||
main: '#CBCAC3',
|
|
||||||
dark: '#ACABA1',
|
|
||||||
contrastText: lightPaletteText.primary,
|
|
||||||
},
|
|
||||||
background: {
|
|
||||||
paper: '#EFEEE7',
|
|
||||||
default: '#FAF8F2',
|
|
||||||
},
|
|
||||||
error: {
|
|
||||||
light: '#F7EAEA',
|
|
||||||
main: '#EBCECE',
|
|
||||||
dark: '#E3B9B9',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
status: {
|
|
||||||
danger: 'yellow',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
light12: {
|
|
||||||
palette: {
|
|
||||||
mode: 'light',
|
|
||||||
divider: '#e2e8f0',
|
|
||||||
text: lightPaletteText,
|
|
||||||
primary: {
|
|
||||||
light: '#FFFAF6',
|
|
||||||
main: '#FFEDE2',
|
|
||||||
dark: '#FFE0CF',
|
|
||||||
contrastText: lightPaletteText.primary,
|
|
||||||
},
|
|
||||||
secondary: {
|
|
||||||
light: '#DBD8F7',
|
|
||||||
main: '#887CE3',
|
|
||||||
dark: '#584CD0',
|
|
||||||
contrastText: darkPaletteText.primary,
|
|
||||||
},
|
|
||||||
background: {
|
|
||||||
paper: '#FFFFFF',
|
|
||||||
default: '#FCF8F5',
|
|
||||||
},
|
|
||||||
error: {
|
|
||||||
light: '#ffcdd2',
|
|
||||||
main: '#f44336',
|
|
||||||
dark: '#b71c1c',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
status: {
|
|
||||||
danger: 'orange',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
dark1: {
|
|
||||||
palette: {
|
|
||||||
mode: 'dark',
|
|
||||||
divider: 'rgba(241,245,249,.12)',
|
|
||||||
text: darkPaletteText,
|
|
||||||
primary: {
|
|
||||||
light: '#C2C2C3',
|
|
||||||
main: '#323338',
|
|
||||||
dark: '#131417',
|
|
||||||
contrastText: darkPaletteText.primary,
|
|
||||||
},
|
|
||||||
secondary: {
|
|
||||||
light: '#B8E1D9',
|
|
||||||
main: '#129B7F',
|
|
||||||
dark: '#056D4F',
|
|
||||||
contrastText: darkPaletteText.primary,
|
|
||||||
},
|
|
||||||
background: {
|
|
||||||
paper: '#262526',
|
|
||||||
default: '#1E1D1E',
|
|
||||||
},
|
|
||||||
error: {
|
|
||||||
light: '#ffcdd2',
|
|
||||||
main: '#f44336',
|
|
||||||
dark: '#b71c1c',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
status: {
|
|
||||||
danger: 'orange',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
dark2: {
|
|
||||||
palette: {
|
|
||||||
mode: 'dark',
|
|
||||||
divider: 'rgba(241,245,249,.12)',
|
|
||||||
text: darkPaletteText,
|
|
||||||
primary: {
|
|
||||||
light: '#C9CACE',
|
|
||||||
main: '#4B4F5A',
|
|
||||||
dark: '#23262E',
|
|
||||||
contrastText: darkPaletteText.primary,
|
|
||||||
},
|
|
||||||
secondary: {
|
|
||||||
light: '#F8F5F2',
|
|
||||||
main: '#E6DED5',
|
|
||||||
dark: '#D5C8BA',
|
|
||||||
contrastText: lightPaletteText.primary,
|
|
||||||
},
|
|
||||||
background: {
|
|
||||||
paper: '#31343E',
|
|
||||||
default: '#2A2D35',
|
|
||||||
},
|
|
||||||
error: {
|
|
||||||
light: '#F7EAEA',
|
|
||||||
main: '#EBCECE',
|
|
||||||
dark: '#E3B9B9',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
status: {
|
|
||||||
danger: 'orange',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
dark3: {
|
|
||||||
palette: {
|
|
||||||
mode: 'dark',
|
|
||||||
divider: 'rgba(241,245,249,.12)',
|
|
||||||
text: darkPaletteText,
|
|
||||||
primary: {
|
|
||||||
light: '#C2C8D2',
|
|
||||||
main: '#354968',
|
|
||||||
dark: '#16213A',
|
|
||||||
contrastText: darkPaletteText.primary,
|
|
||||||
},
|
|
||||||
secondary: {
|
|
||||||
light: '#F4CFCA',
|
|
||||||
main: '#D55847',
|
|
||||||
dark: '#C03325',
|
|
||||||
contrastText: darkPaletteText.primary,
|
|
||||||
},
|
|
||||||
background: {
|
|
||||||
paper: '#23354E',
|
|
||||||
default: '#1B2A3F',
|
|
||||||
},
|
|
||||||
error: {
|
|
||||||
light: '#ffcdd2',
|
|
||||||
main: '#f44336',
|
|
||||||
dark: '#b71c1c',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
status: {
|
|
||||||
danger: 'orange',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
dark4: {
|
|
||||||
palette: {
|
|
||||||
mode: 'dark',
|
|
||||||
divider: 'rgba(241,245,249,.12)',
|
|
||||||
text: darkPaletteText,
|
|
||||||
primary: {
|
|
||||||
light: '#CECADF',
|
|
||||||
main: '#5A4E93',
|
|
||||||
dark: '#2E2564',
|
|
||||||
contrastText: darkPaletteText.primary,
|
|
||||||
},
|
|
||||||
secondary: {
|
|
||||||
light: '#B3EBD6',
|
|
||||||
main: '#00BC77',
|
|
||||||
dark: '#009747',
|
|
||||||
contrastText: darkPaletteText.primary,
|
|
||||||
},
|
|
||||||
background: {
|
|
||||||
paper: '#22184B',
|
|
||||||
default: '#180F3D',
|
|
||||||
},
|
|
||||||
error: {
|
|
||||||
light: '#ffcdd2',
|
|
||||||
main: '#f44336',
|
|
||||||
dark: '#b71c1c',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
status: {
|
|
||||||
danger: 'orange',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
dark5: {
|
|
||||||
palette: {
|
|
||||||
mode: 'dark',
|
|
||||||
divider: 'rgba(241,245,249,.12)',
|
|
||||||
text: darkPaletteText,
|
|
||||||
primary: {
|
|
||||||
light: '#CCD7E2',
|
|
||||||
main: '#56789D',
|
|
||||||
dark: '#2B486F',
|
|
||||||
contrastText: darkPaletteText.primary,
|
|
||||||
},
|
|
||||||
secondary: {
|
|
||||||
light: '#D7D3ED',
|
|
||||||
main: '#796CC4',
|
|
||||||
dark: '#493DA2',
|
|
||||||
contrastText: darkPaletteText.primary,
|
|
||||||
},
|
|
||||||
background: {
|
|
||||||
paper: '#465261',
|
|
||||||
default: '#232931',
|
|
||||||
},
|
|
||||||
error: {
|
|
||||||
light: '#ffcdd2',
|
|
||||||
main: '#f44336',
|
|
||||||
dark: '#b71c1c',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
status: {
|
|
||||||
danger: 'orange',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
dark6: {
|
|
||||||
palette: {
|
|
||||||
mode: 'dark',
|
|
||||||
divider: 'rgba(241,245,249,.12)',
|
|
||||||
text: darkPaletteText,
|
|
||||||
primary: {
|
|
||||||
light: '#FFC7CE',
|
|
||||||
main: '#FF445D',
|
|
||||||
dark: '#FF1F30',
|
|
||||||
contrastText: darkPaletteText.primary,
|
|
||||||
},
|
|
||||||
secondary: {
|
|
||||||
light: '#B4E3FB',
|
|
||||||
main: '#05A2F3',
|
|
||||||
dark: '#0175EA',
|
|
||||||
contrastText: darkPaletteText.primary,
|
|
||||||
},
|
|
||||||
background: {
|
|
||||||
paper: '#2F3438',
|
|
||||||
default: '#25292E',
|
|
||||||
},
|
|
||||||
error: {
|
|
||||||
light: '#ffcdd2',
|
|
||||||
main: '#f44336',
|
|
||||||
dark: '#b71c1c',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
status: {
|
|
||||||
danger: 'orange',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
dark7: {
|
|
||||||
palette: {
|
|
||||||
mode: 'dark',
|
|
||||||
divider: 'rgba(241,245,249,.12)',
|
|
||||||
text: darkPaletteText,
|
|
||||||
primary: {
|
|
||||||
light: 'FFECC5',
|
|
||||||
main: '#FEBE3E',
|
|
||||||
dark: '#FD991B',
|
|
||||||
contrastText: lightPaletteText.primary,
|
|
||||||
},
|
|
||||||
secondary: {
|
|
||||||
light: '#FFC8C7',
|
|
||||||
main: '#FE4644',
|
|
||||||
dark: '#FD201F',
|
|
||||||
contrastText: lightPaletteText.primary,
|
|
||||||
},
|
|
||||||
background: {
|
|
||||||
paper: '#2A2E32',
|
|
||||||
default: '#212529',
|
|
||||||
},
|
|
||||||
error: {
|
|
||||||
light: '#ffcdd2',
|
|
||||||
main: '#f44336',
|
|
||||||
dark: '#b71c1c',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
status: {
|
|
||||||
danger: 'orange',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
dark8: {
|
|
||||||
palette: {
|
|
||||||
mode: 'dark',
|
|
||||||
divider: 'rgba(241,245,249,.12)',
|
|
||||||
text: darkPaletteText,
|
|
||||||
primary: {
|
|
||||||
light: '#BEBFC8',
|
|
||||||
main: '#252949',
|
|
||||||
dark: '#0D0F21',
|
|
||||||
contrastText: darkPaletteText.primary,
|
|
||||||
},
|
|
||||||
secondary: {
|
|
||||||
light: '#CBD7FE',
|
|
||||||
main: '#5079FC',
|
|
||||||
dark: '#2749FA',
|
|
||||||
contrastText: darkPaletteText.primary,
|
|
||||||
},
|
|
||||||
background: {
|
|
||||||
paper: '#2D3159',
|
|
||||||
default: '#202441',
|
|
||||||
},
|
|
||||||
error: {
|
|
||||||
light: '#ffcdd2',
|
|
||||||
main: '#f44336',
|
|
||||||
dark: '#b71c1c',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
status: {
|
|
||||||
danger: 'orange',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
dark9: {
|
|
||||||
palette: {
|
|
||||||
mode: 'dark',
|
|
||||||
divider: 'rgba(241,245,249,.12)',
|
|
||||||
text: darkPaletteText,
|
|
||||||
primary: {
|
|
||||||
light: '#BCC8CD',
|
|
||||||
main: '#204657',
|
|
||||||
dark: '#0B202C',
|
|
||||||
contrastText: darkPaletteText.primary,
|
|
||||||
},
|
|
||||||
secondary: {
|
|
||||||
light: '#B3EBC5',
|
|
||||||
main: '#00BD3E',
|
|
||||||
dark: '#00981B',
|
|
||||||
contrastText: darkPaletteText.primary,
|
|
||||||
},
|
|
||||||
background: {
|
|
||||||
paper: '#1C1E27',
|
|
||||||
default: '#15171E',
|
|
||||||
},
|
|
||||||
error: {
|
|
||||||
light: '#ffcdd2',
|
|
||||||
main: '#f44336',
|
|
||||||
dark: '#b71c1c',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
status: {
|
|
||||||
danger: 'orange',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
dark10: {
|
|
||||||
palette: {
|
|
||||||
mode: 'dark',
|
|
||||||
divider: 'rgba(241,245,249,.12)',
|
|
||||||
text: darkPaletteText,
|
|
||||||
primary: {
|
|
||||||
light: '#C3C2D2',
|
|
||||||
main: '#36336A',
|
|
||||||
dark: '#16143C',
|
|
||||||
contrastText: darkPaletteText.primary,
|
|
||||||
},
|
|
||||||
secondary: {
|
|
||||||
light: '#D6CEFC',
|
|
||||||
main: '#765CF5',
|
|
||||||
dark: '#4630EE',
|
|
||||||
contrastText: darkPaletteText.primary,
|
|
||||||
},
|
|
||||||
background: {
|
|
||||||
paper: '#2D2A5D',
|
|
||||||
default: '#26244E',
|
|
||||||
},
|
|
||||||
error: {
|
|
||||||
light: '#ffcdd2',
|
|
||||||
main: '#f44336',
|
|
||||||
dark: '#b71c1c',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
status: {
|
|
||||||
danger: 'orange',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
dark11: {
|
|
||||||
palette: {
|
|
||||||
mode: 'dark',
|
|
||||||
divider: 'rgba(241,245,249,.12)',
|
|
||||||
text: darkPaletteText,
|
|
||||||
primary: {
|
|
||||||
light: '#BFB7BF',
|
|
||||||
main: '#2A0F29',
|
|
||||||
dark: '#0F040F',
|
|
||||||
contrastText: darkPaletteText.primary,
|
|
||||||
},
|
|
||||||
secondary: {
|
|
||||||
light: '#D9B9C3',
|
|
||||||
main: '#801737',
|
|
||||||
dark: '#500716',
|
|
||||||
contrastText: darkPaletteText.primary,
|
|
||||||
},
|
|
||||||
background: {
|
|
||||||
paper: '#200D1F',
|
|
||||||
default: '#2D132C',
|
|
||||||
},
|
|
||||||
error: {
|
|
||||||
light: '#ffcdd2',
|
|
||||||
main: '#f44336',
|
|
||||||
dark: '#b71c1c',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
status: {
|
|
||||||
danger: 'orange',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
dark12: {
|
|
||||||
palette: {
|
|
||||||
mode: 'dark',
|
|
||||||
divider: 'rgba(241,245,249,.12)',
|
|
||||||
text: darkPaletteText,
|
|
||||||
primary: {
|
|
||||||
light: '#CCC3C8',
|
|
||||||
main: '#543847',
|
|
||||||
dark: '#291720',
|
|
||||||
contrastText: darkPaletteText.primary,
|
|
||||||
},
|
|
||||||
secondary: {
|
|
||||||
light: '#DFB8BD',
|
|
||||||
main: '#BE717A',
|
|
||||||
dark: '#99424A',
|
|
||||||
contrastText: lightPaletteText.primary,
|
|
||||||
},
|
|
||||||
background: {
|
|
||||||
paper: '#4D4351',
|
|
||||||
default: '#27141F',
|
|
||||||
},
|
|
||||||
error: {
|
|
||||||
light: '#ffcdd2',
|
|
||||||
main: '#f44336',
|
|
||||||
dark: '#b71c1c',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
status: {
|
|
||||||
danger: 'orange',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
greyDark: {
|
|
||||||
palette: {
|
|
||||||
mode: 'dark',
|
|
||||||
divider: 'rgba(241,245,249,.12)',
|
|
||||||
text: darkPaletteText,
|
|
||||||
primary: {
|
|
||||||
light: fuseDark[200],
|
|
||||||
main: fuseDark[700],
|
|
||||||
dark: fuseDark[800],
|
|
||||||
contrastText: darkPaletteText.primary,
|
|
||||||
},
|
|
||||||
secondary: {
|
|
||||||
light: skyBlue[100],
|
|
||||||
main: skyBlue[500],
|
|
||||||
dark: skyBlue[900],
|
|
||||||
contrastText: lightPaletteText.primary,
|
|
||||||
},
|
|
||||||
background: {
|
|
||||||
paper: blueGrey[700],
|
|
||||||
default: blueGrey[900],
|
|
||||||
},
|
|
||||||
error: {
|
|
||||||
light: '#ffcdd2',
|
|
||||||
main: '#f44336',
|
|
||||||
dark: '#b71c1c',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
status: {
|
|
||||||
danger: 'orange',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
};
|
};
|
||||||
|
|
||||||
export default themesConfig;
|
export default themesConfig;
|
||||||
|
|||||||
@@ -43,7 +43,7 @@ function ForgotPasswordPage({ t }) {
|
|||||||
|
|
||||||
<Paper
|
<Paper
|
||||||
className="h-full w-full sm:h-auto md:flex md:h-full py-32 px-16 sm:p-48 md:p-40 md:px-96 sm:rounded-2xl md:rounded-none sm:shadow md:shadow-none rtl:border-r-1 ltr:border-l-1"
|
className="h-full w-full sm:h-auto md:flex md:h-full py-32 px-16 sm:p-48 md:p-40 md:px-96 sm:rounded-2xl md:rounded-none sm:shadow md:shadow-none rtl:border-r-1 ltr:border-l-1"
|
||||||
sx={{ background: (theme) => theme.palette.background?.authPaper }}
|
sx={{ background: (theme) => theme.palette.background?.default }}
|
||||||
>
|
>
|
||||||
<div className="w-full mx-auto sm:mx-0">
|
<div className="w-full mx-auto sm:mx-0">
|
||||||
<Typography className="text-4xl font-extrabold tracking-tight leading-tight">
|
<Typography className="text-4xl font-extrabold tracking-tight leading-tight">
|
||||||
@@ -81,7 +81,7 @@ function ForgotPasswordPage({ t }) {
|
|||||||
)}
|
)}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<div className="flex justify-center w-full">
|
<div className="flex flex-col items-center justify-center gap-10 w-full">
|
||||||
<Button
|
<Button
|
||||||
variant="contained"
|
variant="contained"
|
||||||
color="secondary"
|
color="secondary"
|
||||||
@@ -93,11 +93,14 @@ function ForgotPasswordPage({ t }) {
|
|||||||
>
|
>
|
||||||
{t('forgot_password_btn')}
|
{t('forgot_password_btn')}
|
||||||
</Button>
|
</Button>
|
||||||
|
{errors.root?.message && (
|
||||||
|
<p className="text-l text-error-main">{errors.root?.message}</p>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<Typography className="mt-32 font-medium" color="text.secondary">
|
<Typography className="mt-32 font-medium" color="text.secondary">
|
||||||
<span>{t('return')}</span>
|
<span>{t('return')}</span>
|
||||||
<Link className="ml-4 text-indigo-400 underline" to="/sign-in">
|
<Link className="ml-4 text-secondary-main underline" to="/sign-in">
|
||||||
{t('sign_in')}
|
{t('sign_in')}
|
||||||
</Link>
|
</Link>
|
||||||
</Typography>
|
</Typography>
|
||||||
|
|||||||
@@ -6,7 +6,7 @@ function LeftSideCanvas({ title, subtitle, text }) {
|
|||||||
return (
|
return (
|
||||||
<Box
|
<Box
|
||||||
className="h-full min-h-screen relative hidden md:flex flex-auto items-center justify-center p-64 lg:px-112 overflow-hidden max-w-[45vw] w-full"
|
className="h-full min-h-screen relative hidden md:flex flex-auto items-center justify-center p-64 lg:px-112 overflow-hidden max-w-[45vw] w-full"
|
||||||
sx={{ backgroundColor: 'primary.main' }}
|
sx={{ backgroundColor: 'common.layout' }}
|
||||||
>
|
>
|
||||||
<svg
|
<svg
|
||||||
className="absolute inset-0 pointer-events-none"
|
className="absolute inset-0 pointer-events-none"
|
||||||
@@ -30,15 +30,17 @@ function LeftSideCanvas({ title, subtitle, text }) {
|
|||||||
</svg>
|
</svg>
|
||||||
|
|
||||||
<div className="z-10 relative w-full max-w-2xl">
|
<div className="z-10 relative w-full max-w-2xl">
|
||||||
{title && <div className="text-7xl font-bold leading-none text-gray-100">{title}</div>}
|
{title && <div className="text-7xl font-bold leading-none text-primary-light">{title}</div>}
|
||||||
{subtitle && (
|
{subtitle && (
|
||||||
<div className="mt-24 text-lg tracking-tight leading-6 text-gray-400">{subtitle}</div>
|
<div className="mt-24 text-lg tracking-tight leading-6 text-common-disabled">
|
||||||
|
{subtitle}
|
||||||
|
</div>
|
||||||
)}
|
)}
|
||||||
<div className="flex items-center mt-32">
|
<div className="flex items-center mt-32">
|
||||||
<AvatarGroup
|
<AvatarGroup
|
||||||
sx={{
|
sx={{
|
||||||
'& .MuiAvatar-root': {
|
'& .MuiAvatar-root': {
|
||||||
borderColor: 'primary.main',
|
borderColor: 'common.layout',
|
||||||
},
|
},
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
@@ -48,7 +50,9 @@ function LeftSideCanvas({ title, subtitle, text }) {
|
|||||||
<Avatar src="assets/images/avatars/male-16.jpg" />
|
<Avatar src="assets/images/avatars/male-16.jpg" />
|
||||||
</AvatarGroup>
|
</AvatarGroup>
|
||||||
|
|
||||||
{text && <div className="ml-16 font-medium tracking-tight text-gray-400">{text}</div>}
|
{text && (
|
||||||
|
<div className="ml-16 font-medium tracking-tight text-common-disabled">{text}</div>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</Box>
|
</Box>
|
||||||
|
|||||||
@@ -49,7 +49,7 @@ function SignInPage({ t }) {
|
|||||||
|
|
||||||
<Paper
|
<Paper
|
||||||
className="h-full w-full sm:h-auto md:flex md:h-full py-32 px-16 sm:p-48 md:p-40 md:px-96 sm:rounded-2xl md:rounded-none sm:shadow md:shadow-none rtl:border-r-1 ltr:border-l-1"
|
className="h-full w-full sm:h-auto md:flex md:h-full py-32 px-16 sm:p-48 md:p-40 md:px-96 sm:rounded-2xl md:rounded-none sm:shadow md:shadow-none rtl:border-r-1 ltr:border-l-1"
|
||||||
sx={{ background: (theme) => theme.palette.background?.authPaper }}
|
sx={{ background: (theme) => theme.palette.background?.default }}
|
||||||
>
|
>
|
||||||
<div className="w-full mx-auto sm:mx-0">
|
<div className="w-full mx-auto sm:mx-0">
|
||||||
<Typography className="text-4xl font-extrabold tracking-tight leading-tight">
|
<Typography className="text-4xl font-extrabold tracking-tight leading-tight">
|
||||||
@@ -57,7 +57,7 @@ function SignInPage({ t }) {
|
|||||||
</Typography>
|
</Typography>
|
||||||
<div className="flex items-baseline mt-10 font-medium">
|
<div className="flex items-baseline mt-10 font-medium">
|
||||||
<Typography>{t('have_account')}</Typography>
|
<Typography>{t('have_account')}</Typography>
|
||||||
<Link className="ml-4 text-indigo-400 underline" to="/sign-up">
|
<Link className="ml-4 text-secondary-main underline" to="/sign-up">
|
||||||
{t('sign_up')}
|
{t('sign_up')}
|
||||||
</Link>
|
</Link>
|
||||||
</div>
|
</div>
|
||||||
@@ -126,7 +126,9 @@ function SignInPage({ t }) {
|
|||||||
control={
|
control={
|
||||||
<Checkbox
|
<Checkbox
|
||||||
{...field}
|
{...field}
|
||||||
sx={{ color: (theme) => theme.palette.border.light }}
|
sx={{
|
||||||
|
color: (theme) => theme.palette.common.disabled,
|
||||||
|
}}
|
||||||
/>
|
/>
|
||||||
}
|
}
|
||||||
/>
|
/>
|
||||||
@@ -134,12 +136,12 @@ function SignInPage({ t }) {
|
|||||||
)}
|
)}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<Link className="text-indigo-400 underline font-medium" to="/forgot-password">
|
<Link className="text-secondary-main underline font-medium" to="/forgot-password">
|
||||||
{t('forgot_password')}
|
{t('forgot_password')}
|
||||||
</Link>
|
</Link>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="flex justify-center w-full">
|
<div className="flex flex-col items-center justify-center gap-10 w-full">
|
||||||
<Button
|
<Button
|
||||||
variant="contained"
|
variant="contained"
|
||||||
color="secondary"
|
color="secondary"
|
||||||
@@ -151,7 +153,9 @@ function SignInPage({ t }) {
|
|||||||
>
|
>
|
||||||
{t('sign_in_btn')}
|
{t('sign_in_btn')}
|
||||||
</Button>
|
</Button>
|
||||||
{errors.root && <p>{errors.root.message}</p>}
|
{errors.root?.message && (
|
||||||
|
<p className="text-l text-error-main">{errors.root?.message}</p>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -61,7 +61,7 @@ function SignUpPage({ t }) {
|
|||||||
|
|
||||||
<Paper
|
<Paper
|
||||||
className="h-full w-full sm:h-auto md:flex md:h-full py-32 px-16 sm:p-48 md:p-40 md:px-96 sm:rounded-2xl md:rounded-none sm:shadow md:shadow-none rtl:border-r-1 ltr:border-l-1"
|
className="h-full w-full sm:h-auto md:flex md:h-full py-32 px-16 sm:p-48 md:p-40 md:px-96 sm:rounded-2xl md:rounded-none sm:shadow md:shadow-none rtl:border-r-1 ltr:border-l-1"
|
||||||
sx={{ background: (theme) => theme.palette.background?.authPaper }}
|
sx={{ background: (theme) => theme.palette.background?.default }}
|
||||||
>
|
>
|
||||||
<div className="w-full mx-auto sm:mx-0">
|
<div className="w-full mx-auto sm:mx-0">
|
||||||
<Typography className="text-4xl font-extrabold tracking-tight leading-tight">
|
<Typography className="text-4xl font-extrabold tracking-tight leading-tight">
|
||||||
@@ -69,7 +69,7 @@ function SignUpPage({ t }) {
|
|||||||
</Typography>
|
</Typography>
|
||||||
<div className="flex items-baseline mt-10 font-medium">
|
<div className="flex items-baseline mt-10 font-medium">
|
||||||
<Typography>{t('have_account')}</Typography>
|
<Typography>{t('have_account')}</Typography>
|
||||||
<Link className="ml-4 text-indigo-400 underline" to="/sign-in">
|
<Link className="ml-4 text-secondary-main underline" to="/sign-in">
|
||||||
{t('sign_in')}
|
{t('sign_in')}
|
||||||
</Link>
|
</Link>
|
||||||
</div>
|
</div>
|
||||||
@@ -181,7 +181,10 @@ function SignUpPage({ t }) {
|
|||||||
<FormControlLabel
|
<FormControlLabel
|
||||||
label={t('accept_terms')}
|
label={t('accept_terms')}
|
||||||
control={
|
control={
|
||||||
<Checkbox {...field} sx={{ color: (theme) => theme.palette.border.light }} />
|
<Checkbox
|
||||||
|
{...field}
|
||||||
|
sx={{ color: (theme) => theme.palette.common.disabled }}
|
||||||
|
/>
|
||||||
}
|
}
|
||||||
/>
|
/>
|
||||||
<FormHelperText>{errors?.acceptTermsConditions?.message}</FormHelperText>
|
<FormHelperText>{errors?.acceptTermsConditions?.message}</FormHelperText>
|
||||||
@@ -189,7 +192,7 @@ function SignUpPage({ t }) {
|
|||||||
)}
|
)}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<div className="flex justify-center w-full">
|
<div className="flex flex-col items-center justify-center gap-10 w-full">
|
||||||
<Button
|
<Button
|
||||||
variant="contained"
|
variant="contained"
|
||||||
color="secondary"
|
color="secondary"
|
||||||
@@ -201,6 +204,9 @@ function SignUpPage({ t }) {
|
|||||||
>
|
>
|
||||||
{t('sign_up_btn')}
|
{t('sign_up_btn')}
|
||||||
</Button>
|
</Button>
|
||||||
|
{errors.root?.message && (
|
||||||
|
<p className="text-l text-error-main">{errors.root?.message}</p>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -21,11 +21,11 @@ function DashboardPage(props) {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<Root
|
<Root
|
||||||
header={
|
// header={
|
||||||
<div className="p-24">
|
// <div className="p-24">
|
||||||
<h4>{t('TITLE')}</h4>
|
// <h4>{t('TITLE')}</h4>
|
||||||
</div>
|
// </div>
|
||||||
}
|
// }
|
||||||
content={
|
content={
|
||||||
<div className="p-24">
|
<div className="p-24">
|
||||||
<h4>Content</h4>
|
<h4>Content</h4>
|
||||||
|
|||||||
@@ -21,11 +21,11 @@ function FavoritesPage(props) {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<Root
|
<Root
|
||||||
header={
|
// header={
|
||||||
<div className="p-24">
|
// <div className="p-24">
|
||||||
<h4>{t('TITLE')}</h4>
|
// <h4>{t('TITLE')}</h4>
|
||||||
</div>
|
// </div>
|
||||||
}
|
// }
|
||||||
content={
|
content={
|
||||||
<div className="p-24">
|
<div className="p-24">
|
||||||
<h4>Content</h4>
|
<h4>Content</h4>
|
||||||
|
|||||||
@@ -21,11 +21,11 @@ function HistoryPage(props) {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<Root
|
<Root
|
||||||
header={
|
// header={
|
||||||
<div className="p-24">
|
// <div className="p-24">
|
||||||
<h4>{t('TITLE')}</h4>
|
// <h4>{t('TITLE')}</h4>
|
||||||
</div>
|
// </div>
|
||||||
}
|
// }
|
||||||
content={
|
content={
|
||||||
<div className="p-24">
|
<div className="p-24">
|
||||||
<h4>Content</h4>
|
<h4>Content</h4>
|
||||||
|
|||||||
@@ -21,11 +21,11 @@ function ProfilePage(props) {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<Root
|
<Root
|
||||||
header={
|
// header={
|
||||||
<div className="p-24">
|
// <div className="p-24">
|
||||||
<h4>{t('TITLE')}</h4>
|
// <h4>{t('TITLE')}</h4>
|
||||||
</div>
|
// </div>
|
||||||
}
|
// }
|
||||||
content={
|
content={
|
||||||
<div className="p-24">
|
<div className="p-24">
|
||||||
<h4>Content</h4>
|
<h4>Content</h4>
|
||||||
|
|||||||
@@ -112,7 +112,7 @@ export default class AuthService extends FuseUtils.EventEmitter {
|
|||||||
|
|
||||||
sendPasswordResetEmail = (email) => {
|
sendPasswordResetEmail = (email) => {
|
||||||
return new Promise((resolve, reject) => {
|
return new Promise((resolve, reject) => {
|
||||||
if (email) {
|
if (!email) {
|
||||||
reject(Error('Email is empty'));
|
reject(Error('Email is empty'));
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -5,7 +5,6 @@ const config = {
|
|||||||
containerWidth: 1570,
|
containerWidth: 1570,
|
||||||
navbar: {
|
navbar: {
|
||||||
display: true,
|
display: true,
|
||||||
style: 'style-1',
|
|
||||||
folded: true,
|
folded: true,
|
||||||
position: 'left',
|
position: 'left',
|
||||||
},
|
},
|
||||||
@@ -55,32 +54,6 @@ const config = {
|
|||||||
},
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
style: {
|
|
||||||
title: 'Style',
|
|
||||||
type: 'radio',
|
|
||||||
options: [
|
|
||||||
{
|
|
||||||
name: 'Slide (style-1)',
|
|
||||||
value: 'style-1',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'Folded (style-2)',
|
|
||||||
value: 'style-2',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'Tabbed (style-3)',
|
|
||||||
value: 'style-3',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'Tabbed Dense (style-3-dense)',
|
|
||||||
value: 'style-3-dense',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
folded: {
|
|
||||||
title: 'Folded (style-2, style-3)',
|
|
||||||
type: 'switch',
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -3,9 +3,7 @@ import { memo } from 'react';
|
|||||||
import { useSelector } from 'react-redux';
|
import { useSelector } from 'react-redux';
|
||||||
import { selectFuseCurrentLayoutConfig, selectNavbarTheme } from 'app/store/fuse/settingsSlice';
|
import { selectFuseCurrentLayoutConfig, selectNavbarTheme } from 'app/store/fuse/settingsSlice';
|
||||||
import { selectFuseNavbar } from 'app/store/fuse/navbarSlice';
|
import { selectFuseNavbar } from 'app/store/fuse/navbarSlice';
|
||||||
import NavbarStyle1 from './navbar/style-1/NavbarStyle1';
|
import NavbarLayout1 from './navbar/NavbarLayout1';
|
||||||
import NavbarStyle2 from './navbar/style-2/NavbarStyle2';
|
|
||||||
import NavbarStyle3 from './navbar/style-3/NavbarStyle3';
|
|
||||||
import NavbarToggleFab from '../../shared-components/NavbarToggleFab';
|
import NavbarToggleFab from '../../shared-components/NavbarToggleFab';
|
||||||
|
|
||||||
function NavbarWrapperLayout1(props) {
|
function NavbarWrapperLayout1(props) {
|
||||||
@@ -17,12 +15,7 @@ function NavbarWrapperLayout1(props) {
|
|||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<ThemeProvider theme={navbarTheme}>
|
<ThemeProvider theme={navbarTheme}>
|
||||||
<>
|
<NavbarLayout1 />
|
||||||
{config.navbar.style === 'style-1' && <NavbarStyle1 />}
|
|
||||||
{config.navbar.style === 'style-2' && <NavbarStyle2 />}
|
|
||||||
{config.navbar.style === 'style-3' && <NavbarStyle3 />}
|
|
||||||
{config.navbar.style === 'style-3-dense' && <NavbarStyle3 dense />}
|
|
||||||
</>
|
|
||||||
</ThemeProvider>
|
</ThemeProvider>
|
||||||
|
|
||||||
{config.navbar.display && !navbar.open && <NavbarToggleFab />}
|
{config.navbar.display && !navbar.open && <NavbarToggleFab />}
|
||||||
|
|||||||
@@ -4,7 +4,7 @@ import SwipeableDrawer from '@mui/material/SwipeableDrawer';
|
|||||||
import { useDispatch, useSelector } from 'react-redux';
|
import { useDispatch, useSelector } from 'react-redux';
|
||||||
import { navbarCloseMobile, selectFuseNavbar } from 'app/store/fuse/navbarSlice';
|
import { navbarCloseMobile, selectFuseNavbar } from 'app/store/fuse/navbarSlice';
|
||||||
import { selectFuseCurrentLayoutConfig } from 'app/store/fuse/settingsSlice';
|
import { selectFuseCurrentLayoutConfig } from 'app/store/fuse/settingsSlice';
|
||||||
import NavbarStyle1Content from './NavbarStyle1Content';
|
import NavbarLayout1Content from './NavbarLayout1Content';
|
||||||
|
|
||||||
const navbarWidth = 280;
|
const navbarWidth = 280;
|
||||||
|
|
||||||
@@ -40,7 +40,7 @@ const StyledNavBarMobile = styled(SwipeableDrawer)(({ theme }) => ({
|
|||||||
},
|
},
|
||||||
}));
|
}));
|
||||||
|
|
||||||
function NavbarStyle1(props) {
|
function NavbarLayout1(props) {
|
||||||
const dispatch = useDispatch();
|
const dispatch = useDispatch();
|
||||||
const config = useSelector(selectFuseCurrentLayoutConfig);
|
const config = useSelector(selectFuseCurrentLayoutConfig);
|
||||||
const navbar = useSelector(selectFuseNavbar);
|
const navbar = useSelector(selectFuseNavbar);
|
||||||
@@ -53,7 +53,7 @@ function NavbarStyle1(props) {
|
|||||||
open={navbar.open}
|
open={navbar.open}
|
||||||
position={config.navbar.position}
|
position={config.navbar.position}
|
||||||
>
|
>
|
||||||
<NavbarStyle1Content />
|
<NavbarLayout1Content />
|
||||||
</StyledNavBar>
|
</StyledNavBar>
|
||||||
</Hidden>
|
</Hidden>
|
||||||
|
|
||||||
@@ -72,11 +72,11 @@ function NavbarStyle1(props) {
|
|||||||
keepMounted: true, // Better open performance on mobile.
|
keepMounted: true, // Better open performance on mobile.
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<NavbarStyle1Content />
|
<NavbarLayout1Content />
|
||||||
</StyledNavBarMobile>
|
</StyledNavBarMobile>
|
||||||
</Hidden>
|
</Hidden>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
export default NavbarStyle1;
|
export default NavbarLayout1;
|
||||||
@@ -2,10 +2,10 @@ import FuseScrollbars from '@fuse/core/FuseScrollbars';
|
|||||||
import { styled } from '@mui/material/styles';
|
import { styled } from '@mui/material/styles';
|
||||||
import clsx from 'clsx';
|
import clsx from 'clsx';
|
||||||
import { memo } from 'react';
|
import { memo } from 'react';
|
||||||
import Logo from '../../../../shared-components/Logo';
|
import Logo from '../../../shared-components/Logo';
|
||||||
import NavbarToggleButton from '../../../../shared-components/NavbarToggleButton';
|
import NavbarToggleButton from '../../../shared-components/NavbarToggleButton';
|
||||||
import UserNavbarHeader from '../../../../shared-components/UserNavbarHeader';
|
import UserNavbarHeader from '../../../shared-components/UserNavbarHeader';
|
||||||
import Navigation from '../../../../shared-components/Navigation';
|
import Navigation from '../../../shared-components/Navigation';
|
||||||
|
|
||||||
const Root = styled('div')(({ theme }) => ({
|
const Root = styled('div')(({ theme }) => ({
|
||||||
backgroundColor: theme.palette.background.default,
|
backgroundColor: theme.palette.background.default,
|
||||||
@@ -32,7 +32,7 @@ const StyledContent = styled(FuseScrollbars)(({ theme }) => ({
|
|||||||
backgroundAttachment: 'local, scroll',
|
backgroundAttachment: 'local, scroll',
|
||||||
}));
|
}));
|
||||||
|
|
||||||
function NavbarStyle1Content(props) {
|
function NavbarLayout1Content(props) {
|
||||||
return (
|
return (
|
||||||
<Root className={clsx('flex flex-auto flex-col overflow-hidden h-full', props.className)}>
|
<Root className={clsx('flex flex-auto flex-col overflow-hidden h-full', props.className)}>
|
||||||
<div className="flex flex-row items-center shrink-0 h-48 md:h-72 px-20">
|
<div className="flex flex-row items-center shrink-0 h-48 md:h-72 px-20">
|
||||||
@@ -50,13 +50,9 @@ function NavbarStyle1Content(props) {
|
|||||||
<UserNavbarHeader />
|
<UserNavbarHeader />
|
||||||
|
|
||||||
<Navigation layout="vertical" />
|
<Navigation layout="vertical" />
|
||||||
|
|
||||||
<div className="flex flex-0 items-center justify-center py-48 opacity-10">
|
|
||||||
<img className="w-full max-w-64" src="assets/images/logo/logo.svg" alt="footer logo" />
|
|
||||||
</div>
|
|
||||||
</StyledContent>
|
</StyledContent>
|
||||||
</Root>
|
</Root>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
export default memo(NavbarStyle1Content);
|
export default memo(NavbarLayout1Content);
|
||||||
@@ -1,171 +0,0 @@
|
|||||||
import Hidden from '@mui/material/Hidden';
|
|
||||||
import { styled } from '@mui/material/styles';
|
|
||||||
import SwipeableDrawer from '@mui/material/SwipeableDrawer';
|
|
||||||
import {
|
|
||||||
navbarCloseFolded,
|
|
||||||
navbarCloseMobile,
|
|
||||||
navbarOpenFolded,
|
|
||||||
selectFuseNavbar,
|
|
||||||
} from 'app/store/fuse/navbarSlice';
|
|
||||||
import { useDispatch, useSelector } from 'react-redux';
|
|
||||||
import { selectFuseCurrentLayoutConfig } from 'app/store/fuse/settingsSlice';
|
|
||||||
import NavbarStyle2Content from './NavbarStyle2Content';
|
|
||||||
|
|
||||||
const navbarWidth = 280;
|
|
||||||
|
|
||||||
const Root = styled('div')(({ theme, folded }) => ({
|
|
||||||
display: 'flex',
|
|
||||||
flexDirection: 'column',
|
|
||||||
zIndex: 4,
|
|
||||||
[theme.breakpoints.up('lg')]: {
|
|
||||||
width: navbarWidth,
|
|
||||||
minWidth: navbarWidth,
|
|
||||||
},
|
|
||||||
|
|
||||||
...(folded && {
|
|
||||||
[theme.breakpoints.up('lg')]: {
|
|
||||||
width: 76,
|
|
||||||
minWidth: 76,
|
|
||||||
},
|
|
||||||
}),
|
|
||||||
}));
|
|
||||||
|
|
||||||
const StyledNavbar = styled('div')(
|
|
||||||
({ theme, position, folded, foldedandopened, foldedandclosed }) => ({
|
|
||||||
minWidth: navbarWidth,
|
|
||||||
width: navbarWidth,
|
|
||||||
maxWidth: navbarWidth,
|
|
||||||
maxHeight: '100%',
|
|
||||||
transition: theme.transitions.create(['width', 'min-width'], {
|
|
||||||
easing: theme.transitions.easing.sharp,
|
|
||||||
duration: theme.transitions.duration.shorter,
|
|
||||||
}),
|
|
||||||
|
|
||||||
...(position === 'left' && {
|
|
||||||
left: 0,
|
|
||||||
}),
|
|
||||||
|
|
||||||
...(position === 'right' && {
|
|
||||||
right: 0,
|
|
||||||
}),
|
|
||||||
|
|
||||||
...(folded && {
|
|
||||||
position: 'absolute',
|
|
||||||
width: 76,
|
|
||||||
minWidth: 76,
|
|
||||||
top: 0,
|
|
||||||
bottom: 0,
|
|
||||||
}),
|
|
||||||
|
|
||||||
...(foldedandopened && {
|
|
||||||
width: navbarWidth,
|
|
||||||
minWidth: navbarWidth,
|
|
||||||
}),
|
|
||||||
|
|
||||||
...(foldedandclosed && {
|
|
||||||
'& .NavbarStyle2-content': {
|
|
||||||
'& .logo-icon': {
|
|
||||||
width: 44,
|
|
||||||
height: 44,
|
|
||||||
},
|
|
||||||
'& .logo-text': {
|
|
||||||
opacity: 0,
|
|
||||||
},
|
|
||||||
'& .react-badge': {
|
|
||||||
opacity: 0,
|
|
||||||
},
|
|
||||||
'& .fuse-list-item': {
|
|
||||||
width: 56,
|
|
||||||
},
|
|
||||||
'& .fuse-list-item-text, & .arrow-icon, & .item-badge': {
|
|
||||||
opacity: 0,
|
|
||||||
},
|
|
||||||
'& .fuse-list-subheader .fuse-list-subheader-text': {
|
|
||||||
opacity: 0,
|
|
||||||
},
|
|
||||||
'& .fuse-list-subheader:before': {
|
|
||||||
content: '""',
|
|
||||||
display: 'block',
|
|
||||||
position: 'absolute',
|
|
||||||
minWidth: 16,
|
|
||||||
borderTop: '2px solid',
|
|
||||||
opacity: 0.2,
|
|
||||||
},
|
|
||||||
'& .collapse-children': {
|
|
||||||
display: 'none',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
}),
|
|
||||||
})
|
|
||||||
);
|
|
||||||
|
|
||||||
const StyledNavbarMobile = styled(SwipeableDrawer)(({ theme, position }) => ({
|
|
||||||
'& > .MuiDrawer-paper': {
|
|
||||||
minWidth: navbarWidth,
|
|
||||||
width: navbarWidth,
|
|
||||||
maxWidth: navbarWidth,
|
|
||||||
maxHeight: '100%',
|
|
||||||
transition: theme.transitions.create(['width', 'min-width'], {
|
|
||||||
easing: theme.transitions.easing.sharp,
|
|
||||||
duration: theme.transitions.duration.shorter,
|
|
||||||
}),
|
|
||||||
},
|
|
||||||
}));
|
|
||||||
|
|
||||||
function NavbarStyle2(props) {
|
|
||||||
const dispatch = useDispatch();
|
|
||||||
const config = useSelector(selectFuseCurrentLayoutConfig);
|
|
||||||
const navbar = useSelector(selectFuseNavbar);
|
|
||||||
|
|
||||||
// const folded = !navbar.open;
|
|
||||||
const { folded } = config.navbar;
|
|
||||||
const foldedandclosed = folded && !navbar.foldedOpen;
|
|
||||||
const foldedandopened = folded && navbar.foldedOpen;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Root
|
|
||||||
folded={folded ? 1 : 0}
|
|
||||||
open={navbar.open}
|
|
||||||
id="fuse-navbar"
|
|
||||||
className="sticky top-0 h-screen shrink-0 z-20 shadow-5"
|
|
||||||
>
|
|
||||||
<Hidden lgDown>
|
|
||||||
<StyledNavbar
|
|
||||||
className="flex-col flex-auto"
|
|
||||||
position={config.navbar.position}
|
|
||||||
folded={folded ? 1 : 0}
|
|
||||||
foldedandopened={foldedandopened ? 1 : 0}
|
|
||||||
foldedandclosed={foldedandclosed ? 1 : 0}
|
|
||||||
onMouseEnter={() => foldedandclosed && dispatch(navbarOpenFolded())}
|
|
||||||
onMouseLeave={() => foldedandopened && dispatch(navbarCloseFolded())}
|
|
||||||
>
|
|
||||||
<NavbarStyle2Content className="NavbarStyle2-content" />
|
|
||||||
</StyledNavbar>
|
|
||||||
</Hidden>
|
|
||||||
|
|
||||||
<Hidden lgUp>
|
|
||||||
<StyledNavbarMobile
|
|
||||||
classes={{
|
|
||||||
paper: 'flex-col flex-auto h-full',
|
|
||||||
}}
|
|
||||||
folded={folded ? 1 : 0}
|
|
||||||
foldedandopened={foldedandopened ? 1 : 0}
|
|
||||||
foldedandclosed={foldedandclosed ? 1 : 0}
|
|
||||||
anchor={config.navbar.position}
|
|
||||||
variant="temporary"
|
|
||||||
open={navbar.mobileOpen}
|
|
||||||
onClose={() => dispatch(navbarCloseMobile())}
|
|
||||||
onOpen={() => {}}
|
|
||||||
disableSwipeToOpen
|
|
||||||
ModalProps={{
|
|
||||||
keepMounted: true, // Better open performance on mobile.
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<NavbarStyle2Content className="NavbarStyle2-content" />
|
|
||||||
</StyledNavbarMobile>
|
|
||||||
</Hidden>
|
|
||||||
</Root>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default NavbarStyle2;
|
|
||||||
@@ -1,54 +0,0 @@
|
|||||||
import FuseScrollbars from '@fuse/core/FuseScrollbars';
|
|
||||||
import { styled } from '@mui/material/styles';
|
|
||||||
import clsx from 'clsx';
|
|
||||||
import { memo } from 'react';
|
|
||||||
import Logo from '../../../../shared-components/Logo';
|
|
||||||
import NavbarToggleButton from '../../../../shared-components/NavbarToggleButton';
|
|
||||||
import Navigation from '../../../../shared-components/Navigation';
|
|
||||||
|
|
||||||
const Root = styled('div')(({ theme }) => ({
|
|
||||||
backgroundColor: theme.palette.background.default,
|
|
||||||
color: theme.palette.text.primary,
|
|
||||||
'& ::-webkit-scrollbar-thumb': {
|
|
||||||
boxShadow: `inset 0 0 0 20px ${
|
|
||||||
theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.24)' : 'rgba(255, 255, 255, 0.24)'
|
|
||||||
}`,
|
|
||||||
},
|
|
||||||
'& ::-webkit-scrollbar-thumb:active': {
|
|
||||||
boxShadow: `inset 0 0 0 20px ${
|
|
||||||
theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.37)' : 'rgba(255, 255, 255, 0.37)'
|
|
||||||
}`,
|
|
||||||
},
|
|
||||||
}));
|
|
||||||
|
|
||||||
const StyledContent = styled(FuseScrollbars)(({ theme }) => ({
|
|
||||||
overscrollBehavior: 'contain',
|
|
||||||
overflowX: 'hidden',
|
|
||||||
overflowY: 'auto',
|
|
||||||
WebkitOverflowScrolling: 'touch',
|
|
||||||
background:
|
|
||||||
'linear-gradient(rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0) 30%), linear-gradient(rgba(0, 0, 0, 0.25) 0, rgba(0, 0, 0, 0) 40%)',
|
|
||||||
backgroundRepeat: 'no-repeat',
|
|
||||||
backgroundSize: '100% 40px, 100% 10px',
|
|
||||||
backgroundAttachment: 'local, scroll',
|
|
||||||
}));
|
|
||||||
|
|
||||||
function NavbarStyle2Content(props) {
|
|
||||||
return (
|
|
||||||
<Root className={clsx('flex flex-auto flex-col overflow-hidden h-full', props.className)}>
|
|
||||||
<div className="flex flex-row items-center shrink-0 h-48 md:h-76 px-12">
|
|
||||||
<div className="flex flex-1 mx-4">
|
|
||||||
<Logo />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<NavbarToggleButton className="w-40 h-40 p-0" />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<StyledContent option={{ suppressScrollX: true, wheelPropagation: false }}>
|
|
||||||
<Navigation layout="vertical" />
|
|
||||||
</StyledContent>
|
|
||||||
</Root>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default memo(NavbarStyle2Content);
|
|
||||||
@@ -1,149 +0,0 @@
|
|||||||
import Hidden from '@mui/material/Hidden';
|
|
||||||
import { styled } from '@mui/material/styles';
|
|
||||||
import SwipeableDrawer from '@mui/material/SwipeableDrawer';
|
|
||||||
import { useDispatch, useSelector } from 'react-redux';
|
|
||||||
import { navbarCloseMobile, selectFuseNavbar } from 'app/store/fuse/navbarSlice';
|
|
||||||
import GlobalStyles from '@mui/material/GlobalStyles';
|
|
||||||
import { selectFuseCurrentLayoutConfig } from 'app/store/fuse/settingsSlice';
|
|
||||||
import NavbarStyle3Content from './NavbarStyle3Content';
|
|
||||||
|
|
||||||
const navbarWidth = 120;
|
|
||||||
const navbarWidthDense = 64;
|
|
||||||
const panelWidth = 280;
|
|
||||||
|
|
||||||
const StyledNavBar = styled('div')(({ theme, dense, open, folded, position }) => ({
|
|
||||||
minWidth: navbarWidth,
|
|
||||||
width: navbarWidth,
|
|
||||||
maxWidth: navbarWidth,
|
|
||||||
|
|
||||||
...(dense && {
|
|
||||||
minWidth: navbarWidthDense,
|
|
||||||
width: navbarWidthDense,
|
|
||||||
maxWidth: navbarWidthDense,
|
|
||||||
|
|
||||||
...(!open && {
|
|
||||||
...(position === 'left' && {
|
|
||||||
marginLeft: -navbarWidthDense,
|
|
||||||
}),
|
|
||||||
|
|
||||||
...(position === 'right' && {
|
|
||||||
marginRight: -navbarWidthDense,
|
|
||||||
}),
|
|
||||||
}),
|
|
||||||
}),
|
|
||||||
|
|
||||||
...(!folded && {
|
|
||||||
minWidth: dense ? navbarWidthDense + panelWidth : navbarWidth + panelWidth,
|
|
||||||
width: dense ? navbarWidthDense + panelWidth : navbarWidth + panelWidth,
|
|
||||||
maxWidth: dense ? navbarWidthDense + panelWidth : navbarWidth + panelWidth,
|
|
||||||
|
|
||||||
'& #fuse-navbar-panel': {
|
|
||||||
opacity: '1!important',
|
|
||||||
pointerEvents: 'initial!important',
|
|
||||||
},
|
|
||||||
|
|
||||||
...(!open && {
|
|
||||||
...(position === 'left' && {
|
|
||||||
marginLeft: -(dense ? navbarWidthDense + panelWidth : navbarWidth + panelWidth),
|
|
||||||
}),
|
|
||||||
|
|
||||||
...(position === 'right' && {
|
|
||||||
marginRight: -(dense ? navbarWidthDense + panelWidth : navbarWidth + panelWidth),
|
|
||||||
}),
|
|
||||||
}),
|
|
||||||
}),
|
|
||||||
|
|
||||||
...(!open && {
|
|
||||||
transition: theme.transitions.create('margin', {
|
|
||||||
easing: theme.transitions.easing.easeOut,
|
|
||||||
duration: theme.transitions.duration.leavingScreen,
|
|
||||||
}),
|
|
||||||
...(position === 'left' && {
|
|
||||||
marginLeft: -(dense ? navbarWidthDense : navbarWidth),
|
|
||||||
}),
|
|
||||||
|
|
||||||
...(position === 'right' && {
|
|
||||||
marginRight: -(dense ? navbarWidthDense : navbarWidth),
|
|
||||||
}),
|
|
||||||
}),
|
|
||||||
|
|
||||||
...(open && {
|
|
||||||
transition: theme.transitions.create('margin', {
|
|
||||||
easing: theme.transitions.easing.easeOut,
|
|
||||||
duration: theme.transitions.duration.enteringScreen,
|
|
||||||
}),
|
|
||||||
}),
|
|
||||||
}));
|
|
||||||
|
|
||||||
const StyledNavBarMobile = styled(SwipeableDrawer)(({ theme }) => ({
|
|
||||||
'& .MuiDrawer-paper': {
|
|
||||||
'& #fuse-navbar-side-panel': {
|
|
||||||
minWidth: 'auto',
|
|
||||||
wdith: 'auto',
|
|
||||||
},
|
|
||||||
'& #fuse-navbar-panel': {
|
|
||||||
opacity: '1!important',
|
|
||||||
pointerEvents: 'initial!important',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
}));
|
|
||||||
|
|
||||||
function NavbarStyle3(props) {
|
|
||||||
const dispatch = useDispatch();
|
|
||||||
const config = useSelector(selectFuseCurrentLayoutConfig);
|
|
||||||
const navbar = useSelector(selectFuseNavbar);
|
|
||||||
const { folded } = config.navbar;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<GlobalStyles
|
|
||||||
styles={(theme) => ({
|
|
||||||
'& #fuse-navbar-side-panel': {
|
|
||||||
width: props.dense ? navbarWidthDense : navbarWidth,
|
|
||||||
minWidth: props.dense ? navbarWidthDense : navbarWidth,
|
|
||||||
maxWidth: props.dense ? navbarWidthDense : navbarWidth,
|
|
||||||
},
|
|
||||||
'& #fuse-navbar-panel': {
|
|
||||||
maxWidth: '100%',
|
|
||||||
width: panelWidth,
|
|
||||||
[theme.breakpoints.up('lg')]: {
|
|
||||||
minWidth: panelWidth,
|
|
||||||
maxWidth: 'initial',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
})}
|
|
||||||
/>
|
|
||||||
<Hidden lgDown>
|
|
||||||
<StyledNavBar
|
|
||||||
open={navbar.open}
|
|
||||||
dense={props.dense ? 1 : 0}
|
|
||||||
folded={folded ? 1 : 0}
|
|
||||||
position={config.navbar.position}
|
|
||||||
className="flex-col flex-auto sticky top-0 h-screen shrink-0 z-20 shadow-5"
|
|
||||||
>
|
|
||||||
<NavbarStyle3Content dense={props.dense ? 1 : 0} folded={folded ? 1 : 0} />
|
|
||||||
</StyledNavBar>
|
|
||||||
</Hidden>
|
|
||||||
<Hidden lgUp>
|
|
||||||
<StyledNavBarMobile
|
|
||||||
classes={{
|
|
||||||
paper: 'flex-col flex-auto h-screen max-w-full w-auto overflow-hidden',
|
|
||||||
}}
|
|
||||||
anchor={config.navbar.position}
|
|
||||||
variant="temporary"
|
|
||||||
open={navbar.mobileOpen}
|
|
||||||
onClose={() => dispatch(navbarCloseMobile())}
|
|
||||||
onOpen={() => {}}
|
|
||||||
disableSwipeToOpen
|
|
||||||
ModalProps={{
|
|
||||||
keepMounted: true, // Better open performance on mobile.
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<NavbarStyle3Content dense={props.dense ? 1 : 0} folded={folded ? 1 : 0} />
|
|
||||||
</StyledNavBarMobile>
|
|
||||||
</Hidden>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default NavbarStyle3;
|
|
||||||
@@ -1,147 +0,0 @@
|
|||||||
import FuseScrollbars from '@fuse/core/FuseScrollbars';
|
|
||||||
import { styled, useTheme } from '@mui/material/styles';
|
|
||||||
import ClickAwayListener from '@mui/material/ClickAwayListener';
|
|
||||||
import clsx from 'clsx';
|
|
||||||
import { memo, useEffect, useState } from 'react';
|
|
||||||
import { useDispatch, useSelector } from 'react-redux';
|
|
||||||
import FuseNavigation from '@fuse/core/FuseNavigation';
|
|
||||||
import { navbarCloseMobile } from 'app/store/fuse/navbarSlice';
|
|
||||||
import { selectContrastMainTheme } from 'app/store/fuse/settingsSlice';
|
|
||||||
import { useLocation } from 'react-router-dom';
|
|
||||||
import useThemeMediaQuery from '@fuse/hooks/useThemeMediaQuery';
|
|
||||||
import { selectNavigation } from 'app/store/fuse/navigationSlice';
|
|
||||||
|
|
||||||
const Root = styled('div')(({ theme }) => ({
|
|
||||||
backgroundColor: theme.palette.background.default,
|
|
||||||
color: theme.palette.text.primary,
|
|
||||||
}));
|
|
||||||
|
|
||||||
const StyledPanel = styled(FuseScrollbars)(({ theme, opened }) => ({
|
|
||||||
backgroundColor: theme.palette.background.default,
|
|
||||||
color: theme.palette.text.primary,
|
|
||||||
transition: theme.transitions.create(['opacity'], {
|
|
||||||
easing: theme.transitions.easing.sharp,
|
|
||||||
duration: theme.transitions.duration.shortest,
|
|
||||||
}),
|
|
||||||
opacity: 0,
|
|
||||||
pointerEvents: 'none',
|
|
||||||
...(opened && {
|
|
||||||
opacity: 1,
|
|
||||||
pointerEvents: 'initial',
|
|
||||||
}),
|
|
||||||
}));
|
|
||||||
|
|
||||||
function needsToBeOpened(location, item) {
|
|
||||||
return location && isUrlInChildren(item, location.pathname);
|
|
||||||
}
|
|
||||||
|
|
||||||
function isUrlInChildren(parent, url) {
|
|
||||||
if (!parent.children) {
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
|
|
||||||
for (let i = 0; i < parent.children.length; i += 1) {
|
|
||||||
if (parent.children[i].children) {
|
|
||||||
if (isUrlInChildren(parent.children[i], url)) {
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
if (parent.children[i].url === url || url.includes(parent.children[i].url)) {
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
|
|
||||||
function NavbarStyle3Content(props) {
|
|
||||||
const isMobile = useThemeMediaQuery((theme) => theme.breakpoints.down('lg'));
|
|
||||||
const navigation = useSelector(selectNavigation);
|
|
||||||
const [selectedNavigation, setSelectedNavigation] = useState([]);
|
|
||||||
const [panelOpen, setPanelOpen] = useState(false);
|
|
||||||
const theme = useTheme();
|
|
||||||
const dispatch = useDispatch();
|
|
||||||
const contrastTheme = useSelector(selectContrastMainTheme(theme.palette.primary.main));
|
|
||||||
const location = useLocation();
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
navigation?.forEach((item) => {
|
|
||||||
if (needsToBeOpened(location, item)) {
|
|
||||||
setSelectedNavigation([item]);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}, [navigation, location]);
|
|
||||||
|
|
||||||
function handleParentItemClick(selected) {
|
|
||||||
/** if there is no child item do not set/open panel
|
|
||||||
*/
|
|
||||||
if (!selected.children) {
|
|
||||||
setSelectedNavigation([]);
|
|
||||||
setPanelOpen(false);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* If navigation already selected toggle panel visibility
|
|
||||||
*/
|
|
||||||
if (selectedNavigation[0]?.id === selected.id) {
|
|
||||||
setPanelOpen(!panelOpen);
|
|
||||||
} else {
|
|
||||||
/**
|
|
||||||
* Set navigation and open panel
|
|
||||||
*/
|
|
||||||
setSelectedNavigation([selected]);
|
|
||||||
setPanelOpen(true);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function handleChildItemClick(selected) {
|
|
||||||
setPanelOpen(false);
|
|
||||||
if (isMobile) {
|
|
||||||
dispatch(navbarCloseMobile());
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<ClickAwayListener onClickAway={() => setPanelOpen(false)}>
|
|
||||||
<Root className={clsx('flex flex-auto flex h-full', props.className)}>
|
|
||||||
<div id="fuse-navbar-side-panel" className="flex shrink-0 flex-col items-center">
|
|
||||||
<img className="w-44 my-32" src="assets/images/logo/logo.svg" alt="logo" />
|
|
||||||
|
|
||||||
<FuseScrollbars
|
|
||||||
className="flex flex-1 min-h-0 justify-center w-full overflow-y-auto overflow-x-hidden"
|
|
||||||
option={{ suppressScrollX: true, wheelPropagation: false }}
|
|
||||||
>
|
|
||||||
<FuseNavigation
|
|
||||||
className={clsx('navigation')}
|
|
||||||
navigation={navigation}
|
|
||||||
layout="vertical-2"
|
|
||||||
onItemClick={handleParentItemClick}
|
|
||||||
firstLevel
|
|
||||||
selectedId={selectedNavigation[0]?.id}
|
|
||||||
dense={props.dense}
|
|
||||||
/>
|
|
||||||
</FuseScrollbars>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{selectedNavigation.length > 0 && (
|
|
||||||
<StyledPanel
|
|
||||||
id="fuse-navbar-panel"
|
|
||||||
opened={panelOpen}
|
|
||||||
className={clsx('shadow-5 overflow-y-auto overflow-x-hidden')}
|
|
||||||
option={{ suppressScrollX: true, wheelPropagation: false }}
|
|
||||||
>
|
|
||||||
<FuseNavigation
|
|
||||||
className={clsx('navigation')}
|
|
||||||
navigation={selectedNavigation}
|
|
||||||
layout="vertical"
|
|
||||||
onItemClick={handleChildItemClick}
|
|
||||||
/>
|
|
||||||
</StyledPanel>
|
|
||||||
)}
|
|
||||||
</Root>
|
|
||||||
</ClickAwayListener>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default memo(NavbarStyle3Content);
|
|
||||||
@@ -7,7 +7,7 @@ function FooterLayout2() {
|
|||||||
const { t } = useTranslation('layout2');
|
const { t } = useTranslation('layout2');
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<footer className="flex items-center justify-center w-full bg-gray-900">
|
<footer className="flex items-center justify-center w-full bg-common-layout">
|
||||||
<div className="flex gap-96 w-full max-w-screen-xl px-10 py-52">
|
<div className="flex gap-96 w-full max-w-screen-xl px-10 py-52">
|
||||||
<ul className="flex flex-col gap-16 mr-96">
|
<ul className="flex flex-col gap-16 mr-96">
|
||||||
<li>
|
<li>
|
||||||
|
|||||||
@@ -8,7 +8,7 @@ function HeaderLayout2(props) {
|
|||||||
const { t } = useTranslation('layout2');
|
const { t } = useTranslation('layout2');
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<header className="fixed z-50 flex items-center justify-center w-full h-72 px-10 bg-white">
|
<header className="fixed z-50 flex items-center justify-center w-full h-72 px-10 bg-primary-light">
|
||||||
<div className="flex justify-between max-w-screen-xl w-full">
|
<div className="flex justify-between max-w-screen-xl w-full">
|
||||||
<Link to="/">
|
<Link to="/">
|
||||||
<img
|
<img
|
||||||
@@ -17,10 +17,11 @@ function HeaderLayout2(props) {
|
|||||||
alt={t('logo_alt')}
|
alt={t('logo_alt')}
|
||||||
/>
|
/>
|
||||||
</Link>
|
</Link>
|
||||||
|
|
||||||
<nav className="flex grow justify-center gap-72 items-center">
|
<nav className="flex grow justify-center gap-72 items-center">
|
||||||
{linksConfigLayout2.map((path) => (
|
{linksConfigLayout2.map((path) => (
|
||||||
<Link
|
<Link
|
||||||
className="text-lg leading-5 text-slate-800 no-underline"
|
className="text-lg leading-5 text-common-layout no-underline"
|
||||||
to={`/${path}`}
|
to={`/${path}`}
|
||||||
key={path}
|
key={path}
|
||||||
>
|
>
|
||||||
@@ -28,13 +29,14 @@ function HeaderLayout2(props) {
|
|||||||
</Link>
|
</Link>
|
||||||
))}
|
))}
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
{props.isAuthenticated || (
|
{props.isAuthenticated || (
|
||||||
<div className="flex gap-32 items-center">
|
<div className="flex gap-32 items-center">
|
||||||
<Link className="text-indigo-400" to="/sign-in">
|
<Link className="text-secondary-main" to="/sign-in">
|
||||||
{t('sign_in')}
|
{t('sign_in')}
|
||||||
</Link>
|
</Link>
|
||||||
<Link
|
<Link
|
||||||
className="flex gap-7 items-center px-24 py-10 text-lg leading-5 text-white bg-indigo-400 rounded-2xl"
|
className="flex gap-7 items-center px-24 py-10 text-lg leading-5 text-primary-light bg-secondary-main rounded-2xl shadow hover:shadow-hover hover:shadow-secondary-main ease-in-out duration-300"
|
||||||
to="/sign-up"
|
to="/sign-up"
|
||||||
>
|
>
|
||||||
<span>{t('sign_up')}</span>
|
<span>{t('sign_up')}</span>
|
||||||
|
|||||||
@@ -130,6 +130,8 @@ module.exports = {
|
|||||||
'2xl': '0 25px 50px -12px rgba(0, 0, 0, 0.25)',
|
'2xl': '0 25px 50px -12px rgba(0, 0, 0, 0.25)',
|
||||||
inner: 'inset 0 2px 4px 0 rgba(0,0,0,0.06)',
|
inner: 'inset 0 2px 4px 0 rgba(0,0,0,0.06)',
|
||||||
none: 'none',
|
none: 'none',
|
||||||
|
active: '2px 2px 5px 0px rgba(0, 0, 0, 0.2)',
|
||||||
|
hover: '2px 2px 5px 0px rgba(0, 0, 0, 0.4)',
|
||||||
0: '0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)',
|
0: '0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)',
|
||||||
1: '0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12)',
|
1: '0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12)',
|
||||||
2: '0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)',
|
2: '0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)',
|
||||||
@@ -176,7 +178,30 @@ module.exports = {
|
|||||||
current: colors.current,
|
current: colors.current,
|
||||||
transparent: 'transparent',
|
transparent: 'transparent',
|
||||||
black: '#22292F',
|
black: '#22292F',
|
||||||
white: '#fff',
|
white: '#FFFFFF',
|
||||||
|
common: {
|
||||||
|
layout: '#141D39',
|
||||||
|
primary: '#151B30',
|
||||||
|
secondary: '#6D6D6D',
|
||||||
|
disabled: '#D9D9D9',
|
||||||
|
},
|
||||||
|
primary: {
|
||||||
|
light: '#FFFFFF',
|
||||||
|
main: '#F1F5F9',
|
||||||
|
dark: '#F1F1FB',
|
||||||
|
},
|
||||||
|
secondary: {
|
||||||
|
light: '#1AD079',
|
||||||
|
main: '#4D53FF',
|
||||||
|
},
|
||||||
|
accept: {
|
||||||
|
light: '#E8FAF2',
|
||||||
|
main: '#10A75F',
|
||||||
|
},
|
||||||
|
error: {
|
||||||
|
light: '#FBEBEA',
|
||||||
|
main: '#D83529',
|
||||||
|
},
|
||||||
grey: {
|
grey: {
|
||||||
50: '#FAFAFA',
|
50: '#FAFAFA',
|
||||||
100: '#F5F5F5',
|
100: '#F5F5F5',
|
||||||
|
|||||||
Reference in New Issue
Block a user