From af5f810212097c9c179c32ee561d107fba6dcb90 Mon Sep 17 00:00:00 2001
From: DD Liu <liudi@media.mit.edu>
Date: Tue, 8 Jun 2021 22:26:05 -0400
Subject: [PATCH] Make the default nav button state white. Also remove that
 weird tiny bit of resizing when you click on them, was that intentional?

---
 src/views/studio/studio-tab-nav.jsx |  4 ++++
 src/views/studio/studio.scss        | 19 ++++++++++++++++---
 2 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/src/views/studio/studio-tab-nav.jsx b/src/views/studio/studio-tab-nav.jsx
index 2192af0de..c5e519994 100644
--- a/src/views/studio/studio-tab-nav.jsx
+++ b/src/views/studio/studio-tab-nav.jsx
@@ -49,6 +49,7 @@ const StudioTabNav = ({isFetchingInfo, commentCount, projectCount}) => {
         >
             <NavLink
                 activeClassName="active"
+                className="nav_link"
                 to={base}
                 exact
             >
@@ -67,6 +68,7 @@ const StudioTabNav = ({isFetchingInfo, commentCount, projectCount}) => {
             </NavLink>
             <NavLink
                 activeClassName="active"
+                className="nav_link"
                 to={`${base}/comments`}
             >
                 <li><img
@@ -84,6 +86,7 @@ const StudioTabNav = ({isFetchingInfo, commentCount, projectCount}) => {
             </NavLink>
             <NavLink
                 activeClassName="active"
+                className="nav_link"
                 to={`${base}/curators`}
             >
                 <li><img
@@ -92,6 +95,7 @@ const StudioTabNav = ({isFetchingInfo, commentCount, projectCount}) => {
             </NavLink>
             <NavLink
                 activeClassName="active"
+                className="nav_link"
                 to={`${base}/activity`}
             >
                 <li><img
diff --git a/src/views/studio/studio.scss b/src/views/studio/studio.scss
index 985017da0..cc794e0a9 100644
--- a/src/views/studio/studio.scss
+++ b/src/views/studio/studio.scss
@@ -167,20 +167,33 @@ $radius: 8px;
     li {
         display: flex;
         align-items: center;
-        background: rgba(0, 0, 0, 0.15);
+        background: white;
+        border: 1px solid rgba(0, 0, 0, 0.15);
+        color: #575e75;
         padding: 0.5em 0.75em 0.5em 0.5em;
         &:active {
-            padding: calc(0.5em + 1px) calc(0.75em + 1px) calc(0.5em + 1px) calc(0.5em + 1px);
+            padding: calc(0.5em) calc(0.75em) calc(0.5em) calc(0.5em);
         }
         img {
             margin-right: 0.5em;
             width: 1.5em;
+            filter: invert(0.55);
         }
         .tab-count {
             font-weight: normal;
         }
     }
-    .active > li { background: $ui-blue; }
+    .active > li {
+        background: $ui-blue;
+        color: white;
+        img {
+            filter: invert(0);
+        }
+    }
+    a.nav_link:hover > li {
+        background: $ui-blue-25percent;
+        border: 1px solid $ui-blue-10percent;
+    }
 }
 
 .studio-projects, .studio-members {