From d310d1d1bfa5e44fe05230b0a9f051e59d1294cf Mon Sep 17 00:00:00 2001
From: ninabreznik <ninabreznik@gmail.com>
Date: Sun, 11 Feb 2018 01:27:46 +0000
Subject: [PATCH] Restyle settings tab - enable personal mode

---
 src/app/tabs/settings-tab.js | 17 +++++++++--------
 1 file changed, 9 insertions(+), 8 deletions(-)

diff --git a/src/app/tabs/settings-tab.js b/src/app/tabs/settings-tab.js
index 17f9e6c7d5..ec8906d553 100644
--- a/src/app/tabs/settings-tab.js
+++ b/src/app/tabs/settings-tab.js
@@ -18,6 +18,13 @@ function SettingsTab (container, appAPI, appEvents) {
 
   var optionVM = yo`<input id="alwaysUseVM" type="checkbox">`
   var personal = yo`<input id="personal" type="checkbox">`
+  var warnText = `Transaction sent over Web3 will use the web3.personal API - be sure the endpoint is opened before enabling it.
+  This mode allows to provide the passphrase in the Remix interface without having to unlock the account.
+  Although this is very convenient, you should completely trust the backend you are connected to (Geth, Parity, ...).
+  It is not recommended (and also most likely not relevant) to use this mode with an injected provider (Mist, Metamask, ...) or with JavaScript VM.
+  Remix never persist any passphrase.`
+  var warnPersonalMode = yo`<i title=${warnText} class="${css.icon} fa fa-exclamation-triangle" aria-hidden="true"></i>`
+
   var el = yo`
     <div class="${css.settingsTabView} "id="settingsView">
       <div class="${css.info}">
@@ -42,16 +49,10 @@ function SettingsTab (container, appAPI, appEvents) {
           <span class="${css.checkboxText}">Enable Optimization</span>
         </div>
         <div class="${css.crow}">
-        <div>${personal}></div>
-        <span class="${css.checkboxText}">Enable Personal Mode (transaction sent over Web3 will use the web3.personal API - be sure the endpoint is opened before enabling it -).</span>
-        <div>
-        This mode allows to provide the passphrase in the Remix interface without having to unlock the account. <br> 
-        Although this is very convenient, you should <b>completely trust</b> the backend you are connected to (Geth, Parity, ...). <br> 
-        It is not recommended (and also most likely not relevant) to use this mode with an injected provider (Mist, Metamask, ...) or with JavaScript VM <br>
-        Remix never persist any passphrase.
+          <div>${personal}></div>
+          <span class="${css.checkboxText}">Enable Personal Mode ${warnPersonalMode}></span>
         </div>
       </div>
-      </div>
       <div class="${css.info}">
         <div class=${css.title}>Themes</div>
         <div class=${css.attention}>