UI update

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

client/src/pages/databases/collections/data/CollectionData.tsx

@@ -383,6 +383,7 @@ const CollectionData = (props: CollectionDataProps) => {
 
             <div className="right">
               <CustomMultiSelector
+                className={classes.outputs}
                 options={fields.map(f => {
                   return {
                     label:
@@ -430,7 +431,7 @@ const CollectionData = (props: CollectionDataProps) => {
                 }}
               />
               <CustomButton
-                className="btn"
+                className={classes.btn}
                 onClick={handleFilterReset}
                 disabled={!collection.loaded}
                 startIcon={<ResetIcon classes={{ root: 'icon' }} />}
@@ -438,6 +439,7 @@ const CollectionData = (props: CollectionDataProps) => {
                 {btnTrans('reset')}
               </CustomButton>
               <CustomButton
+                className={classes.btn}
                 variant="contained"
                 onClick={() => {
                   setCurrentPage(0);

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

@@ -16,25 +16,15 @@ export const getQueryStyles = makeStyles((theme: Theme) => ({
     alignItems: 'center',
     backgroundColor: 'white',
     padding: theme.spacing(0, 0, 1),
-    gap: theme.spacing(2),
+    gap: theme.spacing(1),
 
     '& .left': {
       display: 'flex',
       justifyContent: 'space-between',
       alignItems: 'center',
+      gap: theme.spacing(1),
       flex: 1,
-      padding: theme.spacing(0, 0, 0, 0),
-      fontSize: theme.spacing(2),
-      backgroundColor: '#f4f4f4',
 
-      '& .expression': {
-        display: 'flex',
-        justifyContent: 'space-between',
-        flex: 1,
-        alignItems: 'center',
-        padding: theme.spacing(0, 1.5),
-        backgroundColor: '#f4f4f4',
-      },
       '& .textarea': {
         width: '100%',
         '& .MuiFormHelperText-root': {
@@ -51,6 +41,14 @@ export const getQueryStyles = makeStyles((theme: Theme) => ({
     },
   },
   selector: {
-    width: 180,
+    width: 160,
+  },
+  outputs: {
+    height: 56,
+    width: 140,
+  },
+  btn: {
+    height: 56,
+    width: 80,
   },
 }));

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

@@ -447,7 +447,7 @@ const Search = (props: CollectionDataProps) => {
                   textConfig={{
                     label: searchTrans('filterExpr'),
                     key: 'advFilter',
-                    className: classes.filterInput,
+                    className: 'textarea',
                     onChange: onFilterChange,
                     value: searchParams.globalParams.filter,
                     disabled: false,
@@ -480,7 +480,7 @@ const Search = (props: CollectionDataProps) => {
               </div>
               <div className="right">
                 <CustomButton
-                  className="btn"
+                  className={classes.btn}
                   disabled={disableSearch}
                   onClick={() => {
                     // open code dialog
@@ -502,7 +502,7 @@ const Search = (props: CollectionDataProps) => {
                 </CustomButton>
 
                 <CustomButton
-                  className="btn"
+                  className={classes.btn}
                   disabled={result.length === 0}
                   onClick={() => {
                     saveCsvAs(
@@ -515,7 +515,7 @@ const Search = (props: CollectionDataProps) => {
                   {btnTrans('export')}
                 </CustomButton>
                 <CustomButton
-                  className="btn"
+                  className={classes.btn}
                   onClick={onResetClicked}
                   startIcon={<Icons.clear classes={{ root: 'icon' }} />}
                 >

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

@@ -1,5 +1,4 @@
 import { makeStyles, Theme } from '@material-ui/core';
-import { Height } from '@material-ui/icons';
 
 export const getQueryStyles = makeStyles((theme: Theme) => ({
   root: {
@@ -166,26 +165,35 @@ export const getQueryStyles = makeStyles((theme: Theme) => ({
     display: 'flex',
     justifyContent: 'space-between',
     alignItems: 'center',
-    background: '#fff',
-    marginBottom: theme.spacing(1),
+    backgroundColor: 'white',
+    padding: theme.spacing(0, 0, 1),
+    gap: theme.spacing(1),
 
     '& .left': {
       display: 'flex',
+      justifyContent: 'space-between',
+      alignItems: 'center',
       gap: theme.spacing(1),
-      '& .MuiFilledInput-adornedEnd': {
-        paddingRight: 0,
-      },
-      '& span button': {
-        height: '100%',
+      flex: 1,
+
+      '& .textarea': {
+        width: '100%',
+        '& .MuiFormHelperText-root': {
+          display: 'none',
+        },
       },
     },
-    '& .right': {},
-  },
 
-  filterInput: {
-    width: '280px',
-    '& .MuiFormHelperText-root': {
-      display: 'none',
+    '& .right': {
+      display: 'flex',
+      justifyContent: 'space-between',
+      alignItems: 'center',
+      gap: theme.spacing(1),
     },
   },
+
+  btn: {
+    height: 56,
+    width: 80,
+  },
 }));