feat: add ambassador schema on co-construction page

src/components/mobile-header.tsx

@@ -66,7 +66,7 @@ const MobileHeader: FC<MobileHaderProps> = ({
           component={GatsbyLink}
           to="/co-construction"
         >
-          Co-créer Archifiltre
+          Co-créez Archifiltre
         </MenuItem>
         <MenuItem onClick={onToggleTheme}>
           <span>Thème</span>

src/components/presentation.tsx

@@ -23,10 +23,10 @@ const useStyles = makeStyles((theme: Theme) => ({
   icon: {
     "&>svg": {
       height: "auto",
-      width: theme.spacing(6),
+      width: theme.spacing(4.5),
     },
   },
-  root: {
+  image: {
     width: "100%",
   },
 }));
@@ -50,7 +50,7 @@ const Presentation: FC = () => {
               ))}
             </Grid>
           </Grid>
-          <Grid item md={6} className={classes.root}>
+          <Grid item md={6} className={classes.image}>
             <Link to="/produit" component={GatsbyLink}>
               <Img
                 fluid={data.file.childImageSharp.fluid}

src/components/theme-image.tsx

@@ -0,0 +1,28 @@
+import Img, { FluidObject } from "gatsby-image";
+import React, { FC } from "react";
+
+import { ThemeContext } from "../layout";
+
+type ThemeImageProps = {
+  lightThemeImage: FluidObject;
+  darkThemeImage: FluidObject;
+  alt: string;
+};
+
+const ThemeImage: FC<ThemeImageProps> = ({
+  lightThemeImage,
+  darkThemeImage,
+  alt,
+}) => (
+  <ThemeContext.Consumer>
+    {(theme) =>
+      theme === "light" ? (
+        <Img fluid={lightThemeImage} alt={alt} />
+      ) : (
+        <Img fluid={darkThemeImage} alt={alt} />
+      )
+    }
+  </ThemeContext.Consumer>
+);
+
+export default ThemeImage;

src/display-data/faq-data.tsx

@@ -279,6 +279,7 @@ export const faqData = [
               href="mailto:archifiltre@sg.social.gouv.fr"
               target="_blank"
               color="primary"
+              rel="noopener"
             >
               mail
             </Link>

src/layout/header.tsx

@@ -98,7 +98,7 @@ const Header: FC<HeaderProps> = ({ onToggleTheme, theme }) => {
                 <Button
                   disableElevation
                   color="primary"
-                  variant="outlined"
+                  variant="contained"
                   component={GatsbyLink}
                   to="/co-construction"
                 >

src/layout/index.tsx

@@ -1,7 +1,7 @@
 import { Container, CssBaseline, Theme } from "@material-ui/core";
 import useMediaQuery from "@material-ui/core/useMediaQuery";
 import { makeStyles, ThemeProvider } from "@material-ui/styles";
-import React, { FC } from "react";
+import React, { createContext, FC } from "react";
 
 import CookieConsent from "../components/cookie-consent";
 import useLocalStorage from "../hooks/useLocalStorage";
@@ -20,6 +20,8 @@ const useStyles = makeStyles((theme: Theme) => ({
   },
 }));
 
+export const ThemeContext = createContext<ThemeMode>("light");
+
 type ThemeMode = "light" | "dark";
 
 const Layout: FC<{ container?: boolean }> = ({
@@ -41,13 +43,15 @@ const Layout: FC<{ container?: boolean }> = ({
       <CookieConsent />
       <div className={classes.root}>
         <Header onToggleTheme={toggleTheme} theme={theme} />
-        {container ? (
-          <Container component="main" maxWidth="md" className={classes.main}>
-            {children}
-          </Container>
-        ) : (
-          <main className={classes.main}>{children}</main>
-        )}
+        <ThemeContext.Provider value={theme}>
+          {container ? (
+            <Container component="main" maxWidth="md" className={classes.main}>
+              {children}
+            </Container>
+          ) : (
+            <main className={classes.main}>{children}</main>
+          )}
+        </ThemeContext.Provider>
         <Footer />
       </div>
     </ThemeProvider>