Merge pull request #368 from ethereum/settings-tab

apps/remix-ide-e2e/src/commands/renameFile.ts

@@ -42,7 +42,7 @@ function renameFile (browser: NightwatchBrowser, path: string, newFileName: stri
         })
       })
       .click('body') // blur
-      .waitForElementVisible('#modal-footer-ok', 10000)
+      .waitForElementVisible('#modal-footer-ok', 100000)
       .pause(2000)
       .click('#modal-footer-ok')
       .waitForElementNotPresent('[data-path="' + path + '"]')

apps/remix-ide-e2e/src/helpers/init.ts

@@ -29,8 +29,9 @@ function initModules (browser: NightwatchBrowser, callback: VoidFunction) {
     .scrollAndClick('[data-id="pluginManagerComponentActivateButtondebugger"]')
     .scrollAndClick('[data-id="verticalIconsKindfileExplorers"]')
     .clickLaunchIcon('settings')
+    .click('*[data-id="settingsTabGenerateContractMetadataLabel"]')
     .setValue('[data-id="settingsTabGistAccessToken"]', process.env.gist_token)
     .click('[data-id="settingsTabSaveGistToken"]')
-    .click('[data-id="settingsTabThemeFlatly"]') // e2e tests were initially developed with Flatly. Some tests are failing with the default one (Dark), because the dark theme put uppercase everywhere.
+    .click('[data-id="settingsTabThemeLabelFlatly"]') // e2e tests were initially developed with Flatly. Some tests are failing with the default one (Dark), because the dark theme put uppercase everywhere.
     .perform(() => { callback() })
 }

apps/remix-ide-e2e/src/tests/editor.test.ts

