louis/oktopus
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(frontend) custom colors | close #296

Browse Source
This commit is contained in:
leandrofars 2024-07-08 14:39:00 -03:00
parent fd33b2e291
commit 85f0a6b2cd
7 changed files with 93 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/src/layouts/auth/layout.js
View File

@ -3,9 +3,11 @@ import NextLink from 'next/link';
import Link from 'next/link' import Link from 'next/link'
import { Box, Typography, Unstable_Grid2 as Grid } from '@mui/material'; import { Box, Typography, Unstable_Grid2 as Grid } from '@mui/material';
import { Logo } from 'src/components/logo'; import { Logo } from 'src/components/logo';
import { useTheme } from '@mui/material'
export const Layout = (props) => { export const Layout = (props) => {
const { children } = props; const { children } = props;
const theme = useTheme();
return ( return (
<Box <Box
@ -58,7 +60,7 @@ export const Layout = (props) => {
lg={6} lg={6}
sx={{ sx={{
alignItems: 'center', 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', color: 'white',
display: 'flex', display: 'flex',
justifyContent: 'center', justifyContent: 'center',

10
frontend/src/layouts/dashboard/side-nav.js
View File

@ -2,8 +2,6 @@ import NextLink from 'next/link';
import { usePathname } from 'next/navigation'; import { usePathname } from 'next/navigation';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import Link from 'next/link' import Link from 'next/link'
import ArrowTopRightOnSquareIcon from '@heroicons/react/24/solid/ArrowTopRightOnSquareIcon';
import ChevronUpDownIcon from '@heroicons/react/24/solid/ChevronUpDownIcon';
import { import {
Box, Box,
Button, Button,
@ -18,12 +16,15 @@ import { Logo } from 'src/components/logo';
import { Scrollbar } from 'src/components/scrollbar'; import { Scrollbar } from 'src/components/scrollbar';
import { items } from './config'; import { items } from './config';
import { SideNavItem } from './side-nav-item'; import { SideNavItem } from './side-nav-item';
import { useTheme } from '@mui/material';
export const SideNav = (props) => { export const SideNav = (props) => {
const { open, onClose } = props; const { open, onClose } = props;
const pathname = usePathname(); const pathname = usePathname();
const lgUp = useMediaQuery((theme) => theme.breakpoints.up('lg')); const lgUp = useMediaQuery((theme) => theme.breakpoints.up('lg'));
const theme = useTheme();
const isItemActive = (currentPath, itemPath) => { const isItemActive = (currentPath, itemPath) => {
if (currentPath === itemPath) { if (currentPath === itemPath) {
return true; return true;
@ -131,7 +132,6 @@ export const SideNav = (props) => {
})} })}
</Stack> </Stack>
</Box> </Box>
<Divider sx={{ borderColor: 'neutral.700' }} />
</Box> </Box>
</Scrollbar> </Scrollbar>
); );
@ -143,7 +143,7 @@ export const SideNav = (props) => {
open open
PaperProps={{ PaperProps={{
sx: { sx: {
backgroundColor: 'neutral.800', background: `linear-gradient(0deg, ${theme.palette.primary.main} 0%, ${theme.palette.primary.dark} 90%);`,
color: 'common.white', color: 'common.white',
width: 280 width: 280
} }
@ -162,7 +162,7 @@ export const SideNav = (props) => {
open={open} open={open}
PaperProps={{ PaperProps={{
sx: { sx: {
backgroundColor: 'neutral.800', background: `linear-gradient(0deg, ${theme.palette.primary.main} 0%, ${theme.palette.primary.dark} 90%);`,
color: 'common.white', color: 'common.white',
width: 280 width: 280
} }

8
frontend/src/pages/_app.js
View File

@ -11,21 +11,25 @@ import { createEmotionCache } from 'src/utils/create-emotion-cache';
import 'simplebar-react/dist/simplebar.min.css'; import 'simplebar-react/dist/simplebar.min.css';
import { WsProvider } from 'src/contexts/socketio-context'; import { WsProvider } from 'src/contexts/socketio-context';
import '../utils/map.css'; import '../utils/map.css';
import { useEffect, useState } from 'react';
const clientSideEmotionCache = createEmotionCache(); const clientSideEmotionCache = createEmotionCache();
const SplashScreen = () => null; const SplashScreen = () => null;
const App = (props) => { const App = (props) => {
const [theme, setTheme] = useState(null);
const { Component, emotionCache = clientSideEmotionCache, pageProps } = props; const { Component, emotionCache = clientSideEmotionCache, pageProps } = props;
useNProgress(); useNProgress();
const getLayout = Component.getLayout ?? ((page) => page); const getLayout = Component.getLayout ?? ((page) => page);
const theme = createTheme(); useEffect(() => {
setTheme(createTheme());
}, []);
return ( return theme && (
<CacheProvider value={emotionCache}> <CacheProvider value={emotionCache}>
<Head> <Head>
<title> <title>

2
frontend/src/sections/overview/overview-tasks-progress.js
View File

@ -97,7 +97,7 @@ const showIcon = (mtpType) => {
</Stack> </Stack>
<Avatar <Avatar
sx={{ sx={{
backgroundColor: '#f28950', backgroundColor: 'primary.darkest',
height: 56, height: 56,
width: 56 width: 56
}} }}

1
frontend/src/sections/overview/overview-traffic.js
View File

@ -70,7 +70,6 @@ const useChartOptions = (labels,title) => {
} }
else{ else{
options.colors = [ options.colors = [
theme.palette.primary.main,
theme.palette.info.main, theme.palette.info.main,
theme.palette.warning.main, theme.palette.warning.main,
theme.palette.graphics.lightest, theme.palette.graphics.lightest,

45
frontend/src/theme/colors.js
View File

@ -1,5 +1,5 @@
import { alpha } from '@mui/material/styles'; import { alpha } from '@mui/material/styles';
const withAlphas = (color) => { const withAlphas = (color) => {
return { return {
...color, ...color,
@ -11,8 +11,16 @@ const withAlphas = (color) => {
}; };
}; };
export const neutral = { export const neutral = (colors) => {
50: '#306d6f', 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', 100: '#F3F4F6',
200: '#E5E7EB', 200: '#E5E7EB',
300: '#D2D6DB', 300: '#D2D6DB',
@ -20,18 +28,29 @@ export const neutral = {
500: '#6C737F', 500: '#6C737F',
600: '#4D5761', 600: '#4D5761',
700: '#FFFFFF', 700: '#FFFFFF',
800: '#306d6f', 800: sidebarColorInitial,
900: '#30596f' 900: wordsOutsideSidebarColor,
}
}; };
export const indigo = withAlphas({ export const indigo = (colors) => {
lightest: '#FFFFFF',
light: '#306D6F', console.log("indigo colors:", colors);
main: '#306D6F', let parsedColors = JSON.parse(colors);
dark: '#255355',
darkest: '#00a0b8', let buttonColor = parsedColors["buttons"]
contrastText: '#FFFFFF' 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({ export const success = withAlphas({
lightest: '#F0FDF9', lightest: '#F0FDF9',

58
frontend/src/theme/create-palette.js
View File

@ -2,15 +2,49 @@ import { common } from '@mui/material/colors';
import { alpha } from '@mui/material/styles'; import { alpha } from '@mui/material/styles';
import { error, indigo, info, neutral, success, warning, graphics } from './colors'; 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() { 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: { action: {
active: neutral[500], active: neutralColors[500],
disabled: alpha(neutral[900], 0.38), disabled: alpha(neutralColors[900], 0.38),
disabledBackground: alpha(neutral[900], 0.12), disabledBackground: alpha(neutralColors[900], 0.12),
focus: alpha(neutral[900], 0.16), focus: alpha(neutralColors[900], 0.16),
hover: alpha(neutral[900], 0.04), hover: alpha(neutralColors[900], 0.04),
selected: alpha(neutral[900], 0.12) selected: alpha(neutralColors[900], 0.12)
}, },
background: { background: {
default: common.white, default: common.white,
@ -21,13 +55,13 @@ export function createPalette() {
graphics, graphics,
info, info,
mode: 'light', mode: 'light',
neutral, neutral: neutralColors,
primary: indigo, primary: indigo(colors),
success, success,
text: { text: {
primary: neutral[900], primary: neutralColors[900],
secondary: neutral[500], secondary: neutralColors[500],
disabled: alpha(neutral[900], 0.38) disabled: alpha(neutralColors[900], 0.38)
}, },
warning warning
}; };