using light border color in a couple other places

Author: iloveitaly

src/components/Header.vue

@@ -141,9 +141,11 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import '../style/globals';
+
 .aw-navbar {
-  background-color: #fff;
-  border: solid #ccc;
+  background-color: white;
+  border: solid $lightBorderColor;
   border-width: 0 0 1px 0;
 }
 

src/style/_globals.scss

@@ -0,0 +1 @@
+$lightBorderColor: rgb(235, 237, 243);

src/style/style.scss

@@ -1,3 +1,5 @@
+@import "globals";
+
 body,
 html,
 body,
@@ -26,7 +28,7 @@ body {
 
 .aw-container {
   background-color: #fff;
-  border: 1px solid rgb(235, 237, 243);
+  border: 1px solid $lightBorderColor;
   border-radius: 5px;
 }
 

src/views/activity/Activity.vue

@@ -77,11 +77,11 @@ div
 </template>
 
 <style lang="scss" scoped>
-$buttoncolor: #ddd;
-$bordercolor: rgb(235, 237, 243);
+@import '../../style/globals';
+$lightPurpleHighlight: rgb(84, 105, 212);
 
 .nav {
-  border-bottom: 1px solid $bordercolor;
+  border-bottom: 1px solid $lightBorderColor;
 
   .nav-item {
     margin-bottom: 0px;
@@ -103,9 +103,9 @@ $bordercolor: rgb(235, 237, 243);
       }
 
       &.router-link-exact-active {
-        color: rgb(84, 105, 212);
+        color: $lightPurpleHighlight;
         font-weight: bold;
-        border-bottom: 3px solid darken($bordercolor, 20%);
+        border-bottom: 3px solid darken($lightBorderColor, 20%);
         border-radius: 0;
 
         &:hover {

src/visualizations/PeriodUsage.vue

@@ -1,14 +1,14 @@
 <template lang="pug">
-svg
+svg.mt-3.mb-1
 </template>
 
 <style scoped lang="scss">
+@import "../style/globals";
+
 svg {
   width: 100%;
   height: 40pt;
-  border: 1px solid #999;
-  margin-top: 0.2em;
-  margin-bottom: 0.2em;
+  border: 1px solid $lightBorderColor;
   border-radius: 0.5em;
 }
 </style>