Update header and footer to use MUI (orcasound#14)

* add footer * update Footer.js * update Footer.js * update Footer.js * update Footer.js * update Nav.js
evanjscallan · Jan 29, 2022 · bf4f420 · bf4f420
1 parent ae6aec0
commit bf4f420
Show file tree

Hide file tree

Showing 13 changed files with 1,106 additions and 168 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -3,5 +3,8 @@
     "source.fixAll.eslint": true
   },
   "editor.formatOnSave": true,
-  "editor.defaultFormatter": "esbenp.prettier-vscode"
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "[javascriptreact]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  }
 }
diff --git a/components/Footer.js b/components/Footer.js
@@ -1,7 +1,140 @@
-import FacebookIcon from '@material-ui/icons/Facebook'
-import InstagramIcon from '@material-ui/icons/Instagram'
-import LinkedInIcon from '@material-ui/icons/LinkedIn'
-import RedditIcon from '@material-ui/icons/Reddit'
-import TwitterIcon from '@material-ui/icons/Twitter'
+import * as React from 'react'
+import AppBar from '@mui/material/AppBar'
+import Box from '@mui/material/Box'
+import Toolbar from '@mui/material/Toolbar'
+import Typography from '@mui/material/Typography'
+import Button from '@mui/material/Button'
 import Link from 'next/link'
-import Button from 'react-bootstrap/Button'
+import YouTubeIcon from '@mui/icons-material/YouTube'
+import InstagramIcon from '@mui/icons-material/Instagram'
+import TwitterIcon from '@mui/icons-material/Twitter'
+import NotificationsIcon from '@mui/icons-material/Notifications'
+import FacebookIcon from '@mui/icons-material/Facebook'
+import LinkedInIcon from '@mui/icons-material/LinkedIn'
+import useCheckMobileScreen from '../utils/useCheckMobileScreen'
+import { makeStyles } from '@mui/styles'
+
+const useStyles = makeStyles({
+  footer_mobile: {
+    backgroundColor: '#080d26',
+    padding: '20px',
+  },
+  typo: {
+    color: 'white',
+    marginRight: '32px',
+    '&:hover': {
+      textDecoration: 'none',
+      color: 'white',
+      cursor: 'pointer',
+    },
+  },
+  div: {
+    flexGrow: 1,
+  },
+  icon: {
+    marginRight: '4px',
+    color: 'white',
+    '&:hover': {
+      cursor: 'pointer',
+      color: 'white',
+    },
+  },
+  iconContainer: {
+    marginRight: '32px',
+  },
+  footer: {
+    backgroundColor: '#080d26',
+  },
+})
+
+export default function Footer() {
+  const classes = useStyles()
+  const isMobile = useCheckMobileScreen()
+
+  const iconContainer = (
+    <div className={classes.iconContainer}>
+      <a href="https://www.facebook.com/OrcasoundApp/" className={classes.icon}>
+        <FacebookIcon fontSize="large" />
+      </a>
+      <a
+        href="https://www.linkedin.com/company/75491849/admin/"
+        className={classes.icon}
+      >
+        <LinkedInIcon fontSize="large" />
+      </a>
+      <a
+        href="https://www.youtube.com/channel/UC7b3tOVQg8_fzaZBj4NoAEg"
+        className={classes.icon}
+      >
+        <YouTubeIcon fontSize="large" />
+      </a>
+      <a href="https://twitter.com/OrcasoundApp" className={classes.icon}>
+        <TwitterIcon fontSize="large" />
+      </a>
+      <a
+        href="https://www.instagram.com/orcasoundapp/"
+        className={classes.icon}
+      >
+        <InstagramIcon fontSize="large" />
+      </a>
+    </div>
+  )
+
+  const sendFeedbackLink = (
+    <Link href="/">
+      <Typography variant="h6" component="a" className={classes.typo}>
+        Send Feedback
+      </Typography>
+    </Link>
+  )
+
+  const blogLink = (
+    <Link href="/">
+      <Typography variant="h6" component="a" className={classes.typo}>
+        Blog
+      </Typography>
+    </Link>
+  )
+
+  if (isMobile)
+    return (
+      <Box sx={{ flexGrow: 1 }}>
+        <AppBar position="static" className={classes.footer_mobile}>
+          <div>{sendFeedbackLink}</div>
+          <div>{blogLink}</div>
+          <div>
+            <Link href="/">
+              <Typography variant="h6" component="a" className={classes.typo}>
+                Donate
+              </Typography>
+            </Link>
+          </div>
+          {iconContainer}
+        </AppBar>
+      </Box>
+    )
+  return (
+    <Box sx={{ flexGrow: 1 }}>
+      <AppBar position="static" className={classes.footer}>
+        <Toolbar>
+          <div className={classes.div}></div>
+          {sendFeedbackLink}
+          {blogLink}
+          {iconContainer}
+          <Button
+            variant="contained"
+            sx={{
+              color: 'black',
+              backgroundColor: 'white',
+              borderRadius: '100px',
+              '&:hover': { color: 'black', backgroundColor: 'white' },
+            }}
+            startIcon={<NotificationsIcon sx={{ color: '#F79234' }} />}
+          >
+            Donate
+          </Button>
+        </Toolbar>
+      </AppBar>
+    </Box>
+  )
+}
diff --git a/components/Layout.js b/components/Layout.js
@@ -2,6 +2,7 @@ import Navbar from 'react-bootstrap/Navbar'
 
 import styles from '../styles/Layout.module.css'
 import Nav from './Nav'
+import Footer from './Footer'
 
 const Layout = ({ children }) => {
   return (
@@ -11,6 +12,7 @@ const Layout = ({ children }) => {
       <div className={styles.container}>
         <main className={styles.main}>{children}</main>
       </div>
+      <Footer />
     </>
   )
 }