Align checkbox and label

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

@@ -57,7 +57,7 @@ module.exports = class SettingsTab extends ViewPlugin {
     if (themes) {
       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}">
+          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>`
@@ -117,19 +117,19 @@ module.exports = class SettingsTab extends ViewPlugin {
       <div class="${css.info} border-top">
         <div class="card-body">
           <h6 class="${css.title} card-title">General settings</h6>
-          <div class="mt-2 custom-control custom-checkbox ${css.frow}">
+          <div class="mt-2 custom-control custom-checkbox mb-1">
             ${this._view.generateContractMetadata}
             ${this._view.generateContractMetadataLabel}
           </div>
-          <div class="fmt-2 custom-control custom-checkbox ${css.frow}">
+          <div class="fmt-2 custom-control custom-checkbox mb-1">
             ${this._view.optionVM}
             ${this._view.optionVMLabel}
           </div>
-          <div class="mt-2 custom-control custom-checkbox ${css.frow}">
+          <div class="mt-2 custom-control custom-checkbox mb-1">
             ${this._view.textWrap}
             ${this._view.textWrapLabel}
           </div>
-          <div class="custom-control custom-checkbox ${css.frow}">
+          <div class="custom-control custom-checkbox mb-1">
             ${this._view.personal}>
             ${this._view.personalLabel}
           </div>

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

@@ -5,11 +5,8 @@ import * as packageJson from '../../../../../package.json'
 import yo from 'yo-yo'
 
 const themes = [
-  {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/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: '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'},