update UI

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

client/src/components/advancedSearch/Dialog.tsx

@@ -199,7 +199,7 @@ const useStyles = makeStyles((theme: Theme) =>
     },
     copyButton: {},
     expResult: {
-      background: '#F9F9F9',
+      background: '#f0f0f0',
       display: 'flex',
       justifyContent: 'space-between',
       alignItems: 'center',
@@ -212,7 +212,7 @@ const useStyles = makeStyles((theme: Theme) =>
       lineHeight: '24px',
     },
     expWrapper: {
-      background: '#F9F9F9',
+      background: '#f0f0f0',
       minWidth: '480px',
       minHeight: '104px',
       padding: theme.spacing(1.5),

client/src/components/customButton/CustomButton.tsx

@@ -11,7 +11,7 @@ const buttonStyle = makeStyles(theme => ({
     padding: theme.spacing(1),
 
     '&:hover': {
-      backgroundColor: '#f9f9f9',
+      backgroundColor: '#f0f0f0',
     },
   },
   containedBtn: {

client/src/components/customDialog/CustomDialog.tsx

@@ -16,14 +16,14 @@ import CustomDialogTitle from './CustomDialogTitle';
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
     paper: {
-      minWidth: 480,
+      minWidth: 540,
       padding: 0,
-
+      borderRadius: 0,
       backgroundColor: 'transparent',
     },
     noticePaper: {
       backgroundColor: '#fff',
-      maxWidth: 480,
+      maxWidth: 540,
     },
     paperSm: {
       maxWidth: '80%',

client/src/components/customDialog/CustomDialogTitle.tsx

@@ -13,7 +13,7 @@ const getStyles = makeStyles(() => ({
   title: {
     fontWeight: 500,
     wordBreak: 'break-all',
-    maxWidth: 500,
+    maxWidth: 540,
   },
   icon: {
     fontSize: '24px',

client/src/components/customDialog/DeleteDialogTemplate.tsx

@@ -17,7 +17,7 @@ import { rootContext } from '@/context';
 
 const useStyles = makeStyles((theme: Theme) => ({
   root: {
-    maxWidth: '480px',
+    maxWidth: 540,
     backgroundColor: '#fff',
   },
   info: {

client/src/components/customDialog/DialogTemplate.tsx

@@ -25,10 +25,10 @@ const useStyles = makeStyles((theme: Theme) => ({
     backgroundColor: '#fff',
   },
   dialog: {
-    minWidth: 480,
+    minWidth: 540,
   },
   codeWrapper: {
-    width: (props: { showCode: boolean }) => (props.showCode ? 480 : 0),
+    width: (props: { showCode: boolean }) => (props.showCode ? 540 : 0),
     transition: 'width 0.2s',
   },
   code: {

client/src/components/customSelector/CustomSelector.tsx

@@ -1,26 +1,8 @@
 import { FC } from 'react';
-import {
-  FormControl,
-  InputLabel,
-  MenuItem,
-  Select,
-  makeStyles,
-  Theme,
-} from '@material-ui/core';
+import { FormControl, InputLabel, MenuItem, Select } from '@material-ui/core';
 import { CustomSelectorType } from './Types';
 import { generateId } from '../../utils/Common';
 
-const getStyles = makeStyles((theme: Theme) => ({
-  root: {
-    '& .MuiFilledInput-underline:before': {
-      borderWidth: 1,
-    },
-    '& .MuiFilledInput-underline:after': {
-      borderWidth: 1,
-    },
-  },
-}));
-
 const CustomSelector: FC<CustomSelectorType> = props => {
   const {
     label,
@@ -35,15 +17,9 @@ const CustomSelector: FC<CustomSelectorType> = props => {
     ...others
   } = props;
   const id = generateId('selector');
-  const localClasses = getStyles();
 
   return (
-    <FormControl
-      variant={variant}
-      className={wrapperClass}
-      size={size}
-      classes={{ ...localClasses }}
-    >
+    <FormControl variant={variant} className={wrapperClass} size={size}>
       {label && (
         <InputLabel classes={{ root: labelClass }} htmlFor={id}>
           {label}

client/src/components/grid/LoadingTable.tsx

@@ -9,7 +9,7 @@ const getStyles = makeStyles((theme: Theme) => ({
   },
   skeleton: {
     transform: 'scale(1)',
-    background: 'linear-gradient(90deg, #f0f4f9 0%, #f9f9f9 50%)',
+    background: 'linear-gradient(90deg, #f0f4f9 0%, #f0f0f0 50%)',
   },
   tr: {
     display: 'grid',

client/src/components/menu/CommunityBtn.tsx

@@ -68,7 +68,7 @@ const getStyles = makeStyles((theme: Theme) => ({
     padding: theme.spacing(3),
   },
   block: {
-    border: '1px solid #f9f9f9',
+    border: '1px solid #f0f0f0',
     boxShadow: '3px 3px 10px rgba(0, 0, 0, 0.05)',
     marginBottom: theme.spacing(3),
     padding: theme.spacing(2),

client/src/components/menu/SimpleMenu.tsx

@@ -16,7 +16,7 @@ const getStyles = makeStyles((theme: Theme) => ({
     padding: theme.spacing(1),
 
     '&:hover': {
-      backgroundColor: '#f9f9f9',
+      backgroundColor: '#f0f0f0',
     },
   },
 }));

client/src/i18n/en/collection.ts

@@ -60,7 +60,7 @@ const collectionTrans = {
   partitionKey: 'Partition Key',
   partitionKeyTooltip:
     ' Milvus will store entities in a partition according to the values in the partition key field. Only one Int64 or VarChar field is supported.',
-  enableDynamicSchema: 'Enable Dynamic Schema',
+  enableDynamicSchema: 'Dynamic Schema',
 
   // load dialog
   loadTitle: 'Load Collection',

client/src/pages/collections/CreateFields.tsx

@@ -95,7 +95,7 @@ const useStyles = makeStyles((theme: Theme) => ({
     marginRight: theme.spacing(0.5),
   },
   icon: {
-    fontSize: '20px',
+    fontSize: '14px',
     marginLeft: theme.spacing(0.5),
   },
 }));

client/src/pages/dialogs/CreateCollectionDialog.tsx

@@ -41,6 +41,10 @@ const useStyles = makeStyles((theme: Theme) => ({
       fontSize: '14px',
     },
   },
+  generalInfo: {
+    gap: 8,
+  },
+
   input: {
     width: '100%',
   },
@@ -51,9 +55,12 @@ const useStyles = makeStyles((theme: Theme) => ({
       marginLeft: 0,
     },
   },
-  dialog: {
-    minWidth: '100%',
+  consistencySelect: {
+    '& .MuiSelect-filled': {
+      padding: 12,
+    },
   },
+  dialog: {},
 }));
 
 const CreateCollectionDialog: FC<CollectionCreateProps> = ({ onCreate }) => {
@@ -271,7 +278,7 @@ const CreateCollectionDialog: FC<CollectionCreateProps> = ({ onCreate }) => {
       dialogClass={classes.dialog}
     >
       <>
-        <fieldset className={classes.fieldset}>
+        <fieldset className={`${classes.fieldset} ${classes.generalInfo}`}>
           {generalInfoConfigs.map(config => (
             <CustomInput
               key={config.key}
@@ -296,7 +303,7 @@ const CreateCollectionDialog: FC<CollectionCreateProps> = ({ onCreate }) => {
         <fieldset className={classes.fieldset}>
           <FormControlLabel
             checked={form.enableDynamicField}
-            control={<Checkbox />}
+            control={<Checkbox size="small" />}
             onChange={changeEnableDynamicField}
             label={collectionTrans('enableDynamicSchema')}
           />
@@ -305,13 +312,12 @@ const CreateCollectionDialog: FC<CollectionCreateProps> = ({ onCreate }) => {
         <fieldset className={classes.fieldset}>
           <legend>{collectionTrans('consistency')}</legend>
           <CustomSelector
-            wrapperClass={classes.select}
+            wrapperClass={`${classes.select} ${classes.consistencySelect}`}
             size="small"
             options={CONSISTENCY_LEVEL_OPTIONS}
             onChange={(e: React.ChangeEvent<{ value: unknown }>) => {
               setConsistencyLevel(e.target.value as ConsistencyLevelEnum);
             }}
-            hiddenlabel={'true'}
             value={consistencyLevel}
             variant="filled"
           />

client/src/pages/dialogs/insert/Import.tsx

@@ -43,7 +43,7 @@ const getStyles = makeStyles((theme: Theme) => ({
   uploadWrapper: {
     marginTop: theme.spacing(3),
     padding: theme.spacing(1),
-    backgroundColor: '#f9f9f9',
+    backgroundColor: '#f0f0f0',
 
     '& .text': {
       color: theme.palette.attuGrey.dark,

client/src/pages/query/Styles.ts

@@ -25,7 +25,7 @@ export const getQueryStyles = makeStyles((theme: Theme) => ({
       flex: 1,
       padding: theme.spacing(0, 0, 0, 2),
       fontSize: theme.spacing(2),
-      backgroundColor: '#F9F9F9',
+      backgroundColor: '#f0f0f0',
 
       '& .expression': {
         display: 'flex',
@@ -33,13 +33,13 @@ export const getQueryStyles = makeStyles((theme: Theme) => ({
         flex: 1,
         alignItems: 'center',
         padding: theme.spacing(0, 1.5),
-        backgroundColor: '#F9F9F9',
+        backgroundColor: '#f0f0f0',
       },
       '& .textarea': {
         width: '100%',
         '& .MuiInput-underline:before': {
           borderWidth: 1,
-          borderColor: '#F9F9F9',
+          borderColor: '#f0f0f0',
         },
         '& .MuiInput-underline:after': {
           borderWidth: 1,

client/src/styles/theme.ts

@@ -47,7 +47,7 @@ const commonThemes = {
     },
     secondary: {
       light: '#82d3ba',
-      main: '#31b78d',
+      main: '#0ACE82',
       dark: '#279371',
     },
     error: {
@@ -143,6 +143,7 @@ export const theme = createMuiTheme({
       root: {
         textTransform: 'initial',
         fontWeight: 'bold',
+        borderRadius: 0,
       },
       text: {
         '&:hover': {
@@ -171,13 +172,28 @@ export const theme = createMuiTheme({
         marginLeft: 0,
       },
     },
+    MuiTextField: {
+      root: {
+        borderRadius: 0,
+      },
+    },
     MuiFilledInput: {
       root: {
-        backgroundColor: '#f9f9f9',
+        backgroundColor: '#f0f0f0',
+        borderRadius: 0,
+        borderTopLeftRadius: 0,
+        borderTopRightRadius: 0,
 
         '&:hover': {
-          backgroundColor: '#f9f9f9',
+          backgroundColor: '#f0f0f0',
+        },
+      },
+      underline: {
+        '&:before': {
+          borderBottom: 'none',
         },
+        borderWidth: 1,
+        borderColor: 'transparent',
       },
     },