feat: Move footer to the content column

newrelic · Jun 19, 2020 · ed41f38 · ed41f38
1 parent e623f90
commit ed41f38
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 60 deletions.
diff --git a/src/components/Footer.js b/src/components/Footer.js
@@ -14,42 +14,32 @@ const Footer = ({ className }) => {
 
   return (
     <footer className={cx(styles.footer, className)}>
-      <div className={cx('site-container', styles.container)}>
-        <div className={styles.left}>
-          <Link to="/">
-            <Logo
-              className={styles.logo}
-              textColor="#7DA5A8"
-              bracketColor="#7DA5A8"
-            />
-          </Link>
-          <div className={styles.copyright}>
-            Copyright &copy; 2020 New Relic Inc.
-          </div>
+      <div className={styles.left}>
+        <Link to="/">
+          <Logo
+            className={styles.logo}
+            textColor="currentColor"
+            bracketColor="currentColor"
+          />
+        </Link>
+        <div className={styles.copyright}>
+          Copyright &copy; 2020 New Relic Inc.
         </div>
+      </div>
 
-        <div className={styles.right}>
-          {fileRelativePath && (
-            <ExternalLink
-              href={`${githubBaseUrl}/blob/master/${fileRelativePath}`}
-            >
-              <FeatherIcon
-                className={styles.linkIcon}
-                name="edit"
-                size="1rem"
-              />
-              Edit this page
-            </ExternalLink>
-          )}
-          <ExternalLink href={`${githubBaseUrl}/issues/new/choose`}>
-            <FeatherIcon
-              className={styles.linkIcon}
-              name="github"
-              size="1rem"
-            />
-            Create an issue
+      <div className={styles.right}>
+        {fileRelativePath && (
+          <ExternalLink
+            href={`${githubBaseUrl}/blob/master/${fileRelativePath}`}
+          >
+            <FeatherIcon className={styles.linkIcon} name="edit" size="1rem" />
+            Edit this page
           </ExternalLink>
-        </div>
+        )}
+        <ExternalLink href={`${githubBaseUrl}/issues/new/choose`}>
+          <FeatherIcon className={styles.linkIcon} name="github" size="1rem" />
+          Create an issue
+        </ExternalLink>
       </div>
     </footer>
   );

diff --git a/src/components/Footer.module.scss b/src/components/Footer.module.scss
@@ -1,21 +1,16 @@
 .footer {
-  background-color: var(--color-neutrals-800);
-  color: var(--color-teal-300);
-  padding: 1.5rem 0;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  color: var(--color-neutrals-600);
   font-size: 0.75rem;
   z-index: 1;
 
-  :global(.site-container) {
-    padding: 0 2rem;
+  a {
+    color: currentColor;
   }
 }
 
-.container {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
 .left {
   display: flex;
   align-items: center;
@@ -30,9 +25,9 @@
 }
 
 .copyright {
-  margin-left: 1rem;
-  padding-left: 1rem;
-  border-left: 1px dotted var(--color-neutrals-700);
+  margin-left: 0.5rem;
+  padding-left: 0.5rem;
+  border-left: 1px dotted var(--color-neutrals-400);
 
   @media (max-width: 760px) {
     border-left: none;
@@ -45,7 +40,6 @@
   display: flex;
 
   a {
-    color: var(--color-teal-300);
     padding-right: 0;
     display: flex;
     align-items: center;

diff --git a/src/components/Layout.js b/src/components/Layout.js
@@ -22,20 +22,16 @@ const Layout = ({ children }) => {
         toggle={() => setIsMobileNavOpen(!isMobileNavOpen)}
       />
       <div className={cx(styles.main, 'site-container')}>
-        <Sidebar className={styles.hideOnMobile} />
-        <main
-          className={cx(styles.content, {
+        <Sidebar className={cx(styles.hideOnMobile)} />
+        <div
+          className={cx(styles.contentContainer, {
             [styles.hideOnMobile]: isMobileNavOpen,
           })}
         >
-          {children}
-        </main>
+          <main className={styles.content}>{children}</main>
+          <Footer className={styles.footer} />
+        </div>
       </div>
-      <Footer
-        className={cx({
-          [styles.hideOnMobile]: isMobileNavOpen,
-        })}
-      />
     </div>
   );
 };

diff --git a/src/components/Layout.module.scss b/src/components/Layout.module.scss
@@ -1,7 +1,7 @@
 .layout {
   min-height: 100vh;
   display: grid;
-  grid-template-rows: auto 1fr auto;
+  grid-template-rows: auto 1fr;
 }
 
 .main {
@@ -14,10 +14,22 @@
   }
 }
 
-.content {
+.contentContainer {
+  display: flex;
+  flex-direction: column;
   padding: 2rem;
 }
 
+.content {
+  flex: 1;
+}
+
+.footer {
+  border-top: 1px solid var(--color-neutrals-100);
+  padding-top: 2rem;
+  margin-top: 2rem;
+}
+
 .hideOnDesktop {
   @media (min-width: 760px + 1) {
     display: none;