From de4ba5c8feef0d17e6bdd12f28e124cb2a591c3b Mon Sep 17 00:00:00 2001 From: rebeccadumazert Date: Tue, 13 Aug 2024 10:00:39 +0200 Subject: [PATCH 1/8] feat(front): update HomeLayout component --- src/Pages/AgentPublic.tsx | 49 +++++++++++++------ src/Pages/HomeLayout.tsx | 4 +- src/Pages/PrivateProfessional.tsx | 2 +- src/Pages/layout.css | 6 +++ src/assets/AgentConnectButton.svg | 12 ----- src/assets/quelService.svg | 35 +++++++++++++ src/components/Buttons/ButtonRadius.tsx | 3 +- .../HowDoesItWork/HowDoesItWork.tsx | 19 +++++++ .../PrivateOrPublic/PrivateOrPublic.tsx | 41 ---------------- 9 files changed, 101 insertions(+), 70 deletions(-) delete mode 100644 src/assets/AgentConnectButton.svg create mode 100644 src/assets/quelService.svg create mode 100644 src/components/HowDoesItWork/HowDoesItWork.tsx delete mode 100644 src/components/PrivateOrPublic/PrivateOrPublic.tsx diff --git a/src/Pages/AgentPublic.tsx b/src/Pages/AgentPublic.tsx index 2a1f3fc..d9e2309 100644 --- a/src/Pages/AgentPublic.tsx +++ b/src/Pages/AgentPublic.tsx @@ -1,27 +1,48 @@ -import PrivateOrPublic from '../components/PrivateOrPublic/PrivateOrPublic'; import { tilesData, stepsInfosPublic } from '../Datas'; -import AgentConnectButton from '../assets/AgentConnectButton.svg'; import './layout.css'; +import HowDoesItWork from '../components/HowDoesItWork/HowDoesItWork'; +import ButtonRadius from '../components/Buttons/ButtonRadius'; +import whatService from '../assets/quelService.svg'; function AgentPublic() { return (
- -
- -
-
-

- Rejoignez 647589 membres de la
- Fonction Publique en
- utilisant AgentConnect ! + +

); diff --git a/src/Pages/HomeLayout.tsx b/src/Pages/HomeLayout.tsx index 1ac5d83..2fbad04 100644 --- a/src/Pages/HomeLayout.tsx +++ b/src/Pages/HomeLayout.tsx @@ -5,6 +5,7 @@ import AgentPublic from './AgentPublic'; // import PrivateProfessional from './PrivateProfessional'; import { Element, scroller } from 'react-scroll'; import './layout.css'; +import { fr } from '@codegouvfr/react-dsfr'; // type ComponentType = 'publicMember' | 'privateProfessional'; @@ -37,7 +38,8 @@ function HomeLayout() { // isSelected={selectedComponent === 'publicMember'} personalized="fr-mr-2w fr-mb-2w" > - Découvrir + + Testez votre éligibilité {/* handleButtonClick('privateProfessional')} diff --git a/src/Pages/PrivateProfessional.tsx b/src/Pages/PrivateProfessional.tsx index 9034053..e50b02d 100644 --- a/src/Pages/PrivateProfessional.tsx +++ b/src/Pages/PrivateProfessional.tsx @@ -1,4 +1,4 @@ -import PrivateOrPublic from '../components/PrivateOrPublic/PrivateOrPublic'; +import PrivateOrPublic from '../components/HowDoesItWork/HowDoesItWork'; import { tilesData, stepsInfosPrivate } from '../Datas'; function PrivateProfessional() { diff --git a/src/Pages/layout.css b/src/Pages/layout.css index 22207b9..068f812 100644 --- a/src/Pages/layout.css +++ b/src/Pages/layout.css @@ -47,3 +47,9 @@ body { background-color: var(--background-alt-blue-france); border-radius: 11px; } + +.display-column { + display: 'flex'; + flex-direction: 'column'; + align-items: 'center'; +} diff --git a/src/assets/AgentConnectButton.svg b/src/assets/AgentConnectButton.svg deleted file mode 100644 index 49348a4..0000000 --- a/src/assets/AgentConnectButton.svg +++ /dev/null @@ -1,12 +0,0 @@ - - - - - - - - - - - - diff --git a/src/assets/quelService.svg b/src/assets/quelService.svg new file mode 100644 index 0000000..06111c7 --- /dev/null +++ b/src/assets/quelService.svg @@ -0,0 +1,35 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/components/Buttons/ButtonRadius.tsx b/src/components/Buttons/ButtonRadius.tsx index 45c4861..f1b6626 100644 --- a/src/components/Buttons/ButtonRadius.tsx +++ b/src/components/Buttons/ButtonRadius.tsx @@ -16,9 +16,10 @@ const ButtonRadius: React.FC = ({ }) => { return ( {children} diff --git a/src/components/HowDoesItWork/HowDoesItWork.tsx b/src/components/HowDoesItWork/HowDoesItWork.tsx new file mode 100644 index 0000000..c1ff3f6 --- /dev/null +++ b/src/components/HowDoesItWork/HowDoesItWork.tsx @@ -0,0 +1,19 @@ +import React from 'react'; +import Tile from '../Tiles/Tile'; + +function HowDoesItWork({ tiles }: any) { + return ( +
+

Comment ça marche ?

+
+
+ {tiles.map(({ illu, content }: any, index: React.Key | null | undefined) => ( + + ))} +
+
+
+ ); +} + +export default HowDoesItWork; diff --git a/src/components/PrivateOrPublic/PrivateOrPublic.tsx b/src/components/PrivateOrPublic/PrivateOrPublic.tsx deleted file mode 100644 index dea80be..0000000 --- a/src/components/PrivateOrPublic/PrivateOrPublic.tsx +++ /dev/null @@ -1,41 +0,0 @@ -import React from 'react'; -import Tile from '../Tiles/Tile'; - -function PrivateOrPublic({ tiles, stepsInfos }: any) { - return ( -
-

Comment ça marche ?

-
-
- {tiles.map(({ illu, content }: any, index: React.Key | null | undefined) => ( - - ))} -
-
- {stepsInfos.map( - ( - { question, response, link, descriptionLink }: any, - index: React.Key | null | undefined, - ) => ( -
-

{question}

-

{response}

-
- {link ? ( - - {descriptionLink}  - - - ) : null} -
-
- ), - )} -
- ); -} - -export default PrivateOrPublic; From 0e3f9b407fce9e41cd400d1061ba5f703b6b7101 Mon Sep 17 00:00:00 2001 From: rebeccadumazert Date: Tue, 13 Aug 2024 10:04:37 +0200 Subject: [PATCH 2/8] chore(deps): update stylesheet link after npm install --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index fabf2af..b3c9489 100644 --- a/index.html +++ b/index.html @@ -14,7 +14,7 @@ crossorigin="use-credentials" /> - +