improving footer

Sammers21 · Sep 24, 2023 · d9a7b8d · d9a7b8d
1 parent 16c8f38
commit d9a7b8d
Show file tree

Hide file tree

Showing 4 changed files with 136 additions and 31 deletions.
diff --git a/.gitignore b/.gitignore
@@ -5,4 +5,5 @@ bin/
 .vscode/
 out/
 src/io/github/sammers/.DS_Store
-docker-compose.yml
+docker-compose.yml
+.env
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -5,6 +5,8 @@
   "dependencies": {
     "@emotion/react": "^11.10.6",
     "@emotion/styled": "^11.10.6",
+    "@fortawesome/free-brands-svg-icons": "^6.4.2",
+    "@fortawesome/react-fontawesome": "^0.2.0",
     "@loadable/component": "^5.15.3",
     "@mui/icons-material": "^5.11.11",
     "@mui/lab": "^5.0.0-alpha.134",

diff --git a/frontend/src/components/Footer/index.jsx b/frontend/src/components/Footer/index.jsx
@@ -1,54 +1,78 @@
-import React, {useEffect, useState} from 'react';
-import {Grid, Link} from '@mui/material';
-import GitHubIcon from '@mui/icons-material/GitHub';
-
+import React, { useEffect, useState } from "react";
+import { Grid, Link, Typography } from "@mui/material";
+import Box from "@mui/material/Box";
+import GitHubIcon from "@mui/icons-material/GitHub";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faDiscord } from "@fortawesome/free-brands-svg-icons";
 const Footer = () => {
   const [width, setWidth] = useState(window.innerWidth);
   useEffect(() => {
-    window.addEventListener('resize', function () {
+    window.addEventListener("resize", function () {
       setWidth(window.innerWidth);
     });
     return () => {
-      window.removeEventListener('resize', function () {
+      window.removeEventListener("resize", function () {
         setWidth(window.innerWidth);
       });
-    }
+    };
   }, []);
   const isMobile = width <= 900;
-  let justifyContent = 'space-between';
+  let justifyContent = "space-between";
   if (isMobile) {
-    justifyContent = 'center';
+    justifyContent = "center";
   }
-  let madeBySammers = <Grid>
-    Made by<span> </span>
-    <Link underline="none" href="https://github.com/Sammers21">
-      Sammers
-    </Link>
-  </Grid>;
-  let giveItAStar = <Link
-  sx={{ textDecoration: "none", boxShadow: "none", display: 'flex' }}
-    underline="none"
-    href="https://github.com/Sammers21/pvpqnet"
-  >
-    Source Code
-    <GitHubIcon sx={{marginLeft: '8px'}}/>
-  </Link>;
+  let madeBySammers = (
+    <Grid>
+      Made by<span> </span>
+      <Link underline="none" href="https://github.com/Sammers21">
+        Sammers
+      </Link>
+    </Grid>
+  );
+  let properStar = (
+    <Box sx={{ display: "flex", alignItems: "center" }}>
+      <Link
+        href="https://github.com/Sammers21/pvpqnet"
+        color="#FFFFFF"
+        sx={{
+          textDecoration: "none",
+          boxShadow: "none",
+          display: "flex",
+          alignItems: "center",
+        }}
+      >
+        <GitHubIcon sx={{ marginLeft: "4px" }} />
+      </Link>
+      <Link
+        href="https://discord.com/users/343752113752506379"
+        color="#FFFFFF"
+        sx={{
+          textDecoration: "none",
+          boxShadow: "none",
+          display: "flex",
+          alignItems: "center",
+        }}
+      > 
+      <Box sx={{ marginLeft: "8px" }}> <FontAwesomeIcon icon={faDiscord}/></Box>
+      </Link>
+    </Box>
+  );
   return (
     <Grid
       sx={{
-        position: 'fixed',
-        display: 'flex',
+        position: "fixed",
+        display: "flex",
         justifyContent: justifyContent,
         bottom: 0,
         left: 0,
-        padding: '6px 32px',
-        border: '1px #2f384de6 solid',
-        background: '#141415',
-        width: '100%',
+        padding: "6px 32px",
+        border: "1px #2f384de6 solid",
+        background: "#141415",
+        width: "100%",
       }}
     >
       {madeBySammers}
-      { !isMobile && giveItAStar}
+      {!isMobile && properStar}
     </Grid>
   );
 };