From 24cea99ee08825de3d3f68b743b4ea237d4d2f1e Mon Sep 17 00:00:00 2001
From: Zack Stickles <zstickles@gmail.com>
Date: Tue, 16 Jun 2020 10:10:46 -0700
Subject: [PATCH] feat: added links in footer

---
 src/components/Footer.js          | 33 +++++++++++++++++++----
 src/components/Footer.module.scss | 44 ++++++++++++++++++++++++++++---
 src/components/styles.scss        |  5 ++++
 3 files changed, 73 insertions(+), 9 deletions(-)

diff --git a/src/components/Footer.js b/src/components/Footer.js
index 9b13b6003..b12906926 100644
--- a/src/components/Footer.js
+++ b/src/components/Footer.js
@@ -1,16 +1,39 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import { Link } from 'gatsby';
+import cx from 'classnames';
 import styles from './Footer.module.scss';
 
-const Footer = () => (
+const Footer = ({ showEdit }) => (
   <footer className={styles.footer}>
-    <div className={styles.leftColumn}>
-      <Link to="/" className={`${styles.logo} logo`} />
-      <div className={styles.copyright}>
-        Copyright &copy; 2020 New Relic Inc.
+    <div className={cx('container', styles.container)}>
+      <div className={styles.left}>
+        <Link to="/" className={`${styles.logo} logo`} />
+        <div className={styles.copyright}>
+          Copyright &copy; 2020 New Relic Inc.
+        </div>
+      </div>
+
+      <div className={styles.right}>
+        {showEdit && (
+          <Link to="/" className={styles.edit}>
+            Edit this page
+          </Link>
+        )}
+        <Link to="/" className={styles.issue}>
+          Create an issue
+        </Link>
       </div>
     </div>
   </footer>
 );
 
+Footer.propTypes = {
+  showEdit: PropTypes.bool,
+};
+
+Footer.defaultProps = {
+  showEdit: true,
+};
+
 export default Footer;
diff --git a/src/components/Footer.module.scss b/src/components/Footer.module.scss
index 9142f88db..3c48f2f0f 100644
--- a/src/components/Footer.module.scss
+++ b/src/components/Footer.module.scss
@@ -1,13 +1,19 @@
 .footer {
-  --footer-text-color: #7da5a8;
-
+  --footer-text-color: #70ccd3;
   background-color: var(--color-neutrals-800);
   color: var(--footer-text-color);
   padding: 1.5rem 0;
   margin-top: 10rem;
+  font-size: 0.75rem;
 }
 
-.leftColumn {
+.container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.left {
   display: flex;
   align-items: center;
 
@@ -25,7 +31,6 @@
 }
 
 .copyright {
-  font-size: 0.75rem;
   margin-left: 1rem;
   padding: 0.75rem 0.5rem;
   border-left: 1px dotted var(--color-neutrals-700);
@@ -36,3 +41,34 @@
     padding: 0.5rem;
   }
 }
+
+.right {
+  display: flex;
+
+  a {
+    color: var(--footer-text-color);
+    margin-left: 1rem;
+    padding: 0.2rem;
+    padding-right: 0;
+    display: flex;
+    align-items: center;
+
+    &:before {
+      content: '';
+      display: inline-block;
+      height: 1rem;
+      width: 1rem;
+      background-repeat: no-repeat;
+      background-position: center center;
+      margin-right: 0.5rem;
+    }
+  }
+}
+
+.edit:before {
+  background-image: url('../images/edit.svg');
+}
+
+.issue:before {
+  background-image: url('../images/github.svg');
+}
diff --git a/src/components/styles.scss b/src/components/styles.scss
index 554ff7533..3f91741ba 100644
--- a/src/components/styles.scss
+++ b/src/components/styles.scss
@@ -184,4 +184,9 @@ code {
     font-size: 1.125rem;
     line-height: 2rem;
   }
+
+  .container {
+    max-width: 1200px;
+    margin: auto;
+  }
 }