feat(design): update misc UI elements (#38)

SocialGouv · Aug 26, 2020 · e98b894 · e98b894
1 parent b7e4e55
commit e98b894
Show file tree

Hide file tree

Showing 31 changed files with 233 additions and 313 deletions.
diff --git a/gatsby-config.js b/gatsby-config.js
@@ -12,15 +12,6 @@ module.exports = {
     `gatsby-transformer-remark`,
     `gatsby-transformer-sharp`,
     `gatsby-plugin-sharp`,
-    {
-      options: {
-        custom: {
-          families: ["Quicksand"],
-          urls: ["/fonts/fonts.css"],
-        },
-      },
-      resolve: "gatsby-plugin-web-font-loader",
-    },
     {
       options: {
         dev: true,
@@ -66,7 +57,7 @@ module.exports = {
       options: {
         background_color: `#663399`,
         display: `minimal-ui`,
-        icon: `static/images/logo.png`,
+        icon: `static/images/favicon.png`,
         name: `gatsby-starter-default`,
         short_name: `starter`,
         start_url: `/`,

diff --git a/package.json b/package.json
@@ -33,7 +33,6 @@
     "gatsby-plugin-react-helmet": "latest",
     "gatsby-plugin-sharp": "^2.6.27",
     "gatsby-plugin-typescript": "latest",
-    "gatsby-plugin-web-font-loader": "^1.0.4",
     "gatsby-source-filesystem": "^2.3.24",
     "gatsby-transformer-remark": "^2.8.28",
     "gatsby-transformer-sharp": "^2.5.13",

diff --git a/src/components/homepage-header.tsx b/src/components/homepage-header.tsx
@@ -8,39 +8,26 @@ const useStyles = makeStyles((theme: Theme) => ({
     margin: -theme.spacing(2),
     padding: theme.spacing(8, 0, 6),
   },
-  title: {
-    fontFamily: "Quicksand",
-    letterSpacing: "0.16rem",
-  },
 }));
 
 export interface HomepageHeaderProps {
   title: string;
-  description?: string;
 }
 
-const HomepageHeader: FC<HomepageHeaderProps> = ({
-  title,
-  description = "",
-  children,
-}) => {
+const HomepageHeader: FC<HomepageHeaderProps> = ({ title, children }) => {
   const classes = useStyles();
   return (
     <div className={classes.content}>
       <Container maxWidth="sm">
         <Typography
           component="h1"
-          variant="h2"
+          variant="h4"
           align="center"
           color="textPrimary"
-          className={classes.title}
           gutterBottom
         >
           {title}
         </Typography>
-        <Typography variant="h5" align="center" color="textSecondary" paragraph>
-          {description}
-        </Typography>
         {children}
       </Container>
     </div>

diff --git a/src/components/homepage-tweets.tsx b/src/components/homepage-tweets.tsx
@@ -1,8 +1,9 @@
-import { Box, Theme } from "@material-ui/core";
+import { Theme } from "@material-ui/core";
 import Button from "@material-ui/core/Button";
 import Card from "@material-ui/core/Card";
 import CardActions from "@material-ui/core/CardActions";
 import CardContent from "@material-ui/core/CardContent";
+import Grid from "@material-ui/core/Grid";
 import Typography from "@material-ui/core/Typography";
 import TwitterIcon from "@material-ui/icons/Twitter";
 import { makeStyles } from "@material-ui/styles";
@@ -22,6 +23,7 @@ const useStyles = makeStyles((theme: Theme) => ({
   root: {
     margin: theme.spacing(2),
     minWidth: 275,
+    minHeight: 200,
   },
   title: {
     fontSize: 14,
@@ -31,34 +33,36 @@ const useStyles = makeStyles((theme: Theme) => ({
 const HomepageTweets: FC = () => {
   const classes = useStyles();
   return (
-    <Box display="flex" justifyContent="space-between">
+    <Grid container spacing={2}>
       {homepageTweets.map((tweet, index: number) => (
-        <Card className={classes.root} key={`${tweet.url}-${index}`}>
-          <CardContent>
-            <Typography
-              className={classes.title}
-              color="textSecondary"
-              gutterBottom
-            >
-              {tweet.text}
-            </Typography>
-            <Typography className={classes.pos} color="textSecondary">
-              {tweet.username} - {tweet.date}
-            </Typography>
-          </CardContent>
-          <CardActions>
-            <Button
-              size="small"
-              startIcon={<TwitterIcon />}
-              target="_blank"
-              href={tweet.url}
-            >
-              Voir le tweet
-            </Button>
-          </CardActions>
-        </Card>
+        <Grid key={`${tweet.url}-${index}`} item md={4}>
+          <Card className={classes.root} key={`${tweet.url}-${index}`}>
+            <CardContent>
+              <Typography
+                className={classes.title}
+                color="textSecondary"
+                gutterBottom
+              >
+                {tweet.text}
+              </Typography>
+              <Typography className={classes.pos} color="textSecondary">
+                {tweet.username} - {tweet.date}
+              </Typography>
+            </CardContent>
+            <CardActions>
+              <Button
+                size="small"
+                startIcon={<TwitterIcon />}
+                target="_blank"
+                href={tweet.url}
+              >
+                Voir le tweet
+              </Button>
+            </CardActions>
+          </Card>
+        </Grid>
       ))}
-    </Box>
+    </Grid>
   );
 };
 

diff --git a/src/components/mobile-header.tsx b/src/components/mobile-header.tsx
@@ -61,6 +61,13 @@ const MobileHeader: FC<MobileHaderProps> = ({
             {label}
           </MenuItem>
         ))}
+        <MenuItem
+          onClick={handleClose}
+          component={GatsbyLink}
+          to="/co-construction"
+        >
+          Co-créer Archifiltre
+        </MenuItem>
         <MenuItem onClick={onToggleTheme}>
           <span>Thème</span>
           {theme === "light" ? <Brightness4Icon /> : <Brightness7Icon />}

diff --git a/src/components/presentation.tsx b/src/components/presentation.tsx
@@ -1,48 +1,46 @@
-import { Grid } from "@material-ui/core";
-import Card from "@material-ui/core/Card";
-import CardActionArea from "@material-ui/core/CardActionArea";
-import CardContent from "@material-ui/core/CardContent";
-import CardMedia from "@material-ui/core/CardMedia";
-import { makeStyles } from "@material-ui/core/styles";
+import { Box, Grid } from "@material-ui/core";
 import Typography from "@material-ui/core/Typography";
+import { graphql, StaticQuery } from "gatsby";
+import Img from "gatsby-image";
 import React, { FC } from "react";
 
 import { presentationData } from "../display-data/presentation-data";
 
-const useStyles = makeStyles({
-  media: {
-    height: 200,
-  },
-  root: {
-    width: 400,
-  },
-});
+export const imageQuery = graphql`
+  query {
+    file(relativePath: { eq: "presentation.png" }) {
+      childImageSharp {
+        fluid(maxWidth: 600, maxHeight: 320) {
+          ...GatsbyImageSharpFluid
+        }
+      }
+    }
+  }
+`;
 
-const Presentation: FC = () => {
-  const classes = useStyles();
-
-  return (
-    <Grid container spacing={2} justify="center">
-      {presentationData.map((presentationItem) => (
-        <Grid item key={presentationItem.title}>
-          <Card className={classes.root}>
-            <CardActionArea>
-              <CardMedia
-                className={classes.media}
-                image={presentationItem.image}
-                title={presentationItem.title}
-              />
-              <CardContent>
-                <Typography gutterBottom variant="body1" component="h2">
-                  {presentationItem.title}
+const Presentation: FC = () => (
+  <StaticQuery
+    query={imageQuery}
+    render={(data) => (
+      <Grid container spacing={1} alignItems="center">
+        <Grid item md={6}>
+          <Grid container spacing={6}>
+            {presentationData.map((presentationItem) => (
+              <Grid item md={6} key={presentationItem.title}>
+                <Typography variant="h6" color="textPrimary">
+                  <Box>{presentationItem.logo}</Box>
+                  <Box>{presentationItem.title}</Box>
                 </Typography>
-              </CardContent>
-            </CardActionArea>
-          </Card>
+              </Grid>
+            ))}
+          </Grid>
+        </Grid>
+        <Grid item md={6}>
+          <Img fluid={data.file.childImageSharp.fluid} />
         </Grid>
-      ))}
-    </Grid>
-  );
-};
+      </Grid>
+    )}
+  />
+);
 
 export default Presentation;
diff --git a/src/components/product-features.tsx b/src/components/product-features.tsx
@@ -17,20 +17,27 @@ const useStyles = makeStyles((theme: Theme) => ({
 const ProductFeatures: FC = () => {
   const classes = useStyles();
   return (
-    <Grid container className={classes.content} alignItems="center" spacing={4}>
-      {featureData.map((feature) => (
-        <Grid item md={4} key={feature.title}>
-          <Box>
-            <Box>
-              <Typography variant="h5" color="textPrimary">
-                {feature.icon} {feature.title}
-              </Typography>
+    <Box className={classes.content}>
+      <Box pb={6} display="flex" justifyContent="center">
+        <Typography variant="h5" color="textPrimary">
+          Pourquoi c&rsquo;est si simple ?
+        </Typography>
+      </Box>
+      <Grid container alignItems="center" spacing={2}>
+        {featureData.map((feature) => (
+          <Grid item md={3} key={feature.title}>
+            <Box p={3}>
+              <Box>
+                <Typography variant="h5" color="textPrimary">
+                  {feature.icon} {feature.title}
+                </Typography>
+              </Box>
+              <Box>{feature.description}</Box>
             </Box>
-            <Box>{feature.description}</Box>
-          </Box>
-        </Grid>
-      ))}
-    </Grid>
+          </Grid>
+        ))}
+      </Grid>
+    </Box>
   );
 };
 

diff --git a/src/display-data/feature-data.tsx b/src/display-data/feature-data.tsx
@@ -1,6 +1,5 @@
 import SearchIcon from "@material-ui/icons/Search";
 import SortIcon from "@material-ui/icons/Sort";
-import StorageIcon from "@material-ui/icons/Storage";
 import VisibilityIcon from "@material-ui/icons/Visibility";
 import WrapTextIcon from "@material-ui/icons/WrapText";
 import React from "react";
@@ -12,12 +11,6 @@ export const featureData = [
     icon: <VisibilityIcon />,
     title: "En un coup d'oeil",
   },
-  {
-    description:
-      "Auditer les répertoires et espaces serveurs de votre administration",
-    icon: <StorageIcon />,
-    title: "Compatibilité",
-  },
   {
     description:
       "Traiter en masse vos répertoires grâce aux exports Archifiltre (transferts, élimination, réorganisation)",

diff --git a/src/display-data/header-links.ts b/src/display-data/header-links.ts
@@ -5,27 +5,15 @@ export type HeaderLink = {
 
 export const headerLinks: HeaderLink[] = [
   {
-    label: "Accueil",
-    url: "/",
+    label: "Le produit",
+    url: "/produit",
   },
   {
-    label: "Openlab",
-    url: "/openlab",
-  },
-  {
-    label: "Nouveautés",
-    url: "/nouveautes",
+    label: "Qui sommes-nous ?",
+    url: "/qui-sommes-nous",
   },
   {
     label: "FAQ",
     url: "/faq",
   },
-  {
-    label: "Ambassadeur",
-    url: "/ambassadeur",
-  },
-  {
-    label: "A propos",
-    url: "/a-propos",
-  },
 ];
diff --git a/src/display-data/presentation-data.ts b/src/display-data/presentation-data.ts
diff --git a/src/display-data/presentation-data.tsx b/src/display-data/presentation-data.tsx
@@ -0,0 +1,25 @@
+import FileCopyIcon from "@material-ui/icons/FileCopy";
+import InfoIcon from "@material-ui/icons/Info";
+import SearchIcon from "@material-ui/icons/Search";
+import StorageIcon from "@material-ui/icons/Storage";
+
+import React from "react";
+
+export const presentationData = [
+  {
+    logo: <InfoIcon />,
+    title: "Obtenez des informations",
+  },
+  {
+    logo: <StorageIcon />,
+    title: "Enrichissez vos données",
+  },
+  {
+    logo: <SearchIcon />,
+    title: "Menez une opération d'audit",
+  },
+  {
+    logo: <FileCopyIcon />,
+    title: "Identifiez les redondances",
+  },
+];