@@ -64,8 +64,8 @@ module.exports = {
   'Should load syntax highlighter for ace dark theme': function (browser: NightwatchBrowser) {
     browser.waitForElementVisible('*[data-id="verticalIconsKindsettings"]')
     .click('*[data-id="verticalIconsKindsettings"]')
-    .waitForElementVisible('*[data-id="settingsTabThemeDark"]')
-    .click('*[data-id="settingsTabThemeDark"]')
+    .waitForElementVisible('*[data-id="settingsTabThemeLabelDark"]')
+    .click('*[data-id="settingsTabThemeLabelDark"]')
     .pause(2000)
     .waitForElementVisible('*[data-id="editorInput"]')
     /* @todo(#2863) ch for class and not colors

apps/remix-ide-e2e/src/tests/generalSettings.test.ts

@@ -16,21 +16,9 @@ module.exports = {
     .waitForElementContainsText('h6[data-id="sidePanelSwapitTitle"]', 'SETTINGS')
   },
 
-  'Should open gitter channel in a new tab when `Gitter Channel Button` is clicked': function (browser: NightwatchBrowser) {
-    const runtimeBrowser = browser.options.desiredCapabilities.browserName
-
-    browser.waitForElementVisible('*[data-id="remixIdeSidePanel"]')
-    .waitForElementVisible('*[data-id="settingsTabGitterChannelButton"]', 5000)
-    .click('*[data-id="settingsTabGitterChannelButton"]')
-    .pause(2000)
-    .perform((done) => { if (runtimeBrowser === 'chrome') { browser.switchBrowserTab(1).assert.urlContains('https://gitter.im/ethereum/remix') } done() })
-  },
-
-  'Should activate `generate contract metadata`': function (browser: NightwatchBrowser) {
-    browser.switchBrowserTab(0)
-    .waitForElementVisible('*[data-id="remixIdeSidePanel"]', 5000)
-    .waitForElementVisible('*[data-id="settingsTabGenerateContractMetadata"]', 5000)
-    .click('*[data-id="settingsTabGenerateContractMetadata"]')
+  'Should activate `generate contract metadata`': function (browser) {
+    browser.waitForElementVisible('*[data-id="remixIdeSidePanel"]', 5000)
+    .waitForElementVisible('*[data-id="settingsTabGenerateContractMetadataLabel"]', 5000)
     .click('*[data-id="verticalIconsFileExplorerIcons"]')
     .openFile('browser/3_Ballot.sol')
     .click('*[data-id="verticalIconsKindsolidity"]')
@@ -67,7 +55,7 @@ module.exports = {
 
   'Should load dark theme': function (browser: NightwatchBrowser) {
     browser.waitForElementVisible('*[data-id="verticalIconsKindsettings"]', 5000)
-    .click('*[data-id="settingsTabThemeDark"]')
+    .click('*[data-id="settingsTabThemeLabelDark"]')
     .pause(2000)
     .checkElementStyle(':root', '--primary', remixIdeThemes.dark.primary)
     .checkElementStyle(':root', '--secondary', remixIdeThemes.dark.secondary)
@@ -79,7 +67,7 @@ module.exports = {
 
   'Should load light theme': function (browser: NightwatchBrowser) {
     browser.waitForElementVisible('*[data-id="verticalIconsKindsettings"]', 5000)
-    .click('*[data-id="settingsTabThemeLight"]')
+    .click('*[data-id="settingsTabThemeLabelLight"]')
     .pause(2000)
     .checkElementStyle(':root', '--primary', remixIdeThemes.light.primary)
     .checkElementStyle(':root', '--secondary', remixIdeThemes.light.secondary)
@@ -91,7 +79,7 @@ module.exports = {
 
   'Should load Cerulean theme': function (browser: NightwatchBrowser) {
     browser.waitForElementVisible('*[data-id="verticalIconsKindsettings"]', 5000)
-    .click('*[data-id="settingsTabThemeCerulean"]')
+    .click('*[data-id="settingsTabThemeLabelCerulean"]')
     .pause(5000)
     .checkElementStyle(':root', '--primary', remixIdeThemes.curelean.primary)
     .checkElementStyle(':root', '--secondary', remixIdeThemes.curelean.secondary)
@@ -103,7 +91,7 @@ module.exports = {
 
   'Should load Flatly theme': function (browser: NightwatchBrowser) {
     browser.waitForElementVisible('*[data-id="verticalIconsKindsettings"]', 5000)
-    .click('*[data-id="settingsTabThemeFlatly"]')
+    .click('*[data-id="settingsTabThemeLabelFlatly"]')
     .pause(2000)
     .checkElementStyle(':root', '--primary', remixIdeThemes.flatly.primary)
     .checkElementStyle(':root', '--secondary', remixIdeThemes.flatly.secondary)
@@ -115,7 +103,7 @@ module.exports = {
 
   'Should load Lumen theme': function (browser: NightwatchBrowser) {
     browser.waitForElementVisible('*[data-id="verticalIconsKindsettings"]', 5000)
-    .click('*[data-id="settingsTabThemeLumen"]')
+    .click('*[data-id="settingsTabThemeLabelLumen"]')
     .pause(2000)
     .checkElementStyle(':root', '--primary', remixIdeThemes.lumen.primary)
     .checkElementStyle(':root', '--secondary', remixIdeThemes.lumen.secondary)
@@ -127,7 +115,7 @@ module.exports = {
 
   'Should load Minty theme': function (browser: NightwatchBrowser) {
     browser.waitForElementVisible('*[data-id="verticalIconsKindsettings"]', 5000)
-    .click('*[data-id="settingsTabThemeMinty"]')
+    .click('*[data-id="settingsTabThemeLabelMinty"]')
     .pause(2000)
     .checkElementStyle(':root', '--primary', remixIdeThemes.minty.primary)
     .checkElementStyle(':root', '--secondary', remixIdeThemes.minty.secondary)
@@ -139,7 +127,7 @@ module.exports = {
 
   'Should load Pulse theme': function (browser: NightwatchBrowser) {
     browser.waitForElementVisible('*[data-id="verticalIconsKindsettings"]', 5000)
-    .click('*[data-id="settingsTabThemePulse"]')
+    .click('*[data-id="settingsTabThemeLabelPulse"]')
     .pause(2000)
     .checkElementStyle(':root', '--primary', remixIdeThemes.pulse.primary)
     .checkElementStyle(':root', '--secondary', remixIdeThemes.pulse.secondary)
@@ -151,7 +139,7 @@ module.exports = {
 
   'Should load Sandstone theme': function (browser: NightwatchBrowser) {
     browser.waitForElementVisible('*[data-id="verticalIconsKindsettings"]', 5000)
-    .click('*[data-id="settingsTabThemeSandstone"]')
+    .click('*[data-id="settingsTabThemeLabelSandstone"]')
     .pause(2000)
     .checkElementStyle(':root', '--primary', remixIdeThemes.sandstone.primary)
     .checkElementStyle(':root', '--secondary', remixIdeThemes.sandstone.secondary)
@@ -163,7 +151,7 @@ module.exports = {
 
   'Should load Spacelab theme': function (browser: NightwatchBrowser) {
     browser.waitForElementVisible('*[data-id="verticalIconsKindsettings"]', 5000)
-    .click('*[data-id="settingsTabThemeSpacelab"]')
+    .click('*[data-id="settingsTabThemeLabelSpacelab"]')
     .pause(2000)
     .checkElementStyle(':root', '--primary', remixIdeThemes.spacelab.primary)
     .checkElementStyle(':root', '--secondary', remixIdeThemes.spacelab.secondary)
@@ -175,7 +163,7 @@ module.exports = {
 
   'Should load Yeti theme': function (browser: NightwatchBrowser) {
     browser.waitForElementVisible('*[data-id="verticalIconsKindsettings"]', 5000)
-    .click('*[data-id="settingsTabThemeYeti"]')
+    .click('*[data-id="settingsTabThemeLabelYeti"]')
     .pause(2000)
     .checkElementStyle(':root', '--primary', remixIdeThemes.yeti.primary)
     .checkElementStyle(':root', '--secondary', remixIdeThemes.yeti.secondary)
@@ -187,7 +175,7 @@ module.exports = {
 
   'Should load Cyborg theme': function (browser: NightwatchBrowser) {
     browser.waitForElementVisible('*[data-id="verticalIconsKindsettings"]', 5000)
-    .click('*[data-id="settingsTabThemeCyborg"]')
+    .click('*[data-id="settingsTabThemeLabelCyborg"]')
     .pause(2000)
     .checkElementStyle(':root', '--primary', remixIdeThemes.cyborg.primary)
     .checkElementStyle(':root', '--secondary', remixIdeThemes.cyborg.secondary)
@@ -199,7 +187,7 @@ module.exports = {
 
   'Should load Darkly theme': function (browser: NightwatchBrowser) {
     browser.waitForElementVisible('*[data-id="verticalIconsKindsettings"]', 5000)
-    .click('*[data-id="settingsTabThemeDarkly"]')
+    .click('*[data-id="settingsTabThemeLabelDarkly"]')
     .pause(2000)
     .checkElementStyle(':root', '--primary', remixIdeThemes.darkly.primary)
     .checkElementStyle(':root', '--secondary', remixIdeThemes.darkly.secondary)
@@ -211,7 +199,7 @@ module.exports = {
 
   'Should load Superhero theme': function (browser: NightwatchBrowser) {
     browser.waitForElementVisible('*[data-id="verticalIconsKindsettings"]', 5000)
-    .click('*[data-id="settingsTabThemeSuperhero"]')
+    .click('*[data-id="settingsTabThemeLabelSuperhero"]')
     .pause(2000)
     .checkElementStyle(':root', '--primary', remixIdeThemes.superhero.primary)
     .checkElementStyle(':root', '--secondary', remixIdeThemes.superhero.secondary)

apps/remix-ide-e2e/src/tests/libraryDeployment.test.ts

@@ -41,7 +41,7 @@ module.exports = {
     browser.click('*[data-id="deployAndRunClearInstances"]')
       .pause(5000)
       .clickLaunchIcon('settings')
-      .click('#generatecontractmetadata')
+      .click('*[data-id="settingsTabGenerateContractMetadataLabel"]')
       .clickLaunchIcon('solidity')
       .click('#compileTabView button[title="Compile"]') // that should generate the JSON artefact
       .verifyContracts(['test'])

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%;

apps/remix-ide/src/app/panels/terminal.js

@@ -171,9 +171,9 @@ class Terminal extends Plugin {
           </div>
           ${self._view.pendingTxCount}
           <div class=${css.verticalLine}></div>
-          <div class="mx-2 d-flex pb-1 align-items-center ${css.listenOnNetwork} custom-control custom-checkbox">
+          <div class="pt-1 h-80 mx-3 align-items-center ${css.listenOnNetwork} custom-control custom-checkbox">
             <input
-              class="pb-0 form-check-input custom-control-input"
+              class="custom-control-input"
               id="listenNetworkCheck"
               onchange=${listenOnNetwork}
               type="checkbox"

apps/remix-ide/src/app/tabs/settings-tab.js

@@ -34,12 +34,17 @@ module.exports = class SettingsTab extends ViewPlugin {
     this._view = { /* eslint-disable */
       el: null,
       optionVM: null,
+      optionVMLabel: null,
       personal: null,
+      personalLabel: null,
       warnPersonalMode: null,
       generateContractMetadata: null,
+      generateContractMetadataLabel: null,
       config: {
         general: null, themes: null
-      }
+      },
+      textWrap: null,
+      textWrapLabel: null
     } /* eslint-enable */
     this.event = new EventManager()
   }
