Verification fix

src/containers/ByMnemonicContainer/components/VerificationModal/VerificationModal.scss

@@ -44,7 +44,7 @@
 
       .verify-button {
         display: inline-block;
-        margin-top: 50px;
+        margin-top: 20px;
         padding: 20px 100px;
       }
     }
@@ -54,10 +54,29 @@
 
 .verificationTest {
   >div{
-
+    border-radius: 5px;
+    display: grid;
+    grid-template-columns: 1fr 8fr;
+    margin-bottom: 10px;
+    padding: 20px;
+    background-color: $light-grey-2;
     ul {
       display: grid;
       grid-template-columns: 1fr 1fr 1fr;
+
+      li {
+        label {
+          display: flex;
+          align-items: center;
+          cursor: pointer;
+        }
+
+        input {
+          height: 20px;
+          width: 20px;
+          margin-right: 10px;
+        }
+      }
     }
   }
 }

src/containers/ByMnemonicContainer/components/VerificationModal/VerificationModal.vue

@@ -5,14 +5,16 @@
 
       <div class="verificationTest">
         <div v-for="verifyItemRow in mnemonicVerificationItems" v-bind:key="verifyItemRow.key">
-          <p>{{verifyItemRow.num}}</p>
-          <ul v-for="items in verifyItemRow.data" v-bind:key="items.key">
-            <li v-for="item in items" v-bind:key="item.key">{{item.value}}</li>
+          <p>{{verifyItemRow.num}}.</p>
+          <ul>
+            <li v-for="items in verifyItemRow.data" v-bind:key="items.key">
+              <label><input type="radio" :name="verifyItemRow.num">{{items.value}}</label>
+            </li>
           </ul>
         </div>
       </div>
 
-      <!-- Old verification is hidden, so if we can use it later in the future if we need it. -->
+      <!-- Old verification form is hidden, so if we can use it later in the future if we need it. -->
       <div class="phrases hidden">
         <ul>
           <li class="word" v-for="(value, index) in mnemonicValues" v-bind:key="index" v-bind:data-index="index + 1">
@@ -86,18 +88,18 @@ export default {
         this.mnemonicVerificationItems[c] = {
           num: randItems[c],
           data: [
-            [
-              {value: newMnemonicValArray[0]},
-              {correctItem: false}
-            ],
-            [
-              {value: newMnemonicValArray[1]},
-              {correctItem: false}
-            ],
-            [
-              {value: mnemonicValArray[randItems[c]]},
-              {correctItem: true}
-            ]
+            {
+              value: newMnemonicValArray[0],
+              correctItem: false
+            },
+            {
+              value: newMnemonicValArray[1],
+              correctItem: false
+            },
+            {
+              value: mnemonicValArray[randItems[c]],
+              correctItem: true
+            }
           ]
         }
       }