:recycle: another pass with w-toolbar enabled

frontend/src/components/MainNav.vue

@@ -1,25 +1,25 @@
 <template lang="pug">
-nav#main-header.w-flex.row.xs12
+w-toolbar.mt6.py1.no-grow(bottom)
     router-link.w-flex.column(:to='`/chats`')
-        w-button.pa8.bdrsr.bd1.sh1(bg-color='primary' disabled)
+        w-button.pa5.bdrsr.bd1.sh1(bg-color='primary' disabled)
             w-icon.mr1(xl) mdi mdi-forum
-            h3.text-upper chats
+            p.text-upper chats
     router-link.w-flex.column(:to='`/matches`')
-        w-button.pa8.bdrsr.bd1.sh1(bg-color='primary')
+        w-button.pa5.bdrsr.bd1.sh1(bg-color='primary')
             w-icon.mr1(xl) mdi mdi-tooltip-account
-            h3.text-upper matches
+            p.text-upper matches
     router-link.w-flex.column(:to='`/`')
-        w-button.pa8.bdrsr.bd1.sh1(bg-color='primary')
+        w-button.pa5.bdrsr.bd1.sh1(bg-color='primary')
             w-icon.mr1(xl) mdi mdi-home
-            h3.text-upper home
+            p.text-upper home
     router-link.w-flex.column(:to='`/survey`')
-        w-button.pa8.bdrsr.bd1.sh1(bg-color='primary')
+        w-button.pa5.bdrsr.bd1.sh1(bg-color='primary')
             w-icon.mr1(xl) mdi mdi-account-check
-            h3.text-upper survey
+            p.text-upper survey
     router-link.w-flex.column(:to='`/settings`')
-        w-button.pa8.bdrsr.bd1.sh1(bg-color='primary' disabled)
+        w-button.pa5.bdrsr.bd1.sh1(bg-color='primary' disabled)
             w-icon.mr1(xl) mdi mdi-cog
-            h3.text-upper settings
+            p.text-upper settings
 </template>
 
 <script>
@@ -29,9 +29,3 @@ export default {
     name: 'MainNav',
 }
 </script>
-
-<style lang="sass">
-nav#main-header
-    position: absolute
-    bottom: 15vh
-</style>

frontend/src/views/HomeView.vue

@@ -1,16 +1,18 @@
 <template lang="pug">
-main.view--home(style="display:flex; flex-direction:column; gap: 40px; margin-top: 1em;")
+main.view--home(
+    style='display: flex; flex-direction: column; gap: 40px; margin-top: 1em'
+)
     h2 Match Queue
-    article(v-if="cards.length && !loading")
-        ProfileCardList(:profiles="cards" :pid="pid" @reload="getCards")
+    article(v-if='cards.length && !loading')
+        ProfileCardList(:pid='pid' :profiles='cards' @reload='getCards')
 
     p(v-else) Loading...
 
     h2 Matches
-    article(v-if="matches.length && !loading")
-        ProfileCardList(:profiles="matches" :pid="pid" @reload="getCards")
-    
-    p(v-else-if="matches.length===0") No matches.
+    article(v-if='matches.length && !loading')
+        ProfileCardList(:pid='pid' :profiles='matches' @reload='getCards')
+
+    p(v-else-if='matches.length === 0') No matches.
     p(v-else) Loading...
 
     MainNav

frontend/src/wave.js

@@ -19,6 +19,7 @@ import {
     WSlider,
     WSpinner,
     WSteps,
+    WToolbar,
 } from '../node_modules/wave-ui/src/wave-ui/components'
 
 export default {
@@ -39,4 +40,5 @@ export default {
     WSlider,
     WSpinner,
     WSteps,
+    WToolbar,
 }