fix some UI issues

Signed-off-by: ruiyi.jiang <ruiyi.jiang@zilliz.com>

client/src/components/customTabList/RouteTabList.tsx

@@ -19,7 +19,6 @@ const useStyles = makeStyles((theme: Theme) => ({
     padding: theme.spacing(0, 1),
   },
   tab: {
-    height: theme.spacing(0.5),
     backgroundColor: theme.palette.primary.main,
   },
   tabContainer: {

client/src/components/grid/Grid.tsx

@@ -182,13 +182,13 @@ const AttuGrid: FC<AttuGridType> = props => {
     if (tableRef.current && rowHeight > 0) {
       const containerHeight: number = tableRef.current.offsetHeight;
       const hasToolbar = toolbarConfigs.length > 0;
-      const totleHeight =
+      const totalHeight =
         containerHeight -
         tableHeaderHeight -
         (showPagination ? pagerHeight : 0) -
-        (hasToolbar ? 34 : 0);
+        (hasToolbar ? 47 : 0);
 
-      const rowCount = Math.floor(totleHeight / rowHeight);
+      const rowCount = Math.floor(totalHeight / rowHeight);
 
       // fix loading mask
       setLoadingRowCount(rowCount);

client/src/components/icons/Icons.tsx

@@ -72,8 +72,8 @@ const icons: { [x in IconsType]: (props?: any) => React.ReactElement } = {
   ),
   navPerson: (props = {}) => (
     <SvgIcon
-      width="24"
-      height="24"
+      width="15"
+      height="15"
       viewBox="0 0 15 15"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
@@ -88,8 +88,8 @@ const icons: { [x in IconsType]: (props?: any) => React.ReactElement } = {
   ),
   navOverview: (props = {}) => (
     <SvgIcon
-      width="24"
-      height="24"
+      width="15"
+      height="15"
       viewBox="0 0 15 15"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
@@ -123,8 +123,8 @@ const icons: { [x in IconsType]: (props?: any) => React.ReactElement } = {
   ),
   navSearch: (props = {}) => (
     <SvgIcon
-      width="24"
-      height="24"
+      width="15"
+      height="15"
       viewBox="0 0 15 15"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
@@ -139,8 +139,8 @@ const icons: { [x in IconsType]: (props?: any) => React.ReactElement } = {
   ),
   navSystem: (props = {}) => (
     <SvgIcon
-      width="24"
-      height="24"
+      width="15"
+      height="15"
       viewBox="0 0 15 15"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
@@ -155,8 +155,8 @@ const icons: { [x in IconsType]: (props?: any) => React.ReactElement } = {
   ),
   settings: (props = {}) => (
     <SvgIcon
-      width="24"
-      height="24"
+      width="15"
+      height="15"
       viewBox="0 0 15 15"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"

client/src/components/menu/NavMenu.tsx

@@ -12,7 +12,6 @@ import icons from '../icons/Icons';
 import { useTranslation } from 'react-i18next';
 import Typography from '@material-ui/core/Typography';
 import ChevronRightIcon from '@material-ui/icons/ChevronRight';
-import CommunityBtn from './CommunityBtn';
 
 const timeout = 150;
 const duration = `${timeout}ms`;
@@ -32,17 +31,16 @@ const useStyles = makeStyles((theme: Theme) =>
       }),
     },
     rootCollapse: {
-      width: theme.spacing(9),
+      width: '56px',
     },
     rootExpand: {
       width: (props: any) => props.width || '100%',
     },
     nested: {
-      paddingLeft: theme.spacing(4),
+      paddingLeft: '12px',
     },
     item: {
-      marginBottom: theme.spacing(0.5),
-      paddingLeft: theme.spacing(3),
+      paddingLeft: '16px',
       boxSizing: 'content-box',
       height: theme.spacing(3),
       width: 'initial',
@@ -87,8 +85,8 @@ const useStyles = makeStyles((theme: Theme) =>
       display: 'flex',
       alignItems: 'center',
       height: '86px',
-      marginBottom: theme.spacing(2),
-      paddingLeft: theme.spacing(3),
+      marginBottom: theme.spacing(1),
+      paddingLeft: '16px',
 
       '& .title': {
         margin: 0,
@@ -137,12 +135,13 @@ const useStyles = makeStyles((theme: Theme) =>
       transform: 'rotateZ(180deg)',
     },
     collapseIcon: {
-      left: 58,
+      left: 44,
     },
     version: {
       position: 'absolute',
-      left: 16,
-      bottom: (props: any) => (props.expanded ? '20px' : '70px'),
+      fontSize: '10px',
+      bottom: 10,
+      left: 12,
     },
   })
 );
@@ -248,7 +247,6 @@ const NavMenu: FC<NavMenuType> = props => {
         >
           v {versionInfo.attu}
         </Typography>
-        <CommunityBtn />
       </div>
     </List>
   );

client/src/i18n/en/nav.ts

@@ -5,7 +5,7 @@ const navTrans = {
   search: 'Vector Search',
   system: 'System View',
   user: 'User',
-  dbAdmin: 'Database Management',
+  dbAdmin: 'DB Management',
   database: 'Database',
 };
 

client/src/pages/collections/Collections.tsx

@@ -483,7 +483,7 @@ const Collections = () => {
               </Tooltip>
             ) : null}
             <Tooltip
-              title={consistencyTooltipsMap[v.consistency_level]}
+              title={consistencyTooltipsMap[v.consistency_level] || ''}
               placement="top"
               arrow
             >
@@ -619,6 +619,7 @@ const Collections = () => {
           page={currentPage}
           onPageChange={handlePageChange}
           rowsPerPage={pageSize}
+          tableHeaderHeight={49}
           rowHeight={49}
           setRowsPerPage={handlePageSize}
           isLoading={loading}

client/src/pages/collections/StatusAction.tsx

@@ -80,7 +80,6 @@ const StatusAction: FC<StatusActionType> = props => {
     collectionName,
     field,
     action = () => {},
-    onIndexCreate,
   } = props;
   const { t: commonTrans } = useTranslation();
   const { t: collectionTrans } = useTranslation('collection');

client/src/pages/index.tsx

@@ -58,10 +58,10 @@ function Index() {
   const isIndex = location.pathname === '/';
   const defaultActive = useMemo(() => {
     if (location.pathname.includes('databases')) {
-      return navTrans('databases');
+      return navTrans('database');
     }
     if (location.pathname.includes('db-admin')) {
-      return navTrans('db-admin');
+      return navTrans('dbAdmin');
     }
 
     if (location.pathname.includes('search')) {
@@ -87,7 +87,7 @@ function Index() {
     },
     {
       icon: icons.database,
-      label: navTrans('databases'),
+      label: navTrans('database'),
       onClick: () => navigate(`/databases/${database}`),
     },
     {
@@ -116,7 +116,7 @@ function Index() {
       },
       {
         icon: icons.settings,
-        label: navTrans('db-admin'),
+        label: navTrans('dbAdmin'),
         onClick: () => navigate('/db-admin'),
       }
     );

client/src/pages/query/Query.tsx

@@ -398,6 +398,7 @@ const Query = () => {
             isLoading={tableLoading}
             rows={queryResult.data}
             rowCount={total}
+            tableHeaderHeight={46}
             rowHeight={43}
             selected={selectedData}
             setSelected={onSelectChange}

client/src/pages/query/Styles.ts

@@ -16,7 +16,7 @@ export const getQueryStyles = makeStyles((theme: Theme) => ({
     justifyContent: 'space-between',
     alignItems: 'center',
     backgroundColor: 'white',
-    padding: theme.spacing(1, 0),
+    padding: theme.spacing(0, 0, 1),
     gap: theme.spacing(2),
     borderRadius: theme.spacing(0.5, 0.5, 0, 0),