refacto(Legend): optimize style

frontend/src/components/map/BaseMap.jsx

@@ -4,7 +4,7 @@ import PropTypes from "prop-types";
 import ReactMapboxGl, { Feature, Layer, Popup } from "react-mapbox-gl";
 import { makeStyles, useTheme } from "@material-ui/styles";
 import UnivMapPopup from "./UnivMapPopup";
-import Legend from "./Legend";
+import Legend, { getLegendColorOpacity } from "./Legend";
 
 const Map = ReactMapboxGl({
   dragRotate: false,
@@ -83,10 +83,8 @@ function BaseMap({ id, campuses }) {
           type="circle"
           id={`campuses${selected ? "selected" : "notSelected"}`}
           paint={{
-            "circle-color": selected
-              ? theme.palette.primary.main
-              : theme.palette.action.disabled,
-            "circle-opacity": selected ? 0.8 : 0.5,
+            "circle-color": getLegendColorOpacity(theme, selected).color,
+            "circle-opacity": getLegendColorOpacity(theme, selected).opacity,
             "circle-radius": 8
           }}
         >

frontend/src/components/map/Legend.jsx

 import React from "react";
 import PropTypes from "prop-types";
-import withStyles from "@material-ui/core/styles/withStyles";
-import Card from "@material-ui/core/Card";
-import CardActionArea from "@material-ui/core/CardActionArea";
-import CardActions from "@material-ui/core/CardActions";
-import CardContent from "@material-ui/core/CardContent";
-import Button from "@material-ui/core/Button";
 import Typography from "@material-ui/core/Typography";
-import Divider from "@material-ui/core/Divider";
-import IconAdd from "@material-ui/icons/Add";
-import IconClose from "@material-ui/icons/Close";
-import { Link } from "react-router-dom";
+import { makeStyles } from "@material-ui/styles";
+import classNames from "../../utils/classNames";
 
-import { makeStyles, useTheme } from "@material-ui/styles";
+export function getLegendColorOpacity(theme, selected) {
+  const color = selected
+    ? theme.palette.primary.main
+    : theme.palette.action.disabled;
+  const opacity = selected ? 0.8 : 0.5;
+  return { color, opacity };
+}
+
+const useStyles = makeStyles(theme => {
+  const {
+    color: colorSelected,
+    opacity: opacitySelected
+  } = getLegendColorOpacity(theme, true);
+  const {
+    color: colorNotSelected,
+    opacity: opacityNotSelected
+  } = getLegendColorOpacity(theme, false);
+  const circleSize = theme.typography.caption.fontSize;
 
-import MyCardMedia from "./MyCardMedia";
-import APP_ROUTES from "../../config/appRoutes";
+  return {
+    legendContainer: {
+      padding: theme.spacing(1),
+      backgroundColor: theme.palette.background.default,
+      borderRadius: theme.spacing(1)
+    },
+    legendItemContainer: {
+      display: "flex",
+      alignItems: "center",
+      padding: theme.spacing(0.5)
+    },
+    legendItemCircle: {
+      borderRadius: circleSize,
+      width: circleSize,
+      height: circleSize,
+      marginRight: theme.spacing(0.5)
+    },
+    selectedLegendItemCircle: {
+      backgroundColor: colorSelected,
+      opacity: opacitySelected
+    },
+    notSelectedLegendItemCircle: {
+      backgroundColor: colorNotSelected,
+      opacity: opacityNotSelected
+    }
+  };
+});
 
-function LegendItem({ color, opacity, label }) {
-  const theme = useTheme();
-  const size = theme.typography.caption.fontSize;
+function LegendItem({ selected, label }) {
+  const classes = useStyles();
 
   return (
-    <div
-      style={{
-        display: "flex",
-        alignItems: "center",
-        padding: theme.spacing(0.5)
-      }}
-    >
+    <div className={classes.legendItemContainer}>
       <div
-        style={{
-          backgroundColor: color,
-          borderRadius: size,
-          width: size,
-          height: size,
-          marginRight: theme.spacing(0.5),
-          opacity: opacity
-        }}
+        className={classNames(
+          classes.legendItemCircle,
+          selected
+            ? classes.selectedLegendItemCircle
+            : classes.notSelectedLegendItemCircle
+        )}
       />
       <Typography variant="caption">{label}</Typography>
     </div>
@@ -45,34 +70,22 @@ function LegendItem({ color, opacity, label }) {
 }
 
 LegendItem.propTypes = {
-  color: PropTypes.string.isRequired,
-  opacity: PropTypes.number.isRequired,
-  label: PropTypes.string.isRequired
+  label: PropTypes.string.isRequired,
+  selected: PropTypes.bool.isRequired
 };
 
-LegendItem.defaultProps = {
-  opacity: 1,
-  label: "actif"
-};
+LegendItem.defaultProps = {};
 
 /**
  * Custom component to create the legend on the map
  */
-function Legend({}) {
-  const theme = useTheme();
-  const color = theme.palette.primary.main;
-  const color2 = theme.palette.action.disabled;
+function Legend() {
+  const classes = useStyles();
 
   return (
-    <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 className={classes.legendContainer}>
+      <LegendItem label="L'univ. correspond aux filtres" selected />
+      <LegendItem label="Autres universités" selected={false} />
     </div>
   );
 }
@@ -81,6 +94,4 @@ Legend.propTypes = {};
 
 Legend.defaultProps = {};
 
-const styles = {};
-
 export default Legend;