From 002b5ff18d43daa2ef2e9bd2e12f384d672fba00 Mon Sep 17 00:00:00 2001
From: Rebecca-Chou <beihaozhou@gmail.com>
Date: Tue, 27 Sep 2022 19:47:21 -0400
Subject: [PATCH] adjust space

---
 components/BottomNav.module.css | 10 ++++++---
 components/BottomNav.tsx        | 40 +++++++++++++++++++++------------
 pages/playground.tsx            |  4 +++-
 3 files changed, 36 insertions(+), 18 deletions(-)

diff --git a/components/BottomNav.module.css b/components/BottomNav.module.css
index 072bf61..a97b565 100644
--- a/components/BottomNav.module.css
+++ b/components/BottomNav.module.css
@@ -2,15 +2,19 @@
   display: flex;
   flex-flow: center;
   align-items: center;
-  justify-content: space-around;
-  /* or inline-flex */
+  justify-content: space-between;
+  margin: calc(40rem / 16) calc(40rem / 16);
+}
+
+.subBox {
+  display: inline-block;
 }
 
 .item {
-  display: inline-block;
   color: var(--primary-text);
   font-size: calc(28rem / 16);
   position: relative;
+  margin: calc(24rem / 16);
 }
 
 .item:after {
diff --git a/components/BottomNav.tsx b/components/BottomNav.tsx
index f1b1048..146335f 100644
--- a/components/BottomNav.tsx
+++ b/components/BottomNav.tsx
@@ -11,14 +11,26 @@ interface PageLinks {
 export function BottomNav(props: PageLinks) {
   return (
     <div className={styles.container}>
-      <Arrow isPointRight={true}></Arrow>
-      <Link href={props.leftPage}>
-        <a className={styles.item}>View Demographics</a>
-      </Link>
-      <Link href={props.leftPage}>
-        <a className={styles.item}>View Co-ops</a>
-      </Link>
-      <Arrow isPointRight={false}></Arrow>
+      <div className={styles.subBox}>
+        <Link href={props.leftPage}>
+          <a>
+            <Arrow isPointRight={true}></Arrow>
+          </a>
+        </Link>
+        <Link href={props.leftPage}>
+          <a className={styles.item}>View Demographics</a>
+        </Link>
+      </div>
+      <div className={styles.subBox}>
+        <Link href={props.leftPage}>
+          <a className={styles.item}>View Co-ops</a>
+        </Link>
+        <Link href={props.leftPage}>
+          <a>
+            <Arrow isPointRight={false}></Arrow>
+          </a>
+        </Link>
+      </div>
     </div>
   );
 }
@@ -30,8 +42,8 @@ interface ArrowProps {
 function Arrow({ isPointRight }: ArrowProps) {
   return (
     <svg
-      width="300px"
-      height="150px"
+      width="250px"
+      height="20px"
       className={isPointRight ? styles.right : styles.left}
     >
       <defs>
@@ -49,10 +61,10 @@ function Arrow({ isPointRight }: ArrowProps) {
       </defs>
 
       <line
-        x1="295"
-        y1="75"
-        x2="95"
-        y2="75"
+        x1="250"
+        y1="10"
+        x2="100"
+        y2="10" // half of svg height
         strokeWidth="3"
         markerEnd="url(#arrow)"
         className={styles.linePath}
diff --git a/pages/playground.tsx b/pages/playground.tsx
index 9339e05..9727c75 100644
--- a/pages/playground.tsx
+++ b/pages/playground.tsx
@@ -169,7 +169,9 @@ export default function Home() {
         />
       </div>
 
-      <h2></h2>
+      <h2>
+        <code>{"<BottomNav />"}</code>
+      </h2>
       <BottomNav leftPage="/" rightPage="/"></BottomNav>
     </div>
   );