App: update link styles to match spec

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 {
+a.main-link:after {
-  color: blue;
+  content: '';
+  position: absolute;
+  bottom: -2px;
+  left: 0;
+  width: 100%;
+  border-bottom: 1px solid black;
+  transition: 0.2s;
+}
+
+a.main-link:hover:after {
+  width: 0%;
 }

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 className="main-link" href="https://helenazhang.com">Helena Zhang</a> + built by{" "}
-              <a href="https://tobiasfried.com">Tobias Fried</a>.
+              <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 className="main-link" href="https://manropefont.com/">Manrope</a> by{" "}
-              <a href="https://gent.media/">Mikhail Sharanda</a>.
+              <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>

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%;
+}

src/components/NavBar/NavBar.tsx

@@ -21,10 +21,10 @@ const NavBar: React.FC<NavBarProps> = () => {
         </div>
       </div>
       <div className="links">
-        <a href="#">Download</a>
+        <a className="nav-link" href="#">Download</a>
-        <a href="#">Request</a>
+        <a className="nav-link" href="https://github.com/rektdeckard/phosphor-web/issues">Request</a>
-        <a href="#">Donate</a>
+        <a className="nav-link" href="#">Donate</a>
-        <a href="https://github.com/rektdeckard/phosphor-react">
+        <a className="nav-link" href="https://github.com/rektdeckard/phosphor-react">
           <span>Github</span>
         </a>
       </div>