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.

3 files changed, 13 insertions, 6 deletions

diff --git a/src/css/app.css b/src/css/app.css
index c2a0294..576b7d7 100644
--- 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 096274d..ab1239a 100644
--- 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 03a8296..807230b 100644
--- 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() {