Commit cd89a8cc authored by Estelle Veisemburger's avatar Estelle Veisemburger
Browse files

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

parent 86b295b8
...@@ -27,8 +27,8 @@ const useStyles = makeStyles(theme => ({ ...@@ -27,8 +27,8 @@ const useStyles = makeStyles(theme => ({
position: "absolute", position: "absolute",
top: 0, top: 0,
left: 0, left: 0,
zIndex: 9999999999, zIndex: 1,
padding: theme.spacing(0.5) padding: theme.spacing(1)
} }
})); }));
......
...@@ -22,14 +22,21 @@ function LegendItem({ color, opacity, label }) { ...@@ -22,14 +22,21 @@ function LegendItem({ color, opacity, label }) {
const size = theme.typography.caption.fontSize; const size = theme.typography.caption.fontSize;
return ( return (
<div style={{ display: "flex", alignItems: "center" }}> <div
style={{
display: "flex",
alignItems: "center",
padding: theme.spacing(0.5)
}}
>
<div <div
style={{ style={{
backgroundColor: color, backgroundColor: color,
borderRadius: size, borderRadius: size,
width: size, width: size,
height: size, height: size,
marginRight: theme.spacing(0.5) marginRight: theme.spacing(0.5),
opacity: opacity
}} }}
/> />
<Typography variant="caption">{label}</Typography> <Typography variant="caption">{label}</Typography>
...@@ -45,7 +52,7 @@ LegendItem.propTypes = { ...@@ -45,7 +52,7 @@ LegendItem.propTypes = {
LegendItem.defaultProps = { LegendItem.defaultProps = {
opacity: 1, opacity: 1,
label: "toto" label: "actif"
}; };
/** /**
...@@ -57,9 +64,15 @@ function Legend({}) { ...@@ -57,9 +64,15 @@ function Legend({}) {
const color2 = theme.palette.action.disabled; const color2 = theme.palette.action.disabled;
return ( return (
<div style={{ padding: theme.spacing(1), backgroundColor: "white" }}> <div
<LegendItem color={color} label="actif" /> style={{
<LegendItem color={color2} label="inactif" /> 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> </div>
); );
} }
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment