update styles

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

client/src/components/customSnackBar/CustomSnackBar.tsx

@@ -1,14 +1,8 @@
 import { forwardRef, FC } from 'react';
 import { CustomSnackBarType } from './Types';
 import MuiAlert from '@mui/material/Alert';
-import {
-  Snackbar,
-  Theme,
-  Slide,
-  SnackbarCloseReason,
-  AlertProps,
-} from '@mui/material';
-import { TransitionProps } from '@mui/material/transitions/transition';
+import { Snackbar, Theme, AlertProps } from '@mui/material';
+import Slide, { SlideProps } from '@mui/material/Slide';
 import { makeStyles } from '@mui/styles';
 
 // if we need to use slide component
@@ -19,10 +13,14 @@ const Alert = forwardRef<HTMLDivElement, AlertProps>(
   }
 );
 
-function SlideTransition(props: TransitionProps) {
-  return <Slide {...props} direction="left" />;
+interface SlideTransitionProps extends SlideProps {
+  direction?: 'left' | 'right' | 'up' | 'down';
 }
 
+const SlideTransition: React.FC<SlideTransitionProps> = props => {
+  return <Slide {...props} direction="left" />;
+};
+
 const useStyles = makeStyles((theme: Theme) => ({
   root: {
     maxWidth: '50vh',
@@ -49,14 +47,7 @@ const CustomSnackBar: FC<CustomSnackBarType> = props => {
     onClose,
   } = props;
   const classes = useStyles();
-  const handleClose = (
-    event: React.SyntheticEvent<any> | Event,
-    reason: SnackbarCloseReason
-  ) => {
-    // only click x to close or auto hide.
-    if (reason === 'clickaway') {
-      return;
-    }
+  const handleClose = (event: React.SyntheticEvent<any> | Event) => {
     onClose && onClose();
   };
 

client/src/components/icons/Icons.tsx

@@ -317,7 +317,20 @@ const icons: { [x in IconsType]: (props?: any) => React.ReactElement } = {
   ),
 
   attu: (props = {}) => (
-    <SvgIcon viewBox="0 0 36 36" component={AttuIcon} {...props} />
+    <SvgIcon
+      width="24"
+      viewBox="0 0 85 76"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M37.5573 0.730987C37.681 0.516793 37.9902 0.516796 38.1138 0.730989L45.662 13.8048L22.4824 54.1969C15.9608 54.5099 9.94173 55.556 5.29464 56.6116L37.5573 0.730987ZM62.0648 61.0994C70.1283 61.0994 78.7156 57.2386 84.0453 54.327L57.626 8.28937C57.5025 8.0742 57.1921 8.07421 57.0686 8.28937L30.6772 54.2784C36.9536 54.7969 41.7251 56.38 46.2781 57.8906L46.2782 57.8906C51.2439 59.5381 55.9498 61.0994 62.0648 61.0994ZM45.3813 64.1357C49.7579 65.5787 53.9185 66.9505 57.5981 67.4917C66.7067 68.8311 79.2979 64.8127 84.6559 59.7226C80.6374 67.4917 70.4572 75.7965 57.5981 75.7965C47.2001 75.7965 39.2704 72.7493 31.2207 69.6561C29.3154 68.9239 27.4034 68.1892 25.4503 67.4917C19.0702 65.213 8.03853 65.4539 2.41114 65.5768C1.42242 65.5984 0.600526 65.6164 0 65.6164C4.82217 61.8658 14.4665 59.7226 25.4503 59.7226C31.9969 59.7226 38.9242 62.0066 45.3813 64.1357Z"
+        fill="currentColor"
+      />
+    </SvgIcon>
   ),
   zilliz: (props = {}) => (
     <svg

client/src/components/layout/Header.tsx

@@ -17,7 +17,7 @@ const useStyles = makeStyles((theme: Theme) => ({
     paddingRight: theme.spacing(1),
     backgroundColor: '#fff',
     borderBottom: '1px solid #e0e0e0',
-    minHeight: 56,
+    height: 48,
   },
   contentWrapper: {
     display: 'flex',
@@ -25,6 +25,7 @@ const useStyles = makeStyles((theme: Theme) => ({
     alignItems: 'center',
     paddingLeft: theme.spacing(1.5),
     flex: 1,
+    height: 48,
   },
   navigation: {
     display: 'flex',
@@ -44,21 +45,26 @@ const useStyles = makeStyles((theme: Theme) => ({
       marginRight: theme.spacing(2),
 
       '& .address': {
-        fontSize: '14px',
-        lineHeight: '20px',
+        fontSize: '12px',
+        lineHeight: 1.3,
         color: '#545454',
       },
 
       '& .status': {
-        fontSize: '12px',
-        lineHeight: '16px',
+        fontSize: '11px',
+        lineHeight: 1.3,
         color: '#1ba954',
       },
     },
   },
   database: {
+    transform: 'translateY(-4px)',
     width: theme.spacing(16),
     marginRight: theme.spacing(2),
+    // make the label of the selector top = 4px
+    '& .MuiInputLabel-root': {
+      top: '4px',
+    },
   },
 }));
 

client/src/components/menu/NavMenu.tsx

@@ -1,15 +1,10 @@
 import { useState, FC, useEffect } from 'react';
 import clsx from 'clsx';
 import { Theme } from '@mui/material/styles';
-import Fade from '@mui/material/Fade';
-import Button from '@mui/material/Button';
 import List from '@mui/material/List';
 import ListItem from '@mui/material/ListItem';
 import ListItemIcon from '@mui/material/ListItemIcon';
-import ListItemText from '@mui/material/ListItemText';
 import { NavMenuItem, NavMenuType } from './Types';
-import icons from '../icons/Icons';
-import { useTranslation } from 'react-i18next';
 import Typography from '@mui/material/Typography';
 import { makeStyles } from '@mui/styles';
 
@@ -18,9 +13,9 @@ const duration = `${timeout}ms`;
 
 const useStyles = makeStyles((theme: Theme) => ({
   root: {
-    borderRight: '1px solid #e0e0e0',
-    background: '#fff',
+    backgroundColor: '#fff',
     paddingTop: 0,
+    boxShadow: '0px 6px 30px rgba(0, 0, 0, 0.1)',
     paddingBottom: theme.spacing(4),
     display: 'flex',
     flexDirection: 'column',
@@ -30,83 +25,67 @@ const useStyles = makeStyles((theme: Theme) => ({
     }),
   },
   rootCollapse: {
-    width: '56px',
+    width: '48px',
   },
   rootExpand: {
     width: (props: any) => props.width || '100%',
   },
-  nested: {
-    paddingLeft: '12px',
-  },
+  nested: {},
   item: {
-    paddingLeft: '16px',
     boxSizing: 'content-box',
-    height: theme.spacing(3),
     width: 'initial',
     color: theme.palette.attuGrey.dark,
+    borderRadius: 8,
+    fontWeight: 500,
+    margin: theme.spacing(0.5),
+
     '&:hover': {
-      backgroundColor: '#efefef',
+      backgroundColor: theme.palette.primary.main,
+
+      '& .icon': {
+        color: '#fff',
+      },
+      color: '#fff',
     },
+    cursor: 'pointer',
   },
   itemIcon: {
     minWidth: '24px',
     marginRight: theme.spacing(1),
+    marginLeft: '-8px',
   },
   itemText: {
     whiteSpace: 'nowrap',
+    pointerEvents: 'none',
   },
   active: {
-    color: '#323232',
-    backgroundColor: '#efefef',
+    borderRadius: 8,
+    backgroundColor: theme.palette.primary.main,
 
     '& .icon': {
-      color: theme.palette.primary.main,
-    },
-  },
-
-  logoWrapper: {
-    display: 'flex',
-    alignItems: 'center',
-    height: '86px',
-    marginBottom: theme.spacing(1),
-    paddingLeft: '16px',
-
-    '& .title': {
-      margin: 0,
-      paddingLeft: theme.spacing(2),
-      fontSize: '24px',
-      letterSpacing: '0.15px',
+      color: '#fff',
     },
-  },
-  logo: {
-    transition: theme.transitions.create('all', {
-      duration,
-    }),
-  },
-  logoExpand: {
-    marginRight: theme.spacing(1),
-    transform: 'scale(1.5)',
-  },
-  logoCollapse: {
-    transform: 'scale(1.5)',
+    color: '#fff',
   },
   actionIcon: {
     position: 'fixed',
-    backgroundColor: 'white',
-    top: '24px',
+    top: 24,
     transition: theme.transitions.create('all', {
       duration,
     }),
-    minWidth: '24px',
+    minWidth: '16px',
     padding: 0,
 
+    '& svg': {
+      fontSize: '16px',
+    },
+
     '& svg path': {
       fill: theme.palette.attuGrey.dark,
     },
 
     '&:hover': {
       backgroundColor: theme.palette.primary.main,
-
       '& svg path': {
         fill: 'white',
       },
@@ -117,13 +96,13 @@ const useStyles = makeStyles((theme: Theme) => ({
     transform: 'rotateZ(180deg)',
   },
   collapseIcon: {
-    left: 44,
+    left: 48,
   },
   version: {
     position: 'absolute',
     fontSize: '10px',
-    bottom: 10,
-    left: 12,
+    bottom: 8,
+    left: 8,
   },
 }));
 
@@ -134,9 +113,6 @@ const NavMenu: FC<NavMenuType> = props => {
   const classes = useStyles({ width, expanded });
   const [active, setActive] = useState<string>(defaultActive);
 
-  const { t: commonTrans } = useTranslation();
-  const attuTrans = commonTrans('attu');
-
   useEffect(() => {
     if (defaultActive) {
       setActive(defaultActive);
@@ -156,9 +132,9 @@ const NavMenu: FC<NavMenuType> = props => {
                 ? v.iconActiveClass
                 : v.iconNormalClass
               : 'icon';
+
           return (
             <ListItem
-              button
               key={v.label}
               title={v.label}
               className={clsx(classes.item, {
@@ -173,10 +149,6 @@ const NavMenu: FC<NavMenuType> = props => {
               <ListItemIcon className={classes.itemIcon}>
                 <IconComponent classes={{ root: iconClass }} />
               </ListItemIcon>
-
-              <Fade in={expanded} timeout={timeout}>
-                <ListItemText className={classes.itemText} primary={v.label} />
-              </Fade>
             </ListItem>
           );
         })}
@@ -184,9 +156,6 @@ const NavMenu: FC<NavMenuType> = props => {
     );
   };
 
-  const Logo = icons.attu;
-  const ExpandIcon = icons.expand;
-
   return (
     <List
       component="nav"
@@ -196,31 +165,6 @@ const NavMenu: FC<NavMenuType> = props => {
       })}
     >
       <div>
-        <div className={classes.logoWrapper}>
-          <Logo
-            classes={{ root: classes.logo }}
-            className={clsx({
-              [classes.logoExpand]: expanded,
-              [classes.logoCollapse]: !expanded,
-            })}
-          />
-          <Fade in={expanded} timeout={timeout}>
-            <Typography variant="h1" className="title">
-              {attuTrans.admin}
-            </Typography>
-          </Fade>
-        </div>
-        <Button
-          onClick={() => {
-            setExpanded(!expanded);
-          }}
-          className={clsx(classes.actionIcon, {
-            [classes.expandIcon]: expanded,
-            [classes.collapseIcon]: !expanded,
-          })}
-        >
-          <ExpandIcon />
-        </Button>
         <NestList data={data} />
         <Typography
           classes={{

client/src/pages/connect/ConnectContainer.tsx

@@ -17,6 +17,7 @@ const getContainerStyles = makeStyles((theme: Theme) => ({
     flexDirection: 'row',
     backgroundColor: '#fff',
     border: '1px solid #E0E0E0',
+    borderRadius: 8,
     boxShadow: '0px 6px 30px rgba(0, 0, 0, 0.1)',
     minHeight: 644,
   },
@@ -25,6 +26,7 @@ const getContainerStyles = makeStyles((theme: Theme) => ({
     height: 'auto',
     marginBottom: theme.spacing(1),
     display: 'block',
+    color: theme.palette.primary.main,
   },
 
   links: {
@@ -36,7 +38,7 @@ const getContainerStyles = makeStyles((theme: Theme) => ({
     width: '100%',
     padding: theme.spacing(2, 0),
     '& button': {
-      border: 'none',
+      borderColor: 'transparent',
     },
   },
 
@@ -45,22 +47,33 @@ const getContainerStyles = makeStyles((theme: Theme) => ({
     display: 'flex',
     flexDirection: 'column',
     padding: theme.spacing(0, 3),
-    backgroundColor: '#f5f5f5',
+    backgroundColor: '#fff',
+    borderRadius: 8,
   },
   form: {
     width: 481,
+    borderRadius: 8,
     padding: theme.spacing(5, 0),
+    boxShadow: '0px 6px 30px rgba(0, 0, 0, 0.1)',
+  },
+  brand: {
+    fontSize: 24,
+    fontWeight: 'bold',
+    color: '#333',
+    marginTop: theme.spacing(2),
+    height: 24,
   },
   sub: {
     marginTop: theme.spacing(1),
     fontSize: 12,
     color: '#666',
+    height: 12,
   },
 }));
 
 // used for user connect process
 const ConnectContainer = () => {
-  const [version, setVersion] = useState('');
+  const [version, setVersion] = useState('loading');
   const classes = getContainerStyles();
   const { t: commonTrans } = useTranslation();
   const attuTrans = commonTrans('attu');
@@ -77,7 +90,7 @@ const ConnectContainer = () => {
       <section className={classes.box}>
         <section className={`flex-center ${classes.attu}`}>
           <Icons.attu classes={{ root: classes.logo }} />
-          <Typography variant="body2" className="title">
+          <Typography variant="body2" className={classes.brand}>
             {attuTrans.admin}
           </Typography>
           {version && (

client/src/pages/databases/Databases.tsx

@@ -78,6 +78,9 @@ const useStyles = makeStyles((theme: Theme) => ({
     flexShrink: 1,
     overflowX: 'auto',
     padding: theme.spacing(0, 2),
+    border: `1px solid ${theme.palette.divider}`,
+    borderRadius: 8,
+    boxShadow: '0px 6px 30px rgba(0, 0, 0, 0.1)',
   },
   headerIcon: {
     marginLeft: theme.spacing(0.5),

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

@@ -219,10 +219,7 @@ const SearchGlobalParams = (props: SearchGlobalProps) => {
                     getAriaValueText={value => {
                       return `${s.anns_field}'s weight: ${value}`;
                     }}
-                    onChange={(
-                      e: ChangeEvent<{}>,
-                      value: number | number[]
-                    ) => {
+                    onChange={(event: Event, value: number | number[]) => {
                       // update the selected field
                       const weights = [
                         ...searchGlobalParams.weightedParams!.weights,
@@ -237,6 +234,7 @@ const SearchGlobalParams = (props: SearchGlobalProps) => {
                     }}
                     aria-labelledby="weight-slider"
                     valueLabelDisplay="auto"
+                    size='small'
                     step={0.1}
                     min={0}
                     max={1}

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

@@ -22,7 +22,6 @@ export const getQueryStyles = makeStyles((theme: Theme) => ({
     flexDirection: 'column',
     flexShrink: 0,
     padding: '0 8px 8px 0',
-    borderRadius: '0',
     minHeight: 'calc(100vh - 164px)',
     height: 'calc(100vh - 164px)',
     overflow: 'auto',
@@ -37,18 +36,13 @@ export const getQueryStyles = makeStyles((theme: Theme) => ({
   },
 
   accordion: {
-    borderRadius: 0,
     boxShadow: 'none',
     padding: '0',
     border: '1px solid transparent',
 
-    '&:first-child': {
-      borderTopLeftRadius: 0,
-      borderTopRightRadius: 0,
-    },
-
     '&.highlight': {
       border: `1px solid ${theme.palette.secondary.main}`,
+      borderRadius: 8,
     },
 
     // borderBottom: `1px solid ${theme.palette.divider}`,

client/src/pages/home/DatabaseCard.tsx

@@ -25,9 +25,13 @@ const useStyles = makeStyles((theme: Theme) => ({
     minWidth: '168px',
     minHeight: '168px',
     cursor: 'pointer',
+    borderRadius: 8,
     '&:hover': {
       boxShadow: '0px 0px 4px 0px #00000029',
     },
+    '&.active': {
+      boxShadow: '0px 0px 4px 0px #00000029',
+    },
   },
   dbTitle: {
     fontSize: '20px',
@@ -80,6 +84,7 @@ export interface DatabaseCardProps {
   database: DatabaseObject;
   setDatabase: (database: string) => void;
   dropDatabase: (params: { db_name: string }) => Promise<void>;
+  isActive?: boolean;
 }
 
 const DatabaseCard: FC<DatabaseCardProps> = ({
@@ -87,6 +92,7 @@ const DatabaseCard: FC<DatabaseCardProps> = ({
   wrapperClass = '',
   setDatabase,
   dropDatabase,
+  isActive = false,
 }) => {
   // context
   const { isManaged } = useContext(authContext);
@@ -155,7 +161,10 @@ const DatabaseCard: FC<DatabaseCardProps> = ({
 
   return (
     <section className={`${wrapperClass}`}>
-      <section className={`${classes.wrapper}`} onClick={onClick}>
+      <section
+        className={`${classes.wrapper} ${isActive ? 'active' : ''}`}
+        onClick={onClick}
+      >
         <>
           {isManaged ? <ZillizIcon /> : <DbIcon />}
 

client/src/pages/home/Home.tsx

@@ -102,6 +102,7 @@ const Home = () => {
               return (
                 <DatabaseCard
                   database={db}
+                  isActive={db.name === database}
                   setDatabase={setDatabase}
                   dropDatabase={dropDatabase}
                   key={db.name}

client/src/pages/home/SysCard.tsx

@@ -10,6 +10,7 @@ const useStyles = makeStyles((theme: Theme) => ({
     padding: theme.spacing(2),
     border: '1px solid #E0E0E0',
     cursor: 'pointer',
+    borderRadius: 8,
     '&:hover': {
       boxShadow: '0px 0px 4px 0px #00000029',
     },

client/src/pages/index.tsx

@@ -19,7 +19,7 @@ import { makeStyles } from '@mui/styles';
 const useStyles = makeStyles((theme: Theme) => ({
   root: {
     minHeight: '100vh',
-    backgroundColor: '#f5f5f5',
+    backgroundColor: theme.palette.background.default,
   },
   content: {
     display: 'flex',
@@ -80,7 +80,7 @@ function Index() {
 
   const menuItems: NavMenuItem[] = [
     {
-      icon: icons.navOverview,
+      icon: icons.attu,
       label: navTrans('overview'),
       onClick: () => navigate('/'),
     },
@@ -93,8 +93,6 @@ function Index() {
       icon: icons.navSearch,
       label: navTrans('search'),
       onClick: () => navigate('/search'),
-      iconActiveClass: 'normal',
-      iconNormalClass: 'active',
     },
   ];
 
@@ -110,8 +108,6 @@ function Index() {
         label: navTrans('system'),
         onClick: () =>
           isPrometheusReady ? navigate('/system_healthy') : navigate('/system'),
-        iconActiveClass: 'normal',
-        iconNormalClass: 'active',
       }
     );
   }

client/src/pages/system/SystemView.tsx

@@ -19,6 +19,9 @@ const getStyles = makeStyles((theme: Theme) => ({
     display: 'flex',
     height: 'calc(100vh - 80px)',
     overflow: 'hidden',
+    border: '1px solid #e5e5e5',
+    borderRadius: 8,
+    boxShadow: '0 0 10px 0 rgba(0,0,0,0.1)',
   },
   transparent: {
     opacity: 0,
@@ -26,12 +29,12 @@ const getStyles = makeStyles((theme: Theme) => ({
   },
   contentContainer: {
     display: 'flex',
-    border: '1px solid #e9e9ed',
+    borderRadius: 8,
     gap: 8,
     width: '100%',
   },
-  left: { width: '70%', background: '#fff' },
-  right: { width: '30%' },
+  left: { width: '70%', background: '#fff', borderRadius: 8 },
+  right: { width: '30%', borderRadius: 8 },
   childView: {
     height: '100%',
     width: '100%',
@@ -39,6 +42,7 @@ const getStyles = makeStyles((theme: Theme) => ({
     position: 'absolute',
     // zIndex: 1000,
     backgroundColor: 'white',
+    borderRadius: 8,
   },
   showChildView: {
     top: 0,

client/src/pages/user/Users.tsx

@@ -14,6 +14,9 @@ const useStyles = makeStyles((theme: Theme) => ({
     flexDirection: 'row',
     background: theme.palette.background.paper,
     padding: theme.spacing(0.5, 2),
+    boxShadow: '0 1px 2px 0 rgba(0, 0, 0, 0.1)',
+    borderRadius: 8,
+    border: '1px solid #e5e5e5',
   },
   card: {
     boxShadow: 'none',

client/src/styles/theme.ts

@@ -6,12 +6,10 @@ import {
 
 declare module '@mui/material/styles/createPalette' {
   interface Palette {
-    attuBlue: Palette['primary'];
     attuGrey: Palette['primary'];
     attuDark: Palette['primary'];
   }
   interface PaletteOptions {
-    attuBlue: PaletteOptions['primary'];
     attuGrey: PaletteOptions['primary'];
     attuDark: PaletteOptions['primary'];
   }
@@ -48,10 +46,6 @@ const commonThemes = {
       light: '#ff8f68',
       dark: '#cd3804',
     },
-    attuBlue: {
-      main: '#18D4E0',
-      dark: '#dcdce3',
-    },
     attuGrey: {
       main: '#aeaebb',
       light: '#dcdce3',
@@ -61,14 +55,8 @@ const commonThemes = {
     attuDark: {
       main: '#010e29',
     },
-  },
-  breakpoints: {
-    values: {
-      xs: 0,
-      sm: 600,
-      md: 1025,
-      lg: 1200,
-      xl: 1920,
+    background: {
+      default: '#f5f5f5',
     },
   },
   spacing: (factor: number) => `${8 * factor}px`,
@@ -137,7 +125,6 @@ export const theme = createMuiTheme(
         root: {
           textTransform: 'initial',
           fontWeight: 'bold',
-          borderRadius: 0,
         },
         text: {
           '&:hover': {
@@ -145,6 +132,11 @@ export const theme = createMuiTheme(
           },
         },
       },
+      MuiDialog: {
+        paper: {
+          borderRadius: 8,
+        },
+      },
       MuiDialogActions: {
         spacing: {
           padding: commonThemes.spacing(4),
@@ -167,16 +159,11 @@ export const theme = createMuiTheme(
         },
       },
       MuiTextField: {
-        root: {
-          borderRadius: 0,
-        },
+        root: {},
       },
       MuiFilledInput: {
         root: {
           backgroundColor: '#f4f4f4',
-          borderRadius: 0,
-          borderTopLeftRadius: 0,
-          borderTopRightRadius: 0,
 
           '&:hover': {
             backgroundColor: '#f4f4f4',