Merge pull request #2661 from ethereum/setingsUI

fixed the style of code and changed UI of Github Access Token section

src/app/tabs/settings-tab.js

@@ -1,9 +1,9 @@
-var yo = require('yo-yo')
+const yo = require('yo-yo')
 const globalRegistry = require('../../global/registry')
-var tooltip = require('../ui/tooltip')
+const tooltip = require('../ui/tooltip')
-var copyToClipboard = require('../ui/copy-to-clipboard')
+const copyToClipboard = require('../ui/copy-to-clipboard')
-var EventManager = require('../../lib/events')
+const EventManager = require('../../lib/events')
-var css = require('./styles/settings-tab-styles')
+const css = require('./styles/settings-tab-styles')
 import { ViewPlugin } from '@remixproject/engine'
 import * as packageJson from '../../../package.json'
 
@@ -68,12 +68,14 @@ module.exports = class SettingsTab extends ViewPlugin {
     if (self._view.el) return self._view.el
 
     // Gist settings
-    var gistAccessToken = yo`<input id="gistaccesstoken" data-id="settingsTabGistAccessToken" type="password" class="border form-control mb-2 ${css.inline}" placeholder="Token">`
+    const token = this.config.get('settings/gist-access-token')
-    var token = this.config.get('settings/gist-access-token')
+    const gistAccessToken = yo`<input id="gistaccesstoken" data-id="settingsTabGistAccessToken" type="password" class="border form-control mb-2 ${css.inline}" placeholder="Token">`
     if (token) gistAccessToken.value = token
-    var gistAddToken = yo`<input class="btn btn-sm btn-primary mx-2" id="savegisttoken" data-id="settingsTabSaveGistToken" onclick=${() => { this.config.set('settings/gist-access-token', gistAccessToken.value); tooltip('Access token saved') }} value="Save" type="button">`
+    const removeToken = () => { self.config.set('settings/gist-access-token', ''); gistAccessToken.value = ''; tooltip('Access token removed') }
-    var gistRemoveToken = yo`<input class="btn btn-sm btn-primary mx-2" id="removegisttoken" data-id="settingsTabRemoveGistToken" onclick=${() => { gistAccessToken.value = ''; this.config.set('settings/gist-access-token', ''); tooltip('Access token removed') }} value="Remove" type="button">`
+    const saveToken = () => { this.config.set('settings/gist-access-token', gistAccessToken.value); tooltip('Access token saved') }
-    this._view.gistToken = yo`<div class="${css.checkboxText}">${gistAccessToken}${copyToClipboard(() => gistAccessToken.value)}${gistAddToken}${gistRemoveToken}</div>`
+    const gistAddToken = yo`<input class="btn btn-secondary mx-1" id="savegisttoken" data-id="settingsTabSaveGistToken" onclick=${() => saveToken()} value="Save" type="button">`
+    const gistRemoveToken = yo`<i class="mx-1 fas fa-trash-alt" id="removegisttoken" data-id="settingsTabRemoveGistToken" title="Delete Github access token" onclick=${() => removeToken()}" type="button"></i>`
+    this._view.gistToken = yo`<div class="text-secondary mb-0 h6">${gistAccessToken}${gistAddToken}${copyToClipboard(() => gistAccessToken.value)}${gistRemoveToken}</div>`
     this._view.optionVM = yo`<input onchange=${onchangeOption} class="align-middle form-check-input" id="alwaysUseVM" data-id="settingsTabAlwaysUseVM" type="checkbox">`
     if (this.config.get('settings/always-use-vm') === undefined) this.config.set('settings/always-use-vm', true)
     if (this.config.get('settings/always-use-vm')) this._view.optionVM.setAttribute('checked', '')
@@ -96,7 +98,7 @@ module.exports = class SettingsTab extends ViewPlugin {
       </div>
     </div>`
 
-    var warnText = `Transaction sent over Web3 will use the web3.personal API - be sure the endpoint is opened before enabling it.
+    const 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, ...).
     Remix never persist any passphrase.`.split('\n').map(s => s.trim()).join(' ')

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

@@ -12,23 +12,9 @@ const css = csjs`
   .info h7 {
     margin-bottom: .5rem;
   }
-  .title {
-    // font-size: 1.1em;
-    // font-weight: bold;
-    // margin-bottom: 1em;
-  }
   .frow {
     margin-bottom: .5rem;
   }
-  .crow {
-    // display: flex;
-    // overflow: auto;
-    // clear: both;
-    // padding: .2em;
-  }
-  .checkboxText {
-    font-weight: normal;
-  }
   .crow label {
     cursor:pointer;
   }
@@ -64,9 +50,6 @@ const css = csjs`
   .icon {
     margin-right: .5em;
   }
-  .savegisttoken {
-    margin-left: 5px;
-  }
   .aPlugin {
     display: inline-block;
     padding-left: 10px;
@@ -85,7 +68,7 @@ const css = csjs`
   }
   .inline {
     display: inline;
-    width: 40%;
+    width: 32%;
   }
 `