Modify PageFooter to Reflect Icons

stuyspec · Apr 21, 2021 · 8474878 · 8474878
1 parent 1d18274
commit 8474878
Showing 1 changed file with 64 additions and 0 deletions.
diff --git a/src/modules/core/components/PageFooter.tsx b/src/modules/core/components/PageFooter.tsx
@@ -5,6 +5,7 @@ import { Grid, Row, Col } from "react-bootstrap/lib";
 import injectSheet from "react-jss";
 import DescriptionLinks from "./DescriptionLinks";
 import { Description } from "../types";
+import { Instagram, Facebook, Linkedin, Github } from "../icons";
 
 const styles = {
   PageFooter: {
@@ -60,6 +61,52 @@ const styles = {
     fontStyle: "normal",
     fontWeight: 400,
     paddingTop: "10px",
+    paddingRight: '10px',
+    "&:hover, &:active, &:focus": {
+      color: "#000",
+      textDecoration: "none"
+    }
+  },
+  Instagram: {
+    color: "#000",
+    fontSize: "25px",
+    fontWeight: 400,
+    paddingTop: "10px",
+    paddingRight: '10px',
+    "&:hover, &:active, &:focus": {
+      color: "#000",
+      textDecoration: "none"
+    }
+  },
+  Facebook: {
+    color: "#000",
+    fontSize: "25px",
+    fontWeight: 400,
+    paddingTop: "10px",
+    paddingRight: '10px',
+    "&:hover, &:active, &:focus": {
+      color: "#000",
+      textDecoration: "none"
+    }
+  },
+  // might be a little redundant
+  Github: {
+    color: "#000",
+    fontSize: "25px",
+    fontWeight: 400,
+    paddingTop: "10px",
+    paddingRight: '10px',
+    "&:hover, &:active, &:focus": {
+      color: "#000",
+      textDecoration: "none"
+    }
+  },
+  Linkedin: {
+    color: "#000",
+    fontSize: "25px",
+    fontWeight: 400,
+    paddingTop: "10px",
+    paddingRight: '10px',
     "&:hover, &:active, &:focus": {
       color: "#000",
       textDecoration: "none"
@@ -169,6 +216,23 @@ const PageFooter: React.SFC<PageFooterProps> = ({
           <Link to="/" className={classes.theSpectator}>
             The Spectator
           </Link>
+          <a href="https://www.instagram.com/stuyspectator/" 
+              className={classes.Instagram}>
+            <Instagram />
+          </a>
+          <a href="https://www.facebook.com/stuyspectator" 
+              className={classes.Facebook}>
+            <Facebook />
+          </a>
+          {/* {Might add back later} */}
+          {/* <a href="https://github.com/stuyspec" 
+              className={classes.Github}>
+            <Github/>
+          </a> */}
+          <a href="https://www.linkedin.com/company/the-stuyvesant-spectator" 
+              className={classes.Linkedin}>
+            <Linkedin/>
+          </a>
         </Col>
         <Col
           xs={12}