fix: les resistants actuels sont en grayscale

src/routes/Liste/List/ResistantRow.tsx

@@ -1,7 +1,8 @@
 import { useNavigate } from "react-router";
-import { isAncienResistant, Resistant } from "../../../Resistant";
+import { Resistant } from "../../../Resistant";
 import { getResistantPhotoUrl } from "../../../getResistantPhotoUrl";
 import { Separator } from "../../../components/Separator";
+import { getResistantGrayscaleRule } from "../../../style/getResistantGrayscaleRule";
 
 interface Props {
   resistant: Resistant;
@@ -39,11 +40,9 @@ export const ResistantRow = ({ resistant }: Props) => {
                   src={getResistantPhotoUrl(resistant)}
                   alt={resistant.noms}
                   style={{
+                    ...getResistantGrayscaleRule(resistant),
                     width: "200px",
                     height: "200px",
-                    filter: `grayscale(${
-                      isAncienResistant(resistant) ? "80%" : "1"
-                    })`,
                   }}
                 />
               </div>

src/routes/Liste/Map/PopupContent.tsx

@@ -4,6 +4,7 @@ import { isAncienResistant, Resistant } from "../../../Resistant";
 import { getResistantPhotoUrl } from "../../../getResistantPhotoUrl";
 import { HomeContext } from "../../../context/HomeContext";
 import { getResistantPageUrl } from "../../../getResistantPageUrl";
+import { getResistantGrayscaleRule } from "../../../style/getResistantGrayscaleRule";
 
 export const PopupContent = ({ resistant }: { resistant: Resistant }) => {
   const navigate = useNavigate();
@@ -21,10 +22,10 @@ export const PopupContent = ({ resistant }: { resistant: Resistant }) => {
       <img
         src={getResistantPhotoUrl(resistant)}
         style={{
+          ...getResistantGrayscaleRule(resistant),
           float: "left",
           maxHeight: "15em",
           marginRight: "1em",
-          filter: `grayscale(${isAncienResistant(resistant) ? "80%" : "1"})`,
         }}
         alt={resistant.noms}
       />

src/routes/Liste/Thumbs/ResistantThumb.tsx

@@ -1,10 +1,11 @@
 import { useNavigate } from "react-router";
 import { BackgroundImage, Text } from "@mantine/core";
 import { getResistantPhotoUrl } from "../../../getResistantPhotoUrl";
-import { isAncienResistant, Resistant } from "../../../Resistant";
+import { Resistant } from "../../../Resistant";
 import React from "react";
 import { HomeContext } from "../../../context/HomeContext";
 import { getResistantPageUrl } from "../../../getResistantPageUrl";
+import { getResistantGrayscaleRule } from "../../../style/getResistantGrayscaleRule";
 
 interface Props {
   resistant: Resistant;
@@ -18,9 +19,7 @@ export const ResistantThumb = ({ resistant }: Props) => {
     <BackgroundImage
       src={getResistantPhotoUrl(resistant)}
       className="resistant-thumb"
-      style={{
+      style={getResistantGrayscaleRule(resistant)}
-        filter: `grayscale(${isAncienResistant(resistant) ? "80%" : "1"})`,
-      }}
     >
       <div
         className="thumb resistant-thumb"

src/style/getResistantGrayscaleRule.ts

@@ -0,0 +1,8 @@
+import { isAncienResistant, Resistant } from "../Resistant";
+import React from "react";
+
+export const getResistantGrayscaleRule = (
+  resistant: Resistant
+): React.CSSProperties => ({
+  filter: `grayscale(${isAncienResistant(resistant) ? "40%" : "0"})`,
+});