fix: css

SocialGouv · Nov 25, 2024 · 3edbebf · 3edbebf
1 parent 3fff215
commit 3edbebf
Show file tree

Hide file tree

Showing 6 changed files with 69 additions and 74 deletions.
diff --git a/packages/app/src/app/(default)/index-egapro/declaration/validation-transmission/page.tsx b/packages/app/src/app/(default)/index-egapro/declaration/validation-transmission/page.tsx
@@ -17,8 +17,7 @@ const ResultatGlobalPage = () => {
         dispositions de l’article D.1142-5 du code du travail.
         <br />
         <br />
-        Pour terminer la procédure, cliquez sur “Valider et transmettre les résultats” ci-dessous. Vous recevrez un
-        accusé de réception.
+        Pour terminer la procédure, cliquez sur “Valider et transmettre les résultats” ci-dessous.
       </p>
 
       <Recap />

diff --git a/.../src/app/(default)/index-egapro/simulateur/(funnel)/indicateur2et3/Indicateur2et3Note.tsx b/.../src/app/(default)/index-egapro/simulateur/(funnel)/indicateur2et3/Indicateur2et3Note.tsx
@@ -30,7 +30,7 @@ export const Indicateur2et3Note = ({ computed, isValid, simple, noBorder, detail
     if (computed.favorablePopulation === "equality" || computed.result === 0)
       advantageText += "Les femmes et les hommes sont à parité";
     else {
-      advantageText += "L'écart d'augmentations ";
+      advantageText += "L'écart de taux d'augmentations ";
       advantageText += `est en faveur des ${computed.favorablePopulation === "women" ? "femmes" : "hommes"}`;
     }
   }

diff --git a/packages/app/src/app/(default)/representation-equilibree/(funnel)/validation/page.tsx b/packages/app/src/app/(default)/representation-equilibree/(funnel)/validation/page.tsx
@@ -28,10 +28,7 @@ const Validation = () => {
         </Link>
         .
       </p>
-      <p>
-        Pour terminer la procédure, cliquez sur “Valider et transmettre les résultats” ci-dessous. Vous recevrez un
-        accusé de réception.
-      </p>
+      <p>Pour terminer la procédure, cliquez sur “Valider et transmettre les résultats” ci-dessous.</p>
       <Heading as="h2" mt="6w" text="Récapitulatif des écarts de représentation" />
 
       <ValidationRecapRepEq />

diff --git a/packages/app/src/app/global.css b/packages/app/src/app/global.css
@@ -163,3 +163,61 @@
 }
 
 /* === */
+.fr-recap-card {
+    border: 1px solid var(--border-default-grey);
+    padding: 0 1.5rem;
+}
+
+.fr-recap-card:has(+ .fr-recap-card) {
+    margin-bottom: 1rem;
+}
+
+.fr-recap-card > hr {
+    background-size: 100% 2px;
+    padding: 0 0 1rem;
+}
+
+.fr-recap-card > hr:has(+ .fr-recap-card--content--stat) {
+    padding: 0 0 2px;
+}
+
+.fr-recap-card--title {
+    display: flex;
+}
+
+.fr-recap-card--title > *:first-child {
+    margin: 1rem 0;
+    flex: 1;
+}
+
+.fr-recap-card--content:not(.fr-recap-card--content--stat) {
+    margin-bottom: 1rem;
+}
+
+.fr-recap-card--content:has(+ .fr-recap-card--content) {
+    border-bottom: 1px solid var(--background-alt-grey);
+}
+
+.fr-recap-card--content--stat {
+    display: flex;
+    padding: 1rem;
+}
+
+.fr-recap-card--content--stat > *:first-child {
+    font-size: 1.5rem;
+    margin: .5rem .75rem .5rem 0;
+    align-self: center;
+}
+
+.fr-recap-card--content--stat > *:last-child {
+    margin: auto 0;
+}
+
+.fr-recap-card--edit-link {
+    align-self: center;
+}
+
+.fr-hr--vertical {
+    padding: 0 .75rem 0 0;
+    background-size: 1px 100px;
+}
diff --git a/packages/app/src/design-system/base/RecapCard.module.css b/packages/app/src/design-system/base/RecapCard.module.css
diff --git a/packages/app/src/design-system/base/RecapCard.tsx b/packages/app/src/design-system/base/RecapCard.tsx
@@ -3,7 +3,6 @@ import Button, { type ButtonProps } from "@codegouvfr/react-dsfr/Button";
 import { cx } from "@codegouvfr/react-dsfr/tools/cx";
 import { type ReactNode } from "react";
 
-import styles from "./RecapCard.module.css";
 import { Text } from "./Typography";
 
 type RecapCardProps = {
@@ -34,12 +33,12 @@ export namespace RecapCardProps {
 }
 
 export const RecapCard = ({ content: textContent, title, editLink, sideButtonProps, stats }: RecapCardProps) => (
-  <div className={styles["fr-recap-card"]}>
-    <div className={styles["fr-recap-card__title"]}>
+  <div className="fr-recap-card">
+    <div className={"fr-recap-card--title"}>
       <Text text={title} variant={["md", "bold"]} />
       {editLink && (
         <Button
-          className={styles["fr-recap-card__edit-link"]}
+          className={"fr-recap-card--edit-link"}
           iconId="fr-icon-edit-line"
           priority="tertiary no outline"
           title="Modifier"
@@ -49,18 +48,18 @@ export const RecapCard = ({ content: textContent, title, editLink, sideButtonPro
         />
       )}
       {sideButtonProps && (
-        <Button {...sideButtonProps} className={cx(styles["fr-recap-card__edit-link"], sideButtonProps.className)} />
+        <Button {...sideButtonProps} className={cx("fr-recap-card--edit-link", sideButtonProps.className)} />
       )}
     </div>
     <hr />
-    {textContent && <div className={cx(styles["fr-recap-card__content"], fr.cx("fr-text--sm"))}>{textContent}</div>}
+    {textContent && <div className={cx("fr-recap-card--content", fr.cx("fr-text--sm"))}>{textContent}</div>}
     {stats?.map(({ text, value }, idx) => (
       <div
-        key={`fr-recap-card__content--stat-${idx}`}
-        className={cx(styles["fr-recap-card__content"], styles["fr-recap-card__content--stat"])}
+        key={`fr-recap-card--content--stat-${idx}`}
+        className={cx("fr-recap-card--content", "fr-recap-card--content--stat")}
       >
         <div className={fr.cx("fr-text--bold")}>{value}</div>
-        <hr className={styles["fr-hr--vertical"]} />
+        <hr className={"fr-hr--vertical"} />
         <div>{text}</div>
       </div>
     ))}