Cleaned Footer Code, beginning to compontentize SCSS

public/components/footer/Footer.jsx

@@ -23,27 +23,35 @@
 
 import React from 'react';
 import { connect } from 'react-redux';
+import { NavLink } from 'react-router-dom';
+
+import FooterStyles from './Footer.scss';
+
 import Language from '@public/language/Language';
-import { NavLink } from 'react-router-dom'
+
 import { PageBoundary } from '@components/page/Page';
 
-const FooterLink = function(props) {
-  let key = "footer.links." + props.title;
+const FooterLink = (props) => {
+  let { title, className } = props;
   return (
-    <NavLink to={ props.to } className="c-footer__link">
-      { Language.get(key) }
+    <NavLink {...props} className={"c-footer__link"+(className?` ${className}`:``}>
+      { Language.get(`footer.links.${title}`) }
     </NavLink>
   );
 }
 
+const SITE_LAUNCH_TIMESTAMP = 1335830400000;
+
 class Footer extends React.Component {
   constructor(props) {
     super(props);
   }
 
   render() {
+    let { className } = this.props;
+
     return (
-      <footer className="c-footer">
+      <footer {...this.props} className={"c-footer"+(className?` ${className}`:``}>
         <div className="c-footer__part">
         </div>
 
@@ -57,7 +65,7 @@ class Footer extends React.Component {
             </nav>
 
             <div className="c-footer__copyright">
-              &copy; { new Date(1335830400000).getFullYear() }
+              &copy; { new Date(SITE_LAUNCH_TIMESTAMP).getFullYear() }
               ~
               { new Date().getFullYear() } Dominic Masters
             </div>
@@ -68,7 +76,7 @@ class Footer extends React.Component {
   }
 }
 
-const mapStateToProps = function(state) {
+const mapStateToProps = (state) => {
   return {
     code: state.language.code
   }

public/components/footer/Footer.scss

@@ -0,0 +1,61 @@
+/*
+ *  Footer
+ *    Site Footer!
+ *
+ *  Dependencies:
+ *    styles/settings/colors.scss
+ *    styles/settings/typography.scss
+ *    styles/tools/flex.scss
+ *    styles/tools/_box-shadow.scss
+ *
+ *  Version:
+ *    1.0.0 - 2018/05/16
+ */
+$c-footer--link-color: red;
+$c-footer--link-hover-color: blue;
+
+.c-footer {
+  @extend %t-dp--shadow-3d;
+  padding-top: 8em;
+  padding-bottom: 10em;
+  position: relative;
+  overflow: hidden;
+  background-image: url('@images/banners/palms.svg');
+  background-size: cover;
+
+  &__inner {
+    text-align: center;
+    position: relative;
+    padding: 1em 0;
+  }
+
+  &__copyright {
+    font-size: 1.2em;
+    font-family: $s-font--stack-headings;
+  }
+
+  &__links {
+    padding-bottom: 1em;
+  }
+
+  &__link {
+    color: $s-color--footer__link;
+
+    &:hover {
+      color: $s-color--footer__link-hover;
+    }
+
+    + #{&} {
+      display: inline-block;
+      margin-left: 1em;
+    }
+  }
+
+  &__part {
+    position: absolute;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    bottom: 0;
+  }
+}

public/components/header/Header.jsx

@@ -26,7 +26,7 @@ import Navbar from '@components/nav/navbar/Navbar';
 
 export default function(props) {
   return (
-    <header role="banner">
+    <header {...props} role="banner">
       <Navbar />
     </header>
   );