From 2e427647adfbf4d03df2abca31493e05e0810dbf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?F=C3=A9lix=20Legrelle?= <legrelle.f@gmail.com>
Date: Thu, 27 Oct 2022 13:01:27 +0200
Subject: [PATCH] :fix: search loader icon

---
 .../design-system/field/SearchField.tsx       | 12 +---
 site/source/design-system/icons/Loader.tsx    | 67 ++++++++-----------
 .../source/design-system/icons/SearchIcon.tsx | 12 +---
 3 files changed, 30 insertions(+), 61 deletions(-)

diff --git a/site/source/design-system/field/SearchField.tsx b/site/source/design-system/field/SearchField.tsx
index 46b6d7f08..3459d9120 100644
--- a/site/source/design-system/field/SearchField.tsx
+++ b/site/source/design-system/field/SearchField.tsx
@@ -33,17 +33,7 @@ const SearchInputContainer = styled(StyledInputContainer)`
 `
 
 const IconContainer = styled.div<{ hasLabel?: boolean }>`
-	padding: calc(
-			${({ hasLabel = false }) => (hasLabel ? '1rem' : '0rem')} + 0.5rem
-		)
-		0 0.5rem;
-	${({ theme: { darkMode } }) =>
-		darkMode &&
-		css`
-			& * {
-				fill: white !important;
-			}
-		`}
+	padding: calc(${({ hasLabel = false }) => (hasLabel ? '1rem' : '0rem')} + 0.5rem) 0 0.5rem;
 `
 
 export default function SearchField(
diff --git a/site/source/design-system/icons/Loader.tsx b/site/source/design-system/icons/Loader.tsx
index 787094bf4..bf1d5c5d9 100644
--- a/site/source/design-system/icons/Loader.tsx
+++ b/site/source/design-system/icons/Loader.tsx
@@ -4,51 +4,40 @@ export function Loader() {
 			aria-label="Chargement en cours"
 			width={24}
 			height={24}
+			viewBox="0 0 38 38"
 			xmlns="http://www.w3.org/2000/svg"
 			role="img"
 		>
 			<defs>
-				<linearGradient
-					x1="8.042%"
-					y1="0%"
-					x2="65.682%"
-					y2="23.865%"
-					id="prefix__a"
-				>
-					<stop stopColor="currentColor" stopOpacity={0} offset="0%" />
-					<stop stopColor="currentColor" stopOpacity={0.631} offset="63.146%" />
-					<stop stopColor="currentColor" offset="100%" />
+				<linearGradient x1="8.042%" y1="0%" x2="65.682%" y2="23.865%" id="a">
+					<stop stopColor="#fff" stopOpacity={0} offset="0%" />
+					<stop stopColor="#fff" stopOpacity={0.631} offset="63.146%" />
+					<stop stopColor="#fff" offset="100%" />
 				</linearGradient>
 			</defs>
-			<g
-				transform="translate(1 1) scale(0.5 0.5)"
-				fill="none"
-				fillRule="evenodd"
-			>
-				<path
-					d="M36 18c0-9.94-8.06-18-18-18"
-					stroke="url(#prefix__a)"
-					strokeWidth={2}
-				>
-					<animateTransform
-						attributeName="transform"
-						type="rotate"
-						from="0 18 18"
-						to="360 18 18"
-						dur="0.9s"
-						repeatCount="indefinite"
-					/>
-				</path>
-				<circle fill="currentColor" cx={36} cy={18} r={1}>
-					<animateTransform
-						attributeName="transform"
-						type="rotate"
-						from="0 18 18"
-						to="360 18 18"
-						dur="0.9s"
-						repeatCount="indefinite"
-					/>
-				</circle>
+			<g fill="none" fillRule="evenodd">
+				<g transform="translate(1 1)">
+					<path d="M36 18c0-9.94-8.06-18-18-18" id="Oval-2" stroke="url(#a)" strokeWidth={2}>
+						<animateTransform
+							attributeName="transform"
+							type="rotate"
+							from="0 18 18"
+							to="360 18 18"
+							dur="0.9s"
+							repeatCount="indefinite"
+						/>
+					</path>
+					<circle fill="#fff" cx={36} cy={18} r={1}>
+						<animateTransform
+							attributeName="transform"
+							type="rotate"
+							from="0 18 18"
+							to="360 18 18"
+							dur="0.9s"
+							repeatCount="indefinite"
+						/>
+					</circle>
+				</g>
 			</g>
 		</svg>
 	)
diff --git a/site/source/design-system/icons/SearchIcon.tsx b/site/source/design-system/icons/SearchIcon.tsx
index 6bde404be..0b092374f 100644
--- a/site/source/design-system/icons/SearchIcon.tsx
+++ b/site/source/design-system/icons/SearchIcon.tsx
@@ -1,25 +1,15 @@
 export function SearchIcon({ ...props }) {
 	return (
-		<svg
-			width={24}
-			height={24}
-			fill="none"
-			xmlns="http://www.w3.org/2000/svg"
-			role="img"
-			aria-hidden
-			{...props}
-		>
+		<svg width={24} height={24} fill="white" xmlns="http://www.w3.org/2000/svg" role="img" aria-hidden {...props}>
 			<path
 				fillRule="evenodd"
 				clipRule="evenodd"
 				d="M10.25 6a4.25 4.25 0 100 8.5 4.25 4.25 0 000-8.5zM4 10.25a6.25 6.25 0 1112.5 0 6.25 6.25 0 01-12.5 0z"
-				fill="#212529"
 			/>
 			<path
 				fillRule="evenodd"
 				clipRule="evenodd"
 				d="M18.293 19.707l-5.056-5.056 1.414-1.414 5.056 5.056a1 1 0 01-1.414 1.414z"
-				fill="#212529"
 			/>
 		</svg>
 	)