@@ -52,9 +57,9 @@ module.exports = class SettingsTab extends ViewPlugin {
     if (themes) {
       return yo`<div class="card-text themes-container">
         ${themes.map((aTheme) => {
-          let el = yo`<div class="${css.frow} form-check ${css.crow}">
-          <input type="radio" onchange=${event => { onswitchTheme(event, aTheme.name) }} class="align-middle form-check-input" name="theme" id="${aTheme.name}" data-id="settingsTabTheme${aTheme.name}"  >
-          <label class="form-check-label" for="${aTheme.name}">${aTheme.name} (${aTheme.quality})</label>
+          let el = yo`<div class="radio custom-control custom-radio mb-1 form-check ${css.crow}">
+          <input type="radio" onchange=${event => { onswitchTheme(event, aTheme.name) }} class="align-middle custom-control-input" name="theme" id="${aTheme.name}" data-id="settingsTabTheme${aTheme.name}">
+          <label class="form-check-label custom-control-label" data-id="settingsTabThemeLabel${aTheme.name}" for="${aTheme.name}">${aTheme.name} (${aTheme.quality})</label>
         </div>`
           if (this._deps.themeModule.active === aTheme.name) el.querySelector('input').setAttribute('checked', 'checked')
           return el
@@ -69,97 +74,126 @@ 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 gistAddToken = yo`<input class="btn btn-sm btn-primary ml-2" id="savegisttoken" data-id="settingsTabSaveGistToken" onclick=${() => saveToken()} value="Save" type="button">`
+    const gistRemoveToken = yo`<button class="btn btn-sm btn-secondary ml-2" 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 pt-2">${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">`
+    this._view.optionVMLabel = yo`<label class="form-check-label custom-control-label align-middle" for="alwaysUseVM">Always use Ethereum VM at Load</label>`
     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">`
+    elementStateChanged(self._view.optionVMLabel, !this.config.get('settings/always-use-vm'))
+
+    this._view.textWrap = yo`<input id="editorWrap" class="custom-control-input" type="checkbox" onchange=${textWrapEvent}>`
+    this._view.textWrapLabel = yo`<label class="form-check-label custom-control-label align-middle" for="editorWrap">Text Wrap</label>`
+    if (this.config.get('settings/text-wrap')) this._view.textWrap.setAttribute('checked', '')
+    elementStateChanged(self._view.textWrapLabel, !this.config.get('settings/text-wrap'))
+
+    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(' ')
+
+    this._view.personal = yo`<input onchange=${onchangePersonal} id="personal" type="checkbox" class="custom-control-input">`
+    this._view.warnPersonalMode = yo`<i class="${css.icon} fas fa-exclamation-triangle text-warning" aria-hidden="true"></i>`
+    this._view.personalLabel = yo`<label class="form-check-label custom-control-label align-middle" for="personal"> ${this._view.warnPersonalMode} Enable Personal Mode for web3 provider. ${warnText}></label>`
     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">`
+    elementStateChanged(self._view.personalLabel, !this.config.get('settings/personal-mode'))
 
+    this._view.generateContractMetadata = yo`<input onchange=${onchangeGenerateContractMetadata} id="generatecontractmetadata" data-id="settingsTabGenerateContractMetadata" type="checkbox" class="custom-control-input">`
+    this._view.generateContractMetadataLabel = yo`<label class="form-check-label custom-control-label align-middle" data-id="settingsTabGenerateContractMetadataLabel" 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>`
+    if (this.config.get('settings/generate-contract-metadata') === undefined) this.config.set('settings/generate-contract-metadata', true)
     if (this.config.get('settings/generate-contract-metadata')) this._view.generateContractMetadata.setAttribute('checked', '')
+    elementStateChanged(self._view.generateContractMetadataLabel, !this.config.get('settings/generate-contract-metadata'))
 
     this._view.pluginInput = yo`<textarea rows="4" cols="70" id="plugininput" type="text" class="${css.pluginTextArea}" ></textarea>`
 
     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.
-    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(' ')
-    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="card-body">
+      <div class="${css.info} border-top">
+        <div class="card-body pt-3 pb-2">
           <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 mb-1">
+            ${this._view.generateContractMetadata}
+            ${this._view.generateContractMetadataLabel}
           </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 mb-1">
+            ${this._view.optionVM}
+            ${this._view.optionVMLabel}
           </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 mb-1">
+            ${this._view.textWrap}
+            ${this._view.textWrapLabel}
           </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 mb-1">
+            ${this._view.personal}>
+            ${this._view.personalLabel}
           </div>
         </div>
       </div>
       `
     this._view.gistToken = yo`
-      <div class="${css.info} card">
-        <div class="card-body">
+      <div class="${css.info} border-top">
+        <div class="card-body pt-3 pb-2">
           <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="mb-1">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} mb-1"><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="card-body">
+      <div class="${css.info} border-top">
+        <div class="card-body pt-3 pb-2">
           <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}
       </div>`
 
     function onchangeGenerateContractMetadata (event) {
-      self.config.set('settings/generate-contract-metadata', !self.config.get('settings/generate-contract-metadata'))
+      const isChecked = self.config.get('settings/generate-contract-metadata')
+      
+      self.config.set('settings/generate-contract-metadata', !isChecked)
+      elementStateChanged(self._view.generateContractMetadataLabel, isChecked)
     }
     function onchangeOption (event) {
-      self.config.set('settings/always-use-vm', !self.config.get('settings/always-use-vm'))
+      const isChecked = self.config.get('settings/always-use-vm')
+
+      self.config.set('settings/always-use-vm', !isChecked)
+      elementStateChanged(self._view.optionVMLabel, isChecked)
+    }
+    function textWrapEvent (event) {
+      const isChecked = self.config.get('settings/text-wrap')
+
+      self.config.set('settings/text-wrap', !isChecked)
+      elementStateChanged(self._view.textWrapLabel, isChecked)
+      self.editor.resize(!isChecked)
     }
     function onchangePersonal (event) {
-      self.config.set('settings/personal-mode', !self.config.get('settings/personal-mode'))
+      const isChecked = self.config.get('settings/personal-mode')
+
+      self.config.set('settings/personal-mode', !isChecked)
+      elementStateChanged(self._view.personalLabel, isChecked)
+    }
+    function elementStateChanged(el, isChanged){
+      if (isChanged) {
+        el.classList.remove("text-dark")
+        el.classList.add("text-secondary")
+      } else {
+        el.classList.add("text-dark")
+        el.classList.remove("text-secondary")
+      }
     }
 
     this._deps.themeModule.switchTheme()

apps/remix-ide/src/app/tabs/styles/settings-tab-styles.js

@@ -5,7 +5,6 @@ const css = csjs`
     padding: 2%;
   }
   .info {
-    margin-bottom: .6rem;
     word-break: break-word;
     font-size: .8rem;
   }
