diff --git a/web/common/AlertEmailDelay.js b/web/common/AlertEmailDelay.js index a221584c5..24e8a8734 100644 --- a/web/common/AlertEmailDelay.js +++ b/web/common/AlertEmailDelay.js @@ -7,7 +7,7 @@ const AlertEmailDelay = () => { Il est possible que : diff --git a/web/common/ButtonGoHome.js b/web/common/ButtonGoHome.js index 2b24a91b6..7f34ee864 100644 --- a/web/common/ButtonGoHome.js +++ b/web/common/ButtonGoHome.js @@ -10,6 +10,7 @@ const ButtonGoHome = () => { onClick={() => { history.push("/home"); }} + style={{ margin: "auto" }} > Aller dans mon espace diff --git a/web/landing/components/WebinarList.js b/web/landing/components/WebinarList.js index 72a5c7993..ccaab3518 100644 --- a/web/landing/components/WebinarList.js +++ b/web/landing/components/WebinarList.js @@ -1,8 +1,6 @@ import React from "react"; import ListItem from "@mui/material/ListItem"; import ButtonBase from "@mui/material/ButtonBase"; -import Card from "@mui/material/Card"; -import Grid from "@mui/material/Grid"; import Typography from "@mui/material/Typography"; import { addZero, @@ -16,30 +14,30 @@ import { Button } from "@codegouvfr/react-dsfr/Button"; import { makeStyles } from "@mui/styles"; import { useWebinars } from "../useWebinars"; +import Box from "@mui/material/Box"; +import Stack from "@mui/material/Stack"; +import { fr } from "@codegouvfr/react-dsfr"; const useStyles = makeStyles(theme => ({ webinarCard: { width: "100%", - paddingBottom: theme.spacing(1), - paddingTop: theme.spacing(1), - paddingLeft: theme.spacing(2), - paddingRight: theme.spacing(2), - backgroundColor: "inherit" + padding: theme.spacing(2), + backgroundColor: "inherit", + border: "1px solid", + borderColor: fr.colors.decisions.border.default.grey.default }, webinarDateDay: { - fontWeight: "bold", - fontSize: "120%", + fontWeight: 500, lineHeight: 1, - letterSpacing: "3px", textTransform: "uppercase" }, webinarDateMonth: { - fontWeight: "bold", - fontSize: "80%", + fontWeight: 500, + fontSize: "0.625rem", textTransform: "uppercase" }, webinarDate: { - fontSize: "300%", + fontSize: "2rem", lineHeight: 1, fontWeight: "bold", color: theme.palette.primary.main @@ -74,65 +72,43 @@ export const WebinarList = ({ setCantDisplayWebinarsBecauseNoneOrError }) => { ? webinars.slice(0, 10).map((webinar, index) => { const webinarDate = new Date(webinar.time * 1000); return ( - + - - + - - + + {SHORT_DAYS[webinarDate.getDay()]} - - {addZero(webinarDate.getDate())} - - {SHORT_MONTHS[webinarDate.getMonth()]}{" "} {webinarDate.getFullYear()} - - - + {formatTimeOfDay(webinar.time)} - - - - {webinar.title} - - - - - - - + + + {webinar.title} + + + + ); diff --git a/web/signup/Complete.js b/web/signup/Complete.js index 1d476f42c..c96ab8a32 100644 --- a/web/signup/Complete.js +++ b/web/signup/Complete.js @@ -3,24 +3,22 @@ import Typography from "@mui/material/Typography"; import { useLocation } from "react-router-dom"; import { makeStyles } from "@mui/styles"; import Container from "@mui/material/Container"; -import Grid from "@mui/material/Grid"; import { useStoreSyncedWithLocalStorage } from "common/store/store"; import Emoji from "../common/Emoji"; import AlertEmailDelay from "../common/AlertEmailDelay"; import ButtonGoHome from "../common/ButtonGoHome"; import { usePageTitle } from "../common/UsePageTitle"; +import { Stack } from "@mui/material"; +import { WebinarList } from "../landing/components/WebinarList"; const useStyles = makeStyles(theme => ({ title: { paddingTop: theme.spacing(4), - textAlign: "center", + paddingBottom: theme.spacing(2), fontSize: "300%" }, container: { padding: theme.spacing(4) - }, - grid: { - marginBottom: 0 } })); @@ -49,37 +47,32 @@ export function Complete({ type }) { const companiesName = location.state ? location.state.companiesName : null; return ( - - - - - + + + + + + {type === "user" ? ( + + L'inscription s'est terminée avec succès ! Un email de vérification + de votre compte vous a été envoyé à l'adresse{" "} + {store.userInfo().email}. - - - {type === "user" ? ( - L'inscription s'est terminée avec succès ! - ) : ( - {getCompaniesText(companiesName)} - )} - {type === "user" && ( - - Un email de vérification de votre compte vous a été envoyé à - l'adresse {store.userInfo().email}. - - )} - {type === "user" && } - - - - - + ) : ( + {getCompaniesText(companiesName)} + )} + {type === "user" && } + + Offrez-vous une formation gratuite de 45 minutes ! + + + Apprenez à maîtriser Mobilic grâce à un accompagnement + personnalisé et gagnez du temps : formation à la mise en + place, démonstration et réponse à toutes vos questions ! + + {}} /> + + ); }