Added new themes and fixed failing flatly theme click in tests

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

@@ -31,6 +31,6 @@ function initModules (browser: NightwatchBrowser, callback: VoidFunction) {
     .clickLaunchIcon('settings')
     .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/src/app/tabs/settings-tab.js

@@ -55,11 +55,11 @@ module.exports = class SettingsTab extends ViewPlugin {
       this._deps.themeModule.switchTheme(name)
     }
     if (themes) {
-      return yo`<div class="<div card-text themes-container">
+      return yo`<div class="card-text themes-container">
         ${themes.map((aTheme) => {
           let el = yo`<div class="radio custom-control custom-radio ${css.frow} 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" for="${aTheme.name}">${aTheme.name} (${aTheme.quality})</label>
+          <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

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

@@ -5,8 +5,11 @@ 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/v1597755272/remix-themes/PR365/remix-dark_xbkjf1.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/v1597755272/remix-themes/PR365/remix-light_nmjpo9.css'},
+  {name: 'Midcentury', quality: 'light', url: 'https://res.cloudinary.com/lianahus/raw/upload/v1597755272/remix-themes/PR365/remix-midcentury_mze7mq.css'},
+  {name: 'BackToBlack', quality: 'dark', url: 'https://res.cloudinary.com/lianahus/raw/upload/v1597755272/remix-themes/PR365/remix-black_fftgak.css'},
+  {name: 'Candy', quality: 'light', url: 'https://res.cloudinary.com/lianahus/raw/upload/v1597755272/remix-themes/PR365/remix-candy_xlto9t.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'},