From fa2407803729188a79c9f3062953d625aa226de0 Mon Sep 17 00:00:00 2001
From: Dominic Masters <dominic@domsplace.com>
Date: Tue, 23 Oct 2018 17:56:05 +1100
Subject: [PATCH] Cleaned Footer Code, beginning to compontentize SCSS

---
 public/components/footer/Footer.jsx           | 24 ++++---
 .../footer/Footer.scss}                       |  2 +-
 public/components/header/Header.jsx           |  2 +-
 public/index.jsx                              |  4 +-
 public/styles/common.scss                     | 51 ++++++++++++++
 public/styles/{index.scss => global.scss}     | 67 +++----------------
 webpack.config.js                             |  3 +-
 7 files changed, 81 insertions(+), 72 deletions(-)
 rename public/{styles/components/_footer.scss => components/footer/Footer.scss} (92%)
 create mode 100644 public/styles/common.scss
 rename public/styles/{index.scss => global.scss} (51%)

diff --git a/public/components/footer/Footer.jsx b/public/components/footer/Footer.jsx
index 1a434a1..32813a3 100644
--- a/public/components/footer/Footer.jsx
+++ b/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
   }
diff --git a/public/styles/components/_footer.scss b/public/components/footer/Footer.scss
similarity index 92%
rename from public/styles/components/_footer.scss
rename to public/components/footer/Footer.scss
index f897896..9b46669 100644
--- a/public/styles/components/_footer.scss
+++ b/public/components/footer/Footer.scss
@@ -20,7 +20,7 @@ $c-footer--link-hover-color: blue;
   padding-bottom: 10em;
   position: relative;
   overflow: hidden;
-  background-image: url($s-asset--directory+'images/banners/palms.svg');
+  background-image: url('@images/banners/palms.svg');
   background-size: cover;
 
   &__inner {
diff --git a/public/components/header/Header.jsx b/public/components/header/Header.jsx
index 7bd3263..86673c5 100644
--- a/public/components/header/Header.jsx
+++ b/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>
   );
diff --git a/public/index.jsx b/public/index.jsx
index 71988a2..7ba39d4 100644
--- a/public/index.jsx
+++ b/public/index.jsx
@@ -33,8 +33,8 @@ import RootReducer from './reducers/RootReducer';
 import Keyboard from './keyboard/Keyboard';
 
 
-//Import Stylesheet
-import Styles from './styles/index';
+//Import Common Elements Stylesheet
+import Styles from './styles/common';
 
 //Import Base Component
 import App from './components/App';
diff --git a/public/styles/common.scss b/public/styles/common.scss
new file mode 100644
index 0000000..3872b18
--- /dev/null
+++ b/public/styles/common.scss
@@ -0,0 +1,51 @@
+// Copyright (c) 2018 Dominic Masters
+//
+// MIT License
+//
+// Permission is hereby granted, free of charge, to any person obtaining
+// a copy of this software and associated documentation files (the
+// "Software"), to deal in the Software without restriction, including
+// without limitation the rights to use, copy, modify, merge, publish,
+// distribute, sublicense, and/or sell copies of the Software, and to
+// permit persons to whom the Software is furnished to do so, subject to
+// the following conditions:
+//
+// The above copyright notice and this permission notice shall be
+// included in all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+// EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+// MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+// NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+// LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+// OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+// WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+/*
+ *  Common Stylesheet
+ *    Provides common element styling, particularly those that do not have a
+ *    component to go by.
+ *
+ *  Version:
+ *    2.0.0 - 2018/10/23
+ */
+@import './global.scss';
+
+//Elements
+@import './elements/all.scss';
+@import './elements/button.scss';
+@import './elements/html.scss';
+@import './elements/img.scss';
+@import './elements/inputs.scss';
+
+@import './elements/_a.scss';
+@import './elements/_body.scss';
+@import './elements/_headings.scss';
+
+//Utilities
+@import './utilities/text-align.scss';
+
+@import './utilities/_responsive.scss';
+
+//Vendor
+@import './vendor/_fonts.scss';
diff --git a/public/styles/index.scss b/public/styles/global.scss
similarity index 51%
rename from public/styles/index.scss
rename to public/styles/global.scss
index aa82219..1bd3108 100644
--- a/public/styles/index.scss
+++ b/public/styles/global.scss
@@ -21,6 +21,14 @@
 // OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
 // WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 
+/*
+ *  Global Stylesheet
+ *    Global stylesheet provides tools and common utilities for use throughout
+ *    all stylesheets. This includes settings, mixins and pseudo-classes.
+ *
+ *  Version:
+ *    1.0.0 - 2018/10/23
+ */
 @charset "UTF-8";
 
 //Settings
@@ -45,62 +53,3 @@
 @import './tools/_absolute-centering.scss';
 @import './tools/_input.scss';
 @import './tools/_shadow.scss';
-
-//Resets
-
-//Elements
-@import './elements/all.scss';
-@import './elements/button.scss';
-@import './elements/html.scss';
-@import './elements/img.scss';
-@import './elements/inputs.scss';
-
-@import './elements/_a.scss';
-@import './elements/_body.scss';
-@import './elements/_headings.scss';
-
-//Objects
-@import './objects/_background.scss';
-@import './objects/_button.scss';
-@import './objects/_box-sizer.scss';
-@import './objects/_content-box.scss';
-@import './objects/_element-scroll-fader.scss';
-@import './objects/_floating-content-box.scss';
-@import './objects/_form.scss';
-@import './objects/_input.scss';
-@import './objects/_loadable-image.scss';
-@import './objects/_loader.scss';
-@import './objects/_modal.scss';
-@import './objects/_page-transition.scss';
-@import './objects/_title.scss';
-@import './objects/_video.scss';
-@import './objects/_window95.scss';
-
-//Components
-@import './components/_app.scss';
-@import './components/_body-section.scss';
-@import './components/_clear-section.scss';
-@import './components/_footer.scss';
-@import './components/_hamburger-menu.scss';
-@import './components/_image-section.scss';
-@import './components/_main.scss';
-@import './components/_navbar.scss';
-@import './components/_page.scss';
-@import './components/_section.scss';
-@import './components/_split-section.scss';
-@import './components/_video-section.scss';
-
-//Pages
-@import './pages/_contact-page.scss';
-@import './pages/_home-page.scss';
-@import './pages/_privacy-policy-page.scss';
-
-//Utilities
-@import './utilities/text-align.scss';
-
-@import './utilities/_responsive.scss';
-
-//Vendor
-@import './vendor/_fonts.scss';
-
-//Trumps
diff --git a/webpack.config.js b/webpack.config.js
index 49f966c..b164301 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -34,7 +34,8 @@ module.exports = {
       '@components': path.resolve(__dirname, './public/components'),
       '@assets': path.resolve(__dirname, './public/assets'),
       '@pages': path.resolve(__dirname, './public/pages'),
-      '@common': path.resolve(__dirname, './common/')
+      '@common': path.resolve(__dirname, './common/'),
+      '@styles': path.resolve(__dirname, './public/styles')
     }
   },