From cb180acf0071a60d4ddbce2f41a47de48dfd8556 Mon Sep 17 00:00:00 2001
From: ioedeveloper <daviddisu8@gmail.com>
Date: Fri, 14 Aug 2020 18:27:51 +0100
Subject: [PATCH] Settings tab checkbox and github token ui changes

---
 .../src/app/components/side-panel.js          |  1 +
 apps/remix-ide/src/app/tabs/settings-tab.js   | 57 ++++++++-----------
 .../app/tabs/styles/settings-tab-styles.js    |  6 ++
 3 files changed, 31 insertions(+), 33 deletions(-)

diff --git a/apps/remix-ide/src/app/components/side-panel.js b/apps/remix-ide/src/app/components/side-panel.js
index 411b40f416..b68f7430ad 100644
--- a/apps/remix-ide/src/app/components/side-panel.js
+++ b/apps/remix-ide/src/app/components/side-panel.js
@@ -26,6 +26,7 @@ const css = csjs`
     display: flex;
     align-items: center;
     padding: 16px 24px 15px;
+    justify-content: space-between;
   }
   .icons i {
     height: 80%;
diff --git a/apps/remix-ide/src/app/tabs/settings-tab.js b/apps/remix-ide/src/app/tabs/settings-tab.js
index 8b5ddf7863..dd3af33346 100644
--- a/apps/remix-ide/src/app/tabs/settings-tab.js
+++ b/apps/remix-ide/src/app/tabs/settings-tab.js
@@ -69,19 +69,19 @@ module.exports = class SettingsTab extends ViewPlugin {
 
     // Gist settings
     const token = this.config.get('settings/gist-access-token')
-    const gistAccessToken = yo`<input id="gistaccesstoken" data-id="settingsTabGistAccessToken" type="password" class="form-control border form-control-sm mb-2 ${css.inline}" placeholder="Token">`
+    const gistAccessToken = yo`<input id="gistaccesstoken" data-id="settingsTabGistAccessToken" type="password" class="form-control">`
     if (token) gistAccessToken.value = token
     const removeToken = () => { self.config.set('settings/gist-access-token', ''); gistAccessToken.value = ''; tooltip('Access token removed') }
     const saveToken = () => { this.config.set('settings/gist-access-token', gistAccessToken.value); tooltip('Access token saved') }
     const gistAddToken = yo`<input class="btn btn-sm btn-primary" 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">`
+    const gistRemoveToken = yo`<button class="btn btn-secondary" id="removegisttoken" data-id="settingsTabRemoveGistToken" title="Delete Github access token" onclick=${() => removeToken()}>Remove</button>`
+    this._view.gistToken = yo`<div class="text-secondary mb-0 h6">${gistAccessToken}<div class="d-flex justify-content-end">${copyToClipboard(() => gistAccessToken.value)}${gistAddToken}${gistRemoveToken}</div></div>`
+    this._view.optionVM = yo`<input onchange=${onchangeOption} class="custom-control-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', '')
-    this._view.personal = yo`<input onchange=${onchangePersonal} id="personal" type="checkbox" class="align-middle form-check-input">`
+    this._view.personal = yo`<input onchange=${onchangePersonal} id="personal" type="checkbox" class="custom-control-input">`
     if (this.config.get('settings/personal-mode')) this._view.personal.setAttribute('checked', '')
-    this._view.generateContractMetadata = yo`<input onchange=${onchangeGenerateContractMetadata} id="generatecontractmetadata" data-id="settingsTabGenerateContractMetadata" type="checkbox" class="form-check-input">`
+    this._view.generateContractMetadata = yo`<input onchange=${onchangeGenerateContractMetadata} id="generatecontractmetadata" data-id="settingsTabGenerateContractMetadata" type="checkbox" class="custom-control-input">`
 
     if (this.config.get('settings/generate-contract-metadata')) this._view.generateContractMetadata.setAttribute('checked', '')
 
@@ -89,14 +89,6 @@ module.exports = class SettingsTab extends ViewPlugin {
 
     this._view.themes = this._deps.themeModule.getThemes()
     this._view.themesCheckBoxes = this.createThemeCheckies()
-    this._view.config.homePage = yo`
-
-    <div class="${css.info} card">
-      <div class="card-body">
-      <h6 class="${css.title} card-title">Have a question?</h6>
-      <button class="btn btn-primary sm-1" data-id="settingsTabGitterChannelButton" onclick="${() => { window.open('https://gitter.im/ethereum/remix') }}">Gitter Channel</button>
-      </div>
-    </div>`
 
     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.
@@ -105,48 +97,47 @@ module.exports = class SettingsTab extends ViewPlugin {
     this._view.warnPersonalMode = yo`<i class="${css.icon} fas fa-exclamation-triangle text-warning" aria-hidden="true"></i>`
 
     this._view.config.general = yo`
