feat(frontend): new color palette for graphics

frontend/src/sections/overview/overview-traffic.js

@@ -59,7 +59,16 @@ const useChartOptions = (labels,title) => {
       theme.palette.success.main,
       theme.palette.error.main,
     ]
-  }else{
+  }else if(title === "Vendors"){
+    options.colors = [
+      theme.palette.graphics.dark,
+      theme.palette.graphics.darkest,
+      theme.palette.graphics.light,
+      theme.palette.graphics.main,
+      theme.palette.graphics.lightest, 
+    ]
+  }
+  else{
     options.colors = [
       theme.palette.primary.main,
       theme.palette.info.main,

frontend/src/theme/colors.js

@@ -64,7 +64,15 @@ export const error = withAlphas({
   lightest: '#FEF3F2',
   light: '#FEE4E2',
   main: '#F04438',
-  dark: '#B42318',
+  dark: '#29ADB2',
   darkest: '#7A271A',
   contrastText: '#FFFFFF'
 });
+
+export const graphics = withAlphas({
+  lightest: '#9EC8B9',
+  light: '#706233',
+  main: '#1B4242',
+  dark: '#FFC5C5',
+  darkest: '#7071E8'
+});

frontend/src/theme/create-palette.js

@@ -1,6 +1,6 @@
 import { common } from '@mui/material/colors';
 import { alpha } from '@mui/material/styles';
-import { error, indigo, info, neutral, success, warning } from './colors';
+import { error, indigo, info, neutral, success, warning, graphics } from './colors';
 
 export function createPalette() {
   return {
@@ -18,6 +18,7 @@ export function createPalette() {
     },
     divider: '#F2F4F7',
     error,
+    graphics,
     info,
     mode: 'light',
     neutral,