fix(FE): home refactor UI (#412)

webapp/package.json

@@ -44,6 +44,7 @@
     "apollo-link-ws": "^1.0.20",
     "apollo-utilities": "^1.3.4",
     "axios": "^0.19.2",
+    "clsx": "^1.1.1",
     "d3-force": "^2.1.1",
     "d3-geo": "^1.12.1",
     "d3-geo-projection": "^2.9.0",

webapp/src/components/Footer/index.js

@@ -0,0 +1,35 @@
+import React from 'react'
+import { makeStyles } from '@material-ui/styles'
+import { Grid, List, ListItemText, ListItem, Box } from '@material-ui/core'
+
+import { generalConfig } from '../../config'
+
+import styles from './styles'
+
+const useStyles = makeStyles(styles)
+
+const Footer = () => {
+  const classes = useStyles()
+
+  return (
+    <Box className={classes.wrapper}>
+      <Grid container item xs={12}>
+        <List>
+          {generalConfig.footerLinks.map((link, index) => (
+            <ListItem className={classes.listItem} key={index}>
+              <ListItemText
+                primary={
+                  <a href={link.src} target="_blank" rel="noopener noreferrer">
+                    {link.text}
+                  </a>
+                }
+              />
+            </ListItem>
+          ))}
+        </List>
+      </Grid>
+    </Box>
+  )
+}
+
+export default Footer

webapp/src/components/Footer/styles.js

@@ -0,0 +1,23 @@
+export default (theme) => ({
+  wrapper: {
+    padding: `${theme.spacing(1) / 4}px ${theme.spacing(4)}px`,
+    background: theme.palette.common.white,
+    position: 'relative'
+  },
+  listItem: {
+    display: 'inline-block',
+    width: 'auto',
+    paddingLeft: theme.spacing(2),
+    paddingRight: theme.spacing(2),
+    '&, &:hover, &:active': {
+      color: theme.palette.common.black
+    },
+    '& a': {
+      color: theme.sidebar.footer.color,
+      lineHeight: '20px',
+      textAlign: 'center',
+      letterSpacing: '0.1px',
+      textDecoration: 'none'
+    }
+  }
+})