feat(Footer): divide <Footer /> between 'top' and 'bottom'

aneurysmjs · Jun 30, 2019 · d1e323d · d1e323d
1 parent b345775
commit d1e323d
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 12 deletions.
diff --git 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
@@ -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;
   }