profilecard text and pairing buttons started TODO add pairing: Boolean to props to create dynamic class for button color based on pair status

frontend/src/components/PairingButton.vue

@@ -1,8 +1,13 @@
 <template lang="pug">
 .pairing-button.w-flex.row
-    w-button.xs6.mt4.mb4(@click='pass' bg-color='red' color='white' xl)
+    w-button.xs6.mt4.mb4.pending(@click='pass' bg-color='red' color='white' xl)
         p.pa4.text-upper pass
-    w-button.xs6.mt4.mb4(@click='pair' bg-color='green' color='mint-green' xl)
+    w-button.xs6.mt4.mb4.pending(
+        @click='pair'
+        bg-color='green'
+        color='mint-green'
+        xl
+    )
         p.pa4.text-upper pair
 </template>
 
@@ -21,3 +26,14 @@ export default {
     },
 }
 </script>
+
+<style lang="sass">
+.w-button
+    &.pending
+        background-color: #4D9127
+        min-width: 350px
+        width: 100%
+        margin: 11px 0
+        padding: 7px
+        font-size: 1.6em
+</style>

frontend/src/components/ProfileCard.vue

@@ -32,8 +32,8 @@ w-card.profile-card-list--card.xs12
             v-if='!isPaired || isList'
         )
 
-    footer
-        .pa12(v-if='!isPaired && !isList')
+    footer(v-if='!isList && !isPaired')
+        .px3
             p {{ card.summary.about.tab }}
         PairingButton(@pair='onPair' @pass='onPass' v-if='!isPaired')
         w-button.text-upper.xs12.pa6(v-else-if='currentTab != 0')
@@ -126,4 +126,11 @@ const onPass = async () => {
     header > .w-button
         background-color: #116006
         color: #fff
+    footer
+        margin-bottom: 22px
+        p
+            font-family: Century Gothic, CenturyGothic, AppleGothic, sans-serif
+            margin: 11px auto
+            padding: 0 7px
+            line-height: 1.619em
 </style>