Merge pull request #368 from ethereum/settings-tab

Settings Tab UI Update

Merge pull request #368 from ethereum/settings-tab
9cbf67a8 · yann300 · GitHub · 0f4f699d · 4f1abf32 · 9cbf67a8
Unverified Commit 9cbf67a8 authored Aug 26, 2020 by yann300 Committed by GitHub Aug 26, 2020
10 changed files
--- a/apps/remix-ide-e2e/src/commands/renameFile.ts
+++ b/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 + '"]')

--- a/apps/remix-ide-e2e/src/helpers/init.ts
+++ b/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() })
 }
--- a/apps/remix-ide-e2e/src/tests/editor.test.ts
+++ b/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"]')
+    .waitForElementVisible('*[data-id="settingsTabThemeLabelDark"]')
-    .click('*[data-id="settingsTabThemeDark"]')
+    .click('*[data-id="settingsTabThemeLabelDark"]')
    .pause(2000)
    .waitForElementVisible('*[data-id="editorInput"]')
    /* @todo(#2863) ch for class and not colors

--- a/apps/remix-ide-e2e/src/tests/generalSettings.test.ts
+++ b/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) {
+  'Should activate `generate contract metadata`': function (browser) {
-    const runtimeBrowser = browser.options.desiredCapabilities.browserName
+    browser.waitForElementVisible('*[data-id="remixIdeSidePanel"]', 5000)
+    .waitForElementVisible('*[data-id="settingsTabGenerateContractMetadataLabel"]', 5000)
-    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"]')
    .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)

--- a/apps/remix-ide-e2e/src/tests/libraryDeployment.test.ts
+++ b/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'])

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

--- a/apps/remix-ide/src/app/panels/terminal.js
+++ b/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"

--- a/apps/remix-ide/src/app/tabs/settings-tab.js
+++ b/apps/remix-ide/src/app/tabs/settings-tab.js
--- a/apps/remix-ide/src/app/tabs/styles/settings-tab-styles.js
+++ b/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
--- a/apps/remix-ide/src/app/tabs/theme-module.js
+++ b/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: '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/remix/raw/upload/v1594059208/remix-themes/remix-light_csxus2.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'},