:sparkles: pristine, pending, paired buttons and classes added. class and if are controlled on data value of status

frontend/src/components/PairingButton.vue

 <template lang="pug">
 .pairing-button.w-flex.row
-    w-button.xs6.mt4.mb4.pending(@click='pass' bg-color='red' color='white' xl)
+    w-button(:class='status' v-if='status == "pristine"')(@click='pass')
         p.pa4.text-upper pass
-    w-button.xs6.mt4.mb4.pending(
-        @click='pair'
-        bg-color='green'
-        color='mint-green'
-        xl
-    )
+    w-button(:class='status' v-if='status == "pristine"')(@click='pair')
         p.pa4.text-upper pair
-    w-button.xs12.pristine
-        p siimee
+    w-button(:class='status' v-if='status == "pending"')
+        p.pa4.text-upper pending
+    w-button(:class='status' v-if='status == "paired"')
+        p.pa4.text-upper paired
 </template>
 
 <script>
 export default {
     props: {},
     emits: ['pair', 'pass'],
-    data: () => ({}),
+    data: () => ({
+        status: 'pristine',
+    }),
     methods: {
         pair() {
             this.$emit('pair')
     &.pristine
         background-color: #000
         border: 2px solid #4D9127
-        min-width: 350px
-        width: 100%
+        max-width: 350px
+        width: 50%
         margin: 11px 0
         padding: 22px
     &.pending