refactor

web/src/style/colors.js

@@ -72,7 +72,7 @@ export const themeColors = {
     detailedView: {
       gradientStartColor: '#656f76',
       gradientEndColor: '#545a5e',
-      cacheSectionBGColor: rgba('#545a5e', 0.7),
+      cacheSectionBGColor: '#dee3e5',
     },
     addDialog: {
       gradientStartColor: '#656f76',
@@ -98,8 +98,10 @@ export const themeColors = {
 export const mainColors = {
   light: {
     primary: '#00a572',
+    secondary: '#00a572',
   },
   dark: {
     primary: '#323637',
+    secondary: '#dee3e5',
   },
 }

web/src/style/materialUISetup.js

@@ -12,6 +12,7 @@ export const darkTheme = createMuiTheme({
   palette: {
     type: THEME_MODES.DARK,
     primary: { main: mainColors.dark.primary },
+    secondary: { main: mainColors.dark.secondary },
   },
 })
 export const lightTheme = createMuiTheme({
@@ -19,6 +20,7 @@ export const lightTheme = createMuiTheme({
   palette: {
     type: THEME_MODES.LIGHT,
     primary: { main: mainColors.light.primary },
+    secondary: { main: mainColors.light.secondary },
   },
 })
 
@@ -48,6 +50,7 @@ export const useMaterialUITheme = () => {
         palette: {
           type: theme,
           primary: { main: mainColors[theme].primary },
+          secondary: { main: mainColors[theme].secondary },
         },
       }),
     [theme],