Merge pull request #5578 from fsih/whiteButtons

Make the default nav button state white

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

src/views/studio/studio.scss

@@ -170,20 +170,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 {