From d1e323d87259cc4607e76a37aabbc99d30979b36 Mon Sep 17 00:00:00 2001
From: jero <aneurysmjs@outlook.com>
Date: Sun, 30 Jun 2019 14:46:11 -0500
Subject: [PATCH] feat(Footer): divide <Footer /> between 'top' and 'bottom'

---
 src/app/components/core/Footer/Footer.js   | 30 +++++++++++++---------
 src/app/components/core/Footer/Footer.scss | 10 ++++++++
 2 files changed, 28 insertions(+), 12 deletions(-)

diff --git a/src/app/components/core/Footer/Footer.js b/src/app/components/core/Footer/Footer.js
index 93284f35..11db61b1 100755
--- a/src/app/components/core/Footer/Footer.js
+++ b/src/app/components/core/Footer/Footer.js
@@ -23,21 +23,27 @@ class Footer extends Component<PropsType> {
     } = this.props;
 
     return (
-      <footer className="footer container">
-        <div className="row">
-          <div className="col">
-            <div data-testid="social">
-              {social && social.map(s => (
-                <Icon
-                  key={s.id}
-                  path={`social/${s.icon}`}
-                />
-              ))}
+      <footer className="footer">
+        <div className="container">
+          <div className="footer__top">
+            <div className="row">
+              <div className="col">
+                <div data-testid="social">
+                  {social && social.map(s => (
+                    <Icon
+                      key={s.id}
+                      path={`social/${s.icon}`}
+                    />
+                  ))}
+                </div>
+              </div>
             </div>
           </div>
         </div>
-        <div className="footer__copyright">
-          <p data-testid="copyright">Copyright © {new Date().getFullYear()}. All Rights Reserved</p>
+        <div className="footer__bottom">
+          <div className="footer__copyright">
+            <span data-testid="copyright">Copyright © {new Date().getFullYear()}. All Rights Reserved</span>
+          </div>
         </div>
       </footer>
     );
diff --git a/src/app/components/core/Footer/Footer.scss b/src/app/components/core/Footer/Footer.scss
index 2a29f65a..2314a49c 100755
--- a/src/app/components/core/Footer/Footer.scss
+++ b/src/app/components/core/Footer/Footer.scss
@@ -11,7 +11,17 @@
     width: px-to-rem(200);
   }
 
+  @include element(bottom) {
+    background: var(--dark);
+    padding: px-to-rem(15) 0;
+  }
+
+  @include element(top) {
+    padding: px-to-rem(15) 0;
+  }
+
   @include element(copyright) {
+    color: var(--white);
     text-align: center;
   }