From f8b3476489d4b532d13efbc568cca298c70ebec5 Mon Sep 17 00:00:00 2001
From: Jalil Arfaoui <jalil@arfaoui.net>
Date: Thu, 31 Aug 2023 18:41:05 +0200
Subject: [PATCH] fix: les resistants actuels sont en grayscale

---
 src/routes/Liste/List/ResistantRow.tsx     | 7 +++----
 src/routes/Liste/Map/PopupContent.tsx      | 3 ++-
 src/routes/Liste/Thumbs/ResistantThumb.tsx | 7 +++----
 src/style/getResistantGrayscaleRule.ts     | 8 ++++++++
 4 files changed, 16 insertions(+), 9 deletions(-)
 create mode 100644 src/style/getResistantGrayscaleRule.ts

diff --git a/src/routes/Liste/List/ResistantRow.tsx b/src/routes/Liste/List/ResistantRow.tsx
index 4d8148a..b59c7d1 100644
--- a/src/routes/Liste/List/ResistantRow.tsx
+++ b/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>
diff --git a/src/routes/Liste/Map/PopupContent.tsx b/src/routes/Liste/Map/PopupContent.tsx
index 4841c68..a1db4c3 100644
--- a/src/routes/Liste/Map/PopupContent.tsx
+++ b/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}
       />
diff --git a/src/routes/Liste/Thumbs/ResistantThumb.tsx b/src/routes/Liste/Thumbs/ResistantThumb.tsx
index f00ffae..0574a59 100644
--- a/src/routes/Liste/Thumbs/ResistantThumb.tsx
+++ b/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={{
-        filter: `grayscale(${isAncienResistant(resistant) ? "80%" : "1"})`,
-      }}
+      style={getResistantGrayscaleRule(resistant)}
     >
       <div
         className="thumb resistant-thumb"
diff --git a/src/style/getResistantGrayscaleRule.ts b/src/style/getResistantGrayscaleRule.ts
new file mode 100644
index 0000000..83a0b8b
--- /dev/null
+++ b/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"})`,
+});