style part3

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

client/src/App.tsx

@@ -19,7 +19,7 @@ function App() {
   const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
 
   const theme = React.useMemo(
-    () => createTheme(getCommonThemes(prefersDarkMode ? 'dark' : 'dark')),
+    () => createTheme(getCommonThemes(prefersDarkMode ? 'dark' : 'light')),
     [true]
   );
 

client/src/components/customButton/CustomButton.tsx

@@ -12,11 +12,12 @@ const buttonStyle = makeStyles((theme: Theme) => ({
     padding: theme.spacing(1),
 
     '&:hover': {
-      backgroundColor: '#f4f4f4',
+      backgroundColor: theme.palette.primary.main,
+      color: theme.palette.background.paper,
     },
   },
   containedBtn: {
-    color: '#fff',
+    color: theme.palette.background.paper,
     backgroundColor: theme.palette.primary.main,
     boxShadow: 'initial',
     fontWeight: 'bold',

client/src/components/customInput/SearchInput.tsx

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

client/src/pages/databases/collections/StatusAction.tsx

@@ -38,7 +38,7 @@ const useStyles = makeStyles((theme: Theme) => ({
     background: '#fff !important',
   },
   noIndex: {
-    border: `1px solid ${theme.palette.attuGrey.light}`,
+    border: `1px solid ${theme.palette.text.disabled}`,
     backgroundColor: '#fff',
   },
 

client/src/pages/databases/collections/search/Search.tsx

@@ -410,6 +410,7 @@ const Search = (props: CollectionDataProps) => {
               onClick={genRandomVectors}
               size="small"
               disabled={false}
+              className={classes.genBtn}
             >
               {btnTrans('example')}
             </CustomButton>

client/src/pages/databases/collections/search/Styles.ts

@@ -187,6 +187,10 @@ export const getQueryStyles = makeStyles((theme: Theme) => ({
     },
   },
 
+  genBtn: {
+    marginBottom: 8,
+  },
+
   btn: {
     height: 56,
     width: 80,

client/src/pages/home/DatabaseCard.tsx

@@ -31,7 +31,7 @@ const useStyles = makeStyles((theme: Theme) => ({
       boxShadow: '0px 0px 4px 0px #00000029',
       borderColor: theme.palette.primary.main,
     },
-    '&.active': {
+    '&.current': {
       boxShadow: '0px 0px 4px 0px #00000029',
       borderColor: theme.palette.primary.main,
     },
@@ -59,17 +59,23 @@ const useStyles = makeStyles((theme: Theme) => ({
     marginBottom: theme.spacing(1),
   },
   delIcon: {
-    color: theme.palette.text.primary,
+    color: theme.palette.text.secondary,
     cursor: 'pointer',
     position: 'absolute',
-    right: 4,
-    top: 4,
-    minWidth: 0,
-    minHeight: 0,
-    padding: theme.spacing(0),
+    width: 24,
+    height: 24,
+    lineHeight: 24,
+    display: 'flex',
+    top: 8,
+    right: 8,
+    minWidth: 8,
     '& svg': {
-      width: 15,
+      width: 16,
+      height: 16,
+      overflow: 'hidden',
     },
+    padding: theme.spacing(1),
+   
   },
 
   // create db
@@ -164,7 +170,7 @@ const DatabaseCard: FC<DatabaseCardProps> = ({
   return (
     <section className={`${wrapperClass}`}>
       <section
-        className={`${classes.wrapper} ${isActive ? 'active' : ''}`}
+        className={`${classes.wrapper} ${isActive ? 'current' : ''}`}
         onClick={onClick}
       >
         <>

client/src/pages/index.tsx

@@ -26,7 +26,7 @@ const useStyles = makeStyles((theme: Theme) => ({
 
     '& .active': {
       '& path': {
-        fill: theme.palette.attuGrey.dark,
+        fill: theme.palette.text.primary,
       },
     },
 

client/src/pages/system/DataCard.tsx

@@ -12,6 +12,7 @@ const getStyles = makeStyles((theme: Theme) => ({
     padding: theme.spacing(1.5, 2),
     boxSizing: 'border-box',
     flexGrow: 1,
+    height: '100%',
   },
 
   title: {
@@ -35,20 +36,18 @@ const getStyles = makeStyles((theme: Theme) => ({
 
   rootName: {
     color: theme.palette.text.secondary,
-    fontSize: '20px',
-    lineHeight: '24px',
+    fontSize: 20,
   },
 
   childName: {
     color: theme.palette.primary.main,
-    fontSize: '20px',
-    lineHeight: '24px',
+    fontSize: 20,
   },
 
   ip: {
     color: theme.palette.text.primary,
-    fontSize: '11px',
-    lineHeight: '24px',
+    fontSize: 11,
+    lineHeight: 2,
   },
 
   sectionRoot: {
@@ -73,11 +72,11 @@ const getStyles = makeStyles((theme: Theme) => ({
   },
 
   sectionCell: {
-    backgroundColor: theme.palette.background.default,
+    backgroundColor: theme.palette.background.paper,
     color: theme.palette.text.primary,
     display: 'table-cell',
-    fontSize: '14px',
-    padding: theme.spacing(1, 1),
+    fontSize: 13,
+    padding: theme.spacing(1),
     textTransform: 'capitalize',
     verticalAlign: 'middle',
     width: '50%',
@@ -85,7 +84,6 @@ const getStyles = makeStyles((theme: Theme) => ({
   progressTitle: {
     fontSize: '14px',
     color: theme.palette.text.primary,
-    lineHeight: '24px',
     display: 'flex',
     justifyContent: 'space-between',
   },

client/src/pages/system/NodeListView.tsx

@@ -29,6 +29,12 @@ const getStyles = makeStyles((theme: Theme) => ({
     width: '100%',
     height: '28px',
   },
+  childCloseBtn: {
+    border: 0,
+    backgroundColor: theme.palette.background.paper,
+    color: theme.palette.text.primary,
+    width: '100%',
+  },
   gridContainer: {
     height: `calc(100vh - 120px)`,
     display: 'flex',
@@ -194,7 +200,7 @@ const NodeListView: FC<NodeListViewProps> = props => {
         className={classes.childCloseBtnContainer}
         onClick={() => setShowChildView(false)}
       >
-        <KeyboardArrowDown />
+        <KeyboardArrowDown className={classes.childCloseBtn} />
       </button>
       <div className={classes.gridContainer}>
         <div className={classes.leftContainer}>

client/src/pages/system/Progress.tsx

@@ -36,7 +36,7 @@ const Progress: FC<ProgressProps> = props => {
         y2={15}
         vectorEffect="non-scaling-stroke"
         strokeWidth="12"
-        stroke={theme.palette.text.primary}
+        stroke={theme.palette.text.disabled}
         strokeLinecap="round"
       />
       <line

client/src/pages/system/SystemView.tsx

@@ -37,6 +37,7 @@ const getStyles = makeStyles((theme: Theme) => ({
     width: '70%',
     background: theme.palette.background.paper,
     borderRadius: 8,
+    boxShadow: '0 0 10px 0 rgba(0,0,0,0.1)',
   },
   right: { width: '30%', borderRadius: 8 },
   childView: {
@@ -56,11 +57,6 @@ const getStyles = makeStyles((theme: Theme) => ({
     top: 1600,
     opacity: 0,
   },
-  childCloseBtn: {
-    border: 0,
-    backgroundColor: theme.palette.background.paper,
-    width: '100%',
-  },
 }));
 
 const SystemView: any = () => {

client/src/styles/theme.ts

@@ -1,17 +1,5 @@
 import { PaletteMode } from '@mui/material';
 
-// define types for the common theme
-declare module '@mui/material/styles/createPalette' {
-  interface Palette {
-    attuGrey: Palette['primary'];
-    attuDark: Palette['primary'];
-  }
-  interface PaletteOptions {
-    attuGrey: PaletteOptions['primary'];
-    attuDark: PaletteOptions['primary'];
-  }
-}
-
 const getCommonThemes = (mode: PaletteMode) => ({
   typography: {
     fontFamily: [
@@ -35,24 +23,15 @@ const getCommonThemes = (mode: PaletteMode) => ({
       dark: mode === 'light' ? '#08a568' : '#078b63',
     },
     secondary: {
-      light: '#82d3ba',
-      main: '#0ACE82',
-      dark: '#279371',
+      light: mode === 'light' ? '#7EE3D0' : '#4DBB9C',
+      main: '#10C998',
+      dark: mode === 'light' ? '#0BA978' : '#08845B',
     },
     error: {
       main: '#ff4605',
       light: mode === 'light' ? '#ff8f68' : '#ff6a3a',
       dark: mode === 'light' ? '#cd3804' : '#b33900',
     },
-    attuGrey: {
-      main: mode === 'light' ? '#aeaebb' : '#565665',
-      light: mode === 'light' ? '#dcdce3' : '#838394',
-      dark: mode === 'light' ? '#82838e' : '#34343f',
-      contrastText: mode === 'light' ? '#f8f8fc' : '#e0e0e5',
-    },
-    attuDark: {
-      main: mode === 'light' ? '#010e29' : '#0d1b34',
-    },
     background: {
       default: mode === 'light' ? '#f5f5f5' : '#121212',
       paper: mode === 'light' ? '#ffffff' : '#1e1e1e',