Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

chore(front): fix responsive #38

Merged
merged 1 commit into from
Sep 30, 2024
Merged

chore(front): fix responsive #38

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion src/Pages/Eligibility/Result.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion src/Pages/Eligibility/WhoIsYourBoss.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
82 changes: 39 additions & 43 deletions src/Pages/HomeLayout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
Expand Down
4 changes: 3 additions & 1 deletion src/Pages/Services/Services.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
2 changes: 1 addition & 1 deletion src/components/Header/NameChangeNotice.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
);
Expand Down
4 changes: 2 additions & 2 deletions src/components/HowDoesItWork/HowDoesItWork.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) => (
Expand Down
1 change: 0 additions & 1 deletion src/components/Tiles/tiles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 */
Expand Down
2 changes: 1 addition & 1 deletion src/components/WantToIntegrateProConnect/WantToIntegrateProConnect.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
Loading