-      <div class="${css.info} card">
+      <div class="${css.info} border-top">
         <div class="card-body">
           <h6 class="${css.title} card-title">General settings</h6>
-          <div class="form-check ${css.frow}">
-            <div>${this._view.generateContractMetadata}</div>
-            <label class="form-check-label align-middle" for="generatecontractmetadata">Generate contract metadata. Generate a JSON file in the contract folder. Allows to specify library addresses the contract depends on. If nothing is specified, Remix deploys libraries automatically.</label>
+          <div class="mt-2 custom-control custom-checkbox ${css.frow}">
+            ${this._view.generateContractMetadata}
+            <label class="form-check-label custom-control-label align-middle ${css.customCheckBox}" for="generatecontractmetadata">Generate contract metadata. Generate a JSON file in the contract folder. Allows to specify library addresses the contract depends on. If nothing is specified, Remix deploys libraries automatically.</label>
           </div>
-          <div class="form-check ${css.frow}">
-            <div>${this._view.optionVM}</div>
-            <label class="form-check-label align-middle" for="alwaysUseVM">Always use Ethereum VM at Load</label>
+          <div class="fmt-2 custom-control custom-checkbox ${css.frow}">
+            ${this._view.optionVM}
+            <label class="form-check-label custom-control-label align-middle ${css.customCheckBox}" for="alwaysUseVM">Always use Ethereum VM at Load</label>
           </div>
-          <div class="form-check ${css.frow}">
-            <div><input id="editorWrap" class="form-check-input align-middle" type="checkbox" onchange=${function () { this.editor.resize(this.checked) }}></div>
-            <label class="form-check-label align-middle" for="editorWrap">Text Wrap</label>
+          <div class="mt-2 custom-control custom-checkbox ${css.frow}">
+            <input id="editorWrap" class="custom-control-input" type="checkbox" onchange=${function () { this.editor.resize(this.checked) }}>
+            <label class="form-check-label custom-control-label align-middle ${css.customCheckBox}" for="editorWrap">Text Wrap</label>
           </div>
-          <div class="form-check ${css.frow}">
-            <div>${this._view.personal}></div>
-            <label class="form-check-label align-middle" for="personal"> ${this._view.warnPersonalMode} Enable Personal Mode for web3 provider. ${warnText}></label>
+          <div class="custom-control custom-checkbox ${css.frow}">
+            ${this._view.personal}>
+            <label class="form-check-label custom-control-label align-middle ${css.customCheckBox}" for="personal"> ${this._view.warnPersonalMode} Enable Personal Mode for web3 provider. ${warnText}></label>
           </div>
         </div>
       </div>
       `
     this._view.gistToken = yo`
-      <div class="${css.info} card">
+      <div class="${css.info} border-top">
         <div class="card-body">
           <h6 class="${css.title} card-title">Github Access Token</h6>
           <p class="">Manage the access token used to publish to Gist and retrieve Github contents.</p>
           <p class="">Go to github token page (link below) to create a new token and save it in Remix. Make sure this token has only 'create gist' permission.</p>
-          <p class="${css.crowNoFlex}"><a target="_blank" href="https://github.com/settings/tokens">https://github.com/settings/tokens</a></p>
-          <div class="${css.crowNoFlex}">${this._view.gistToken}</div>
+          <p class="${css.crowNoFlex}"><a class="text-primary ${css.text}" target="_blank" href="https://github.com/settings/tokens">https://github.com/settings/tokens</a></p>
+          <div class="${css.crowNoFlex}"><label>TOKEN:</label>${this._view.gistToken}</div>
         </div>
       </div>`
     this._view.config.themes = yo`
-      <div class="${css.info} card">
+      <div class="${css.info} border-top">
         <div class="card-body">
           <h6 class="${css.title} card-title">Themes</h6>
             ${this._view.themesCheckBoxes}
         </div>
       </div>`
     this._view.el = yo`
-      <div class="${css.settingsTabView}" id="settingsView" data-id="settingsTabSettingsView">
-        ${this._view.config.homePage}
+      <div id="settingsView" data-id="settingsTabSettingsView">
         ${this._view.config.general}
         ${this._view.gistToken}
         ${this._view.config.themes}
diff --git a/apps/remix-ide/src/app/tabs/styles/settings-tab-styles.js b/apps/remix-ide/src/app/tabs/styles/settings-tab-styles.js
index 3d80a30682..2ba10f7a29 100644
--- a/apps/remix-ide/src/app/tabs/styles/settings-tab-styles.js
+++ b/apps/remix-ide/src/app/tabs/styles/settings-tab-styles.js
@@ -70,6 +70,12 @@ const css = csjs`
     display: inline;
     width: 32%;
   }
+  .customCheckBox::before, .customCheckBox::after {
+    top: .7em
+  }
+  .text {
+    text-decoration: none;
+  }
 `
 
 module.exports = css