update material theme config

client/src/components/cards/EmptyCard.tsx

@@ -11,7 +11,7 @@ const useStyles = makeStyles((theme: Theme) => ({
     marginTop: theme.spacing(4),
     fontSize: '36px',
     lineHeight: '42px',
-    color: '#82838e',
+    color: theme.palette.milvusGrey.dark,
     fontWeight: 'bold',
     letterSpacing: '-0.02em',
   },

client/src/components/customDialog/DeleteDialogTemplate.tsx

@@ -33,7 +33,7 @@ const useStyles = makeStyles((theme: Theme) => ({
     padding: '10px 12px',
   },
   cancelBtn: {
-    color: '#82838e',
+    color: theme.palette.milvusGrey.dark,
   },
 }));
 

client/src/components/layout/Layout.tsx

@@ -32,7 +32,7 @@ const useStyles = makeStyles((theme: Theme) =>
     },
     normalConsole: {
       '& path': {
-        fill: '#82838e',
+        fill: theme.palette.milvusGrey.dark,
       },
     },
   })

client/src/components/menu/NavMenu.tsx

@@ -29,7 +29,7 @@ const useStyles = makeStyles((theme: Theme) =>
       marginLeft: theme.spacing(3),
 
       width: 'initial',
-      color: '#82838e',
+      color: theme.palette.milvusGrey.dark,
     },
     itemIcon: {
       minWidth: '20px',
@@ -39,7 +39,7 @@ const useStyles = makeStyles((theme: Theme) =>
         fill: 'transparent',
 
         '& path': {
-          stroke: '#82838e',
+          stroke: theme.palette.milvusGrey.dark,
         },
       },
     },

client/src/pages/structure/Structure.tsx

@@ -38,7 +38,7 @@ const useStyles = makeStyles((theme: Theme) => ({
       marginRight: theme.spacing(2),
 
       '& .key': {
-        color: '#82838e',
+        color: theme.palette.milvusGrey.dark,
         display: 'inline-block',
         marginRight: theme.spacing(0.5),
       },

client/src/styles/theme.ts

@@ -3,6 +3,17 @@ import {
   unstable_createMuiStrictModeTheme as createMuiTheme,
 } from '@material-ui/core/styles';
 
+declare module '@material-ui/core/styles/createPalette' {
+  interface Palette {
+    milvusBlue: Palette['primary'];
+    milvusGrey: Palette['primary'];
+  }
+  interface PaletteOptions {
+    milvusBlue: PaletteOptions['primary'];
+    milvusGrey: PaletteOptions['primary'];
+  }
+}
+
 const commonThemes = {
   typography: {
     fontFamily: [
@@ -21,8 +32,8 @@ const commonThemes = {
   palette: {
     primary: {
       main: '#06aff2',
-      light: '#65daf8',
-      dark: '#009bc4',
+      light: '#bfdeff',
+      dark: '#0689D2',
     },
     secondary: {
       light: '#82d3ba',
@@ -34,6 +45,16 @@ const commonThemes = {
       light: '#ff8f68',
       dark: '#cd3804',
     },
+    milvusBlue: {
+      main: '#f8f8fc',
+      dark: '#dcdce3',
+    },
+    milvusGrey: {
+      main: '#aeaebb',
+      light: '#dcdce3',
+      dark: '#82838e',
+      contrastText: '#f8f8fc',
+    },
   },
   breakpoints: {
     values: {
@@ -59,15 +80,17 @@ export const theme = createMuiTheme({
       h1: {
         fontSize: '36px',
         lineHeight: '42px',
+        fontWeight: 'bold',
         letterSpacing: '-0.02em',
       },
       h2: {
         lineHeight: '24px',
         fontSize: '28px',
+        fontWeight: 'bold',
       },
       h3: {
         lineHeight: '20px',
-        fontSize: '23px',
+        fontSize: '24px',
         fontWeight: 'bold',
       },
       h4: {
@@ -87,14 +110,17 @@ export const theme = createMuiTheme({
         lineHeight: '24px',
         letterSpacing: '-0.01em',
       },
+      // style for element p
       body1: {
         fontSize: '14px',
         lineHeight: '20px',
       },
+      // small caption
       body2: {
         fontSize: '12px',
         lineHeight: '16px',
       },
+      // tiny caption
       caption: {
         fontSize: '10px',
         lineHeight: '12px',