disable add account when nesseccary

src/app/tabs/runTab/settings.js

@@ -87,7 +87,7 @@ class SettingsUI {
       <div class="${css.crow}">
         <div class="${css.col1_1}">
           Account
-          <i class="fas fa-plus-circle ${css.icon}" aria-hidden="true" onclick=${this.newAccount.bind(this)} title="Create a new account"></i>
+          <i id="remixRunPlus" class="fas fa-plus-circle ${css.icon}" aria-hidden="true" onclick=${this.newAccount.bind(this)} title="Create a new account"></i>
         </div>
         <div class=${css.account}>
           <select name="txorigin" class="form-control ${css.select}" id="txorigin"></select>
@@ -194,6 +194,34 @@ class SettingsUI {
     this.event.trigger('clearInstance', [])
     this.updateNetwork()
     this.fillAccountsList()
+    this.updatePlusButton()
+  }
+
+  updatePlusButton() {
+      // enable/disable + button
+      let plusBtn = document.getElementById("remixRunPlus")
+      switch (this.selectExEnv.value) {
+        case "injected": {
+          plusBtn.classList.add(css.disableMouseEvents)
+          plusBtn.title = "Unfortnately it's not possible to create an account for injected web3, please use the Metamask or other providers"
+        }
+        break;
+        case "vm": {
+          plusBtn.classList.remove(css.disableMouseEvents)
+          plusBtn.title = "Create a new account"
+        }
+        break;
+        case "web3": {
+          if (!this._components.registry.get('config').api.get("settings/personal-mode")) {
+            plusBtn.classList.add(css.disableMouseEvents)
+            plusBtn.title = "Creating an account is possible only in Personal mode. Please go to Settings to enable it."
+          } else {
+            plusBtn.classList.remove(css.disableMouseEvents)
+            plusBtn.title = "Create a new account"
+          }
+        }
+        default:
+      }
   }
 
   newAccount () {

src/app/tabs/styles/run-tab-styles.js

@@ -178,6 +178,9 @@ var css = csjs`
     border-radius: 3px;
     margin-left: 5px;
   }
+  .disableMouseEvents {
+    pointer-events: none;
+  }
   .icon {
     cursor: pointer;
     font-size: 12px;

src/app/ui/styles/tooltip-styles.js

@@ -7,13 +7,12 @@ var css = csjs`
     justify-content: space-between;
     align-items: center;
     position: fixed;
-    color: var(--primary)
     min-height: 50px;
     padding: 16px 24px 12px;
     border-radius: 3px;
     bottom: -300;
     left: 40%;
-    font-size: 12px;
+    font-size: 14px;
     text-align: center;
     bottom: 0;
   }