Merge pull request #108 from topcoder-platform/ux-fixes

Ux fixes -> dev

Author: brooketopcoder

src/lib/components/LinksMenu.module.scss

@@ -25,7 +25,6 @@
       font-weight: 500;
       font-size: 14px;
       line-height: 22px;
-      text-transform: uppercase;
 
       &:hover, &:global(.hover) {
         color: #FFFFFF;
@@ -40,8 +39,12 @@
       font-family: 'Barlow Condensed';
       font-size: 20px;
       line-height: 24px;
+      text-transform: uppercase;
 
-      &:hover, &:global(.hover), &:global(.active) {
+      &:hover, &:global(.hover) {
+        color: #fff;
+      }
+      &:global(.active) {
         color: #82EACF;
       }
     }

src/lib/components/tool-selector/ToolMenu.module.scss

@@ -102,13 +102,6 @@
     margin-top: 16px;
   }
 
-  a {
-    line-height: 22px;
-    font: inherit;
-    margin-bottom: -4px;
-    margin-top: 4px;
-  }
-
   &:global(.navButton) {
     display: inline-flex;
     font-weight: 700;
@@ -129,7 +122,7 @@
       border-color: #219174;
     }
 
-    a {
+    .navItemLabel {
       margin-top: 0;
       margin-bottom: 0;
     }
@@ -159,9 +152,13 @@
 .navItemContent {
   display: flex;
   flex-direction: column;
-  span {
-    display: block;
-  }
+}
+
+.navItemLabel {
+  display: block;
+  line-height: 22px;
+  margin-bottom: -4px;
+  margin-top: 4px;
 }
 
 .navItemDescription {

src/lib/components/tool-selector/ToolMenu.svelte

@@ -55,7 +55,7 @@
                   </div>
                   <div class={styles.navItemContent}>
                     {#if !!navItem.label}
-                      <span>{navItem.label}</span>
+                      <span class={styles.navItemLabel}>{navItem.label}</span>
                     {/if}
                     {#if navItem.type !== 'cta' && navItem.description}
                       <span class={styles.navItemDescription}>