From 0954cd8bdaa777caf8ddb987c7505f6d3d5e2b2b Mon Sep 17 00:00:00 2001
From: JF-Cozy <julien.ficheux@cozycloud.cc>
Date: Tue, 11 Jun 2024 15:58:38 +0200
Subject: [PATCH] fix: Adjust color of devtools to be dark mode compliant

---
 packages/cozy-client/src/devtools/Flags/FlagItem.jsx | 8 ++------
 packages/cozy-client/src/devtools/common.jsx         | 2 +-
 packages/cozy-client/src/devtools/index.jsx          | 8 ++++----
 3 files changed, 7 insertions(+), 11 deletions(-)

diff --git a/packages/cozy-client/src/devtools/Flags/FlagItem.jsx b/packages/cozy-client/src/devtools/Flags/FlagItem.jsx
index 64a51acf3e..6d131e8615 100644
--- 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
index e0274a3b3e..01687f559d 100644
--- 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
index 1ca74590d0..2f6be2e38a 100644
--- 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'