fix: Adjust color of devtools to be dark mode compliant

cozy · Jun 11, 2024 · 0954cd8 · 0954cd8
1 parent 86a86b5
commit 0954cd8
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 11 deletions.
diff --git a/packages/cozy-client/src/devtools/Flags/FlagItem.jsx b/packages/cozy-client/src/devtools/Flags/FlagItem.jsx
@@ -40,14 +40,10 @@ const FlagItem = ({ flag, onEdit, onTrash }) => {
         }
       />
       <ListItemSecondaryAction>
-        <IconButton size="small" onClick={() => onEdit(flag)}>
+        <IconButton onClick={() => onEdit(flag)}>
           <Icon icon={PenIcon} />
         </IconButton>
-        <IconButton
-          className="u-ml-1"
-          size="small"
-          onClick={() => onTrash(flag)}
-        >
+        <IconButton onClick={() => onTrash(flag)}>
           <Icon icon={TrashIcon} />
         </IconButton>
       </ListItemSecondaryAction>

diff --git a/packages/cozy-client/src/devtools/common.jsx b/packages/cozy-client/src/devtools/common.jsx
@@ -15,7 +15,7 @@ const styles = {
     flexBasis: 240,
     flexShrink: 0,
     flexGrow: 0,
-    boxShadow: '4px 0 8px rgba(0, 0, 0, 0.10)'
+    boxShadow: 'var(--shadow1)'
   }
 }
 

diff --git a/packages/cozy-client/src/devtools/index.jsx b/packages/cozy-client/src/devtools/index.jsx
@@ -45,16 +45,16 @@ const useStyles = makeStyles(theme => ({
     top: '0',
     right: '0.5rem',
     transform: 'translateY(-66%)',
-    background: 'white',
+    background: 'var(--paperBackgroundColor)',
     border: `2px solid ${theme.palette.primary.main}`,
-    boxShadow: '2px 2px 2px rgba(0, 0, 0, 0.5)',
+    boxShadow: 'var(--shadow1)',
     zIndex: 1,
     '&:hover': {
-      background: '#efefef'
+      background: 'var(--paperBackgroundColor)'
     }
   },
   panelContainer: {
-    background: 'white',
+    background: 'var(--paperBackgroundColor)',
     height: '100%',
     flexWrap: 'nowrap',
     overflowX: 'scroll'