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 => ({
position: "absolute",
top: 0,
left: 0,
zIndex: 9999999999,
padding: theme.spacing(0.5)
zIndex: 1,
padding: theme.spacing(1)
}
}));
......
......@@ -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>
);
}
......
Supports Markdown
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