Styled footer a touch

public/footer/Footer.jsx

@@ -30,11 +30,9 @@ import { PageBoundary } from './../page/Page';
 const FooterLink = function(props) {
   let key = "footer.links." + props.title;
   return (
-    <span className="c-footer__link">
+    <NavLink to={ props.to } className="c-footer__link">
-      <NavLink to={ props.to }>
       { Language.get(key) }
     </NavLink>
-    </span>
   );
 }
 

public/styles/components/_footer.scss

@@ -3,22 +3,25 @@
  *    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--shadow: 1.5em;
+$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;
-  @include t-box-shadow(0px, $c-footer--shadow, $c-footer--shadow, 0px, rgba(0, 0, 0, 0.25), true);
 
   &__inner {
     text-align: center;
@@ -36,10 +39,15 @@ $c-footer--shadow: 1.5em;
   }
 
   &__link {
+    color: $s-color--footer__link;
+
+    &:hover {
+      color: $s-color--footer__link-hover;
+    }
 
     + #{&} {
       display: inline-block;
-    padding-left: 1em;
+      margin-left: 1em;
     }
   }
 

public/styles/settings/colors.scss

@@ -47,6 +47,10 @@ $s-color--menu__background: rgba(0, 0, 0, 0.8);
 //loader
 $s-color--loader: $s-color--swatch-blue;
 
+//Footer Colors
+$s-color--footer__link: black;
+$s-color--footer__link-hover: white;
+
 /*** Buttons and Inputs ***/
 
 //Defaults

public/styles/tools/_shadow.scss

@@ -15,3 +15,8 @@
     $s-color--shadow
   );
 }
+
+
+%t-dp--shadow-3d {
+  @include t-box-shadow(0px, 1.5em, 1.5em, 0px, rgba(0, 0, 0, 0.25), true);
+}