feat: update misc ui elements (#54)

SocialGouv · Sep 1, 2020 · 05e67af · 05e67af
1 parent 376c7ee
commit 05e67af
Show file tree

Hide file tree

Showing 7 changed files with 50 additions and 35 deletions.
diff --git a/src/components/download-link.tsx b/src/components/download-link.tsx
@@ -19,7 +19,7 @@ const DownloadLink: FC<DownloadLinkProps> = ({ url, label, version }) => {
     <Button
       target="_blank"
       href={url}
-      color="inherit"
+      color="primary"
       rel="noopener"
       onClick={onClick}
     >

diff --git a/src/components/homepage-tweets.tsx b/src/components/homepage-tweets.tsx
@@ -1,4 +1,5 @@
 import { Theme } from "@material-ui/core";
+import Box from "@material-ui/core/Box";
 import Button from "@material-ui/core/Button";
 import Card from "@material-ui/core/Card";
 import CardActions from "@material-ui/core/CardActions";
@@ -12,50 +13,59 @@ import React, { FC } from "react";
 import { homepageTweets } from "../display-data/tweets-data";
 
 const useStyles = makeStyles((theme: Theme) => ({
+  actions: {
+    display: "flex",
+    flexDirection: "row-reverse",
+  },
   bullet: {
     display: "inline-block",
     margin: "0 2px",
     transform: "scale(0.8)",
   },
-  pos: {
-    marginBottom: 12,
-  },
   root: {
-    margin: theme.spacing(2),
+    display: "flex",
+    flexDirection: "column",
+    height: "100%",
+    justifyContent: "space-between",
     minHeight: 200,
-    minWidth: 275,
+    minWidth: 250,
   },
   title: {
     fontSize: 14,
+    paddingBottom: theme.spacing(3),
   },
 }));
 
 const HomepageTweets: FC = () => {
   const classes = useStyles();
   return (
-    <Grid container spacing={2}>
+    <Grid container spacing={2} direction="row" alignItems="stretch">
       {homepageTweets.map((tweet, index: number) => (
         <Grid key={`${tweet.url}-${index}`} item md={4}>
-          <Card className={classes.root} key={`${tweet.url}-${index}`}>
+          <Card className={classes.root}>
             <CardContent>
-              <Typography
-                className={classes.title}
-                color="textSecondary"
-                gutterBottom
-              >
-                {tweet.text}
-              </Typography>
-              <Typography className={classes.pos} color="textSecondary">
-                {tweet.username} - {tweet.date}
-              </Typography>
+              <Box display="flex" justifyContent="space-between">
+                <Box>
+                  <Typography className={classes.title} color="textSecondary">
+                    {tweet.username}
+                  </Typography>
+                </Box>
+                <Box>
+                  <Typography className={classes.title} color="textSecondary">
+                    {tweet.date}
+                  </Typography>
+                </Box>
+              </Box>
+              <Typography color="textPrimary">{tweet.text}</Typography>
             </CardContent>
-            <CardActions>
+            <CardActions className={classes.actions}>
               <Button
                 size="small"
                 startIcon={<TwitterIcon />}
                 target="_blank"
                 rel="noopener"
                 href={tweet.url}
+                color="primary"
               >
                 Voir le tweet
               </Button>

diff --git a/src/components/product-features.tsx b/src/components/product-features.tsx
@@ -19,7 +19,7 @@ const ProductFeatures: FC = () => {
   return (
     <Box className={classes.content}>
       <Box pb={6} display="flex" justifyContent="center">
-        <Typography variant="h5" component="h2" color="textPrimary">
+        <Typography variant="h4" component="h2" color="textPrimary">
           Pourquoi c&rsquo;est si simple ?
         </Typography>
       </Box>

diff --git a/src/components/team-member.tsx b/src/components/team-member.tsx
@@ -17,6 +17,10 @@ type TeamMemberProps = {
 const useStyles = makeStyles(() =>
   createStyles({
     root: {
+      display: "flex",
+      flexDirection: "column",
+      height: "100%",
+      justifyContent: "space-between",
       minHeight: 120,
       minWidth: 200,
     },
@@ -42,6 +46,7 @@ const TeamMember: FC<TeamMemberProps> = ({ job, name, photo, url }) => {
           startIcon={<LinkedInIcon />}
           target="_blank"
           rel="noopener"
+          color="primary"
           href={url}
         >
           Voir le profil

diff --git a/src/display-data/faq-data.tsx b/src/display-data/faq-data.tsx
@@ -57,7 +57,7 @@ export const faqData = [
           utilisateur·trice·s
         </strong>
         . Cependant, nous utilisons{" "}
-        <Link href="https://fr.matomo.org/" target="_blank" color="inherit">
+        <Link href="https://fr.matomo.org/" target="_blank" color="primary">
           Matomo
         </Link>
         , un outil open-source pour avoir des statistiques d&#39;utilisation sur
@@ -155,7 +155,7 @@ export const faqData = [
           <Link
             href="https://fr.wikipedia.org/wiki/MD5"
             target="_blank"
-            color="inherit"
+            color="primary"
           >
             algorithme MD5
           </Link>
@@ -237,7 +237,7 @@ export const faqData = [
           <Link
             href="https://github.com/SocialGouv/archifiltre"
             target="_blank"
-            color="inherit"
+            color="primary"
           >
             GitHub
           </Link>
@@ -257,7 +257,7 @@ export const faqData = [
             <Link
               href="https://github.com/SocialGouv/archifiltre/issues"
               target="_blank"
-              color="inherit"
+              color="primary"
             >
               GitHub
             </Link>
@@ -267,7 +267,7 @@ export const faqData = [
             <Link
               href="https://github.com/SocialGouv/archifiltre/pulls"
               target="_blank"
-              color="inherit"
+              color="primary"
             >
               pull request
             </Link>
@@ -278,7 +278,7 @@ export const faqData = [
             <Link
               href="mailto:archifiltre@sg.social.gouv.fr"
               target="_blank"
-              color="inherit"
+              color="primary"
             >
               mail
             </Link>

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -73,7 +73,7 @@ const IndexPage: FC = () => {
           <Grid container justify="center" className={classes.downloadLink}>
             <Grid item>
               <Button
-                color="inherit"
+                color="primary"
                 component={GatsbyLink}
                 to="/telechargements"
                 size="small"
@@ -86,15 +86,15 @@ const IndexPage: FC = () => {
       </HomepageHeader>
       <Box p={3} pb={6} textAlign="center">
         <Box p={3} pb={6}>
-          <Typography variant="h5" component="h2" color="textPrimary">
+          <Typography variant="h4" component="h2" color="textPrimary">
             Ce qu&rsquo;Archifiltre permet
           </Typography>
         </Box>
         <Presentation />
         <Grid container justify="center" className={classes.downloadLink}>
           <Grid item>
             <Button
-              color="inherit"
+              color="primary"
               target="_blank"
               rel="noopener"
               href="https://github.com/SocialGouv/archifiltre/wiki/Wiki-Archifiltre"
@@ -108,17 +108,17 @@ const IndexPage: FC = () => {
       <Box>
         <ProductFeatures />
       </Box>
-      <Box p={3} textAlign="center">
-        <Box p={3}>
-          <Typography variant="h5" component="h2" color="textPrimary">
+      <Box p={3}>
+        <Box p={3} textAlign="center">
+          <Typography variant="h4" component="h2" color="textPrimary">
             Ils parlent de nous
           </Typography>
         </Box>
         <HomepageTweets />
         <Grid container justify="center">
           <Grid item>
             <Button
-              color="inherit"
+              color="primary"
               component={GatsbyLink}
               to="/social"
               endIcon={<ArrowForwardIcon />}

diff --git a/src/pages/telechargements.tsx b/src/pages/telechargements.tsx
@@ -34,12 +34,12 @@ const Telechargements: FC = () => (
           <h3>
             {`${version.name} ${version.number} - ${version.date} - `}
             <Button
-              color="inherit"
+              color="primary"
               component={GatsbyLink}
               to="/changelog"
               size="small"
             >
-              Nouveautés de cette version
+              Nouveautés
             </Button>
           </h3>
           <Box>