Merge pull request #178 from mission-apprentissage/ui/rework-question…

…naire UI/rework questionnaire
mission-apprentissage · Oct 2, 2023 · 832ea78 · 832ea78
2 parents 162a3f0 + 0ee027e
commit 832ea78
Show file tree

Hide file tree

Showing 41 changed files with 1,712 additions and 1,162 deletions.
diff --git a/ui/package.json b/ui/package.json
@@ -25,6 +25,7 @@
     "file-saver": "2.0.5",
     "formik": "2.2.9",
     "framer-motion": "10.3.2",
+    "html-react-parser": "4.2.2",
     "html2canvas": "1.4.1",
     "jszip": "3.10.1",
     "jwt-decode": "3.1.2",

diff --git a/ui/public/favicon.ico b/ui/public/favicon.ico
diff --git a/ui/src/Components/Footer.js b/ui/src/Components/Footer.js
@@ -16,14 +16,14 @@ const Footer = () => {
         pb="4"
       >
         <Image src={gouv} alt="" w="150px" />
-        <Text color="purple.900">
+        <Text color="brand.black.500">
           <Link
             href="https://travail-emploi.gouv.fr/"
             target="_blank"
             rel="noreferrer"
             textDecoration="underline"
             fontWeight="semibold"
-            color="purple.900"
+            color="brand.black.500"
           >
             Sirius
           </Link>{" "}
@@ -45,7 +45,7 @@ const Footer = () => {
               rel="noreferrer"
               textDecoration="underline"
               fontWeight="semibold"
-              color="purple.900"
+              color="brand.black.500"
             >
               onisep.fr
             </Link>
@@ -57,7 +57,7 @@ const Footer = () => {
               rel="noreferrer"
               textDecoration="underline"
               fontWeight="semibold"
-              color="purple.900"
+              color="brand.black.500"
             >
               Ministère du travail
             </Link>

diff --git a/ui/src/Components/Form/DidYouKnow.js b/ui/src/Components/Form/DidYouKnow.js
@@ -0,0 +1,42 @@
+import { Box, Text, useBreakpoint } from "@chakra-ui/react";
+import parse from "html-react-parser";
+
+const DidYouKnow = ({ content }) => {
+  const breakpoint = useBreakpoint({ ssr: false });
+  const isMobile = breakpoint === "base";
+  if (!content) return null;
+
+  return (
+    <Box
+      bgColor="brand.blue.100"
+      width="calc(100% + 48px)"
+      ml="-24px"
+      display="flex"
+      p="4"
+      mb="4"
+      alignItems="center"
+      justifyContent={isMobile ? "center" : "initial"}
+    >
+      <Box
+        bgColor="brand.blue.700"
+        borderRadius="100%"
+        width="40px"
+        height="40px"
+        display="flex"
+        justifyContent="center"
+        alignItems="center"
+        w="40px"
+      >
+        <Text fontSize="2xl">💡</Text>
+      </Box>
+      <Box ml="2" w="calc(100% - 40px)">
+        <Text color="brand.blue.700" fontWeight="semibold">
+          Le savais-tu ?
+        </Text>
+        <Text color="brand.blue.700">{parse(content)}</Text>
+      </Box>
+    </Box>
+  );
+};
+
+export default DidYouKnow;
diff --git a/ui/src/Components/Form/ErrorTemplate.js b/ui/src/Components/Form/ErrorTemplate.js
@@ -5,7 +5,7 @@ const ErrorTemplate = (props) => {
   if (!errors || errors?.length === 0) return null;
 
   return (
-    <Stack spacing={2} color="orange.500" mt="5" ml="5">
+    <Stack spacing={2} color="brand.blue.700" mt="5">
       {errors?.map((error) => (
         <Text key={error} display="flex" alignItems="center">
           <InfoIcon mr="2" />