From a05c15b0029c2f0e078e3d1cfe57b299fb7783e8 Mon Sep 17 00:00:00 2001
From: paco <34928425+pacocoursey@users.noreply.github.com>
Date: Thu, 8 Oct 2020 14:17:06 -0600
Subject: [PATCH] Footer fixes

---
 components/core/Footer/Footer.module.css |  7 --
 components/core/Footer/Footer.tsx        | 92 +++++++++++-------------
 2 files changed, 43 insertions(+), 56 deletions(-)
 delete mode 100644 components/core/Footer/Footer.module.css

diff --git a/components/core/Footer/Footer.module.css b/components/core/Footer/Footer.module.css
deleted file mode 100644
index 573fa35bc..000000000
--- a/components/core/Footer/Footer.module.css
+++ /dev/null
@@ -1,7 +0,0 @@
-.root {
-  @apply p-0 bg-black text-white;
-}
-
-.container {
-  @apply flex justify-between items-center flex-row px-4 py-5;
-}
diff --git a/components/core/Footer/Footer.tsx b/components/core/Footer/Footer.tsx
index 536dc3006..1a5fe70cc 100644
--- a/components/core/Footer/Footer.tsx
+++ b/components/core/Footer/Footer.tsx
@@ -1,7 +1,7 @@
 import cn from 'classnames'
 import { FC } from 'react'
-import s from './Footer.module.css'
-import { Container, Logo } from '@components/ui'
+import { Logo } from '@components/ui'
+import Link from 'next/link'
 
 interface Props {
   className?: string
@@ -9,55 +9,49 @@ interface Props {
 }
 
 const Footer: FC<Props> = ({ className }) => {
-  const rootClassName = cn(s.root, className)
+  const rootClassName = cn(
+    'flex flex-col p-6 md:py-12 md:flex-row bg-black text-white flex-wrap',
+    className
+  )
   return (
     <footer className={rootClassName}>
-      <Container className={s.container}>
-        <div className="my-12 grid grid-cols-2 gap-8 xl:mt-0 xl:col-span-2 py-6">
-          <div className="md:grid md:grid-cols-2 md:gap-8">
-            <div className="">
-              <div className="flex flex-row space-x-4 items-center">
-                <span className="rounded-full border border-gray-300">
-                  <Logo />
-                </span>
-                <span>ACME</span>
-              </div>
-            </div>
-            <div className="mt-12 md:mt-0">
-              <ul className="space-y-4">
-                <li>
-                  <a
-                    href="#"
-                    className="text-base leading-6 text-gray-300 hover:text-white"
-                  >
-                    About
-                  </a>
-                </li>
-                <li>
-                  <a
-                    href="#"
-                    className="text-base leading-6 text-gray-300 hover:text-white"
-                  >
-                    Terms of Use
-                  </a>
-                </li>
-                <li>
-                  <a
-                    href="#"
-                    className="text-base leading-6 text-gray-300 hover:text-white"
-                  >
-                    Privacy Policy
-                  </a>
-                </li>
-              </ul>
-            </div>
-          </div>
-          <div className="flex justify-end mt-12 md:mt-0">
-            &copy; 2020 ACME, Inc. All rights reserved.
-          </div>
-        </div>
-        <hr className="text-base leading-6 text-gray-400 xl:text-center border-t border-gray-700" />
-      </Container>
+      <Link href="/">
+        <a className="flex flex-initial items-center md:items-start font-bold md:mr-24">
+          <span className="rounded-full border border-gray-700 mr-2">
+            <Logo />
+          </span>
+          <span>ACME</span>
+        </a>
+      </Link>
+
+      <ul className="flex flex-initial flex-col divide-y divide-gray-700 md:divide-y-0 my-12 md:my-0 md:flex-1">
+        <li className="py-3 md:py-0 md:pb-4">
+          <Link href="/about">
+            <a>About</a>
+          </Link>
+        </li>
+
+        <li className="py-3 md:py-0 md:pb-4">
+          <Link href="/terms">
+            <a>Terms of Use</a>
+          </Link>
+        </li>
+
+        <li className="py-3 md:py-0 md:pb-4">
+          <Link href="/privacy">
+            <a>Privacy Policy</a>
+          </Link>
+        </li>
+      </ul>
+
+      <small className="text-base">
+        &copy; 2020 ACME, Inc. All rights reserved.
+      </small>
+
+      <hr
+        className="hidden md:block mt-4 border-gray-700"
+        style={{ flexBasis: '100%', height: 0 }}
+      />
     </footer>
   )
 }