fix: style fixes in general, and for Activity view

Author: ErikBjare

src/style/_globals.scss

@@ -1 +1,5 @@
-$lightBorderColor: rgb(235, 237, 243);
+$textColor: rgb(60, 66, 87);
+$backgroundColor: rgb(247, 250, 252);
+
+$lightBorderColor: rgb(235, 237, 243);
+$activeHighlightColor: rgb(0, 100, 255);

src/style/style.scss

@@ -4,18 +4,18 @@ body,
 html,
 body,
 button {
-  color: rgb(60, 66, 87);
+  color: $textColor;
   font-family: -apple-system , BlinkMacSystemFont , "Segoe UI" , "Roboto" , "Helvetica Neue" , "Ubuntu" , sans-serif;
   -webkit-font-smoothing: antialiased;
   text-rendering: optimizeLegibility;
 }
 
-h1, h2, h3, h4, h5, nav {
+h1, h2, h3, h4, h5, h6, nav {
   font-family: 'Varela Round', sans-serif;
 }
 
 body {
-  background-color: rgb(247, 250, 252);
+  background-color: $backgroundColor;
 }
 
 // To make icons a little less crowded

src/views/activity/Activity.vue

@@ -84,7 +84,6 @@ div
 
 <style lang="scss" scoped>
 @import '../../style/globals';
-$lightPurpleHighlight: rgb(84, 105, 212);
 
 .nav {
   border-bottom: 1px solid $lightBorderColor;
@@ -105,15 +104,19 @@ $lightPurpleHighlight: rgb(84, 105, 212);
       border: none;
 
       &:hover {
-        color: black;
+        color: black !important;
+        border-bottom: 3px solid lighten(black, 70%);
+        border-radius: 0;
       }
 
       &.router-link-exact-active {
-        color: $lightPurpleHighlight;
-        font-weight: bold;
-        border-bottom: 3px solid darken($lightBorderColor, 20%);
+        color: $activeHighlightColor !important;
+        border-bottom: 3px solid lighten($activeHighlightColor, 15%);
         border-radius: 0;
 
+        // Does nothing for Verala Round
+        font-weight: bold;
+
         &:hover {
           background-color: #fff;
         }