From c004f96245b1aececc8950e61f3cf9ea63cd64d4 Mon Sep 17 00:00:00 2001
From: Carl Kittelberger <icedream@icedream.pw>
Date: Sun, 20 Aug 2017 04:56:14 +0200
Subject: [PATCH] Split off footer into separate component, fix CSS properties.

---
 src/App.jsx     |  6 ++++--
 src/App.sass    | 18 +-----------------
 src/Footer.jsx  | 23 +++++++++++++++++++++++
 src/Footer.sass | 10 ++++++++++
 src/Header.sass |  2 +-
 5 files changed, 39 insertions(+), 20 deletions(-)
 create mode 100644 src/Footer.jsx
 create mode 100644 src/Footer.sass

diff --git a/src/App.jsx b/src/App.jsx
index 81b0c3a..8de7a2d 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -5,6 +5,7 @@ import 'react-fontawesome';
 import WebFont from 'webfontloader';
 import Countdown from './Countdown';
 import Header from './Header';
+import Footer from './Footer';
 import getUpcomingDate from './getUpcomingDate';
 
 import style from './App.sass';
@@ -79,9 +80,10 @@ class App extends React.Component {
           </p>
           <Countdown date={nextUpcomingDate} />
         </div>
-        <div className={style.footer}>
+
+        <Footer>
           Made by Icedream & MAGIC
-        </div>
+        </Footer>
       </div>
     );
   }
diff --git a/src/App.sass b/src/App.sass
index f178e33..22094ad 100644
--- a/src/App.sass
+++ b/src/App.sass
@@ -6,8 +6,6 @@
   font-family: 'Titillium Web', sans-serif
   display: flex
   flex-direction: column
-  justify-content: stretch
-  align-items: center
 
 .content
   color: #838383
@@ -15,21 +13,7 @@
   width: 100%
   max-width: 1024px
   padding: 1em 0
-  box-sizing: content-box
-  flex-grow: 1
   text-align: center
-
-.footer
-  color: #fff
-  right: 0
-  bottom: 0
-  left: 0
-  padding: 5px 0
-  border: 0
-  border-top: 1px solid white
-  opacity: .1
-  font-size: 20px
-  text-align: right
-  width: 100%
+  flex: 1 0 auto
 
 // @FIXME - known issue: padding will be treated like outer margins, causes scrollbars to appear
diff --git a/src/Footer.jsx b/src/Footer.jsx
new file mode 100644
index 0000000..420cb9f
--- /dev/null
+++ b/src/Footer.jsx
@@ -0,0 +1,23 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import style from './Footer.sass';
+
+export default function Footer({ className, children }) {
+  return (
+    <footer className={[style.footer, className].join(' ')}>
+      {children}
+    </footer>
+  );
+}
+
+Footer.propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.string,
+};
+
+
+Footer.defaultProps = {
+  children: null,
+  className: null,
+};
diff --git a/src/Footer.sass b/src/Footer.sass
new file mode 100644
index 0000000..1149601
--- /dev/null
+++ b/src/Footer.sass
@@ -0,0 +1,10 @@
+.footer
+  color: #fff
+  padding: 5px 0
+  border: 0
+  border-top: 1px solid white
+  opacity: .1
+  font-size: 0.9em
+  text-align: right
+  width: 100%
+  flex: 0 0 content
diff --git a/src/Header.sass b/src/Header.sass
index 263a800..d9a274e 100644
--- a/src/Header.sass
+++ b/src/Header.sass
@@ -3,6 +3,6 @@
   font-family: 'Colaborate', sans-serif
   font-size: 1.5em
   text-align: center
-  z-index: 2
   padding: 12px 0
   width: 100%
+  flex: 0 0 content