From 62c65a34a8de714dcab8ebc14bc61c3bc1defc2a Mon Sep 17 00:00:00 2001
From: Maxime Quandalle <maxime@quandalle.com>
Date: Wed, 15 Sep 2021 12:09:50 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Pr=C3=A9sentation=20des=20instit?=
 =?UTF-8?q?utions=20sous=20forme=20de=20tableau?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../InstitutionsPartenaires.tsx               | 109 +++++++++++++-----
 1 file changed, 80 insertions(+), 29 deletions(-)

diff --git a/mon-entreprise/source/components/simulationExplanation/InstitutionsPartenaires.tsx b/mon-entreprise/source/components/simulationExplanation/InstitutionsPartenaires.tsx
index 7e0ca4cc3..1533e15fd 100644
--- a/mon-entreprise/source/components/simulationExplanation/InstitutionsPartenaires.tsx
+++ b/mon-entreprise/source/components/simulationExplanation/InstitutionsPartenaires.tsx
@@ -26,7 +26,7 @@ export default function InstitutionsPartenaires() {
 						Vos institutions partenaires
 					</Trans>
 				</h2>
-				<div className="ui__ full-width box-container">
+				<InstitutionsTable className="ui__ card">
 					<Condition expression="entreprise . activité . libérale réglementée">
 						<CotisationsUrssaf rule="dirigeant . indépendant . PL . cotisations Urssaf" />
 						<CaisseRetraite />
@@ -36,13 +36,13 @@ export default function InstitutionsPartenaires() {
 					</WhenNotApplicable>
 					<ImpôtsDGFIP />
 					<Condition expression="dirigeant . indépendant . PL . PAMC . participation CPAM > 0">
-						<div className="ui__  card box">
-							<a
+						<InstitutionLine>
+							<InstitutionLogo
 								target="_blank"
 								href="https://www.ameli.fr/assure/droits-demarches/salaries-travailleurs-independants-et-personnes-sans-emploi/emploi-independant-non-salarie/praticien-auxiliaire-medical"
 							>
-								<LogoImg src={assuranceMaladieSrc} title="Logo CPAM" />
-							</a>
+								<img src={assuranceMaladieSrc} title="Logo CPAM" />
+							</InstitutionLogo>
 							<p className="ui__ notice">
 								<Trans i18nKey="simulateurs.explanation.institutions.cpam">
 									En tant que professionnel de santé conventionné, vous
@@ -58,9 +58,9 @@ export default function InstitutionsPartenaires() {
 									expression="dirigeant . indépendant . PL . PAMC . participation CPAM"
 								/>
 							</p>
-						</div>
+						</InstitutionLine>
 					</Condition>
-				</div>
+				</InstitutionsTable>
 				<Condition expression="dirigeant . indépendant . cotisations et contributions . exonérations . ACRE > 0">
 					<p className="ui__ notice">
 						<Trans i18nKey="simulateurs.explanation.institutions.notice acre">
@@ -77,19 +77,24 @@ export default function InstitutionsPartenaires() {
 export function CotisationsUrssaf({ rule }: { rule: DottedName }) {
 	const unit = useSelector(targetUnitSelector)
 	return (
-		<div className="ui__  card box">
-			<a target="_blank" href="https://www.urssaf.fr/portail/home.html">
-				<LogoImg src={urssafSrc} title="logo Urssaf" />
-			</a>
+		<InstitutionLine>
+			<InstitutionLogo
+				target="_blank"
+				href="https://www.urssaf.fr/portail/home.html"
+			>
+				<img src={urssafSrc} title="logo Urssaf" />
+			</InstitutionLogo>
 			<p className="ui__ notice">
-				Les cotisations recouvrées par l'Urssaf, qui servent au financement de
-				la sécurité sociale (assurance maladie, allocations familiales,
-				dépendance)
+				<Trans i18nKey="simulateurs.explanation.institutions.urssaf">
+					Les cotisations recouvrées par l'Urssaf, qui servent au financement de
+					la sécurité sociale (assurance maladie, allocations familiales,
+					dépendance).
+				</Trans>
 			</p>
 			<p className="ui__ lead">
 				<Value unit={unit} displayedUnit="€" expression={rule} />
 			</p>
-		</div>
+		</InstitutionLine>
 	)
 }
 
@@ -97,10 +102,10 @@ export function ImpôtsDGFIP() {
 	const unit = useSelector(targetUnitSelector)
 	return (
 		<Condition expression="impôt > 0">
-			<div className="ui__  card box">
-				<a target="_blank" href="https://www.impots.gouv.fr">
-					<LogoImg src={dgfipSrc} title="logo DGFiP" />
-				</a>
+			<InstitutionLine>
+				<InstitutionLogo target="_blank" href="https://www.impots.gouv.fr">
+					<img src={dgfipSrc} title="logo DGFiP" />
+				</InstitutionLogo>
 				<p className="ui__ notice">
 					<Trans i18nKey="simulateurs.explanation.institutions.dgfip">
 						La direction générale des finances publiques (DGFiP) est l'organisme
@@ -114,7 +119,7 @@ export function ImpôtsDGFIP() {
 				<p className="ui__ lead">
 					<Value unit={unit} displayedUnit="€" expression="impôt . montant" />
 				</p>
-			</div>
+			</InstitutionLine>
 		</Condition>
 	)
 }
@@ -139,13 +144,13 @@ function CaisseRetraite() {
 				const { description, références } = engine.getRule(dottedName).rawNode
 				return (
 					<Condition expression={dottedName} key={caisse}>
-						<div className="ui__  card box">
-							<a
+						<InstitutionLine>
+							<InstitutionLogo
 								target="_blank"
 								href={références && Object.values(références)[0]}
 							>
-								<LogoImg src={logosSrc[caisse]} title={`logo ${caisse}`} />
-							</a>
+								<img src={logosSrc[caisse]} title={`logo ${caisse}`} />
+							</InstitutionLogo>
 							<p className="ui__ notice">
 								{description}{' '}
 								<Trans i18nKey="simulateurs.explanation.CNAPL">
@@ -161,7 +166,7 @@ function CaisseRetraite() {
 									expression="dirigeant . indépendant . PL . cotisations caisse de retraite"
 								/>
 							</p>
-						</div>
+						</InstitutionLine>
 					</Condition>
 				)
 			})}
@@ -169,8 +174,54 @@ function CaisseRetraite() {
 	)
 }
 
-const LogoImg = styled.img`
-	padding: 1rem;
-	height: 5rem;
-	max-width: 100%;
+const InstitutionsTable = styled.div`
+	padding-left: 0;
+	padding-right: 0;
+`
+
+const InstitutionLogo = styled.a`
+	img {
+		max-width: 100%;
+	}
+`
+
+const InstitutionLine = styled.div`
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	padding: 1rem;
+	flex-wrap: wrap;
+
+	&:not(:first-child) {
+		border-top: 1px solid var(--lighterColor);
+	}
+
+	> ${InstitutionLogo} {
+		display: block;
+		width: 13ch;
+		text-align: center;
+	}
+
+	> .ui__.notice {
+		flex: 1;
+		padding: 0 4rem 0 2rem;
+		margin: 0;
+	}
+
+	> .ui__.lead {
+		font-weight: bold;
+		text-align: right;
+	}
+
+	@media (max-width: 680px) {
+		> .ui__.lead {
+			flex-grow: 9;
+		}
+
+		> .ui__.notice {
+			order: 3;
+			padding: 0;
+			min-width: 80vw;
+		}
+	}
 `