Use as much as possible mui theme feature (#144)

* fix color theme part1

* fix spacing

* use theme

client/src/components/advancedSearch/Condition.tsx

@@ -168,7 +168,7 @@ const useStyles = makeStyles((theme: Theme) =>
       minWidth: '466px',
       minHeight: '62px',
       background: '#FFFFFF',
-      padding: '12px 16px',
+      padding: theme.spacing(1.5, 2),
       display: 'flex',
       flexDirection: 'row',
       alignItems: 'center',

client/src/components/advancedSearch/ConditionGroup.tsx

@@ -217,14 +217,14 @@ const useStyles = makeStyles((theme: Theme) =>
       '& button': {
         width: '42px',
         height: '32px',
-        color: '#010E29',
+        color: theme.palette.attuDark.main,
       },
       '& button.Mui-selected': {
-        backgroundColor: '#06AFF2',
+        backgroundColor: theme.palette.primary.main,
         color: '#FFFFFF',
       },
       '& button.Mui-selected:hover': {
-        backgroundColor: '#06AFF2',
+        backgroundColor: theme.palette.primary.main,
         color: '#FFFFFF',
       },
     },

client/src/components/advancedSearch/Dialog.tsx

@@ -168,7 +168,7 @@ const useStyles = makeStyles((theme: Theme) =>
     wrapper: {
       '& .disable-exp': {
         userSelect: 'none',
-        color: '#AEAEBB',
+        color: theme.palette.attuGrey.main,
       },
     },
     closeButton: {
@@ -184,10 +184,10 @@ const useStyles = makeStyles((theme: Theme) =>
     },
     resetBtn: {},
     cancelBtn: {
-      marginRight: '32px',
+      marginRight: theme.spacing(4)
     },
     applyBtn: {
-      backgroundColor: '#06AFF2',
+      backgroundColor: theme.palette.primary.main,
       color: 'white',
     },
     copyButton: {
@@ -200,8 +200,8 @@ const useStyles = makeStyles((theme: Theme) =>
       justifyContent: 'space-between',
       alignItems: 'center',
       minHeight: '40px',
-      margin: '8px 32px',
-      padding: '0 16px',
+      margin: theme.spacing(1, 4),
+      padding: theme.spacing(0, 2),
       fontStyle: 'normal',
       fontWeight: 'normal',
       fontSize: '16px',
@@ -212,7 +212,7 @@ const useStyles = makeStyles((theme: Theme) =>
       borderRadius: '8px',
       minWidth: '480px',
       minHeight: '104px',
-      padding: '12px',
+      padding: theme.spacing(1.5),
     },
   })
 );

client/src/components/advancedSearch/Filter.tsx

@@ -328,7 +328,7 @@ const useStyles = makeStyles((theme: Theme) =>
   createStyles({
     wrapper: {},
     afBtn: {
-      color: '#06AFF2',
+      color: theme.palette.primary.main,
     },
   })
 );

client/src/components/customDatePicker/CustomDatePicker.tsx

@@ -15,12 +15,12 @@ const useStyles = makeStyles((theme: Theme) => ({
   },
   icon: {
     color: (props: any) =>
-      props.date ? theme.palette.primary.main : '#82838E',
+      props.date ? theme.palette.primary.main : theme.palette.attuGrey.dark,
   },
   label: {
     marginLeft: '4px',
     color: (props: any) =>
-      props.date ? theme.palette.primary.main : '#82838E',
+      props.date ? theme.palette.primary.main : theme.palette.attuGrey.dark,
     fontWeight: 'bold',
   },
   picker: {

client/src/components/customInput/SearchInput.tsx

@@ -53,7 +53,7 @@ const useSearchStyles = makeStyles(theme => ({
     },
   },
   searchIcon: {
-    color: '#aeaebb',
+    color: theme.palette.attuGrey.main,
     cursor: 'pointer',
     fontSize: '20px',
     width: (props: { searched: boolean }) => `${props.searched ? 0 : '20px'}`,

client/src/components/menu/CommunityBtn.tsx

@@ -44,7 +44,7 @@ const getStyles = makeStyles((theme: Theme) => ({
   },
   head: {
     backgroundColor: theme.palette.primary.main,
-    padding: '16px 24px',
+    padding: theme.spacing(1.5, 2.5),
     color: '#fff',
     borderTopLeftRadius: theme.spacing(1),
     borderTopRightRadius: theme.spacing(1),
@@ -85,7 +85,7 @@ const getStyles = makeStyles((theme: Theme) => ({
   contentDesc: {
     fontSize: theme.spacing(1.5),
     lineHeight: theme.spacing(2.5),
-    color: '#82838e',
+    color: theme.palette.attuGrey.dark,
     marginBottom: theme.spacing(1),
 
   },

client/src/components/status/Status.tsx

@@ -1,7 +1,13 @@
 import { FC, useMemo } from 'react';
 import { ChildrenStatusType, StatusType } from './Types';
 import { useTranslation } from 'react-i18next';
-import { makeStyles, Theme, createStyles, Typography } from '@material-ui/core';
+import {
+  makeStyles,
+  Theme,
+  createStyles,
+  Typography,
+  useTheme,
+} from '@material-ui/core';
 import { LOADING_STATE } from '../../consts/Milvus';
 import StatusIcon from './StatusIcon';
 
@@ -12,7 +18,7 @@ const useStyles = makeStyles((theme: Theme) =>
       alignItems: 'center',
     },
     label: {
-      color: '#82838e',
+      color: theme.palette.attuGrey.dark,
       textTransform: 'capitalize',
     },
     circle: {
@@ -48,13 +54,14 @@ const useStyles = makeStyles((theme: Theme) =>
 const Status: FC<StatusType> = props => {
   const { status, percentage = 0 } = props;
   const { t: commonTrans } = useTranslation();
+  const theme = useTheme();
   const statusTrans = commonTrans('status');
   const { label, color } = useMemo(() => {
     switch (status) {
       case LOADING_STATE.UNLOADED:
         return {
           label: statusTrans.unloaded,
-          color: '#06aff2',
+          color: theme.palette.primary.main,
         };
 
       case LOADING_STATE.LOADED:

client/src/pages/collections/Create.tsx

@@ -33,7 +33,7 @@ const useStyles = makeStyles((theme: Theme) => ({
 
     '& legend': {
       marginBottom: theme.spacing(1),
-      color: `#82838e`,
+      color: theme.palette.attuGrey.dark,
       lineHeight: '20px',
       fontSize: '14px',
     },

client/src/pages/connect/AuthForm.tsx

@@ -41,7 +41,7 @@ const useStyles = makeStyles((theme: Theme) => ({
   logo: {
     width: '42px',
     height: 'auto',
-    marginBottom: '8px',
+    marginBottom: theme.spacing(1),
     display: 'block',
   },
   input: {

client/src/pages/overview/Overview.tsx

@@ -1,4 +1,4 @@
-import { makeStyles, Theme, Typography } from '@material-ui/core';
+import { makeStyles, Theme, Typography, useTheme } from '@material-ui/core';
 import { useCallback, useContext, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import EmptyCard from '../../components/cards/EmptyCard';
@@ -23,12 +23,12 @@ const useStyles = makeStyles((theme: Theme) => ({
     margin: theme.spacing(2, 0),
     lineHeight: '20px',
     fontSize: '14px',
-    color: '#82838e',
+    color: theme.palette.attuGrey.dark,
   },
   cardsWrapper: {
     display: 'grid',
     gridTemplateColumns: 'repeat(auto-fill, minmax(380px, 1fr))',
-    gap: '10px',
+    gap: theme.spacing(2),
   },
 }));
 
@@ -36,6 +36,7 @@ const Overview = () => {
   useNavigationHook(ALL_ROUTER_TYPES.OVERVIEW);
   const { handleAction } = useLoadAndReleaseDialogHook({ type: 'collection' });
   const classes = useStyles();
+  const theme = useTheme();
   const { t: overviewTrans } = useTranslation('overview');
   const { t: collectionTrans } = useTranslation('collection');
   const { t: successTrans } = useTranslation('success');
@@ -105,14 +106,14 @@ const Overview = () => {
         {
           label: overviewTrans('all'),
           value: formatNumber(statistics.collectionCount),
-          valueColor: '#06aff2',
+          valueColor: theme.palette.primary.main,
         },
         {
           label: overviewTrans('data'),
           value: overviewTrans('rows', {
             number: formatNumber(statistics.totalData),
           }) as string,
-          valueColor: '#0689d2',
+          valueColor: theme.palette.primary.dark,
         },
       ],
     };

client/src/pages/overview/collectionCard/CollectionCard.tsx

@@ -17,9 +17,7 @@ const useStyles = makeStyles((theme: Theme) => ({
     '& .link': {
       display: 'flex',
       alignItems: 'center',
-
       margin: theme.spacing(2, 0),
-
       color: theme.palette.attuDark.main,
       fontSize: '20px',
       lineHeight: '24px',
@@ -29,7 +27,7 @@ const useStyles = makeStyles((theme: Theme) => ({
   },
   loading: {
     background: '#F0F4F9',
-    border: `1px dashed #06AFF2`,
+    border: `1px dashed ${theme.palette.primary.main}`,
   },
 
   icon: {
@@ -58,7 +56,6 @@ const useStyles = makeStyles((theme: Theme) => ({
   search: {
     fontSize: '16px',
     marginRight: theme.spacing(0.5),
-
     '& path': {
       fill: '#fff',
     },
@@ -66,7 +63,6 @@ const useStyles = makeStyles((theme: Theme) => ({
   btn: {
     marginRight: theme.spacing(1),
     padding: theme.spacing(0.5, 1),
-
     lineHeight: '20px',
     fontSize: 14,
   },
@@ -117,7 +113,10 @@ const CollectionCard: FC<CollectionCardProps> = ({
       </Link>
       <div className={classes.content}>
         <Typography>{collectionTrans('rowCount')}</Typography>
-        <CustomToolTip title={collectionTrans('entityCountInfo')} placement="bottom">
+        <CustomToolTip
+          title={collectionTrans('entityCountInfo')}
+          placement="bottom"
+        >
           <InfoIcon classes={{ root: classes.icon }} />
         </CustomToolTip>
         <Typography className={classes.rowCount}>{rowCount}</Typography>

client/src/pages/overview/statisticsCard/StatisticsCard.tsx

@@ -6,8 +6,7 @@ const useStyles = makeStyles((theme: Theme) => ({
   wrapper: {
     display: `grid`,
     gridTemplateColumns: 'repeat(auto-fill, minmax(200px, 1fr))',
-    columnGap: '20px',
-
+    columnGap: theme.spacing(2),
     padding: theme.spacing(3),
   },
   itemWrapper: {

client/src/pages/schema/CreateForm.tsx

@@ -18,7 +18,7 @@ const useStyles = makeStyles((theme: Theme) => ({
   },
   paramTitle: {
     margin: theme.spacing(2, 0),
-    color: '#82838e',
+    color: theme.palette.attuGrey.dark,
     lineHeight: '20px',
     fontSize: '14px',
   },

client/src/pages/schema/IndexTypeElement.tsx

@@ -46,7 +46,7 @@ const useStyles = makeStyles((theme: Theme) => ({
     },
   },
   btnDisabled: {
-    color: '#82838e',
+    color: theme.palette.attuGrey.dark,
     pointerEvents: 'none',
 
     '&:hover': {

client/src/pages/system/BaseCard.tsx

@@ -1,36 +1,35 @@
-
 import { FC } from 'react';
 import { makeStyles } from '@material-ui/core';
 import { SvgIcon } from '@material-ui/core';
 import { BaseCardProps } from './Types';
-import { ReactComponent } from '../../assets/imgs/pic.svg'
+import { ReactComponent } from '../../assets/imgs/pic.svg';
 
-const getStyles = makeStyles(() => ({
+const getStyles = makeStyles(theme => ({
   root: {
     backgroundColor: 'white',
     borderRadius: '8px',
     boxShadow: '3px 3px 10px rgba(0, 0, 0, 0.05)',
     boxSizing: 'border-box',
     height: '150px',
-    padding: '16px',
+    padding: theme.spacing(2),
   },
   title: {
-    color: '#82838E',
+    color: theme.palette.attuGrey.dark,
     fontSize: '14px',
     marginBottom: '5px',
     textTransform: 'capitalize',
   },
   content: {
-    color: '#010E29',
+    color: theme.palette.attuDark.main,
     fontSize: '20px',
     fontWeight: 600,
     lineHeight: '36px',
   },
   desc: {
-    color: '#82838E',
+    color: theme.palette.attuGrey.dark,
     fontSize: '14px',
     lineHeight: '36px',
-    marginLeft: "8px",
+    marginLeft: theme.spacing(1),
   },
   emptyRoot: {
     alignItems: 'center',
@@ -41,7 +40,7 @@ const getStyles = makeStyles(() => ({
     '& > svg': {
       marginTop: '10px',
       width: '100%',
-    }
+    },
   },
   emptyTitle: {
     fontSize: '14px',
@@ -50,12 +49,12 @@ const getStyles = makeStyles(() => ({
   },
   emptyDesc: {
     fontSize: '10px',
-    color: '#82838E',
-    marginTop: '8px',
+    color: theme.palette.attuGrey.dark,
+    marginTop: theme.spacing(1),
   },
 }));
 
-const BaseCard: FC<BaseCardProps> = (props) => {
+const BaseCard: FC<BaseCardProps> = props => {
   const classes = getStyles();
   const { children, title, content, desc } = props;
   return (
@@ -67,7 +66,9 @@ const BaseCard: FC<BaseCardProps> = (props) => {
         <div className={classes.emptyRoot}>
           <SvgIcon viewBox="0 0 101 26" component={ReactComponent} {...props} />
           <span className={classes.emptyTitle}>no data available</span>
-          <span className={classes.emptyDesc}>There is no data to show you right now.</span>
+          <span className={classes.emptyDesc}>
+            There is no data to show you right now.
+          </span>
         </div>
       )}
       {children}
@@ -75,4 +76,4 @@ const BaseCard: FC<BaseCardProps> = (props) => {
   );
 };
 
-export default BaseCard;
+export default BaseCard;

client/src/pages/system/DataCard.tsx

@@ -1,6 +1,6 @@
 import { FC } from 'react';
 import { useTranslation } from 'react-i18next';
-import { makeStyles } from '@material-ui/core';
+import { makeStyles, useTheme } from '@material-ui/core';
 import Progress from './Progress';
 import {
   formatByteSize,
@@ -9,13 +9,13 @@ import {
 } from '../../utils/Format';
 import { DataProgressProps, DataSectionProps, DataCardProps } from './Types';
 
-const getStyles = makeStyles(() => ({
+const getStyles = makeStyles(theme => ({
   root: {
     backgroundColor: '#F6F6F6',
     borderTopRightRadius: '8px',
     borderBottomRightRadius: '8px',
     height: '100%',
-    padding: '20px 16px',
+    padding: theme.spacing(1.5, 2),
     boxSizing: 'border-box',
   },
 
@@ -25,33 +25,33 @@ const getStyles = makeStyles(() => ({
   },
 
   content: {
-    color: '#010E29',
+    color: theme.palette.attuDark.main,
     fontSize: '20px',
     fontWeight: 600,
     lineHeight: '36px',
   },
 
   desc: {
-    color: '#82838E',
+    color: theme.palette.attuGrey.dark,
     fontSize: '14px',
     lineHeight: '36px',
-    marginLeft: '8px',
+    marginLeft: theme.spacing(1),
   },
 
   rootName: {
-    color: '#82838E',
+    color: theme.palette.attuGrey.dark,
     fontSize: '20px',
     lineHeight: '24px',
   },
 
   childName: {
-    color: '#06AFF2',
+    color: theme.palette.primary.main,
     fontSize: '20px',
     lineHeight: '24px',
   },
 
   ip: {
-    color: '#010E29',
+    color: theme.palette.attuDark.main,
     fontSize: '16px',
     lineHeight: '24px',
   },
@@ -59,7 +59,7 @@ const getStyles = makeStyles(() => ({
   sectionRoot: {
     borderSpacing: '0 1px',
     display: 'table',
-    marginTop: '24px',
+    marginTop: theme.spacing(2.5),
     width: '100%',
   },
 
@@ -69,28 +69,28 @@ const getStyles = makeStyles(() => ({
 
   sectionHeaderCell: {
     display: 'table-cell',
-    color: '#82838E',
+    color: theme.palette.attuGrey.dark,
     fontSize: '12px',
     lineHeight: '24px',
-    padding: '8px 16px',
+    padding: theme.spacing(1, 2),
     textTransform: 'uppercase',
     width: '50%',
   },
 
   sectionCell: {
     backgroundColor: 'white',
-    color: '#010E29',
+    color: theme.palette.attuDark.main,
     display: 'table-cell',
     fontSize: '14px',
     lineHeight: '24px',
-    padding: '12px 16px',
+    padding: theme.spacing(1.5, 2),
     textTransform: 'capitalize',
     verticalAlign: 'middle',
     width: '50%',
   },
   progressTitle: {
     fontSize: '14px',
-    color: '#010E29',
+    color: theme.palette.attuDark.main,
     lineHeight: '24px',
     display: 'flex',
     justifyContent: 'space-between',
@@ -124,13 +124,14 @@ const DataSection: FC<DataSectionProps> = props => {
 
 const DataProgress: FC<DataProgressProps> = ({ percent = 0, desc = '' }) => {
   const classes = getStyles();
+  const theme = useTheme();
   return (
     <div>
       <div className={classes.progressTitle}>
         <span>{`${Number(percent * 100).toFixed(2)}%`}</span>
         <span>{desc}</span>
       </div>
-      <Progress percent={percent} color="#06AFF2" />
+      <Progress percent={percent} color={theme.palette.primary.main} />
     </div>
   );
 };

client/src/pages/system/LineChartCard.tsx

@@ -1,41 +1,40 @@
-
 import { FC, useState, useEffect, useRef } from 'react';
-import { makeStyles } from '@material-ui/core';
+import { makeStyles, useTheme } from '@material-ui/core';
 import BaseCard from './BaseCard';
 import { LineChartCardProps, LinceChartNode } from './Types';
 
-const getStyles = makeStyles(() => ({
+const getStyles = makeStyles(theme => ({
   root: {
     transform: 'scaleY(-1)',
     maxWidth: '90%',
   },
   ycoord: {
     cursor: 'pointer',
-    "&:hover, &:focus": {
-      "& line": {
+    '&:hover, &:focus': {
+      '& line': {
         transition: 'all .25s',
         opacity: 1,
       },
     },
 
-    "&:hover": {
-      "& circle": {
-        fill: '#06AFF2',
+    '&:hover': {
+      '& circle': {
+        fill: theme.palette.primary.main,
       },
     },
 
-    "&:focus": {
+    '&:focus': {
       outline: 'none',
 
-      "& circle": {
+      '& circle': {
         fill: '#06F3AF',
       },
     },
-  }
+  },
 }));
 
-const LineChartCard: FC<LineChartCardProps> = (props) => {
-
+const LineChartCard: FC<LineChartCardProps> = props => {
+  const theme = useTheme();
   const FULL_HEIGHT = 60;
   const FULL_WIDTH = 300;
   const ROUND = 5;
@@ -73,10 +72,10 @@ const LineChartCard: FC<LineChartCardProps> = (props) => {
       if (nodes.current) {
         const newNodes = nodes.current.slice(0);
         const newNode = {
-          percent: value / currentMax * 100,
+          percent: (value / currentMax) * 100,
           value,
           timestamp: Date.now(),
-        }
+        };
         newNodes.push(newNode);
         nodes.current = newNodes;
 
@@ -89,37 +88,83 @@ const LineChartCard: FC<LineChartCardProps> = (props) => {
     }
   }, [value]);
 
-  return (
-    nodes.current.length ? (
-      <BaseCard title={title} content={`${Math.round(currentNode.value)}ms`} desc={new Date(currentNode.timestamp).toLocaleString()}>
-        <svg className={classes.root} onMouseEnter={() => isHover.current = true} onMouseLeave={() => isHover.current = false} width={FULL_WIDTH} height={FULL_HEIGHT} viewBox={`0 5 ${FULL_WIDTH} ${FULL_HEIGHT}`} fill="white" xmlns="http://www.w3.org/2000/svg">
-          {
-            displayNodes.map((node, index) => {
-              const x1 = FULL_WIDTH - (displayNodes.length - index + 1) * STEP;
-              const y1 = node.percent * .5 + ROUND * 2;
-
-              let line = null;
-              if (index < displayNodes.length - 1) {
-                const x2 = FULL_WIDTH - (displayNodes.length - index) * STEP;
-                const y2 = displayNodes[index + 1]['percent'] * .5 + ROUND * 2;
-                line = <line x1={x1} y1={y1} x2={x2} y2={y2} stroke="#06AFF2" />;
-              }
-              return (
-                <g key={`${node.value}${index}`}>
-                  {line}
-                  <g className={classes.ycoord} onMouseOver={() => { setCurrentNode(node) }}>
-                    <circle cx={x1} cy={y1} r={ROUND} fill="white" stroke="#06AFF2" />
-                    <rect opacity="0" x={x1 - ROUND} y={0} width={ROUND * 2} height={FULL_HEIGHT} fill="#E9E9ED" />
-                    <line opacity="0" x1={x1} y1={0} x2={x1} y2={FULL_WIDTH} strokeWidth="2" stroke="#06AFF2" strokeDasharray="2.5" />
-                  </g>
-                </g>
-              )
-            })
+  return nodes.current.length ? (
+    <BaseCard
+      title={title}
+      content={`${Math.round(currentNode.value)}ms`}
+      desc={new Date(currentNode.timestamp).toLocaleString()}
+    >
+      <svg
+        className={classes.root}
+        onMouseEnter={() => (isHover.current = true)}
+        onMouseLeave={() => (isHover.current = false)}
+        width={FULL_WIDTH}
+        height={FULL_HEIGHT}
+        viewBox={`0 5 ${FULL_WIDTH} ${FULL_HEIGHT}`}
+        fill="white"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        {displayNodes.map((node, index) => {
+          const x1 = FULL_WIDTH - (displayNodes.length - index + 1) * STEP;
+          const y1 = node.percent * 0.5 + ROUND * 2;
+
+          let line = null;
+          if (index < displayNodes.length - 1) {
+            const x2 = FULL_WIDTH - (displayNodes.length - index) * STEP;
+            const y2 = displayNodes[index + 1]['percent'] * 0.5 + ROUND * 2;
+            line = (
+              <line
+                x1={x1}
+                y1={y1}
+                x2={x2}
+                y2={y2}
+                stroke={theme.palette.primary.main}
+              />
+            );
           }
-        </svg>
-      </BaseCard >
-    ) : <BaseCard title={title} />
+          return (
+            <g key={`${node.value}${index}`}>
+              {line}
+              <g
+                className={classes.ycoord}
+                onMouseOver={() => {
+                  setCurrentNode(node);
+                }}
+              >
+                <circle
+                  cx={x1}
+                  cy={y1}
+                  r={ROUND}
+                  fill="white"
+                  stroke={theme.palette.primary.main}
+                />
+                <rect
+                  opacity="0"
+                  x={x1 - ROUND}
+                  y={0}
+                  width={ROUND * 2}
+                  height={FULL_HEIGHT}
+                  fill="#E9E9ED"
+                />
+                <line
+                  opacity="0"
+                  x1={x1}
+                  y1={0}
+                  x2={x1}
+                  y2={FULL_WIDTH}
+                  strokeWidth="2"
+                  stroke={theme.palette.primary.main}
+                  strokeDasharray="2.5"
+                />
+              </g>
+            </g>
+          );
+        })}
+      </svg>
+    </BaseCard>
+  ) : (
+    <BaseCard title={title} />
   );
 };
 
-export default LineChartCard;
+export default LineChartCard;

client/src/pages/system/MiniTopology.tsx

@@ -1,5 +1,5 @@
 import { FC } from 'react';
-import { makeStyles, Theme } from '@material-ui/core';
+import { makeStyles, Theme, useTheme } from '@material-ui/core';
 import { MiniTopoProps } from './Types';
 
 const getStyles = makeStyles((theme: Theme) => ({
@@ -34,53 +34,115 @@ const getStyles = makeStyles((theme: Theme) => ({
       },
 
       '& circle': {
-        fill: '#06AFF2',
-        stroke: '#06AFF2',
+        fill: theme.palette.primary.main,
+        stroke: theme.palette.primary.main,
       },
 
       '& text': {
         fill: 'white',
-      }
-    }
+      },
+    },
   },
 }));
 
 const capitalize = (s: string) => {
   return s.charAt(0).toUpperCase() + s.slice(1);
-}
+};
 
-const MiniTopo: FC<MiniTopoProps> = (props) => {
+const MiniTopo: FC<MiniTopoProps> = props => {
   const classes = getStyles();
+  const theme = useTheme();
   const { selectedCord, selectedChildNode, setCord } = props;
 
-  const WIDTH = 400;                // width for svg
-  const HEIGHT = 400;               // height for svg
-  const LINE = 80;                // line lenght from lv2 node
-  const ANGLE = 10;                // angle offset for lv2 node
-  const R1 = 45;                    // root node radius
-  const R2 = 30;                    // lv1 node radius
-  const W3 = 20;                    // width of child rect
+  const WIDTH = 400; // width for svg
+  const HEIGHT = 400; // height for svg
+  const LINE = 80; // line lenght from lv2 node
+  const ANGLE = 10; // angle offset for lv2 node
+  const R1 = 45; // root node radius
+  const R2 = 30; // lv1 node radius
+  const W3 = 20; // width of child rect
 
-  const childNodeCenterX = WIDTH / 2 + LINE * Math.cos(ANGLE * Math.PI / 180);
-  const childNodeCenterY = HEIGHT / 2 + LINE * Math.sin(ANGLE * Math.PI / 180);
+  const childNodeCenterX = WIDTH / 2 + LINE * Math.cos((ANGLE * Math.PI) / 180);
+  const childNodeCenterY =
+    HEIGHT / 2 + LINE * Math.sin((ANGLE * Math.PI) / 180);
 
   return (
-    <svg className={classes.container} width={WIDTH} height={HEIGHT} viewBox={`0 0 ${WIDTH} ${HEIGHT}`} xmlns="http://www.w3.org/2000/svg">
+    <svg
+      className={classes.container}
+      width={WIDTH}
+      height={HEIGHT}
+      viewBox={`0 0 ${WIDTH} ${HEIGHT}`}
+      xmlns="http://www.w3.org/2000/svg"
+    >
       <rect width="100%" height="100%" fill="white" />
-      <line x1={`${WIDTH / 3}`} y1={`${HEIGHT / 3}`} x2={childNodeCenterX} y2={childNodeCenterY} stroke="#06AFF2" />
-      <g className={classes.childNode} onClick={() => { setCord(null) }}>
-        <circle cx={`${WIDTH / 3}`} cy={`${HEIGHT / 3}`} r={R1} fill="white" stroke="#06AFF2" />
-        <text fontFamily="Roboto" alignmentBaseline="middle" textAnchor="middle" fill="#06AFF2" fontWeight="700" fontSize="12" x={`${WIDTH / 3}`} y={`${HEIGHT / 3}`}>{selectedCord ? capitalize(selectedCord.infos?.name) : ''}</text>
+      <line
+        x1={`${WIDTH / 3}`}
+        y1={`${HEIGHT / 3}`}
+        x2={childNodeCenterX}
+        y2={childNodeCenterY}
+        stroke={theme.palette.primary.main}
+      />
+      <g
+        className={classes.childNode}
+        onClick={() => {
+          setCord(null);
+        }}
+      >
+        <circle
+          cx={`${WIDTH / 3}`}
+          cy={`${HEIGHT / 3}`}
+          r={R1}
+          fill="white"
+          stroke={theme.palette.primary.main}
+        />
+        <text
+          fontFamily="Roboto"
+          alignmentBaseline="middle"
+          textAnchor="middle"
+          fill={theme.palette.primary.main}
+          fontWeight="700"
+          fontSize="12"
+          x={`${WIDTH / 3}`}
+          y={`${HEIGHT / 3}`}
+        >
+          {selectedCord ? capitalize(selectedCord.infos?.name) : ''}
+        </text>
       </g>
       <g>
-        <svg width="60" height="60" viewBox="0 0 60 60" x={childNodeCenterX - 30} y={childNodeCenterY - 30}>
-          <circle cx={R2} cy={R2} r={R2} fill="#06AFF2" stroke="white" />
-          <rect className="selected" x={R2 - W3 / 2} y={R2 - W3 / 2} width={W3} height={W3} fill="white" />
+        <svg
+          width="60"
+          height="60"
+          viewBox="0 0 60 60"
+          x={childNodeCenterX - 30}
+          y={childNodeCenterY - 30}
+        >
+          <circle
+            cx={R2}
+            cy={R2}
+            r={R2}
+            fill={theme.palette.primary.main}
+            stroke="white"
+          />
+          <rect
+            className="selected"
+            x={R2 - W3 / 2}
+            y={R2 - W3 / 2}
+            width={W3}
+            height={W3}
+            fill="white"
+          />
         </svg>
-        <text fontFamily="Roboto" textAnchor="middle" fill="#82838E" fontSize="12" x={childNodeCenterX} y={childNodeCenterY + 50}>{`${selectedChildNode ? selectedChildNode.infos?.name : ''}`}</text>
+        <text
+          fontFamily="Roboto"
+          textAnchor="middle"
+          fill={theme.palette.attuGrey.dark}
+          fontSize="12"
+          x={childNodeCenterX}
+          y={childNodeCenterY + 50}
+        >{`${selectedChildNode ? selectedChildNode.infos?.name : ''}`}</text>
       </g>
-    </svg >
+    </svg>
   );
 };
 
-export default MiniTopo;
+export default MiniTopo;

client/src/pages/system/Progress.tsx

@@ -1,6 +1,5 @@
-
 import { FC } from 'react';
-import { makeStyles } from '@material-ui/core';
+import { makeStyles, useTheme } from '@material-ui/core';
 import { ProgressProps } from './Types';
 
 const getStyles = makeStyles(() => ({
@@ -9,22 +8,49 @@ const getStyles = makeStyles(() => ({
     transform: 'scaleY(-1)',
     width: '100%',
 
-    "& line": {
+    '& line': {
       transformOrigin: '10px 15px',
     },
   },
 }));
 
-const Progress: FC<ProgressProps> = (props) => {
+const Progress: FC<ProgressProps> = props => {
   const classes = getStyles();
+  const theme = useTheme();
   const { percent = 0, color = '#06F3AF' } = props;
 
   return (
-    <svg className={classes.root} width="300" height="30" viewBox="0 0 300 30" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <line x1={10} y1={15} x2={290} y2={15} vectorEffect="non-scaling-stroke" strokeWidth="12" stroke="#AEAEBB" strokeLinecap="round" />
-      <line x1={10} y1={15} x2={290} y2={15} vectorEffect="non-scaling-stroke" transform={`scale(${percent}, 1)`} strokeWidth="12" stroke={color} strokeLinecap="round" />
-    </svg >
+    <svg
+      className={classes.root}
+      width="300"
+      height="30"
+      viewBox="0 0 300 30"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <line
+        x1={10}
+        y1={15}
+        x2={290}
+        y2={15}
+        vectorEffect="non-scaling-stroke"
+        strokeWidth="12"
+        stroke={theme.palette.attuGrey.main}
+        strokeLinecap="round"
+      />
+      <line
+        x1={10}
+        y1={15}
+        x2={290}
+        y2={15}
+        vectorEffect="non-scaling-stroke"
+        transform={`scale(${percent}, 1)`}
+        strokeWidth="12"
+        stroke={color}
+        strokeLinecap="round"
+      />
+    </svg>
   );
 };
 
-export default Progress;
+export default Progress;

client/src/styles/theme.ts

@@ -9,7 +9,7 @@ type overridesNameToClassKey = {
 };
 
 declare module '@material-ui/core/styles/overrides' {
-  export interface ComponentNameToClassKey extends overridesNameToClassKey { }
+  export interface ComponentNameToClassKey extends overridesNameToClassKey {}
 }
 declare module '@material-ui/core/styles/createPalette' {
   interface Palette {