Tidy up split phrase warning

Make red only when danger is present
Align neatly with the rest of the UI
Increase size of text area to show all three rows, although it still
overflows on 24 words.

diff --git a/src/css/app.css b/src/css/app.css
index c2a0294236825e6c78b27c6c5da4d4573ad490de..576b7d7685ab5da8bc0c5ab26f1a80ef0ae3d87b 100644 (file)
--- a/src/css/app.css
+++ b/src/css/app.css
@@ -31,10 +31,6 @@ body {
 .phrase {
     word-break: keep-all;
 }
-.phraseSplitWarn {
-       text-align: right;
-       color: red;
-}
 .generate-container .strength {
     /* override mobile width from bootstrap */
     width: auto!important;

diff --git a/src/index.html b/src/index.html
index 096274de2c6c403a19796e2899cdbc33547d8fd9..ab1239a3c0ccd85a2958285955d71855c155c095 100644 (file)
--- a/src/index.html
+++ b/src/index.html
@@ -175,9 +175,11 @@
                         <div class="form-group">
                             <label for="phrase" class="col-sm-2 control-label">BIP39 Split Mnemonic</label>
                             <div class="col-sm-10">
-                                <textarea id="phraseSplit" class="phraseSplit private-data form-control" title="Only 2 of 3 cards needed to recover."></textarea>
+                                <textarea id="phraseSplit" class="phraseSplit private-data form-control" title="Only 2 of 3 cards needed to recover." rows="3"></textarea>
+                                <p class="help-block">
+                                    <span id="phraseSplitWarn" class="phraseSplitWarn"></span>
+                                </p>
                             </div>
-                                                       <div id="phraseSplitWarn" class="phraseSplitWarn"></div>
                         </div>
                         <div class="form-group">
                             <label for="passphrase" class="col-sm-2 control-label">BIP39 Passphrase (optional)</label>

diff --git a/src/js/index.js b/src/js/index.js
index 03a829677e3766f64f60b3d1c8225811d9fc7b50..807230b2130ef6456f01f70d7dc413097663684a 100644 (file)
--- a/src/js/index.js
+++ b/src/js/index.js
@@ -1470,16 +1470,25 @@
         DOM.splitPhrase.val(cards.join("\r\n"));
         var triesPerSecond=10000000000;
         var hackTime=Math.pow(2,wordCount*10/3)/triesPerSecond;
+        var displayRedText = false;
         if (hackTime<1) {
             hackTime="<1 second";
+            displayRedText = true;
         } else if (hackTime<86400) {
             hackTime=Math.floor(hackTime)+" seconds";
+            displayRedText = true;
         } else if(hackTime<31557600) {
             hackTime=Math.floor(hackTime/86400)+" days";
+            displayRedText = true;
         } else {
             hackTime=Math.floor(hackTime/31557600)+" years";
         }
         DOM.phraseSplitWarn.html("Time to hack with only one card: "+hackTime);
+        if (displayRedText) {
+            DOM.phraseSplitWarn.addClass("text-danger");
+        } else {
+            DOM.phraseSplitWarn.removeClass("text-danger");
+        }
     }
 
     function isUsingOwnEntropy() {