From 847d80e7ebe747c6c52c43509d6868b4b3c584d6 Mon Sep 17 00:00:00 2001
From: Tobias Fried <friedtm@gmail.com>
Date: Fri, 31 Jul 2020 19:52:57 -0400
Subject: [PATCH] App: update link styles to match spec

---
 src/components/App/App.css       | 18 +++++++++++++++---
 src/components/App/App.tsx       | 12 ++++++------
 src/components/NavBar/NavBar.css | 30 ++++++++++++++++++++----------
 src/components/NavBar/NavBar.tsx |  8 ++++----
 4 files changed, 45 insertions(+), 23 deletions(-)

diff --git a/src/components/App/App.css b/src/components/App/App.css
index 72bc79f..d3f8a33 100644
--- a/src/components/App/App.css
+++ b/src/components/App/App.css
@@ -77,10 +77,22 @@ button.main-button:active {
   transform: scale(1);
 }
 
-a {
+a.main-link {
+  text-decoration: none;
+  position: relative;
   color: black;
 }
 
-a:hover {
-  color: blue;
+a.main-link:after {
+  content: '';
+  position: absolute;
+  bottom: -2px;
+  left: 0;
+  width: 100%;
+  border-bottom: 1px solid black;
+  transition: 0.2s;
+}
+
+a.main-link:hover:after {
+  width: 0%;
 }
diff --git a/src/components/App/App.tsx b/src/components/App/App.tsx
index 50f4249..c97e688 100644
--- a/src/components/App/App.tsx
+++ b/src/components/App/App.tsx
@@ -120,20 +120,20 @@ const App: React.FC<any> = () => {
               Copyright © 2020 Phosphor Icons
               <br />
               Phosphor Icons is designed by{" "}
-              <a href="https://helenazhang.com">Helena Zhang</a> + built by{" "}
-              <a href="https://tobiasfried.com">Tobias Fried</a>.
+              <a className="main-link" href="https://helenazhang.com">Helena Zhang</a> + built by{" "}
+              <a className="main-link" href="https://tobiasfried.com">Tobias Fried</a>.
               <br />
               This website is set in{" "}
-              <a href="https://manropefont.com/">Manrope</a> by{" "}
-              <a href="https://gent.media/">Mikhail Sharanda</a>.
+              <a className="main-link" href="https://manropefont.com/">Manrope</a> by{" "}
+              <a className="main-link" href="https://gent.media/">Mikhail Sharanda</a>.
             </p>
             <p>
               See also: <Droid size={20} />{" "}
-              <a href="https://play.google.com/store/apps/details?id=com.tobiasfried.phosphor">
+              <a className="main-link" href="https://play.google.com/store/apps/details?id=com.tobiasfried.phosphor">
                 Phosphor for Android
               </a>
             </p>
-            <a href="#">Back to zee top</a>
+            <a className="main-link" href="#">Back to zee top</a>
           </div>
         </div>
       </Info>
diff --git a/src/components/NavBar/NavBar.css b/src/components/NavBar/NavBar.css
index c718853..1f163a7 100644
--- a/src/components/NavBar/NavBar.css
+++ b/src/components/NavBar/NavBar.css
@@ -39,16 +39,26 @@ nav > div {
   text-align: end;
 }
 
-.links a {
-  color: black;
-  text-decoration: none;
-}
-
-.links a:hover {
-  /* border-bottom: 2px solid black; */
-  box-shadow: 0 2px 0px -1px black;
-}
-
 .links a:not(:first-child) {
   margin-left: 48px;
 }
+
+a.nav-link {
+  text-decoration: none;
+  position: relative;
+  color: black;
+}
+
+a.nav-link:after {
+  content: '';
+  position: absolute;
+  bottom: -2px;
+  left: 0;
+  width: 0%;
+  border-bottom: 1px solid black;
+  transition: 0.2s;
+}
+
+a.nav-link:hover:after {
+  width: 100%;
+}
diff --git a/src/components/NavBar/NavBar.tsx b/src/components/NavBar/NavBar.tsx
index 1b1f23f..387d3de 100644
--- a/src/components/NavBar/NavBar.tsx
+++ b/src/components/NavBar/NavBar.tsx
@@ -21,10 +21,10 @@ const NavBar: React.FC<NavBarProps> = () => {
         </div>
       </div>
       <div className="links">
-        <a href="#">Download</a>
-        <a href="#">Request</a>
-        <a href="#">Donate</a>
-        <a href="https://github.com/rektdeckard/phosphor-react">
+        <a className="nav-link" href="#">Download</a>
+        <a className="nav-link" href="https://github.com/rektdeckard/phosphor-web/issues">Request</a>
+        <a className="nav-link" href="#">Donate</a>
+        <a className="nav-link" href="https://github.com/rektdeckard/phosphor-react">
           <span>Github</span>
         </a>
       </div>