Correct styling of word input boxes

nimiq · Apr 16, 2019 · 4b97da1 · 4b97da1
1 parent 7bcbf04
commit 4b97da1
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 17 deletions.
diff --git a/src/components/RecoveryWords.css b/src/components/RecoveryWords.css
@@ -7,14 +7,15 @@
     box-sizing: border-box;
 }
 
-.recovery-words input[type="text"].shake ,
+.recovery-words .nq-input.shake ,
 .recovery-words .shake {
-    border-color: var(--nimiq-red);
+    border-color: var(--nimiq-red-on-dark);
 }
 
 .recovery-words .words-container .word-section {
     display: flex;
     flex-wrap: wrap;
+    overflow: hidden; /* prevent scrollbar from showing when input shakes */
 }
 
 .recovery-words .word {
@@ -31,6 +32,10 @@
     background-color: rgba(255, 255, 255, 0.1);
 }
 
+.recovery-words .word.complete input {
+    border-color: rgba(255, 255, 255, 0); /* `transparent` would be black in Safari */
+}
+
 .recovery-words .word .word-number {
     display: flex;
     flex-grow: 0;
@@ -45,21 +50,22 @@
     font-size: 2rem;
 }
 
-.recovery-words input[type="text"] {
+.recovery-words input {
     width: 100%;
-    font-family: inherit;
-    line-height: 2;
-    font-size: 1.875rem;
-    padding: 0;
-    border-radius: .5rem;
-    border: 2px solid rgba(255, 255, 255, 0.2);
+    text-align: center;
+    padding-left: 0.5rem;
+    padding-right: 0.5rem;
+}
+
+.recovery-words input::placeholder {
+    font-weight: 600;
 }
 
-.recovery-words input[type="text"]:focus {
-    border-color: rgba(255, 255, 255, 0.3);
+.recovery-words input:focus::placeholder {
+    color: transparent;
 }
 
-.recovery-words input[type="text"]::-webkit-calendar-picker-indicator {
+.recovery-words input::-webkit-calendar-picker-indicator {
     display: none;
 }
 

diff --git a/src/components/RecoveryWordsInputField.js b/src/components/RecoveryWordsInputField.js
@@ -46,6 +46,7 @@ class RecoveryWordsInputField extends Nimiq.Observable {
         element.classList.add('recovery-words-input-field');
 
         const input = document.createElement('input');
+        input.classList.add('nq-input');
         input.setAttribute('type', 'text');
         input.setAttribute('autocorrect', 'off');
         input.setAttribute('autocapitalize', 'none');
@@ -151,6 +152,14 @@ class RecoveryWordsInputField extends Nimiq.Observable {
      * @param {number} [setFocusToNextInputOffset = 0]
      */
     _checkValidity(setFocusToNextInputOffset = 0) {
+        // Do not block tabbing through empty fields
+        if (!this.dom.input.value) {
+            if (setFocusToNextInputOffset) {
+                this._focusNext(setFocusToNextInputOffset);
+            }
+            return;
+        }
+
         if (Nimiq.MnemonicUtils.DEFAULT_WORDLIST.indexOf(this.value.toLowerCase()) >= 0) {
             this.complete = true;
             this.dom.element.classList.add('complete');

diff --git a/src/request/import/Import.css b/src/request/import/Import.css
@@ -71,16 +71,16 @@
     z-index: 3;
 }
 
-.page#recovery-words p {
+.page#recovery-words .nq-label {
+    font-weight: bold;
     margin-top: 4rem;
     margin-bottom: 0;
-    opacity: 0.5;
     text-align: center;
-    color: white;
 }
 
-.page#recovery-words .nq-red {
-    color: var(--nimiq-red);
+.page#recovery-words .input-hint {
+    opacity: 0.5;
+    color: white;
 }
 
 .page#recovery-words.invalid-words p:not(.nq-red),