From 1fce06fd9f6cdd40fe2d59d54573336f34f5dee2 Mon Sep 17 00:00:00 2001
From: Alice Dahan <lilice.dhn@gmail.com>
Date: Fri, 29 Nov 2024 09:22:20 +0100
Subject: [PATCH] style: stylise les options du simulateur RGCP

---
 .../components/conversation/NumberInput.tsx   | 28 +++++----
 .../RéductionGénéraleMoisParMois.tsx          | 10 ++--
 .../RéductionGénéraleMoisParMoisRow.tsx       | 58 ++++++++++++++-----
 3 files changed, 63 insertions(+), 33 deletions(-)

diff --git a/site/source/components/conversation/NumberInput.tsx b/site/source/components/conversation/NumberInput.tsx
index 2ecb66408..9db44806b 100644
--- a/site/source/components/conversation/NumberInput.tsx
+++ b/site/source/components/conversation/NumberInput.tsx
@@ -21,9 +21,11 @@ export default function NumberInput({
 	unit,
 	formatOptions,
 	displayedUnit,
+	displaySuggestions = true,
 	...fieldProps
 }: InputProps & {
 	unit?: Unit
+	displaySuggestions?: boolean
 }) {
 	const unité = serializeUnit(unit)
 	const [currentValue, setCurrentValue] = useState<number | undefined>(
@@ -91,18 +93,20 @@ export default function NumberInput({
 				}
 				value={currentValue}
 			/>
-			<InputSuggestions
-				className="print-hidden"
-				suggestions={suggestions}
-				onFirstClick={(node: ASTNode) => {
-					const evaluatedNode = engine.evaluate(node)
-					if (serializeUnit(evaluatedNode.unit) === serializeUnit(unit)) {
-						setCurrentValue(evaluatedNode.nodeValue as number)
-					}
-					onChange(node)
-				}}
-				onSecondClick={() => onSubmit?.('suggestion')}
-			/>
+			{displaySuggestions && (
+				<InputSuggestions
+					className="print-hidden"
+					suggestions={suggestions}
+					onFirstClick={(node: ASTNode) => {
+						const evaluatedNode = engine.evaluate(node)
+						if (serializeUnit(evaluatedNode.unit) === serializeUnit(unit)) {
+							setCurrentValue(evaluatedNode.nodeValue as number)
+						}
+						onChange(node)
+					}}
+					onSecondClick={() => onSubmit?.('suggestion')}
+				/>
+			)}
 		</StyledNumberInput>
 	)
 }
diff --git a/site/source/pages/simulateurs/reduction-generale/RéductionGénéraleMoisParMois.tsx b/site/source/pages/simulateurs/reduction-generale/RéductionGénéraleMoisParMois.tsx
index 0bb393615..ef0a89be6 100644
--- a/site/source/pages/simulateurs/reduction-generale/RéductionGénéraleMoisParMois.tsx
+++ b/site/source/pages/simulateurs/reduction-generale/RéductionGénéraleMoisParMois.tsx
@@ -94,6 +94,7 @@ export default function RéductionGénéraleMoisParMois({
 }
 
 const StyledTable = styled.table`
+	border-collapse: collapse;
 	text-align: left;
 	width: 100%;
 	color: ${({ theme }) => theme.colors.bases.primary[100]};
@@ -102,12 +103,9 @@ const StyledTable = styled.table`
 		text-align: left;
 		margin: ${({ theme }) => `${theme.spacings.sm} 0 `};
 	}
-	th {
-		padding: ${({ theme }) => `${theme.spacings.xs} 0 ${theme.spacings.lg} 0`};
-	}
-	tbody tr td:not(:first-of-type) {
-		padding: ${({ theme }) =>
-			`${theme.spacings.xs} ${theme.spacings.xxs} ${theme.spacings.lg} ${theme.spacings.xxs}`};
+	th,
+	td {
+		padding: ${({ theme }) => theme.spacings.xs};
 	}
 	tbody tr th {
 		text-transform: capitalize;
diff --git a/site/source/pages/simulateurs/reduction-generale/components/RéductionGénéraleMoisParMoisRow.tsx b/site/source/pages/simulateurs/reduction-generale/components/RéductionGénéraleMoisParMoisRow.tsx
index 6ba8b1e17..c8db3d391 100644
--- a/site/source/pages/simulateurs/reduction-generale/components/RéductionGénéraleMoisParMoisRow.tsx
+++ b/site/source/pages/simulateurs/reduction-generale/components/RéductionGénéraleMoisParMoisRow.tsx
@@ -8,6 +8,11 @@ import { Appear } from '@/components/ui/animate'
 import { useEngine } from '@/components/utils/EngineContext'
 import { Message, NumberField } from '@/design-system'
 import { Button, HelpButtonWithPopover } from '@/design-system/buttons'
+import {
+	StyledInput,
+	StyledInputContainer,
+	StyledSuffix,
+} from '@/design-system/field/TextField'
 import { FlexCenter } from '@/design-system/global-style'
 import { RotatingChevronIcon } from '@/design-system/icons'
 import { Body, SmallBody } from '@/design-system/typography/paragraphs'
@@ -102,6 +107,7 @@ export default function RéductionGénéraleMoisParMoisRow({
 						formatOptions={{
 							maximumFractionDigits: 2,
 						}}
+						displaySuggestions={false}
 					/>
 				</td>
 				<td>
@@ -147,7 +153,7 @@ export default function RéductionGénéraleMoisParMoisRow({
 				</td>
 			</tr>
 			{isOptionVisible && (
-				<tr>
+				<StyledTableRow>
 					<td />
 					<td colSpan={4}>
 						<Appear id={`options-${monthName}`}>
@@ -164,22 +170,24 @@ export default function RéductionGénéraleMoisParMoisRow({
 									</HelpButtonWithPopover>
 								</FlexDiv>
 
-								<NumberField
-									small={true}
-									value={data.options.heuresSupplémentaires}
-									onChange={(value?: number) =>
-										onOptionsChange(index, {
-											heuresSupplémentaires: value,
-											heuresComplémentaires: 0,
-										})
-									}
-									aria-labelledby={`heures-${additionalHours}-label`}
-									displayedUnit="heures"
-								/>
+								<NumberFieldContainer>
+									<NumberField
+										small={true}
+										value={data.options.heuresSupplémentaires}
+										onChange={(value?: number) =>
+											onOptionsChange(index, {
+												heuresSupplémentaires: value,
+												heuresComplémentaires: 0,
+											})
+										}
+										aria-labelledby={`heures-${additionalHours}-label`}
+										displayedUnit="heures"
+									/>
+								</NumberFieldContainer>
 							</OptionContainer>
 						</Appear>
 					</td>
-				</tr>
+				</StyledTableRow>
 			)}
 		</>
 	)
@@ -200,6 +208,13 @@ const HeuresSupplémentairesPopoverContent = () => (
 	</Trans>
 )
 
+const StyledTableRow = styled.tr`
+	background-color: ${({ theme }) => theme.colors.bases.primary[200]};
+	td {
+		padding-top: ${({ theme }) => theme.spacings.sm};
+		padding-bottom: ${({ theme }) => theme.spacings.sm};
+	}
+`
 const FlexDiv = styled.div`
 	${FlexCenter}
 	justify-content: end;
@@ -207,8 +222,21 @@ const FlexDiv = styled.div`
 const OptionContainer = styled.div`
 	${FlexCenter}
 	gap: ${({ theme }) => theme.spacings.lg};
-	margin-top: -${({ theme }) => theme.spacings.md};
+`
+const NumberFieldContainer = styled.div`
+	max-width: 120px;
+	${StyledInputContainer} {
+		border-color: ${({ theme }) => theme.colors.bases.primary[800]};
+		background-color: 'rgba(255, 255, 255, 10%)';
+		&:focus-within {
+			outline-color: ${({ theme }) => theme.colors.bases.primary[700]};
+		}
+		${StyledInput}, ${StyledSuffix} {
+			color: ${({ theme }) => theme.colors.bases.primary[800]}!important;
+		}
+	}
 `
 const StyledSmallBody = styled(SmallBody)`
 	margin: 0;
+	color: ${({ theme }) => theme.colors.bases.primary[800]};
 `