From e4151299d0969ee1c1a4db75a1861890fed22e72 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=A9r=C3=A9my=20Rialland?= <wiinxt@gmail.com>
Date: Thu, 8 Dec 2022 18:28:33 +0100
Subject: [PATCH] Fix css dark theme issue, update desing css border

---
 .../design-system/field/Radio/ToggleGroup.tsx | 12 ++--
 .../design-system/field/Select/index.tsx      | 67 +++++++++++--------
 site/source/design-system/global-style.ts     |  2 -
 site/source/design-system/root.tsx            |  1 +
 site/source/pages/POCSearchCodeAPE.tsx        |  2 +-
 5 files changed, 46 insertions(+), 38 deletions(-)

diff --git a/site/source/design-system/field/Radio/ToggleGroup.tsx b/site/source/design-system/field/Radio/ToggleGroup.tsx
index cdca713ed..41731265a 100644
--- a/site/source/design-system/field/Radio/ToggleGroup.tsx
+++ b/site/source/design-system/field/Radio/ToggleGroup.tsx
@@ -88,7 +88,7 @@ export const ToggleGroupContainer = styled.div<{
 		position: relative;
 		align-items: center;
 		z-index: 1;
-		border: 1px solid
+		border: 2px solid
 			${({ theme }) =>
 				theme.darkMode
 					? theme.colors.extended.dark[500]
@@ -124,15 +124,15 @@ export const ToggleGroupContainer = styled.div<{
 
 	${InputRadio}:checked + ${VisibleRadio} {
 		z-index: 2;
-		border: 1px solid
+		border: 2px solid
 			${({ theme }) =>
 				theme.darkMode
-					? theme.colors.bases.primary[400]
-					: theme.colors.bases.primary[700]};
+					? theme.colors.bases.primary[300]
+					: theme.colors.bases.primary[600]};
 		background-color: ${({ theme }) =>
 			theme.darkMode
-				? theme.colors.bases.primary[500]
-				: theme.colors.bases.primary[200]};
+				? theme.colors.bases.primary[600]
+				: theme.colors.bases.primary[100]};
 		${({ mode }) => mode === 'tab' && TabModeCheckedStyle}
 	}
 
diff --git a/site/source/design-system/field/Select/index.tsx b/site/source/design-system/field/Select/index.tsx
index 5c3b9cbd0..bf30459be 100644
--- a/site/source/design-system/field/Select/index.tsx
+++ b/site/source/design-system/field/Select/index.tsx
@@ -31,6 +31,7 @@ export const Label = styled.label`
 	position: absolute;
 	will-change: transform top font-size line-height color;
 	transition: all 0.1s;
+	transition: color 0s, background-color 0s;
 	${({ theme }) =>
 		theme.darkMode &&
 		css`
@@ -96,6 +97,7 @@ interface WrapperProps {
 }
 
 export const Wrapper = styled.div<WrapperProps>`
+	overflow: hidden;
 	display: flex;
 	border-radius: ${({ theme }) => theme.box.borderRadius};
 	border: ${({ theme }) =>
@@ -243,40 +245,47 @@ export function Select<T extends Record<string, unknown>>(
 	}, [])
 
 	return (
-		<Wrapper
-			ref={wrapperRef}
-			isOpen={state.isOpen}
-			hasError={false}
-			hasLabel={false}
-		>
-			<HiddenSelect
-				state={state}
-				triggerRef={ref}
-				label={props.label}
-				name={props.name}
-			/>
-			{props.label && (
-				<Label className={props.small ? 'sr-only' : ''} {...labelProps}>
-					{props.label}
-				</Label>
-			)}
-			<Button
-				{...mergeProps(omit(buttonProps, 'id'), focusProps)}
-				ref={ref}
-				isFocusVisible={isFocusVisible}
+		<Container>
+			<Wrapper
+				ref={wrapperRef}
+				isOpen={state.isOpen}
+				hasError={false}
+				hasLabel={false}
 			>
-				<Value {...valueProps}>
-					{state.selectedItem != null
-						? state.selectedItem.rendered
-						: t('select.value.default', 'Choisissez une option')}
-				</Value>
-				<StyledIcon />
-			</Button>
+				<HiddenSelect
+					state={state}
+					triggerRef={ref}
+					label={props.label}
+					name={props.name}
+				/>
+				{props.label && (
+					<Label className={props.small ? 'sr-only' : ''} {...labelProps}>
+						{props.label}
+					</Label>
+				)}
+				<Button
+					{...mergeProps(omit(buttonProps, 'id'), focusProps)}
+					ref={ref}
+					isFocusVisible={isFocusVisible}
+				>
+					<Value {...valueProps}>
+						{state.selectedItem != null
+							? state.selectedItem.rendered
+							: t('select.value.default', 'Choisissez une option')}
+					</Value>
+					<StyledIcon />
+				</Button>
+			</Wrapper>
+
 			{state.isOpen && (
 				<Popover isOpen={state.isOpen} onClose={() => state.close()}>
 					<ListBox {...menuProps} state={state} />
 				</Popover>
 			)}
-		</Wrapper>
+		</Container>
 	)
 }
+
+const Container = styled.div`
+	position: relative;
+`
diff --git a/site/source/design-system/global-style.ts b/site/source/design-system/global-style.ts
index 1a46dea7b..52185a858 100644
--- a/site/source/design-system/global-style.ts
+++ b/site/source/design-system/global-style.ts
@@ -127,12 +127,10 @@ html, body, #js, #js > *, [data-overlay-container] {
 *:before,
 *:after {
 	box-sizing: inherit;
-	transition: color 0.15s, background-color 0.15s;
 }
 
 body {
 	margin: 0;
-
 }
 
 
diff --git a/site/source/design-system/root.tsx b/site/source/design-system/root.tsx
index 592652ca6..773445c22 100644
--- a/site/source/design-system/root.tsx
+++ b/site/source/design-system/root.tsx
@@ -37,6 +37,7 @@ type BackgroundProps = {
 }
 
 const BackgroundStyle = styled.div<BackgroundProps>`
+	transition: color 0.15s, background-color 0.15s;
 	${({ $darkMode }) => {
 		if ($darkMode) {
 			return css`
diff --git a/site/source/pages/POCSearchCodeAPE.tsx b/site/source/pages/POCSearchCodeAPE.tsx
index 97df14ff9..e6cc60fa7 100644
--- a/site/source/pages/POCSearchCodeAPE.tsx
+++ b/site/source/pages/POCSearchCodeAPE.tsx
@@ -1,5 +1,5 @@
 import UFuzzy from '@leeoniya/ufuzzy'
-import { useEffect, useRef, useState, Fragment } from 'react'
+import { Fragment, useEffect, useRef, useState } from 'react'
 
 import { TextField } from '@/design-system'
 import { CardContainer } from '@/design-system/card/Card'