dark mode part2

Signed-off-by: ryjiang <[email protected]>
Psunshin · Aug 16, 2024 · 2aeaa19 · 2aeaa19
1 parent e0c5c8d
commit 2aeaa19
Show file tree

Hide file tree

Showing 43 changed files with 224 additions and 206 deletions.
diff --git a/client/src/components/advancedSearch/Condition.tsx b/client/src/components/advancedSearch/Condition.tsx
@@ -161,7 +161,7 @@ const useStyles = makeStyles((theme: Theme) => ({
   wrapper: {
     minWidth: '466px',
     minHeight: '62px',
-    background: '#FFFFFF',
+    background:  theme.palette.background.paper,
     padding: theme.spacing(1.5, 2),
     display: 'flex',
     flexDirection: 'row',

diff --git a/client/src/components/advancedSearch/ConditionGroup.tsx b/client/src/components/advancedSearch/ConditionGroup.tsx
@@ -204,27 +204,26 @@ const useStyles = makeStyles((theme: Theme) => ({
   addBtn: {},
   binaryLogicOp: {
     width: '100%',
-    backgroundColor: '#FFFFFF',
+    backgroundColor: theme.palette.background.paper,
     display: 'flex',
     flexDirection: 'row',
     alignItems: 'center',
     '& .op-split': {
       height: '1px',
-      backgroundColor: '#E9E9ED',
+      backgroundColor: theme.palette.divider,
       width: '100%',
     },
     '& button': {
       width: '42px',
       height: '32px',
-      color: theme.palette.attuDark.main,
     },
     '& button.Mui-selected': {
-      backgroundColor: theme.palette.primary.main,
-      color: '#FFFFFF',
+      backgroundColor: theme.palette.background.default,
+      color:  theme.palette.text.primary
     },
     '& button.Mui-selected:hover': {
-      backgroundColor: theme.palette.primary.main,
-      color: '#FFFFFF',
+      backgroundColor: theme.palette.background.default,
+      color:  theme.palette.text.primary
     },
   },
 }));

diff --git a/client/src/components/advancedSearch/Dialog.tsx b/client/src/components/advancedSearch/Dialog.tsx
@@ -173,11 +173,11 @@ const useStyles = makeStyles((theme: Theme) => ({
   wrapper: {
     '& .disable-exp': {
       userSelect: 'none',
-      color: theme.palette.attuGrey.main,
+      color: theme.palette.text.primary,
     },
   },
   closeButton: {
-    color: 'black',
+    color: theme.palette.text.primary,
   },
   dialogTitle: {
     display: 'flex',
@@ -197,7 +197,7 @@ const useStyles = makeStyles((theme: Theme) => ({
   },
   copyButton: {},
   expResult: {
-    background: '#f4f4f4',
+    background: theme.palette.background.paper,
     display: 'flex',
     justifyContent: 'space-between',
     alignItems: 'center',
@@ -210,7 +210,7 @@ const useStyles = makeStyles((theme: Theme) => ({
     lineHeight: '24px',
   },
   expWrapper: {
-    background: '#f4f4f4',
+    background: theme.palette.background.default,
     minWidth: '480px',
     minHeight: '104px',
     padding: theme.spacing(1.5),

diff --git a/client/src/components/advancedSearch/Filter.tsx b/client/src/components/advancedSearch/Filter.tsx
@@ -344,6 +344,11 @@ const useStyles = makeStyles((theme: Theme) => ({
   wrapper: {},
   afBtn: {
     color: theme.palette.primary.main,
+    minWidth: 32,
+    padding: '8px 0',
+    '& .MuiButton-endIcon': {
+      marginLeft: 0,
+    },
   },
 }));
 

diff --git a/client/src/components/cards/EmptyCard.tsx b/client/src/components/cards/EmptyCard.tsx
@@ -7,7 +7,7 @@ import { EmptyCardProps } from './Types';
 const useStyles = makeStyles((theme: Theme) => ({
   wrapper: {
     color: theme.palette.text.primary,
-    backgroundColor: theme.palette.background.default,
+    backgroundColor: theme.palette.background.paper,
     flexDirection: 'column',
     textAlign: 'center',
   },

diff --git a/client/src/components/customDialog/CustomDialog.tsx b/client/src/components/customDialog/CustomDialog.tsx
@@ -13,7 +13,9 @@ import CustomDialogTitle from './CustomDialogTitle';
 import { makeStyles } from '@mui/styles';
 
 const useStyles = makeStyles((theme: Theme) => ({
-  paper: {},
+  paper: {
+    border: `1px solid ${theme.palette.divider}`,
+  },
   noticePaper: {},
   paperSm: {
     maxWidth: '80%',

diff --git a/client/src/components/customDialog/CustomDialogTitle.tsx b/client/src/components/customDialog/CustomDialogTitle.tsx
@@ -18,7 +18,7 @@ const getStyles = makeStyles((theme: Theme) => ({
   },
   icon: {
     fontSize: '18px',
-    color: theme.palette.attuDark.main,
+    color: theme.palette.text.primary,
     cursor: 'pointer',
   },
 }));

diff --git a/client/src/components/customDialog/DeleteDialogTemplate.tsx b/client/src/components/customDialog/DeleteDialogTemplate.tsx
@@ -18,10 +18,11 @@ import { makeStyles } from '@mui/styles';
 const useStyles = makeStyles((theme: Theme) => ({
   root: {
     maxWidth: 540,
-    backgroundColor: '#fff',
+    backgroundColor: theme.palette.background.paper,
   },
   info: {
     marginBottom: theme.spacing(0.5),
+    color: theme.palette.text.secondary,
   },
   mb: {
     marginBottom: theme.spacing(2.5),
@@ -39,7 +40,7 @@ const useStyles = makeStyles((theme: Theme) => ({
     padding: '10px 12px',
   },
   cancelBtn: {
-    color: theme.palette.attuGrey.dark,
+    color: theme.palette.text.secondary,
   },
   checkBox: {},
 }));

diff --git a/client/src/components/customInput/CustomInput.tsx b/client/src/components/customInput/CustomInput.tsx
@@ -9,6 +9,7 @@ import {
   InputLabel,
   StandardTextFieldProps,
   TextField,
+  Theme,
 } from '@mui/material';
 import { makeStyles } from '@mui/styles';
 import Icons from '../icons/Icons';
@@ -70,9 +71,9 @@ const handleOnChange = (param: IChangeParam) => {
   }
 };
 
-const getAdornmentStyles = makeStyles(theme => ({
+const getAdornmentStyles = makeStyles((theme: Theme) => ({
   icon: {
-    color: theme.palette.attuGrey.dark,
+    color: theme.palette.text.secondary,
   },
 }));
 
@@ -131,7 +132,8 @@ const getAdornmentInput = (
               onClick={onIconClick || (() => {})}
               edge="end"
               role="icon-button"
-              size="large">
+              size="large"
+            >
               {isPasswordType
                 ? showPassword
                   ? Icons.visible({ classes: { root: classes.icon } })
@@ -255,7 +257,7 @@ const getTextfield = (
   );
 };
 
-const getStyles = makeStyles(theme => ({
+const getStyles = makeStyles((theme: Theme) => ({
   errWrapper: {
     display: 'flex',
     alignItems: 'flex-start',

diff --git a/client/src/components/customSelector/CustomGroupedSelect.tsx b/client/src/components/customSelector/CustomGroupedSelect.tsx
@@ -21,7 +21,7 @@ const getStyles = makeStyles((theme: Theme) => ({
     paddingLeft: theme.spacing(2),
     paddingRight: theme.spacing(2),
     lineHeight: '32px',
-    color: 'rgba(0, 0, 0, 0.33)',
+    color: theme.palette.text.primary,
     fontWeight: 'bold',
     fontSize: '12.8px',
   },

diff --git a/client/src/components/customTabList/style.ts b/client/src/components/customTabList/style.ts
@@ -15,10 +15,9 @@ export const useStyles = makeStyles((theme: Theme) => ({
   },
   tab: {
     height: theme.spacing(0.5),
-    backgroundColor: theme.palette.primary.main,
   },
   tabContainer: {
-    borderBottom: '1px solid #e0e0e0',
+    borderBottom: `1px solid ${theme.palette.divider}`,
   },
   tabContent: {
     minWidth: 0,

diff --git a/client/src/components/grid/Grid.tsx b/client/src/components/grid/Grid.tsx
@@ -28,7 +28,7 @@ const userStyle = makeStyles((theme: Theme) => ({
   },
   noData: {
     pointerEvents: 'none',
-    color: '#999',
+    color:  theme.palette.text.secondary,
     textAlign: 'center',
     height: '50vh',
     display: 'grid',

diff --git a/client/src/components/grid/Table.tsx b/client/src/components/grid/Table.tsx
@@ -41,24 +41,23 @@ const useStyles = makeStyles((theme: Theme) => ({
       opacity: 0,
     },
   },
-  checkbox: {},
+  checkbox: {
+    borderBottom: `1px solid ${theme.palette.divider}`,
+  },
   rowHover: {
     '&:hover': {
-      backgroundColor: `${theme.palette.secondary.main} !important`,
       '& td': {
         background: 'inherit',
       },
 
       '& $hoverActionCell': {
-        backgroundColor: theme.palette.secondary.main,
         '& span': {
           opacity: 1,
         },
       },
     },
   },
   selected: {
-    backgroundColor: `#f3fcfe !important`,
     '& td': {
       background: 'inherit',
     },
@@ -82,7 +81,7 @@ const useStyles = makeStyles((theme: Theme) => ({
     paddingTop: theme.spacing(6),
     textAlign: 'center',
     letterSpacing: '0.5px',
-    color: 'rgba(0, 0, 0, 0.6)',
+    color: theme.palette.text.secondary,
   },
   copyBtn: {
     '& svg': {

diff --git a/client/src/components/menu/CommunityBtn.tsx b/client/src/components/menu/CommunityBtn.tsx
@@ -82,7 +82,7 @@ const getStyles = makeStyles((theme: Theme) => ({
   contentDesc: {
     fontSize: theme.spacing(1.5),
     lineHeight: theme.spacing(2.5),
-    color: theme.palette.attuGrey.dark,
+    color: theme.palette.text.secondary,
     marginBottom: theme.spacing(1),
   },
   contentLink: {

diff --git a/client/src/components/status/Status.tsx b/client/src/components/status/Status.tsx
@@ -16,7 +16,7 @@ const useStyles = makeStyles((theme: Theme) => ({
     alignItems: 'center',
   },
   label: {
-    color: theme.palette.attuGrey.dark,
+    color: theme.palette.text.secondary,
     textTransform: 'capitalize',
   },
   circle: {

diff --git a/client/src/pages/databases/collections/Collections.tsx b/client/src/pages/databases/collections/Collections.tsx
@@ -48,14 +48,15 @@ const useStyles = makeStyles((theme: Theme) => ({
     fontSize: '16px',
   },
   link: {
-    color: theme.palette.common.black,
+    color: theme.palette.text.primary,
     display: 'inline-block',
     wordBreak: 'break-all',
     whiteSpace: 'nowrap',
     width: '150px',
     overflow: 'hidden',
     textOverflow: 'ellipsis',
     height: '20px',
+    textDecoration: 'none',
   },
   highlight: {
     color: theme.palette.primary.main,

diff --git a/client/src/pages/databases/collections/overview/CreateForm.tsx b/client/src/pages/databases/collections/overview/CreateForm.tsx
@@ -19,7 +19,7 @@ const useStyles = makeStyles((theme: Theme) => ({
   },
   paramTitle: {
     margin: theme.spacing(2, 0),
-    color: theme.palette.attuGrey.dark,
+    color: theme.palette.text.secondary,
     lineHeight: '20px',
     fontSize: '14px',
   },

diff --git a/client/src/pages/databases/collections/overview/IndexTypeElement.tsx b/client/src/pages/databases/collections/overview/IndexTypeElement.tsx
@@ -37,7 +37,7 @@ const useStyles = makeStyles((theme: Theme) => ({
     },
   },
   btnDisabled: {
-    color: theme.palette.attuGrey.dark,
+    color: theme.palette.text.secondary,
     pointerEvents: 'none',
 
     '&:hover': {

diff --git a/client/src/pages/databases/collections/overview/Overview.tsx b/client/src/pages/databases/collections/overview/Overview.tsx
@@ -94,7 +94,7 @@ const useStyles = makeStyles((theme: Theme) => ({
       marginRight: theme.spacing(2),
 
       '& .key': {
-        color: theme.palette.attuGrey.dark,
+        color: theme.palette.text.secondary,
         display: 'inline-block',
         marginRight: theme.spacing(0.5),
       },

diff --git a/client/src/pages/databases/collections/search/Styles.ts b/client/src/pages/databases/collections/search/Styles.ts
@@ -152,15 +152,15 @@ export const getQueryStyles = makeStyles((theme: Theme) => ({
     display: 'flex',
     flexDirection: 'column',
     flexGrow: 1,
-    padding: '0 8px',
+    paddingLeft: 8,
     overflow: 'auto',
   },
 
   toolbar: {
     display: 'flex',
     justifyContent: 'space-between',
     alignItems: 'center',
-    backgroundColor:  theme.palette.background.default,
+    backgroundColor: theme.palette.background.paper,
     padding: theme.spacing(0, 0, 1),
     gap: theme.spacing(1),
 

diff --git a/client/src/pages/databases/tree/index.tsx b/client/src/pages/databases/tree/index.tsx
@@ -109,7 +109,7 @@ const useStyles = makeStyles((theme: Theme) => ({
     fontSize: '13px',
     fontWeight: 500,
     marginLeft: theme.spacing(0.5),
-    color: theme.palette.attuGrey.main,
+    color: theme.palette.text.secondary,
     pointerEvents: 'none',
   },
   dot: {
@@ -135,8 +135,8 @@ const useStyles = makeStyles((theme: Theme) => ({
     backgroundColor: `${theme.palette.primary.light} !important`,
   },
   noIndex: {
-    border: `1px solid ${theme.palette.attuGrey.light}`,
-    backgroundColor: theme.palette.attuGrey.light,
+    border: `1px solid ${theme.palette.text.disabled}`,
+    backgroundColor: theme.palette.text.disabled,
   },
 }));
 

diff --git a/client/src/pages/dialogs/CreateCollectionDialog.tsx b/client/src/pages/dialogs/CreateCollectionDialog.tsx
@@ -37,7 +37,7 @@ const useStyles = makeStyles((theme: Theme) => ({
 
     '& legend': {
       marginBottom: theme.spacing(1),
-      color: theme.palette.attuGrey.dark,
+      color: theme.palette.text.secondary,
       lineHeight: '20px',
       fontSize: '14px',
     },

diff --git a/client/src/pages/dialogs/DuplicateCollectionDialog.tsx b/client/src/pages/dialogs/DuplicateCollectionDialog.tsx
@@ -16,6 +16,7 @@ const useStyles = makeStyles((theme: Theme) => ({
   },
   desc: {
     margin: '8px 0 16px 0',
+    color: theme.palette.text.secondary,
   },
 }));
 

diff --git a/client/src/pages/dialogs/ImportSampleDialog.tsx b/client/src/pages/dialogs/ImportSampleDialog.tsx
@@ -33,11 +33,11 @@ const getStyles = makeStyles((theme: Theme) => {
           fontSize: '14px',
           lineHeight: '20px',
 
-          color: theme.palette.attuDark.main,
+          color: theme.palette.text.secondary,
         },
 
         '& .description': {
-          color: theme.palette.attuGrey.dark,
+          color: theme.palette.text.secondary,
           marginBottom: theme.spacing(2),
           fontSize: 13,
           lineHeight: 1.5,

diff --git a/client/src/pages/dialogs/ReleaseCollectionDialog.tsx b/client/src/pages/dialogs/ReleaseCollectionDialog.tsx
@@ -10,6 +10,7 @@ const useStyles = makeStyles((theme: Theme) => ({
   desc: {
     margin: '8px 0 16px 0',
     maxWidth: 480,
+    color: theme.palette.text.secondary,
   },
 }));
 

diff --git a/client/src/pages/dialogs/RenameCollectionDialog.tsx b/client/src/pages/dialogs/RenameCollectionDialog.tsx
@@ -13,6 +13,7 @@ import { makeStyles } from '@mui/styles';
 const useStyles = makeStyles((theme: Theme) => ({
   desc: {
     margin: '8px 0 16px 0',
+    color: theme.palette.text.secondary,
   },
 }));
-Original file line number
+Diff line change
@@ Expand Up / @@ -16,6 +16,7 @@ const useStyles = makeStyles((theme: Theme) => ({ @@
       },
       desc: {
         margin: '8px 0 16px 0',
+        color: theme.palette.text.secondary,
       },
     }));
@@ Expand Down @@