:sparkles: pairs-list pair styled and w-menu added with link and temp color and icons

frontend/src/components/PairsList.vue

@@ -2,27 +2,24 @@
 section.pairs-list
     article(v-if='pairs.length')
         template(v-for='pair in pairs')
-            router-link.pair.w-flex.align-center.flex-start(
-                :to='`/profile/${pair.profile.pid}`'
-                v-if='tabName == "pending"'
-            )
-            router-link.pair.w-flex.align-center.flex-start(
-                :to='`/chat/${pair.profile.pid}`'
-                v-else
-            )
-                .dot--icon
-                .avatar
-                .idCard
-                    h3 {{ pair.profile.name }} {{ pair.profile.pid }}
-                    p registered nurse
+            w-flex().align-center.flex-start
+                router-link.pair.w-flex.align-center.flex-start(
+    :to='`/profile/${pair.profile.pid}`')
+                    .dot--icon
+                    .avatar
+                    .idCard
+                        h3 {{ pair.profile.name }} {{ pair.profile.pid }}
+                        p registered nurse
 
-            w-menu(align-left arrow shadow v-model='showMenu')
-                template(#activator)
-                    w-button.mr3(@click='showMenu = !showMenu') menu
-                w-flex.pl10.mt4(justify-end wrap)
-                    w-button.mr1(@click='showMenu = false' color='green' text) Chat
-                    w-button.mr1(@click='showMenu = false' color='green' text) Calendar
-                    w-button(@click='showMenu = false' color='green' text) cancel
+                w-menu( left v-model='showMenu')
+                    template(#activator)
+                        w-button.mr3(@click='showMenu = !showMenu' icon="mdi mdi-dots-horizontal")
+                    w-flex()
+                        router-link(
+                            :to='`/chat/${pair.profile.pid}`')
+                            w-button.mx2(@click='showMenu = false' bg-color="success" tile icon="mdi mdi-forum") Chat
+                        w-button.mx2(@click='showMenu = false' bg-color="info" tile icon="mdi mdi-calendar") Calendar
+                        w-button.mx2(@click='showMenu = false' bg-color="primary" icon="wi-cross")
 
     p(v-else) No {{ tabName }} profiles.
 </template>
@@ -66,4 +63,6 @@ const showMenu = ref(false)
                 font-size: 16px
             p
                 font-size: 14px
+.w-menu--card
+    background-color: #000000 !important
 </style>