Merge branch 'ui/rework-questionnaire' into develop

mission-apprentissage · Sep 27, 2023 · cfa7a9f · cfa7a9f
2 parents beb284c + 9d7d78c
commit cfa7a9f
Show file tree

Hide file tree

Showing 34 changed files with 742 additions and 706 deletions.
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
@@ -8,16 +8,17 @@ const DidYouKnow = ({ content }) => {
 
   return (
     <Box
-      bgColor="purple.50"
-      width="100%"
+      bgColor="brand.blue.100"
+      width="calc(100% + 48px)"
+      ml="-24px"
       display="flex"
       p="4"
       mb="4"
       alignItems="center"
       justifyContent={isMobile ? "center" : "initial"}
     >
       <Box
-        bgColor="purple.500"
+        bgColor="brand.blue.700"
         borderRadius="100%"
         width="40px"
         height="40px"
@@ -29,10 +30,10 @@ const DidYouKnow = ({ content }) => {
         <Text fontSize="2xl">💡</Text>
       </Box>
       <Box ml="2" w="calc(100% - 40px)">
-        <Text color="purple.600" fontWeight="semibold">
+        <Text color="brand.blue.700" fontWeight="semibold">
           Le savais-tu ?
         </Text>
-        <Text color="purple.600">{parse(content)}</Text>
+        <Text color="brand.blue.700">{parse(content)}</Text>
       </Box>
     </Box>
   );

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">
+    <Stack spacing={2} color="brand.blue.700" mt="5">
       {errors?.map((error) => (
         <Text key={error} display="flex" alignItems="center">
           <InfoIcon mr="2" />

diff --git a/ui/src/Components/Form/Hero.js b/ui/src/Components/Form/Hero.js
@@ -34,7 +34,7 @@ const Hero = ({ setStartedAnswering, isMobile, startDate, endDate, seats, temoig
           >
             <Box w="50%" display={isMobile ? "none" : "inherit"} flexDirection="column">
               <Image src={shareTemoignage} alt="" objectFit="contain" w="80%" m="auto" />
-              <Text color="purple.900" fontSize="14px" textAlign="center" mt="4">
+              <Text color="brand.black.500" fontSize="14px" textAlign="center" mt="4">
                 <Text as="span" mr="2">
                   ⏳ 5-10 minutes
                 </Text>
@@ -47,15 +47,15 @@ const Hero = ({ setStartedAnswering, isMobile, startDate, endDate, seats, temoig
               <Box display="flex" flexDirection="column">
                 <Text
                   fontSize="3xl"
-                  color="purple.900"
+                  color="brand.red.500"
                   fontWeight="600"
                   textAlign={isMobile ? "center" : "inherit"}
                 >
                   Tu es apprenti·e ?
                 </Text>
                 <Text
                   fontSize="lg"
-                  color="purple.900"
+                  color="brand.blue.700"
                   mt="5"
                   mb={isMobile ? "5" : "0"}
                   textAlign={isMobile ? "center" : "inherit"}
@@ -67,7 +67,7 @@ const Hero = ({ setStartedAnswering, isMobile, startDate, endDate, seats, temoig
               </Box>
               <Box w={isMobile ? "100%" : "50%"} display={isMobile ? "inherit" : "none"}>
                 <Image src={shareTemoignage} alt="" objectFit="contain" w="80%" m="auto" />
-                <Text color="purple.900" fontSize="14px" textAlign="center" mt="4">
+                <Text color="brand.black.500" fontSize="14px" textAlign="center" mt="4">
                   <Text as="span" mr="2">
                     ⏳ 5-10 minutes
                   </Text>
@@ -85,7 +85,8 @@ const Hero = ({ setStartedAnswering, isMobile, startDate, endDate, seats, temoig
                 <Button
                   size="lg"
                   variant="solid"
-                  colorScheme="purple"
+                  bgColor="brand.blue.700"
+                  color="white"
                   rightIcon={<ArrowForwardIcon />}
                   onClick={onOpen}
                 >
@@ -97,10 +98,10 @@ const Hero = ({ setStartedAnswering, isMobile, startDate, endDate, seats, temoig
         </Box>
         <Box bgColor="white" w="100%" pt="10px">
           <Box w={isMobile ? "80%" : "50%"} mx="auto" my="35">
-            <Text fontWeight="600" color="purple.900" fontSize="3xl" textAlign="center">
+            <Text fontWeight="600" color="brand.blue.700" fontSize="3xl" textAlign="center">
               Flemme de répondre au questionnaire ?
             </Text>
-            <Text color="purple.900" fontSize="sm" textAlign="center" mt="5" mb="10">
+            <Text color="brand.blue.700" fontSize="sm" textAlign="center" mt="5" mb="10">
               3 raisons de le faire :
             </Text>
             <Stack
@@ -123,7 +124,7 @@ const Hero = ({ setStartedAnswering, isMobile, startDate, endDate, seats, temoig
                 <Text
                   fontSize="md"
                   lineHeight="6"
-                  color="purple.900"
+                  color="brand.black.500"
                   textAlign={isMobile ? "left" : "center"}
                   mx="15px"
                   fontWeight="400"
@@ -148,7 +149,7 @@ const Hero = ({ setStartedAnswering, isMobile, startDate, endDate, seats, temoig
                 <Text
                   fontSize="md"
                   lineHeight="6"
-                  color="purple.900"
+                  color="brand.black.500"
                   textAlign={isMobile ? "left" : "center"}
                   mx="15px"
                   fontWeight="400"
@@ -175,7 +176,7 @@ const Hero = ({ setStartedAnswering, isMobile, startDate, endDate, seats, temoig
                 <Text
                   fontSize="md"
                   lineHeight="6"
-                  color="purple.900"
+                  color="brand.black.500"
                   textAlign={isMobile ? "left" : "center"}
                   mx="15px"
                   fontWeight="600"
@@ -185,25 +186,27 @@ const Hero = ({ setStartedAnswering, isMobile, startDate, endDate, seats, temoig
               </Box>
             </Stack>
             <Box width="100%" textAlign="center" mt="10">
-              <Text fontSize="sm">Alors, tu veux bien nous aider ?</Text>
+              <Text fontSize="sm" color="brand.blue.700">
+                Alors, tu veux bien nous aider ?
+              </Text>
             </Box>
           </Box>
         </Box>
         <Footer />
       </Stack>
-      <Modal isOpen={isCampagneActive} isCentered>
+      <Modal isOpen={isCampagneActive} size="sm" isCentered>
         <ModalOverlay />
-        <ModalContent>
+        <ModalContent y="8" px="4" bgColor="brand.blue.100" width="90%" borderRadius="20px">
           <ModalHeader textAlign="center">La campagne n'est pas ouverte</ModalHeader>
           <ModalBody textAlign="center" pb="5">
             La campagne est ouverte du {new Date(startDate).toLocaleDateString()} au{" "}
             {new Date(endDate).toLocaleDateString()}
           </ModalBody>
         </ModalContent>
       </Modal>
-      <Modal isOpen={!hasOpenSeats} isCentered>
+      <Modal isOpen={!hasOpenSeats} size="sm" isCentered>
         <ModalOverlay />
-        <ModalContent>
+        <ModalContent y="8" px="4" bgColor="brand.blue.100" width="90%" borderRadius="20px">
           <ModalHeader textAlign="center">La campagne n'a plus de places disponibles</ModalHeader>
           <ModalBody textAlign="center" pb="5">
             La campagne n'a plus de place disponible. Merci de contacter un administrateur.
@@ -212,8 +215,8 @@ const Hero = ({ setStartedAnswering, isMobile, startDate, endDate, seats, temoig
       </Modal>
       <Modal isOpen={isOpen} onClose={onClose} size="sm" isCentered>
         <ModalOverlay />
-        <ModalContent py="8" px="4" bgColor="gray.100" width="90%" borderRadius="20px">
-          <ModalHeader textAlign="center" color="purple.600">
+        <ModalContent py="8" px="4" bgColor="brand.blue.100" width="90%" borderRadius="20px">
+          <ModalHeader textAlign="center" color="brand.blue.700">
             <Text fontWeight="600" fontSize="md">
               Mention d’information Sirius
             </Text>
@@ -223,22 +226,22 @@ const Hero = ({ setStartedAnswering, isMobile, startDate, endDate, seats, temoig
           </ModalHeader>
           <ModalBody>
             <Stack textAlign="center">
-              <Text fontWeight="600" fontSize="14px" color="purple.900">
+              <Text fontWeight="600" fontSize="14px" color="brand.black.500">
                 Attention à vos données, elles sont importantes pour nous !
               </Text>
               <Image src={mains} alt="" objectFit="contain" w="80%" mx="auto" my="5" />
-              <Text color="purple.900">
+              <Text color="brand.black.500">
                 C’est pour cela que nous invitons à nous communiquer les{" "}
                 <Text as="span" fontWeight="semibold">
                   seules informations et données strictement{" "}
                 </Text>
                 nécessaires.
               </Text>
-              <Text color="purple.900">
+              <Text color="brand.black.500">
                 Notamment, ne communiquez pas vos opinions philosophiques, syndicales, politiques ou
                 sur votre vie sexuelle.{" "}
               </Text>
-              <Text fontWeight="semibold" color="purple.900">
+              <Text fontWeight="semibold" color="brand.black.500">
                 Ces données sont trop personnelles !
               </Text>
             </Stack>
@@ -247,9 +250,10 @@ const Hero = ({ setStartedAnswering, isMobile, startDate, endDate, seats, temoig
             <Button
               size="lg"
               variant="solid"
-              colorScheme="purple"
               rightIcon={<ArrowForwardIcon />}
               onClick={() => setStartedAnswering(true)}
+              bgColor="brand.blue.700"
+              color="white"
             >
               C'est parti !
             </Button>

diff --git a/ui/src/Components/Form/Success.js b/ui/src/Components/Form/Success.js
@@ -15,20 +15,20 @@ const Success = () => {
       m="auto"
       mt={isMobile ? "10" : "0"}
     >
-      <Text fontSize="3xl" color="purple.900" fontWeight="semibold" textAlign="center">
-        😌 Merci beaucoup d’avoir participé !
+      <Image src={success} alt="" objectFit="contain" maxW="500px" w="80%" m="auto" mb="10" />
+      <Text fontSize="3xl" color="brand.blue.700" fontWeight="semibold" textAlign="center">
+        Merci beaucoup d’avoir participé ! 😌
       </Text>
       <Text
         fontSize="lg"
-        color="purple.900"
+        color="brand.black.500"
         w={isMobile ? "100%" : "50%"}
         textAlign="center"
         mt="2"
       >
-        Tes réponses seront partagées aux jeunes qui s’interrogent sur les formations en
-        apprentissage
+        Tes réponses seront partagées aux jeunes qui se posent des questions sur leur orientation
+        vers l’apprentissage
       </Text>
-      <Image src={success} alt="" objectFit="contain" maxW="500px" w="80%" m="auto" mt="10" />
     </Box>
   );
 };

diff --git a/ui/src/Components/Form/fields/CustomNestedRadios.js b/ui/src/Components/Form/fields/CustomNestedRadios.js
@@ -20,21 +20,31 @@ function RadioCard(props) {
   const checkbox = getCheckboxProps();
   return (
     <Box as="label" display="flex">
-      <Radio colorScheme="orange" {...input} style={{}}>
+      <Radio
+        borderColor="brand.pink.400"
+        color="brand.black.500"
+        _checked={{
+          borderColor: "brand.red.500",
+          bg: "brand.black.500",
+        }}
+        {...input}
+        style={{}}
+      >
         <Box
           {...checkbox}
           cursor="pointer"
           borderRadius="md"
           _checked={{
-            bg: "orange.500",
-            color: "white",
-            borderColor: "orange.500",
+            bg: "brand.red.500",
+            color: "brand.black.500",
           }}
           px={2}
           py={1}
           width="fit-content"
           ml="2"
-          color="gray.400"
+          bgColor="brand.pink.400"
+          color="brand.black.500"
+          my="2"
         >
           {props.children}
         </Box>
@@ -73,12 +83,12 @@ const CustomNestedRadios = (props) => {
   return (
     <>
       {props.schema.info && <DidYouKnow content={props.schema.info} />}
-      <Box as="fieldset" mx="5">
+      <Box as="fieldset" mx="2">
         <>
-          <FormLabel as="legend" fontSize="2xl" color="orange.500" requiredIndicator={null}>
+          <FormLabel as="legend" fontSize="2xl" color="brand.blue.700" requiredIndicator={null}>
             {props.schema.title && parse(props.schema.title)}
           </FormLabel>
-          <Text fontSize="xs" color="orange.900">
+          <Text fontSize="xs" color="brand.blue.700">
             Tu peux sélectionner plusieurs réponses 😉
           </Text>
         </>

diff --git a/ui/src/Components/Form/widgets/CustomCheckboxes.js b/ui/src/Components/Form/widgets/CustomCheckboxes.js
@@ -24,14 +24,13 @@ const CheckboxCard = (props) => {
         cursor="pointer"
         borderRadius="md"
         _checked={{
-          bg: "orange.500",
-          color: "white",
-          borderColor: "orange.500",
+          bg: "brand.red.500",
+          color: "brand.black.500",
         }}
         px={2}
         py={1}
-        color="orange.800"
-        bgColor="orange.100"
+        color="brand.black.500"
+        bgColor="brand.pink.400"
       >
         {props.children}
       </Box>
@@ -40,8 +39,6 @@ const CheckboxCard = (props) => {
 };
 
 const CustomCheckboxes = (props) => {
-  const breakpoint = useBreakpoint({ ssr: false });
-  const isMobile = breakpoint === "base";
   const options = props.standalone
     ? props.enum
     : props.options.enumOptions.map((option) => option.label);
@@ -57,14 +54,14 @@ const CustomCheckboxes = (props) => {
   return (
     <>
       {props.schema?.info && <DidYouKnow content={props.schema.info} />}
-      <Box as="fieldset" mx={isMobile ? "0" : "5"}>
+      <Box as="fieldset" mx="2">
         {!props.standalone && (
           <>
-            <FormLabel as="legend" fontSize="2xl" color="orange.500" requiredIndicator={null}>
+            <FormLabel as="legend" fontSize="2xl" color="brand.blue.700" requiredIndicator={null}>
               {parse(props.label)}
             </FormLabel>
-            <Text fontSize="xs" color="orange.900">
-              <i> Tu peux sélectionner plusieurs réponses </i>😉
+            <Text fontSize="xs" color="brand.blue.700">
+              <i>Tu peux sélectionner plusieurs réponses</i> 😉
             </Text>
           </>
         )}