:recycle: a little prettier

frontend/src/components/PairsList.vue

 section.pairs-list
     article(v-if='pairs.length')
         template(v-for='pair in pairs')
-            w-flex().align-center.flex-start
+            w-flex.align-center.flex-start
                 router-link.pair.w-flex.align-center.flex-start(
-    :to='`/profile/${pair.profile.pid}`')
+                    :to='`/profile/${pair.profile.pid}`'
+                )
                     .dot--icon
                     .avatar
                     .idCard
                         h3 {{ pair.profile.name }} {{ pair.profile.pid }}
                         p registered nurse
 
-                w-menu( left v-model='showMenu')
+                w-menu(left v-model='showMenu')
                     template(#activator)
-                        w-button.mr3(@click='showMenu = !showMenu' icon="icon-dots-three-horizontal")
-                    w-flex()
-                        router-link(
-                            :to='`/chat/${pair.profile.pid}`')
-                            w-button.mx2(@click='showMenu = false' bg-color="success" tile icon="icon-chat") Chat
-                        w-button.mx2.icon-calendar(@click='showMenu = false' bg-color="info" tile icon="icon-calendar") Calendar
-                        w-button.mx2(@click='showMenu = false' bg-color="primary" icon="icon-cross")
+                        w-button.mr3(
+                            @click='showMenu = !showMenu'
+                            icon='icon-dots-three-horizontal'
+                        )
+                    w-flex
+                        router-link(:to='`/chat/${pair.profile.pid}`')
+                            w-button.mx2(
+                                @click='showMenu = false'
+                                bg-color='success'
+                                icon='icon-chat'
+                                tile
+                            ) Chat
+                        w-button.mx2.icon-calendar(
+                            @click='showMenu = false'
+                            bg-color='info'
+                            icon='icon-calendar'
+                            tile
+                        ) Calendar
+                        w-button.mx2(
+                            @click='showMenu = false'
+                            bg-color='primary'
+                            icon='icon-cross'
+                        )
 
     p(v-else) No {{ tabName }} profiles.
 </template>

frontend/src/components/onboarding/FormDropdown.vue

 <template lang="pug">
 .role
-    span(style='text-align:center;') {{ parsedPrompt.start }}
-    span(style='text-align:center;') {{ parsedPrompt.mid }}
+    span(style='text-align: center') {{ parsedPrompt.start }}
+    span(style='text-align: center') {{ parsedPrompt.mid }}
     w-select.mt4(:items='items' placeholder='i am' v-model='selection')
     br
-    p(style='text-align:center;') {{ parsedPrompt.end }}
+    p(style='text-align: center') {{ parsedPrompt.end }}
     w-button.ma1.grow(@click='handleSubmit') NEXT
 </template>
 
         },
     },
     created() {
-        const parsedPromptArr = this.question.response_key_prompt.split('[break]')
+        const parsedPromptArr =
+            this.question.response_key_prompt.split('[break]')
         this.parsedPrompt.start = parsedPromptArr[0]
         this.parsedPrompt.mid = parsedPromptArr[1]
         this.parsedPrompt.end = parsedPromptArr[2]

frontend/src/views/ChatView.vue

 main.view--chat
     header.mb6(v-if='profile && grouping')
         h3 chatting with:
-        span {{ target.profile_id }} | 
-        span(v-if="grouping.revealedFromNotification.length")
-            span(v-for="revealed in grouping.revealedFromNotification")
-                span(v-if="revealed.profile_id === target.profile_id")
-                    span {{ revealed[revealed.tag_description] }} | 
+        span {{ target.profile_id }} |
+        span(v-if='grouping.revealedFromNotification.length')
+            span(v-for='revealed in grouping.revealedFromNotification')
+                span(v-if='revealed.profile_id === target.profile_id')
+                    span {{ revealed[revealed.tag_description] }} |
         span(v-else)
-            span  {{ grouping.profile.user_name }} | {{ grouping.profile.user_email }}
+            span {{ grouping.profile.user_name }} | {{ grouping.profile.user_email }}
         h3 logged in as:
         p {{ profile.id }} | {{ profile._profile.user_name }} | {{ profile._profile.user_email }}
         //- p subscriptions: {{ profile.chatter.subscriptions }}
                 button(@click='reveal(8)') reveal my email
                 // TODO: Remove later, only for testing
                 button(@click='checkData()') check data
-            span(v-if="grouping.revealed[profile.id.value]")
+            span(v-if='grouping.revealed[profile.id.value]')
                 p you revealed:
-                ul(v-for="reveal in [...new Set(grouping.revealed[profile.id.value])]")
+                ul(
+                    v-for='reveal in [...new Set(grouping.revealed[profile.id.value])]'
+                )
                     li {{ reveal.description }}
-            span(v-if="grouping.revealed[target.profile_id]")
+            span(v-if='grouping.revealed[target.profile_id]')
                 p they revealed:
-                ul(v-for="reveal in grouping.revealed[target.profile_id]")
+                ul(v-for='reveal in grouping.revealed[target.profile_id]')
                     li {{ reveal.description }}: {{ target[reveal.description] }}
-            span(v-if="grouping.revealedFromNotification.length")
+            span(v-if='grouping.revealedFromNotification.length')
                 p recently revealed:
-                ul(v-for="revealed in grouping.revealedFromNotification")
-                    li(v-if="revealed[revealed.tag_description] !== profile._profile[revealed.tag_description]") {{ revealed.tag_description }}: {{ revealed[revealed.tag_description] }}
+                ul(v-for='revealed in grouping.revealedFromNotification')
+                    li(
+                        v-if='revealed[revealed.tag_description] !== profile._profile[revealed.tag_description]'
+                    ) {{ revealed.tag_description }}: {{ revealed[revealed.tag_description] }}
 
     article
         template(v-if='isLoading')

frontend/src/views/OnboardingView.vue

         br
         .step(v-for='(step, i) in survey.steps')
             component(
+                :answered='answered'
+                :currentStep='currentStep'
                 :is='step.component'
                 :question='step'
-                :answered='answered'
                 :responses='responses'
                 :survey='survey'
-                :currentStep='currentStep'
                 :surveyStepsCount='survey.steps.length'
                 @handle-submit='onSubmit'
                 @update-answers='updateAnswers'
                 v-if='step && currentStep == i'
-            ) 
+            )
         .invalidResponseMessage(
             style='text-align: center'
             v-if='invalidResponse'

frontend/src/views/PairsView.vue

                 //- pending tab
                 template(#item-content.1='{ item }')
                     PairsList(:pairs='pending' tab-name='pending')
-                //- paired tab 
+                //- paired tab
                 template(#item-content.2='{ item }')
                     PairsList(:pairs='paired' tab-name='paired')