Number mnemonic words on ConfirmMnemonic.

firoorg · Jul 25, 2022 · 2d4c3e6 · 2d4c3e6
1 parent cd5cd08
commit 2d4c3e6
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 12 deletions.
diff --git a/src/renderer/components/Setup/ConfirmMnemonic.vue b/src/renderer/components/Setup/ConfirmMnemonic.vue
@@ -6,17 +6,20 @@
 
         <div class="content">
             <template v-for="(_, n) in 24">
-                <input v-if="hiddenWordPositions.includes(n)"
-                    :class="['mnemonic-word', 'hidden', isVerified ? 'verified' : 'unverified']"
-                    :id="`hidden-word-${n}`"
-                    type="text"
-                    v-model="newWords[n]"
-                    spellcheck="false"
-                    :tabindex="hiddenWordPositions.indexOf(n) + 1"
-                />
-                <span v-else class="mnemonic-word visible" :id="`visible-word-${n}`">
-                    {{ newWords[n] }}
-                </span>
+                <div class="mnemonic-word">
+                    <span class="n">{{ n < 9 ? `0${n + 1}` : n + 1 }}</span>
+                    <input v-if="hiddenWordPositions.includes(n)"
+                        :class="['word', 'hidden', isVerified ? 'verified' : 'unverified']"
+                        :id="`hidden-word-${n}`"
+                        type="text"
+                        v-model="newWords[n]"
+                        spellcheck="false"
+                        :tabindex="hiddenWordPositions.indexOf(n) + 1"
+                    />
+                    <span v-else class="word visible" :id="`visible-word-${n}`">
+                        {{ newWords[n] }}
+                    </span>
+                </div>
             </template>
         </div>
 

diff --git a/src/renderer/styles/_mnemonic.scss b/src/renderer/styles/_mnemonic.scss
@@ -13,6 +13,7 @@
     }
 
     .mnemonic-word {
+        height: 1.2em;
         -webkit-appearance: none;
         border: none;
         padding: 0 !important;
@@ -27,9 +28,17 @@
 
         background-color: inherit;
 
-        &.hidden {
+        .hidden {
             width: 80px;
 
+            border: none;
+            outline: none;
+            -webkit-appearance: none;
+            font: {
+                family: sans-serif;
+                weight: bold;
+            }
+
             border-bottom: {
                 style: dashed;
                 color: var(--color-text-primary);