Merge pull request #1054 from ethereum/settingsTabEnablePersonalMode

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}>