From 61f4ebfba3de55a05a967cd018ca273a44e578f5 Mon Sep 17 00:00:00 2001
From: Jalil Arfaoui <jalil@arfaoui.net>
Date: Mon, 9 Dec 2024 23:26:17 +0100
Subject: [PATCH] =?UTF-8?q?refactor(ind=C3=A9pendant):=20utilisation=20de?=
 =?UTF-8?q?=20styled-components=20plut=C3=B4t=20que=20du=20inline?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../cessation-activité/Toggles.tsx            | 38 +++++++++----------
 1 file changed, 19 insertions(+), 19 deletions(-)

diff --git a/site/source/pages/simulateurs/cessation-activité/Toggles.tsx b/site/source/pages/simulateurs/cessation-activité/Toggles.tsx
index e083d7162..3fb9e9b57 100644
--- a/site/source/pages/simulateurs/cessation-activité/Toggles.tsx
+++ b/site/source/pages/simulateurs/cessation-activité/Toggles.tsx
@@ -1,5 +1,6 @@
 import { DottedName } from 'modele-social'
 import { useDispatch } from 'react-redux'
+import { styled } from 'styled-components'
 
 import { DefaultValue } from '@/components/conversation/DefaultValue'
 import { ExplicableRule } from '@/components/conversation/Explicable'
@@ -10,28 +11,27 @@ import { SimpleRuleEvaluation } from '@/domaine/engine/SimpleRuleEvaluation'
 import { ajusteLaSituation } from '@/store/actions/actions'
 import { evaluateQuestion } from '@/utils/publicodes'
 
+const Wrapper = styled.div`
+	flex-shrink: 0;
+	flex-basis: 100%;
+	display: flex;
+	flex-direction: column;
+	justify-content: space-between;
+`
+
+const CessationBlock = styled.div`
+	display: flex;
+	flex-direction: column;
+	align-items: start;
+`
+
 export const CessationActivitéToggles = () => {
 	const dispatch = useDispatch()
 	const engine = useEngine()
 
 	return (
-		<div
-			style={{
-				flexShrink: 0,
-				flexBasis: '100%',
-
-				display: 'flex',
-				flexDirection: 'column',
-				justifyContent: 'space-between',
-			}}
-		>
-			<div
-				style={{
-					display: 'flex',
-					flexDirection: 'column',
-					alignItems: 'start',
-				}}
-			>
+		<Wrapper>
+			<CessationBlock>
 				<H3 id="questionHeader" as="h2">
 					{evaluateQuestion(
 						engine,
@@ -51,7 +51,7 @@ export const CessationActivitéToggles = () => {
 					hideDefaultValue
 				/>
 				<DefaultValue dottedName={'entreprise . date de cessation'} />
-			</div>
+			</CessationBlock>
 
 			<RuleInput
 				inputType="toggle"
@@ -66,6 +66,6 @@ export const CessationActivitéToggles = () => {
 					)
 				}}
 			/>
-		</div>
+		</Wrapper>
 	)
 }