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 { 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 (
<Box
@ -58,7 +60,7 @@ export const Layout = (props) => {
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',

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 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) => {
})}
</Stack>
</Box>
<Divider sx={{ borderColor: 'neutral.700' }} />
</Box>
</Scrollbar>
);
@ -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
}

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 { 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 && (
<CacheProvider value={emotionCache}>
<Head>
<title>

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

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

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

@ -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,

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

@ -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',

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 { 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
};