diff --git a/frontend/src/layouts/auth/layout.js b/frontend/src/layouts/auth/layout.js index 3d1cad8..bc85919 100644 --- a/frontend/src/layouts/auth/layout.js +++ b/frontend/src/layouts/auth/layout.js @@ -3,9 +3,11 @@ import NextLink from 'next/link'; import Link from 'next/link' import { Box, Typography, Unstable_Grid2 as Grid } from '@mui/material'; import { Logo } from 'src/components/logo'; +import { useTheme } from '@mui/material' export const Layout = (props) => { const { children } = props; + const theme = useTheme(); return ( { lg={6} sx={{ alignItems: 'center', - background: 'radial-gradient(50% 50% at 50% 50%, #306D6F 0%, #255355 100%)', + background: `radial-gradient(50% 50% at 50% 50%, ${theme.palette.primary.main} 0%, ${theme.palette.primary.dark } 100%)`, color: 'white', display: 'flex', justifyContent: 'center', diff --git a/frontend/src/layouts/dashboard/side-nav.js b/frontend/src/layouts/dashboard/side-nav.js index e378c2a..cce1de6 100644 --- a/frontend/src/layouts/dashboard/side-nav.js +++ b/frontend/src/layouts/dashboard/side-nav.js @@ -2,8 +2,6 @@ import NextLink from 'next/link'; import { usePathname } from 'next/navigation'; import PropTypes from 'prop-types'; import Link from 'next/link' -import ArrowTopRightOnSquareIcon from '@heroicons/react/24/solid/ArrowTopRightOnSquareIcon'; -import ChevronUpDownIcon from '@heroicons/react/24/solid/ChevronUpDownIcon'; import { Box, Button, @@ -18,12 +16,15 @@ import { Logo } from 'src/components/logo'; import { Scrollbar } from 'src/components/scrollbar'; import { items } from './config'; import { SideNavItem } from './side-nav-item'; +import { useTheme } from '@mui/material'; export const SideNav = (props) => { const { open, onClose } = props; const pathname = usePathname(); const lgUp = useMediaQuery((theme) => theme.breakpoints.up('lg')); + const theme = useTheme(); + const isItemActive = (currentPath, itemPath) => { if (currentPath === itemPath) { return true; @@ -131,7 +132,6 @@ export const SideNav = (props) => { })} - ); @@ -143,7 +143,7 @@ export const SideNav = (props) => { open PaperProps={{ sx: { - backgroundColor: 'neutral.800', + background: `linear-gradient(0deg, ${theme.palette.primary.main} 0%, ${theme.palette.primary.dark} 90%);`, color: 'common.white', width: 280 } @@ -162,7 +162,7 @@ export const SideNav = (props) => { open={open} PaperProps={{ sx: { - backgroundColor: 'neutral.800', + background: `linear-gradient(0deg, ${theme.palette.primary.main} 0%, ${theme.palette.primary.dark} 90%);`, color: 'common.white', width: 280 } diff --git a/frontend/src/pages/_app.js b/frontend/src/pages/_app.js index 3c4bdc9..06c636d 100644 --- a/frontend/src/pages/_app.js +++ b/frontend/src/pages/_app.js @@ -11,21 +11,25 @@ import { createEmotionCache } from 'src/utils/create-emotion-cache'; import 'simplebar-react/dist/simplebar.min.css'; import { WsProvider } from 'src/contexts/socketio-context'; import '../utils/map.css'; +import { useEffect, useState } from 'react'; const clientSideEmotionCache = createEmotionCache(); const SplashScreen = () => null; const App = (props) => { + const [theme, setTheme] = useState(null); const { Component, emotionCache = clientSideEmotionCache, pageProps } = props; useNProgress(); const getLayout = Component.getLayout ?? ((page) => page); - const theme = createTheme(); + useEffect(() => { + setTheme(createTheme()); + }, []); - return ( + return theme && ( diff --git a/frontend/src/sections/overview/overview-tasks-progress.js b/frontend/src/sections/overview/overview-tasks-progress.js index da8beaf..bfb3c0f 100644 --- a/frontend/src/sections/overview/overview-tasks-progress.js +++ b/frontend/src/sections/overview/overview-tasks-progress.js @@ -97,7 +97,7 @@ const showIcon = (mtpType) => { </Stack> <Avatar sx={{ - backgroundColor: '#f28950', + backgroundColor: 'primary.darkest', height: 56, width: 56 }} diff --git a/frontend/src/sections/overview/overview-traffic.js b/frontend/src/sections/overview/overview-traffic.js index 19b05a3..6fc4bbf 100644 --- a/frontend/src/sections/overview/overview-traffic.js +++ b/frontend/src/sections/overview/overview-traffic.js @@ -70,7 +70,6 @@ const useChartOptions = (labels,title) => { } else{ options.colors = [ - theme.palette.primary.main, theme.palette.info.main, theme.palette.warning.main, theme.palette.graphics.lightest, diff --git a/frontend/src/theme/colors.js b/frontend/src/theme/colors.js index 74ef40e..7d6589e 100644 --- a/frontend/src/theme/colors.js +++ b/frontend/src/theme/colors.js @@ -1,5 +1,5 @@ import { alpha } from '@mui/material/styles'; - + const withAlphas = (color) => { return { ...color, @@ -11,8 +11,16 @@ const withAlphas = (color) => { }; }; -export const neutral = { - 50: '#306d6f', +export const neutral = (colors) => { + console.log("neutral colors:", colors); + let parsedColors = JSON.parse(colors); + + let tableColor = parsedColors["tables"] + let sidebarColorInitial = parsedColors["sidebar_initial"] + let wordsOutsideSidebarColor = parsedColors["words_outside_sidebar"] + + return { + 50: tableColor, 100: '#F3F4F6', 200: '#E5E7EB', 300: '#D2D6DB', @@ -20,18 +28,29 @@ export const neutral = { 500: '#6C737F', 600: '#4D5761', 700: '#FFFFFF', - 800: '#306d6f', - 900: '#30596f' + 800: sidebarColorInitial, + 900: wordsOutsideSidebarColor, +} }; -export const indigo = withAlphas({ - lightest: '#FFFFFF', - light: '#306D6F', - main: '#306D6F', - dark: '#255355', - darkest: '#00a0b8', - contrastText: '#FFFFFF' -}); +export const indigo = (colors) => { + + console.log("indigo colors:", colors); + let parsedColors = JSON.parse(colors); + + let buttonColor = parsedColors["buttons"] + let sidebarColorEnd = parsedColors["sidebar_end"] + let mtpsColor = parsedColors["connected_mtps_color"] + + return withAlphas({ + lightest: '#FFFFFF', + light: '#ff3383', + main: buttonColor, + dark: sidebarColorEnd, + darkest: mtpsColor, + contrastText: '#FFFFFF' + }); +} export const success = withAlphas({ lightest: '#F0FDF9', diff --git a/frontend/src/theme/create-palette.js b/frontend/src/theme/create-palette.js index 43e67f4..39a114f 100644 --- a/frontend/src/theme/create-palette.js +++ b/frontend/src/theme/create-palette.js @@ -2,15 +2,49 @@ import { common } from '@mui/material/colors'; import { alpha } from '@mui/material/styles'; import { error, indigo, info, neutral, success, warning, graphics } from './colors'; +const getColorScheme = async () => { + + let result = await fetch('http://localhost/custom-frontend/colors').catch((error) => { + console.log('Error fetching colors'); + sessionStorage.setItem('colors', JSON.stringify({ + "buttons": "#306d6f", + "sidebar_end": "#306d6f", + "sidebar_initial": "#306d6f", + "tables": "#306d6f", + "words_outside_sidebar": "#30596f", + "connected_mtps_color": "#f28950" + })); + location.reload(); + return + }); + + let response = await result.json(); + let fmtresponse = JSON.stringify(response); + sessionStorage.setItem('colors', fmtresponse); + location.reload(); +} + export function createPalette() { - return { + + let colors = sessionStorage.getItem('colors'); + + if (colors !== null) { + console.log('colors already fetched'); + } else { + getColorScheme(); + } + console.log("colors scheme:", colors); + + let neutralColors = neutral(colors); + + return { action: { - active: neutral[500], - disabled: alpha(neutral[900], 0.38), - disabledBackground: alpha(neutral[900], 0.12), - focus: alpha(neutral[900], 0.16), - hover: alpha(neutral[900], 0.04), - selected: alpha(neutral[900], 0.12) + active: neutralColors[500], + disabled: alpha(neutralColors[900], 0.38), + disabledBackground: alpha(neutralColors[900], 0.12), + focus: alpha(neutralColors[900], 0.16), + hover: alpha(neutralColors[900], 0.04), + selected: alpha(neutralColors[900], 0.12) }, background: { default: common.white, @@ -21,13 +55,13 @@ export function createPalette() { graphics, info, mode: 'light', - neutral, - primary: indigo, + neutral: neutralColors, + primary: indigo(colors), success, text: { - primary: neutral[900], - secondary: neutral[500], - disabled: alpha(neutral[900], 0.38) + primary: neutralColors[900], + secondary: neutralColors[500], + disabled: alpha(neutralColors[900], 0.38) }, warning };