@@ -70,6 +69,9 @@ const css = csjs`
     display: inline;
     width: 32%;
   }
+  .text, .text:hover {
+    text-decoration: none;
+  }
 `
 
 module.exports = css

apps/remix-ide/src/app/tabs/theme-module.js

@@ -5,8 +5,8 @@ import * as packageJson from '../../../../../package.json'
 import yo from 'yo-yo'
 
 const themes = [
-  {name: 'Dark', quality: 'dark', url: 'https://res.cloudinary.com/dvtmp0niu/raw/upload/v1584965247/remix-dark_tmkdla.css'},
-  {name: 'Light', quality: 'light', url: 'https://res.cloudinary.com/remix/raw/upload/v1594059208/remix-themes/remix-light_csxus2.css'},
+  {name: 'Dark', quality: 'dark', url: 'https://res.cloudinary.com/lianahus/raw/upload/v1597918237/remix-themes/PR365/remix-dark_tvx1s2.css'},
+  {name: 'Light', quality: 'light', url: 'https://res.cloudinary.com/lianahus/raw/upload/v1597918237/remix-themes/PR365/remix-light_powaqg.css'},
 
   {name: 'Cerulean', quality: 'light', url: 'https://bootswatch.com/4/cerulean/bootstrap.min.css'},
   {name: 'Flatly', quality: 'light', url: 'https://bootswatch.com/4/flatly/bootstrap.min.css'},