:sparkles: PairingButton state styles added

frontend/src/components/NamePlate.vue

@@ -42,7 +42,7 @@ export default {
         flex-direction: column
         align-items: center
         justify-content: center
-        padding: 15px 15px
+        padding: 15px
         min-height: 10vh
         width: 100%
         &.box

frontend/src/components/PairingButton.vue

@@ -9,6 +9,8 @@
         xl
     )
         p.pa4.text-upper pair
+    w-button.xs12.pristine
+        p siimee
 </template>
 
 <script>
@@ -29,11 +31,26 @@ export default {
 
 <style lang="sass">
 .w-button
+    p
+        font-size: 1.6em
+        font-weight: bold
+    &.pristine
+        background-color: #000
+        border: 2px solid #4D9127
+        min-width: 350px
+        width: 100%
+        margin: 11px 0
+        padding: 22px
     &.pending
-        background-color: #4D9127
+        background-image: linear-gradient(to right, #4C5264, #A8A8A8)
         min-width: 350px
         width: 100%
         margin: 11px 0
-        padding: 7px
-        font-size: 1.6em
+        padding: 22px
+    &.paired
+        background: #8168F8
+        min-width: 350px
+        width: 100%
+        margin: 11px 0
+        padding: 22px
 </style>