adjust UI style (#404)

Signed-off-by: ryjiang <jiangruiyi@gmail.com>

client/src/components/customTabList/CustomTabList.tsx

@@ -19,7 +19,7 @@ const useStyles = makeStyles((theme: Theme) => ({
     backgroundColor: theme.palette.primary.main,
   },
   tabContainer: {
-    borderBottom: '1px solid #e9e9ed',
+    borderBottom: '1px solid #e0e0e0',
   },
   tabContent: {
     minWidth: 0,

client/src/components/customTabList/RouteTabList.tsx

@@ -11,16 +11,19 @@ const useStyles = makeStyles((theme: Theme) => ({
     flexGrow: 1,
     '& .MuiTab-wrapper': {
       textTransform: 'capitalize',
-      fontWeight: 'bold',
+      fontWeight: 'normal',
       color: '#323232',
     },
+    background: '#fff',
+    border: '1px solid #e9e9ed',
+    padding: theme.spacing(0, 1),
   },
   tab: {
     height: theme.spacing(0.5),
     backgroundColor: theme.palette.primary.main,
   },
   tabContainer: {
-    borderBottom: '1px solid #e9e9ed',
+    borderBottom: '1px solid #e0e0e0',
   },
   tabContent: {
     minWidth: 0,
@@ -29,7 +32,7 @@ const useStyles = makeStyles((theme: Theme) => ({
   tabPanel: {
     flexBasis: 0,
     flexGrow: 1,
-    marginTop: theme.spacing(2),
+    marginTop: theme.spacing(1),
     overflow: 'hidden',
   },
 }));

client/src/components/layout/Header.tsx

@@ -21,14 +21,17 @@ const useStyles = makeStyles((theme: Theme) =>
       display: 'flex',
       alignItems: 'center',
       color: theme.palette.common.black,
-      marginRight: theme.spacing(5),
+      paddingRight: theme.spacing(1),
+      paddingBottom: theme.spacing(1),
+      backgroundColor: '#fff',
+      borderBottom: '1px solid #e0e0e0',
     },
     contentWrapper: {
       display: 'flex',
       justifyContent: 'space-between',
       alignItems: 'center',
-      paddingTop: theme.spacing(3),
-      paddingLeft: theme.spacing(3),
+      paddingTop: theme.spacing(1),
+      paddingLeft: theme.spacing(2),
       flex: 1,
     },
     navigation: {
@@ -45,7 +48,7 @@ const useStyles = makeStyles((theme: Theme) =>
       alignItems: 'center',
 
       '& .text': {
-        marginRight: theme.spacing(3),
+        marginRight: theme.spacing(2),
 
         '& .address': {
           fontSize: '14px',

client/src/components/menu/NavMenu.tsx

@@ -20,7 +20,7 @@ const duration = `${timeout}ms`;
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
     root: {
-      borderRight: '1px solid #efefef',
+      borderRight: '1px solid #e0e0e0',
       background: '#fff',
       paddingTop: 0,
       paddingBottom: theme.spacing(4),
@@ -48,7 +48,7 @@ const useStyles = makeStyles((theme: Theme) =>
       width: 'initial',
       color: theme.palette.attuGrey.dark,
       '&:hover': {
-        backgroundColor: '#efefef',
+        backgroundColor: '#e0e0e0',
       },
     },
     itemIcon: {
@@ -69,7 +69,7 @@ const useStyles = makeStyles((theme: Theme) =>
     },
     active: {
       color: '#000',
-      backgroundColor: '#efefef',
+      backgroundColor: '#e0e0e0',
 
       '& .icon': {
         stroke: theme.palette.primary.main,
@@ -113,7 +113,7 @@ const useStyles = makeStyles((theme: Theme) =>
       position: 'fixed',
       borderRadius: '50%',
       backgroundColor: 'white',
-      top: '64px',
+      top: '24px',
       transition: theme.transitions.create('all', {
         duration,
       }),

client/src/pages/collections/Collection.tsx

@@ -15,7 +15,7 @@ import Segments from '../segments/Segments';
 const useStyles = makeStyles((theme: Theme) => ({
   wrapper: {
     flexDirection: 'row',
-    gap: theme.spacing(4),
+    gap: theme.spacing(2),
   },
   card: {
     boxShadow: 'none',

client/src/pages/system/BaseCard.tsx

@@ -2,13 +2,11 @@ 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 pic from '../../assets/imgs/pic.svg?react';
 
 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: theme.spacing(2),
@@ -64,7 +62,7 @@ const BaseCard: FC<BaseCardProps> = props => {
       {desc && <span className={classes.desc}>{desc}</span>}
       {!content && !desc && (
         <div className={classes.emptyRoot}>
-          <SvgIcon viewBox="0 0 101 26" component={ReactComponent} {...props} />
+          <SvgIcon viewBox="0 0 101 26" component={pic} {...props} />
           <span className={classes.emptyTitle}>no data available</span>
           <span className={classes.emptyDesc}>
             There is no data to show you right now.

client/src/pages/system/DataCard.tsx

@@ -8,8 +8,6 @@ import { DataProgressProps, DataSectionProps, DataCardProps } from './Types';
 const getStyles = makeStyles(theme => ({
   root: {
     backgroundColor: '#F6F6F6',
-    borderTopRightRadius: '8px',
-    borderBottomRightRadius: '8px',
     height: '100%',
     padding: theme.spacing(1.5, 2),
     boxSizing: 'border-box',

client/src/pages/system/NodeListView.tsx

@@ -26,8 +26,6 @@ const getStyles = makeStyles((theme: Theme) => ({
     gridTemplateColumns: 'repeat(4, minmax(300px, 1fr))',
   },
   contentContainer: {
-    borderRadius: '8px',
-    boxShadow: '3px 3px 10px rgba(0, 0, 0, 0.05)',
     display: 'grid',
     marginTop: '14px',
   },

client/src/pages/system/SystemView.tsx

@@ -14,7 +14,7 @@ import DataCard from './DataCard';
 
 const getStyles = makeStyles((theme: Theme) => ({
   root: {
-    margin: '12px 24px',
+    margin: '16px',
     position: 'relative',
     height: 'fit-content',
     display: 'flex',
@@ -30,8 +30,6 @@ const getStyles = makeStyles((theme: Theme) => ({
     transition: 'opacity .5s',
   },
   contentContainer: {
-    borderRadius: '8px',
-    boxShadow: '3px 3px 10px rgba(0, 0, 0, 0.05)',
     display: 'grid',
     gridTemplateColumns: '1fr auto',
     marginTop: '14px',
@@ -102,26 +100,6 @@ const SystemView: any = () => {
 
   return (
     <div className={classes.root}>
-      {/* hide cards until metrics api can provide enough data*/}
-      {/* <div
-        className={clsx(
-          classes.cardContainer,
-          selectedCord && classes.transparent
-        )}
-      >
-        <ProgressCard
-          title={t('diskTitle')}
-          usage={system.diskUsage}
-          total={system.disk}
-        />
-        <ProgressCard
-          title={t('memoryTitle')}
-          usage={system.memoryUsage}
-          total={system.memory}
-        />
-        <LineChartCard title={t('qpsTitle')} value={qps} />
-        <LineChartCard title={t('latencyTitle')} value={latency} />
-      </div> */}
       <div className={classes.contentContainer}>
         <Topo
           nodes={nodes}

client/src/pages/system/Topology.tsx

@@ -4,8 +4,6 @@ import { useEffect } from 'react';
 
 const getStyles = makeStyles((theme: Theme) => ({
   container: {
-    borderTopLeftRadius: '8px',
-    borderBottomLeftRadius: '8px',
     overflow: 'auto',
     backgroundColor: 'white',
     // height: 'auto',