chore(front): fix responsive (#38)

replace spaces with   others minor upgrades
numerique-gouv · Sep 30, 2024 · 346efb4 · 346efb4
1 parent 133b649
commit 346efb4
Show file tree

Hide file tree

Showing 8 changed files with 50 additions and 51 deletions.
diff --git a/src/Pages/Eligibility/Result.tsx b/src/Pages/Eligibility/Result.tsx
@@ -22,7 +22,9 @@ function Result(props: { subtitle: string }) {
               <Lottie options={defaultOptions} height={300} width={300} />
             </div>
             <div className="fr-col-12 fr-col-md-6">
-              <h1 className="fr-h2">Bonne nouvelle, vous êtes éligible !</h1>
+              <h1 className="fr-h2">
+                Bonne nouvelle, vous êtes éligible&nbsp;!
+              </h1>
               <p>{props.subtitle}</p>
               <a className="fr-raw-link" href="/services">
                 <Button>Explorer l'annuaire des sites</Button>

diff --git a/src/Pages/Eligibility/WhoIsYourBoss.tsx b/src/Pages/Eligibility/WhoIsYourBoss.tsx
@@ -20,7 +20,7 @@ export function WhoIsYourBoss() {
               <img src={eligibility} alt="" />
             </div>
             <div className="fr-col-12 fr-col-md-6">
-              <h1 className="fr-h2">Testez votre éligibilité !</h1>
+              <h1 className="fr-h2">Testez votre éligibilit&nbsp;!</h1>
               <RadioButtons
                 legend="Qui est votre employeur ?"
                 name="radio"

diff --git a/src/Pages/HomeLayout.tsx b/src/Pages/HomeLayout.tsx
@@ -24,7 +24,7 @@ function HomeLayout() {
               <a className="fr-raw-link" href="/eligibilite">
                 <Button>
                   <i className={fr.cx("ri-user-star-line") + " fr-pr-2w"} />
-                  Êtes-vous éligible ?
+                  Êtes-vous éligible&nbsp;?
                 </Button>
               </a>
             </div>
@@ -34,51 +34,47 @@ function HomeLayout() {
           </div>
         </div>
       </div>
-      <div className="fr-container">
-        <HowDoesItWork tiles={tilesData}></HowDoesItWork>
+      <div className="fr-container fr-py-4w fr-py-md-8w">
+        <HowDoesItWork tiles={tilesData} />
         <div
-          className="fr-container--fluid"
+          className="fr-grid-row fr-grid-row--gutters fr-grid-row--middle fr-mt-2w"
           id="agentconnect-devient-proconnect-container"
         >
-          <div className="fr-container fr-py-4w fr-py-md-8w">
-            <div className="fr-grid-row fr-grid-row--gutters">
-              <div className="fr-col-12 fr-col-md-7 fr-pt-0">
-                <h2 className="fr-h2">AgentConnect devient ProConnect !</h2>
-                <h3 className="fr-h3">Pourquoi ce changement ?</h3>
-                <p>
-                  Les services de connexion pour les pros évoluent !
-                  MonComptePro, InclusionConnect et AgentConnect fusionnent pour
-                  devenir ProConnect.
-                </p>
-                <h3 className="fr-h3">Qu'est-ce que ça change pour vous ?</h3>
-                <ul>
-                  <li>Vous continuez à vous connecter de la même manière.</li>
-                  <li>
-                    Vous pouvez désormais accéder à encore plus de sites et
-                    d'outils de l'administration !
-                  </li>
-                </ul>
-                <p>
-                  <a href="/services" className="blue-france fr-mb-5w">
-                    Découvrez l’annuaire des services&nbsp;
-                    <span
-                      className="fr-icon-arrow-right-line"
-                      aria-hidden="true"
-                    ></span>
-                  </a>
-                </p>
-                <h3 className="fr-h3">
-                  Comment repérer le bouton ProConnect ?
-                </h3>
-                <p>
-                  Facile ! Vous verrez la Marianne avec la mention "pro" en
-                  jaune.
-                </p>
-              </div>
-              <div className="fr-col-4 fr-p-4w centered-content">
-                <img src={news} alt="" />
-              </div>
-            </div>
+          <div className="fr-col-12 fr-col-md-6 fr-pt-0">
+            <h2 className="fr-h3">AgentConnect devient ProConnect&nbsp;!</h2>
+            <h3 className="fr-h4">Pourquoi ce changement&nbsp;?</h3>
+            <p>
+              Les services de connexion pour les pros évoluent&nbsp;!
+              MonComptePro, InclusionConnect et AgentConnect fusionnent pour
+              devenir ProConnect.
+            </p>
+            <h3 className="fr-h4">Qu'est-ce que ça change pour vous&nbsp;?</h3>
+            <ul>
+              <li>Vous continuez à vous connecter de la même manière.</li>
+              <li>
+                Vous pouvez désormais accéder à encore plus de sites et d'outils
+                de l'administration&nbsp;!
+              </li>
+            </ul>
+            <p>
+              <a href="/services" className="blue-france fr-mb-5w">
+                Découvrez l’annuaire des services&nbsp;
+                <span
+                  className="fr-icon-arrow-right-line"
+                  aria-hidden="true"
+                ></span>
+              </a>
+            </p>
+            <h3 className="fr-h4">
+              Comment repérer le bouton ProConnect&nbsp;?
+            </h3>
+            <p>
+              Facile&nbsp;! Vous verrez la Marianne avec la mention "pro" en
+              jaune.
+            </p>
+          </div>
+          <div className="fr-col-6 fr-hidden fr-unhidden-md centered-content">
+            <img src={news} alt="" />
           </div>
         </div>
       </div>

diff --git a/src/Pages/Services/Services.tsx b/src/Pages/Services/Services.tsx
@@ -18,7 +18,9 @@ function Services() {
   return (
     <div className="fr-container">
       <h1 className="fr-h3 fr-mt-2w">Annuaire des services</h1>
-      <p className="fr-h6">Connectez-vous à tous ces sites avec ProConnect !</p>
+      <p className="fr-h6">
+        Connectez-vous à tous ces sites avec ProConnect&nbsp;!
+      </p>
 
       <ToggleSwitch
         inputTitle="the-title"

diff --git a/src/components/Header/NameChangeNotice.tsx b/src/components/Header/NameChangeNotice.tsx
@@ -7,7 +7,7 @@ const LOCAL_STORAGE_SHOULD_HIDE_NAME_CHANGE_KEY =
 function NoticeTitle() {
   return (
     <span>
-      AgentConnect devient ProConnect !{" "}
+      AgentConnect devient ProConnect&nbsp;!&nbsp;
       <a href="#agentconnect-devient-proconnect-container">En savoir plus</a>
     </span>
   );

diff --git a/src/components/HowDoesItWork/HowDoesItWork.tsx b/src/components/HowDoesItWork/HowDoesItWork.tsx
@@ -3,8 +3,8 @@ import { tyleDataType } from "../../data";
 
 function HowDoesItWork({ tiles }: { tiles: tyleDataType[] }) {
   return (
-    <div className="fr-mb-4w">
-      <h2 className="fr-h3 fr-mt-2w">Comment ça marche ?</h2>
+    <div className="fr-pb-4w fr-pb-md-8w">
+      <h2 className="fr-h3 fr-mt-2w">Comment ça marche&nbsp;?</h2>
       <div className="grid-container">
         <div className="grid">
           {tiles.map(({ illu, content }, index) => (

diff --git a/src/components/Tiles/tiles.css b/src/components/Tiles/tiles.css
@@ -2,7 +2,6 @@
 .grid-container {
   display: flex;
   justify-content: center; /* Centrer la grille horizontalement */
-  padding-bottom: 2rem; /* Ajouter du padding autour de la grille */
 }
 
 /* Grille des tuiles */

diff --git a/src/components/WantToIntegrateProConnect/WantToIntegrateProConnect.tsx b/src/components/WantToIntegrateProConnect/WantToIntegrateProConnect.tsx
@@ -7,7 +7,7 @@ function WantToIntegrateProConnect() {
         <div className="fr-grid-row fr-grid-row--center fr-grid-row--middle">
           <div>
             <p className="centered-content delete-margin-bottom bold">
-              Vous voulez intégrer ProConnect sur votre site ?
+              Vous voulez intégrer ProConnect sur votre site&nbsp;?
             </p>
           </div>
         </div>