:art: background colors added to html, body, and w-toolbar, navbar icons color also updated

frontend/assets/sass/main.scss

@@ -5,4 +5,9 @@
 
 html {
     background-color: $black;
+    font-size: $base-font-size;
+}
+body{
+    margin:0;
+    font-family: 'Source Code Pro', monospace;
 }

frontend/assets/sass/variables.scss

@@ -1,6 +1,6 @@
 // Color Variables
 $yellow: #F7F5A6;
-$light-green: #49E64D;
+$light-green: #C2F279;
 $dark-green: #4D9127;
 $red: #FF3660;
 $light-blue: #05DBF2;

frontend/src/App.vue

@@ -79,4 +79,5 @@ export default {
     top: 50px
     max-width: 960px
     width:100%
+    margin: 0 auto
 </style>

frontend/src/components/MainNav.vue

@@ -1,23 +1,23 @@
 <template lang="pug">
 w-toolbar.mt6.py1(bottom fixed)
-    router-link.w-flex.column(:to='`/`')
-        w-button.pa8(bg-color='primary')
-            w-icon.mr1.icon-home(xl)
-    router-link.w-flex.column(:to='`/pairs`')
-        w-button.pa8(bg-color='primary')
-            w-icon.mr1.icon-people(xl)
+    router-link.w-flex.column.exact-active-link(:to='`/`')
+        w-button.pa8()
+            w-icon.mr1.icon-home(xl :class="{ 'icon-selected': $route.path === '/' }")
+    router-link.w-flex.column.exact-active-link(:to='`/pairs`')
+        w-button.pa8()
+            w-icon.mr1.icon-people(xl, :class="{ 'icon-selected': $route.path === '/pairs' }")
             //- p.text-upper pending matches
-    router-link.w-flex.column(:to='`/messages`')
-        w-button.pa8(bg-color='primary')
-            w-icon.mr1.icon-chat(xl)
+    router-link.w-flex.column.exact-active-link(:to='`/messages`')
+        w-button.pa8()
+            w-icon.mr1.icon-chat(xl, :class="{ 'icon-selected': $route.path === '/messages' }")
             //- p.text-upper active chats
-    router-link.w-flex.column(:to='`/onboarding`')
-        w-button.pa8(bg-color='primary')
+    router-link.w-flex.column.exact-active-link(:to='`/onboarding`')
+        w-button.pa8()
             w-icon.mr1.icon-area-graph(xl)
             //- p.text-upper survey
-    router-link.w-flex.column(:to='`/settings`')
-        w-button.pa8(bg-color='primary' disabled)
-            w-icon.mr1.icon-cog(xl)
+    router-link.w-flex.column.exact-active-link(:to='`/settings`')
+        w-button.pa8(disabled)
+            w-icon.mr1.icon-cog(xl :class="{ 'icon-selected': $route.path === '/settings' }")
             //- p.text-upper settings
 </template>
 
@@ -30,9 +30,21 @@ export default {
 </script>
 
 <style lang="sass">
+@import '../assets/sass/main.scss'
 .w-toolbar
     max-width: 960px
     width:100%
     margin: auto
+    background: $dark-grey
+    color: $light-grey
+
+    .w-button
+        background-color: $dark-grey
+    
+    .icon-selected
+        color: $light-green
+    
+    a
+        color:$light-grey
 </style>