Merge pull request #628 from zilliztech/ui

fix: ui issues introduced from dark mode

client/src/components/customButton/CustomButton.tsx

@@ -60,7 +60,25 @@ const CustomButton = (
   }
 ) => {
   const classes = buttonStyle();
-  const { tooltip, tooltipPlacement, ...otherProps } = props;
+  const { tooltip, tooltipPlacement, disabled, ...otherProps } = props;
+
+  // wrap a span to let disabled elements show tooltip
+
+  const btn = (
+    <Button
+      classes={{
+        root: classes.button,
+        text: classes.textBtn,
+        contained: classes.containedBtn,
+        containedSecondary: classes.containedSecondary,
+        disabled: classes.disabledBtn,
+      }}
+      disabled={disabled}
+      {...otherProps}
+    >
+      {props.children}
+    </Button>
+  );
 
   return (
     <>
@@ -70,20 +88,7 @@ const CustomButton = (
       */}
       {tooltip ? (
         <Tooltip title={tooltip} placement={tooltipPlacement}>
-          <span>
-            <Button
-              classes={{
-                root: classes.button,
-                text: classes.textBtn,
-                contained: classes.containedBtn,
-                containedSecondary: classes.containedSecondary,
-                disabled: classes.disabledBtn,
-              }}
-              {...otherProps}
-            >
-              {props.children}
-            </Button>
-          </span>
+          {disabled ? <span>{btn}</span> : btn}
         </Tooltip>
       ) : (
         <Button

client/src/components/layout/Header.tsx

@@ -76,6 +76,7 @@ const useStyles = makeStyles((theme: Theme) => ({
   },
   extra: {
     marginLeft: theme.spacing(0.5),
+    display: 'flex',
     '& svg': {
       fontSize: 15,
       color: theme.palette.primary.main,

client/src/components/status/StatusIcon.tsx

@@ -19,7 +19,7 @@ const useStyles = makeStyles((theme: Theme) => ({
     display: 'flex',
     justifyContent: 'flex-left',
     alignItems: 'center',
-    paddingLeft: theme.spacing(1),
+    paddingLeft: theme.spacing(.5),
   },
   svg: {
     color: theme.palette.primary.light,

client/src/pages/databases/RefreshButton.tsx

@@ -20,7 +20,7 @@ const RefreshButton = (props: IconButtonProps & { tooltip?: string }) => {
   };
 
   if (isLoading) {
-    return <StatusIcon type={LoadingType.CREATING} size={20} />;
+    return <StatusIcon type={LoadingType.CREATING} size={16} />;
   }
 
   return (

client/src/pages/home/DatabaseCard.tsx

@@ -9,7 +9,6 @@ import DeleteTemplate from '@/components/customDialog/DeleteDialogTemplate';
 import { rootContext, authContext } from '@/context';
 import { DatabaseObject } from '@server/types';
 import CreateDatabaseDialog from '../dialogs/CreateDatabaseDialog';
-import CustomToolTip from '@/components/customToolTip/CustomToolTip';
 import { CREATE_DB } from './Home';
 import { makeStyles } from '@mui/styles';
 
@@ -75,7 +74,6 @@ const useStyles = makeStyles((theme: Theme) => ({
       overflow: 'hidden',
     },
     padding: theme.spacing(1),
-   
   },
 
   // create db
@@ -206,6 +204,7 @@ const DatabaseCard: FC<DatabaseCardProps> = ({
           {database.name !== 'default' && (
             <CustomButton
               className={classes.delIcon}
+              tooltip={`${btnTrans('drop')} ${dbTrans('database')}`}
               onClick={(event: any) => {
                 event.stopPropagation();
                 setDialog({
@@ -227,11 +226,7 @@ const DatabaseCard: FC<DatabaseCardProps> = ({
                 });
               }}
             >
-              <CustomToolTip
-                title={`${btnTrans('drop')} ${dbTrans('database')}`}
-              >
-                <DeleteIcon />
-              </CustomToolTip>
+              <DeleteIcon />
             </CustomButton>
           )}
         </div>

client/src/pages/home/Home.tsx

@@ -21,7 +21,7 @@ const useStyles = makeStyles((theme: Theme) => ({
   },
 
   section: {
-    width: '75%',
+    width: '85%',
     marginBottom: theme.spacing(2),
   },
   cardWrapper: {