feat(ui): misc UI updates

src/components/presentation.tsx

@@ -1,11 +1,11 @@
 import { Box, Grid, Theme } from "@material-ui/core";
 import Typography from "@material-ui/core/Typography";
+import { makeStyles } from "@material-ui/styles";
 import { graphql, StaticQuery } from "gatsby";
 import Img from "gatsby-image";
 import React, { FC } from "react";
 
 import { presentationData } from "../display-data/presentation-data";
-import { makeStyles } from "@material-ui/styles";
 
 export const imageQuery = graphql`
   query {
@@ -20,6 +20,12 @@ export const imageQuery = graphql`
 `;
 
 const useStyles = makeStyles((theme: Theme) => ({
+  icon: {
+    "&>svg": {
+      height: "auto",
+      width: theme.spacing(6),
+    },
+  },
   root: {
     width: "100%",
   },
@@ -33,11 +39,11 @@ const Presentation: FC = () => {
       render={(data) => (
         <Grid container spacing={1} alignItems="center" justify="center">
           <Grid item md={6}>
-            <Grid container spacing={6} justify="center">
+            <Grid container spacing={4} justify="center">
               {presentationData.map((presentationItem) => (
                 <Grid item md={6} key={presentationItem.title}>
-                  <Typography variant="h6" color="textPrimary">
-                    <Box>{presentationItem.logo}</Box>
+                  <Typography variant="h5" color="textPrimary">
+                    <Box className={classes.icon}>{presentationItem.logo}</Box>
                     <Box>{presentationItem.title}</Box>
                   </Typography>
                 </Grid>

src/display-data/presentation-data.tsx

@@ -15,7 +15,7 @@ export const presentationData = [
   },
   {
     logo: <SearchIcon />,
-    title: "Mener un audit",
+    title: "Mener une opération d'audit",
   },
   {
     logo: <FileCopyIcon />,

src/pages/index.tsx

@@ -28,6 +28,9 @@ const useStyles = makeStyles((theme: Theme) => ({
   headerButtons: {
     marginTop: theme.spacing(4),
   },
+  downloadButton: {
+    fontWeight: "bold",
+  },
 }));
 
 const getDownloadLink = (): string => {
@@ -65,6 +68,7 @@ const IndexPage: FC = () => {
                 color="primary"
                 onClick={onDownloadClick}
                 startIcon={<GetAppIcon />}
+                className={classes.downloadButton}
               >
                 Télécharger
               </Button>
@@ -114,7 +118,9 @@ const IndexPage: FC = () => {
             Ils parlent de nous
           </Typography>
         </Box>
-        <HomepageTweets />
+        <Box pb={2}>
+          <HomepageTweets />
+        </Box>
         <Grid container justify="center">
           <Grid item>
             <Button

src/pages/qui-sommes-nous.tsx

@@ -11,6 +11,8 @@ import TimelineElement from "../components/timeline-element";
 import { currentMembers, oldMembers } from "../display-data/team-data";
 import { timelineElements } from "../display-data/timeline-data";
 import Layout from "../layout";
+import TwitterIcon from "@material-ui/icons/Twitter";
+import Button from "@material-ui/core/Button";
 
 const useStyles = makeStyles(() =>
   createStyles({
@@ -39,6 +41,18 @@ const Downloads: FC = () => {
           Product Manager, etc) pour développer un outil avec les méthodes
           agiles en co-construction permanente avec ses utilisateur·trice·s.
         </Typography>
+        <Box p={2}>
+          <Button
+            size="small"
+            startIcon={<TwitterIcon />}
+            target="_blank"
+            rel="noopener"
+            href="https://twitter.com/archifiltre"
+            color="primary"
+          >
+            Nous suivre sur Twitter
+          </Button>
+        </Box>
       </Box>
       <Box p={3} textAlign="center">
         <Typography variant="h5" color="textPrimary">

src/theme.ts

@@ -28,6 +28,7 @@ const makeTheme = (variant: ThemeOptions): Theme => {
 
 const light: ThemeOptions = {
   palette: {
+    background: { default: "rgba(0, 0, 0, 0.04)" },
     type: "light",
   },
 };