feat(Legend): change color for light and dark mode

frontend/src/components/map/BaseMap.jsx

@@ -27,8 +27,8 @@ const useStyles = makeStyles(theme => ({
     position: "absolute",
     top: 0,
     left: 0,
-    zIndex: 9999999999,
-    padding: theme.spacing(0.5)
+    zIndex: 1,
+    padding: theme.spacing(1)
   }
 }));
 

frontend/src/components/map/Legend.jsx

@@ -22,14 +22,21 @@ function LegendItem({ color, opacity, label }) {
   const size = theme.typography.caption.fontSize;
 
   return (
-    <div style={{ display: "flex", alignItems: "center" }}>
+    <div
+      style={{
+        display: "flex",
+        alignItems: "center",
+        padding: theme.spacing(0.5)
+      }}
+    >
       <div
         style={{
           backgroundColor: color,
           borderRadius: size,
           width: size,
           height: size,
-          marginRight: theme.spacing(0.5)
+          marginRight: theme.spacing(0.5),
+          opacity: opacity
         }}
       />
       <Typography variant="caption">{label}</Typography>
@@ -45,7 +52,7 @@ LegendItem.propTypes = {
 
 LegendItem.defaultProps = {
   opacity: 1,
-  label: "toto"
+  label: "actif"
 };
 
 /**
@@ -57,9 +64,15 @@ function Legend({}) {
   const color2 = theme.palette.action.disabled;
 
   return (
-    <div style={{ padding: theme.spacing(1), backgroundColor: "white" }}>
-      <LegendItem color={color} label="actif" />
-      <LegendItem color={color2} label="inactif" />
+    <div
+      style={{
+        padding: theme.spacing(1),
+        backgroundColor: theme.palette.background.default,
+        borderRadius: theme.spacing(1)
+      }}
+    >
+      <LegendItem color={color} label="Actif" opacity="0.8" />
+      <LegendItem color={color2} label="Inactif" opacity="0.5" />
     </div>
   );
 }