From 8a70f14319cbeaf8cdecf9f033c7141f471c8156 Mon Sep 17 00:00:00 2001
From: Valeriy S <ValeraS@users.noreply.github.com>
Date: Thu, 24 Jan 2019 16:02:37 +0300
Subject: [PATCH] fix(client): footer: use react-bootstrap, simplify layout,
 correct links

---
 client/src/components/Footer/footer.css |  16 ++-
 client/src/components/Footer/index.js   | 139 ++++++++++++++++--------
 2 files changed, 105 insertions(+), 50 deletions(-)

diff --git a/client/src/components/Footer/footer.css b/client/src/components/Footer/footer.css
index 0813b77dbd..59c581f60f 100644
--- a/client/src/components/Footer/footer.css
+++ b/client/src/components/Footer/footer.css
@@ -1,13 +1,21 @@
-footer {
-  position: absolute;
+.footer {
   background-color: #e0e0e0;
   color: #555555;
-  background-size: cover;
   font-size: 0.9em;
   width: 100%;
   padding-top: 40px;
 }
 
-footer b {
+.footer .col-header {
   padding-bottom: 5px;
+  font-weight: bold;
+}
+
+.footer a:not([class*='inline']) {
+  display: block;
+}
+
+.footer .external-link-icon {
+  margin-left: 5px;
+  color: #6d6d6d;
 }
diff --git a/client/src/components/Footer/index.js b/client/src/components/Footer/index.js
index c7722afd0d..bdc8e77351 100644
--- a/client/src/components/Footer/index.js
+++ b/client/src/components/Footer/index.js
@@ -1,13 +1,44 @@
-/* eslint-disable max-len*/
 import React from 'react';
+import { Link as GatsbyLink } from 'gatsby';
+import { Grid, Row, Col } from '@freecodecamp/react-bootstrap';
+import FontAwesomeIcon from '@fortawesome/react-fontawesome';
+import { faExternalLinkAlt } from '@fortawesome/free-solid-svg-icons';
+
 import './footer.css';
 
+const ColHeader = ({ children, ...other }) => (
+  <div className='col-header' {...other}>
+    {children}
+  </div>
+);
+
+const Link = ({ children, to, external, ...other }) => {
+  if (!external && (/^\/(?!\/)/).test(to)) {
+    return (
+      <GatsbyLink to={to} {...other}>
+        {children}
+      </GatsbyLink>
+    );
+  }
+
+  return (
+    <a href={to} {...other} rel='noopener noreferrer' target='_blank'>
+      {children}
+      <FontAwesomeIcon
+        className='external-link-icon'
+        icon={faExternalLinkAlt}
+        size='xs'
+      />
+    </a>
+  );
+};
+
 function Footer() {
   return (
-    <footer className='pt-5 pb-4 footer' id='contact'>
-      <div className='container'>
-        <div className='row'>
-          <div className='col-lg-5 col-md-6 col-sm-6  '>
+    <footer className='footer'>
+      <Grid>
+        <Row>
+          <Col lg={5} sm={6}>
             <p>
               freeCodeCamp is a donor-supported tax-exempt 501(c)(3) nonprofit
               organization (United States Federal Tax Identification Number:
@@ -18,52 +49,68 @@ function Footer() {
               this by creating thousands of videos, articles, and interactive
               coding lessons - all freely available to the public. We also have
               thousands of freeCodeCamp study groups around the world.
-            </p><p>
+            </p>
+            <p>
               Donations to freeCodeCamp go toward our education initiatives, and
               help pay for servers, services, and staff. You can&nbsp;
-              <a className='underline  white' href='https://donate.freecodecamp.org'>make a tax-deductible donation here</a>.
+              <Link className='inline' href='https://donate.freecodecamp.org'>
+                make a tax-deductible donation here
+              </Link>
+              .
             </p>
-          </div>
-           <div className='col-lg-2 col-md-2 col-sm-2 col-xs-6'>
-             <div className='row'>
-              <b className='paddingLow  font-weight-bold col-xs-12'>Our Nonprofit</b>
-              <a className=' col-xs-12' href='https://about.freecodecamp.org'>About </a>
-              <a className=' col-xs-12' href='https://donate.freecodecamp.org'>Donate</a>
-              <a className=' col-xs-12' href='https://shop.freecodecamp.org'>Shop</a>
-              <a className=' col-xs-12' href='https://sponsors.freecodecamp.org'>Sponsors</a>
-              <a className=' col-xs-12' href='mailto:team@freecodecamp.org'>Contact email</a>
-            </div>
-           </div>
-           <div className='col-lg-2 col-md-2 col-sm-2 col-xs-6'>
-             <div className='row'>
-              <b className='paddingLow  font-weight-bold col-xs-12'>Our Community</b>
-              <a className=' col-xs-12' href='https://www.linkedin.com/school/free-code-camp/people/'>Alumni Network </a>
-              <a className=' col-xs-12' href='https://study-group-directory.freecodecamp.org'>Study Groups </a>
-              <a className=' col-xs-12' href='https://www.freecodecamp.org/forum'>Forum </a>
-              <a className=' col-xs-12' href='https://gitter.im/FreeCodeCamp/home'>Gitter </a>
-              <a className=' col-xs-12' href='https://github.com/freeCodeCamp/'>GitHub</a>
-              <a className=' col-xs-12' href='https://support.freecodecamp.org'>Support </a>
-              <a className=' col-xs-12' href='https://code-of-conduct.freecodecamp.org'>Code of Conduct </a>
-              <a className=' col-xs-12' href='https://privacy.freecodecamp.org'>Privacy Policy</a>
-              <a className=' col-xs-12' href='https://terms-of-service.freecodecamp.org'>Terms of Service </a>
-             </div>
-           </div>
-           <div className='col-lg-3 col-md-2 col-sm-2 col-xs-12'>
-             <div className='row'>
-              <b className='paddingLow  font-weight-bold col-xs-12'>Our Learning Resources</b>
-              <a className=' col-xs-12' href='https://learn.freecodecamp.org'>Curriculum </a>
-              <a className=' col-xs-12' href='https://guide.freecodecamp.org'>Guide </a>
-              <a className=' col-xs-12' href='https://www.youtube.com/freecodecamp'>Youtube </a>
-              <a className=' col-xs-12' href='https://podcast.freecodecamp.org'>Podcast </a>
-              <a className=' col-xs-12' href='https://twitter.com/freecodecamp'>Twitter </a>
-              <a className=' col-xs-12' href='https://medium.freecodecamp.org'>Medium </a>
-              <a className=' col-xs-12' href='https://instagram.com/freecodecamp'>Instagram </a>
-            </div>
-           </div>
-        </div>
-      </div>
+          </Col>
+          <Col sm={2} xs={6}>
+            <ColHeader>Our Nonprofit</ColHeader>
+            <Link to='https://about.freecodecamp.org'>About</Link>
+            <Link to='https://donate.freecodecamp.org'>Donate</Link>
+            <Link to='https://shop.freecodecamp.org'>Shop</Link>
+            <Link to='https://sponsors.freecodecamp.org'>Sponsors</Link>
+            <Link to='mailto:team@freecodecamp.org'>Contact email</Link>
+          </Col>
+          <Col sm={2} xs={6}>
+            <ColHeader>Our Community</ColHeader>
+            <Link external={true} to='/news'>
+              News
+            </Link>
+            <Link to='https://www.linkedin.com/school/free-code-camp/people/'>
+              Alumni Network
+            </Link>
+            <Link to='https://study-group-directory.freecodecamp.org'>
+              Study Groups
+            </Link>
+            <Link external={true} to='/forum'>
+              Forum
+            </Link>
+            <Link to='https://gitter.im/FreeCodeCamp/home'>Gitter</Link>
+            <Link to='https://github.com/freeCodeCamp/'>GitHub</Link>
+            <Link to='https://support.freecodecamp.org'>Support</Link>
+            <Link to='https://code-of-conduct.freecodecamp.org'>
+              Code of Conduct
+            </Link>
+            <Link to='https://privacy.freecodecamp.org'>Privacy Policy</Link>
+            <Link to='https://terms-of-service.freecodecamp.org'>
+              Terms of Service
+            </Link>
+          </Col>
+          <Col lg={3} sm={2} xs={12}>
+            <ColHeader>Our Learning Resources</ColHeader>
+            <Link target='_blank' to='/learn'>
+              Curriculum
+            </Link>
+            <Link target='_blank' to='/guide'>
+              Guide
+            </Link>
+            <Link to='https://www.youtube.com/freecodecamp'>Youtube</Link>
+            <Link to='https://podcast.freecodecamp.org'>Podcast</Link>
+            <Link to='https://twitter.com/freecodecamp'>Twitter</Link>
+            <Link to='https://medium.freecodecamp.org'>Medium</Link>
+            <Link to='https://instagram.com/freecodecamp'>Instagram</Link>
+          </Col>
+        </Row>
+      </Grid>
     </footer>
   );
 }
 
+Footer.displayName = 'Footer';
 export default Footer;