From aa38b1f8591e00c14b30037fb6fe130072acdc5b Mon Sep 17 00:00:00 2001
From: gregueiras <gregueiras@gmail.com>
Date: Mon, 26 Nov 2018 20:11:11 +0000
Subject: [PATCH 01/19] Multi tab WIP

---
 .../modals/PreferencesModal/ConfigTab.styl    | 83 +++++++++++++++++
 .../main/modals/PreferencesModal/Slider.styl  | 90 +++++++++++++++++++
 browser/main/modals/PreferencesModal/UiTab.js | 32 ++++++-
 3 files changed, 204 insertions(+), 1 deletion(-)
 create mode 100644 browser/main/modals/PreferencesModal/Slider.styl

diff --git a/browser/main/modals/PreferencesModal/ConfigTab.styl b/browser/main/modals/PreferencesModal/ConfigTab.styl
index 255165ce..f34b19bc 100644
--- a/browser/main/modals/PreferencesModal/ConfigTab.styl
+++ b/browser/main/modals/PreferencesModal/ConfigTab.styl
@@ -1,5 +1,83 @@
 @import('./Tab')
 
+.container
+  display: flex
+  flex-direction: column
+  align-items: center
+  justify-content: center
+  position relative
+  margin-bottom: 2em
+
+.box-minmax
+  width 608px
+  display flex
+  justify-content space-between
+  font-size $tab--button-font-size
+  color $ui-text-color
+  span first-child
+  margin-top 18px
+  padding-right 10px
+  position relative
+
+div[id^="secondRow"]
+  position absolute;
+  z-index 2;
+  left 0;
+  top 0;
+  margin-bottom -42px;
+  
+div[id^="firstRow"]
+  position absolute;
+  z-index 2;
+  left 0;
+  top 0;
+  margin-bottom -25px;
+
+.rs-range
+  margin-top: 29px
+  width: 600px
+  -webkit-appearance: none
+  &:focus
+    outline: black
+  &::-webkit-slider-runnable-track
+    width: 100%
+    height: 0.1px
+    cursor: pointer
+    box-shadow: none
+    background: $ui-backgroundColor
+    border-radius: 0px
+    border: 0px solid #010101
+    
+  &::-webkit-slider-thumb
+    box-shadow: none
+    border: 0px solid $ui-borderColor
+    box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.25)
+    height: 42px
+    width: 22px
+    border-radius: 22px
+    background: $ui-backgroundColor
+    cursor: pointer
+    -webkit-appearance: none
+    margin-top: -20px
+
+.rs-label
+  position: relative
+  transform-origin: center center
+  display: block
+  background: transparent
+  border-radius: none
+  line-height: 30px
+  font-weight: normal
+  box-sizing: border-box
+  border: none
+  margin-bottom: -15px
+  margin-left: 0px
+  left: attr(value)
+  color: $ui-text-color
+  font-style: normal
+  font-weight: normal
+  line-height: normal
+  font-size: $tab--button-font-size
 .root
   padding 15px
   color $ui-text-color
@@ -170,6 +248,11 @@ body[data-theme="dark"]
     select, .group-section-control-input
       colorDarkControl()
 
+  .box-minmax
+    colorDarkControl()
+  
+  .rs-range
+    colorDarkControl()
 
 body[data-theme="solarized-dark"]
   .root
diff --git a/browser/main/modals/PreferencesModal/Slider.styl b/browser/main/modals/PreferencesModal/Slider.styl
new file mode 100644
index 00000000..607c8407
--- /dev/null
+++ b/browser/main/modals/PreferencesModal/Slider.styl
@@ -0,0 +1,90 @@
+.container
+  display: flex
+  flex-direction: column
+  align-items: center
+  justify-content: center
+.box-minmax
+  margin-top: 30px
+  width: 608px
+  display: flex
+  justify-content: space-between
+  font-size: 20px
+  color: #FFFFFF
+  span:first-child
+    margin-left: 10px
+.range-slider
+  margin-top: 30vh
+.rs-range
+  margin-top: 29px
+  width: 600px
+  -webkit-appearance: none
+  &:focus
+    outline: none
+  &::-webkit-slider-runnable-track
+    width: 100%
+    height: 1px
+    cursor: pointer
+    box-shadow: none
+    background: #ffffff
+    border-radius: 0px
+    border: 0px solid #010101
+  &::-moz-range-track
+    width: 100%
+    height: 1px
+    cursor: pointer
+    box-shadow: none
+    background: #ffffff
+    border-radius: 0px
+    border: 0px solid #010101
+  &::-webkit-slider-thumb
+    box-shadow: none
+    border: 0px solid #ffffff
+    box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.25)
+    height: 42px
+    width: 22px
+    border-radius: 22px
+    background: rgba(255, 255, 255, 1)
+    cursor: pointer
+    -webkit-appearance: none
+    margin-top: -20px
+  &::-moz-range-thumb
+    box-shadow: none
+    border: 0px solid #ffffff
+    box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.25)
+    height: 42px
+    width: 22px
+    border-radius: 22px
+    background: rgba(255, 255, 255, 1)
+    cursor: pointer
+    -webkit-appearance: none
+    margin-top: -20px
+  &::-moz-focus-outer
+    border: 0
+.rs-label
+  position: relative
+  transform-origin: center center
+  display: block
+  width: 98px
+  height: 98px
+  background: transparent
+  border-radius: 50%
+  line-height: 30px
+  text-align: center
+  font-weight: bold
+  padding-top: 22px
+  box-sizing: border-box
+  border: 2px solid #fff
+  margin-top: 20px
+  margin-left: -38px
+  left: attr(value)
+  color: #fff
+  font-style: normal
+  font-weight: normal
+  line-height: normal
+  font-size: 36px
+  &::after
+    content: "kg"
+    display: block
+    font-size: 20px
+    letter-spacing: 0.07em
+    margin-top: -2px
\ No newline at end of file
diff --git a/browser/main/modals/PreferencesModal/UiTab.js b/browser/main/modals/PreferencesModal/UiTab.js
index 6bc3b0a3..fe85008d 100644
--- a/browser/main/modals/PreferencesModal/UiTab.js
+++ b/browser/main/modals/PreferencesModal/UiTab.js
@@ -12,7 +12,6 @@ import _ from 'lodash'
 import i18n from 'browser/lib/i18n'
 import { getLanguages } from 'browser/lib/Languages'
 import normalizeEditorFontFamily from 'browser/lib/normalizeEditorFontFamily'
-
 const OSX = global.process.platform === 'darwin'
 
 const electron = require('electron')
@@ -163,6 +162,20 @@ class UiTab extends React.Component {
     }, 2000)()
   }
 
+  handleSlider (number) {
+    const sliderID = 'rs-range-line-' + number
+    const bulletID = 'rs-bullet-' + number
+
+    const rangeSlider = document.getElementById(sliderID)
+    const rangeBullet = document.getElementById(bulletID)
+
+    if (rangeSlider && rangeBullet) {
+      rangeBullet.innerHTML = Math.floor(rangeSlider.value / 60) + ':' + rangeSlider.value % 60
+      const bulletPosition = (rangeSlider.value / rangeSlider.max)
+      rangeBullet.style.left = (bulletPosition * 578) + 'px'
+    }
+  }
+
   render () {
     const UiAlert = this.state.UiAlert
     const UiAlertElement = UiAlert != null
@@ -199,6 +212,23 @@ class UiTab extends React.Component {
               </select>
             </div>
           </div>
+          <div styleName='group-section'>
+            <div styleName='container'>
+              <div styleName='range-slider' id='firstRow'>
+                <span id='rs-bullet-1' styleName='rs-label'>00:00</span>
+                <input id='rs-range-line-1' styleName='rs-range' type='range' value={config.ui.scheduleStart} min='0' max='1440' step='5'
+                  onChange={() => this.handleSlider(1)} />
+              </div>
+              <div styleName='range-slider' id='secondRow'>
+                <span id='rs-bullet-2' styleName='rs-label'>24:00</span>
+                <input id='rs-range-line-2' styleName='rs-range' type='range' value={config.ui.scheduleEnd} min='0' max='1440' step='5'
+                  onInput={() => this.handleSlider(2)} />
+              </div>
+              <div styleName='box-minmax'>
+                <span>00:00</span><span>24:00</span>
+              </div>
+            </div>
+          </div>
 
           <div styleName='group-section'>
             <div styleName='group-section-label'>

From 1d21bb1ea34c459dea14e5ecfdf95d6a89974b01 Mon Sep 17 00:00:00 2001
From: gregueiras <gregueiras@gmail.com>
Date: Mon, 26 Nov 2018 22:00:02 +0000
Subject: [PATCH 02/19] Values are now saved

---
 .../modals/PreferencesModal/ConfigTab.styl    | 20 +++--
 browser/main/modals/PreferencesModal/UiTab.js | 80 +++++++++++++++++--
 2 files changed, 86 insertions(+), 14 deletions(-)

diff --git a/browser/main/modals/PreferencesModal/ConfigTab.styl b/browser/main/modals/PreferencesModal/ConfigTab.styl
index f34b19bc..3c35b32a 100644
--- a/browser/main/modals/PreferencesModal/ConfigTab.styl
+++ b/browser/main/modals/PreferencesModal/ConfigTab.styl
@@ -17,7 +17,9 @@
   span first-child
   margin-top 18px
   padding-right 10px
+  padding-left  10px
   position relative
+  background $ui-backgroundColor
 
 div[id^="secondRow"]
   position absolute;
@@ -70,7 +72,9 @@ div[id^="firstRow"]
   font-weight: normal
   box-sizing: border-box
   border: none
-  margin-bottom: -15px
+  margin-bottom: -5px
+  margin-top: -10px
+  width: 0px
   margin-left: 0px
   left: attr(value)
   color: $ui-text-color
@@ -248,12 +252,10 @@ body[data-theme="dark"]
     select, .group-section-control-input
       colorDarkControl()
 
-  .box-minmax
-    colorDarkControl()
-  
-  .rs-range
+  .box-minmax, .rs-range, .rs-label
     colorDarkControl()
 
+
 body[data-theme="solarized-dark"]
   .root
     color $ui-solarized-dark-text-color
@@ -280,6 +282,8 @@ body[data-theme="solarized-dark"]
   .group-section-control
     select, .group-section-control-input
       colorSolarizedDarkControl()
+  .box-minmax, .rs-range, .rs-label
+      colorSolarizedDarkControl()
 
 body[data-theme="monokai"]
   .root
@@ -307,6 +311,8 @@ body[data-theme="monokai"]
   .group-section-control
     select, .group-section-control-input
       colorMonokaiControl()
+  .box-minmax, .rs-range, .rs-label
+      colorMonokaiControl()
 
 body[data-theme="dracula"]
   .root
@@ -333,4 +339,6 @@ body[data-theme="dracula"]
     colorDraculaControl()
   .group-section-control
     select, .group-section-control-input
-      colorDraculaControl()
\ No newline at end of file
+      colorDraculaControl()
+  .box-minmax, .rs-range, .rs-label
+    colorDraculaControl()
\ No newline at end of file
diff --git a/browser/main/modals/PreferencesModal/UiTab.js b/browser/main/modals/PreferencesModal/UiTab.js
index fe85008d..498ba897 100644
--- a/browser/main/modals/PreferencesModal/UiTab.js
+++ b/browser/main/modals/PreferencesModal/UiTab.js
@@ -44,6 +44,10 @@ class UiTab extends React.Component {
     }
     ipc.addListener('APP_SETTING_DONE', this.handleSettingDone)
     ipc.addListener('APP_SETTING_ERROR', this.handleSettingError)
+
+    this.handleSlider(null, 1)
+    this.handleSlider(null, 2)
+
   }
 
   componentWillUnmount () {
@@ -65,6 +69,10 @@ class UiTab extends React.Component {
     const newConfig = {
       ui: {
         theme: this.refs.uiTheme.value,
+        enableScheduleTheme: this.refs.enableScheduleTheme.value,
+        scheduledTheme: this.refs.uiScheduledTheme.value,
+        scheduleStart: this.refs.scheduleStart.value,
+        scheduleEnd: this.refs.scheduleEnd.value,
         language: this.refs.uiLanguage.value,
         defaultNote: this.refs.defaultNote.value,
         showCopyNotification: this.refs.showCopyNotification.checked,
@@ -162,7 +170,26 @@ class UiTab extends React.Component {
     }, 2000)()
   }
 
-  handleSlider (number) {
+  /**
+   * Gets the total number of minutes and returns a string in the HH:MM format
+   * @param {Number} time total number of minutes
+   */
+  formatTime (time) {
+    let hour = Math.floor(time / 60)
+    let minute = time % 60
+
+    if (hour < 10) {
+      hour = '0' + hour
+    }
+
+    if (minute < 10) {
+      minute = '0' + minute
+    }
+
+    return `${hour}:${minute}`
+  }
+
+  handleSlider (e, number) {
     const sliderID = 'rs-range-line-' + number
     const bulletID = 'rs-bullet-' + number
 
@@ -170,10 +197,16 @@ class UiTab extends React.Component {
     const rangeBullet = document.getElementById(bulletID)
 
     if (rangeSlider && rangeBullet) {
-      rangeBullet.innerHTML = Math.floor(rangeSlider.value / 60) + ':' + rangeSlider.value % 60
+      rangeBullet.innerHTML = this.formatTime(rangeSlider.value)
       const bulletPosition = (rangeSlider.value / rangeSlider.max)
       rangeBullet.style.left = (bulletPosition * 578) + 'px'
     }
+
+    if (e) {
+      this.handleUIChange(e)
+    } else {
+      console.log('HEY')
+    }
   }
 
   render () {
@@ -212,17 +245,48 @@ class UiTab extends React.Component {
               </select>
             </div>
           </div>
+          <div styleName='group-header2'>
+            {i18n.__('Theme Schedule')}
+          </div>
+          <div styleName='group-checkBoxSection'>
+            <label>
+              <input onChange={(e) => this.handleUIChange(e)}
+                checked={this.state.config.ui.enableScheduleTheme}
+                ref='enableScheduleTheme'
+                type='checkbox'
+              />&nbsp;
+              {i18n.__('Enable Scheduled Themes')}
+            </label>
+          </div>
+          <div styleName='group-section'>
+            <div styleName='group-section-label'>
+              {i18n.__('Scheduled Theme')}
+            </div>
+            <div styleName='group-section-control'>
+              <select value={config.ui.scheduledTheme}
+                onChange={(e) => this.handleUIChange(e)}
+                ref='uiScheduledTheme'
+              >
+                <option value='default'>{i18n.__('Default')}</option>
+                <option value='white'>{i18n.__('White')}</option>
+                <option value='solarized-dark'>{i18n.__('Solarized Dark')}</option>
+                <option value='monokai'>{i18n.__('Monokai')}</option>
+                <option value='dracula'>{i18n.__('Dracula')}</option>
+                <option value='dark'>{i18n.__('Dark')}</option>
+              </select>
+            </div>
+          </div>
           <div styleName='group-section'>
             <div styleName='container'>
               <div styleName='range-slider' id='firstRow'>
-                <span id='rs-bullet-1' styleName='rs-label'>00:00</span>
-                <input id='rs-range-line-1' styleName='rs-range' type='range' value={config.ui.scheduleStart} min='0' max='1440' step='5'
-                  onChange={() => this.handleSlider(1)} />
+                <span id='rs-bullet-1' styleName='rs-label'>{this.formatTime(config.ui.scheduleStart)}</span>
+                <input id='rs-range-line-1' styleName='rs-range' type='range' value={config.ui.scheduleStart} min='0' max='1440' step='5' ref='scheduleStart'
+                  onChange={(e) => this.handleSlider(e, 1)} />
               </div>
               <div styleName='range-slider' id='secondRow'>
-                <span id='rs-bullet-2' styleName='rs-label'>24:00</span>
-                <input id='rs-range-line-2' styleName='rs-range' type='range' value={config.ui.scheduleEnd} min='0' max='1440' step='5'
-                  onInput={() => this.handleSlider(2)} />
+                <span id='rs-bullet-2' styleName='rs-label'>{this.formatTime(config.ui.scheduleEnd)}</span>
+                <input id='rs-range-line-2' styleName='rs-range' type='range' value={config.ui.scheduleEnd} min='0' max='1440' step='5' ref='scheduleEnd'
+                  onChange={(e) => this.handleSlider(e, 2)} />
               </div>
               <div styleName='box-minmax'>
                 <span>00:00</span><span>24:00</span>

From e13742445ef0626f5dcd284a2453bda38bafbf1c Mon Sep 17 00:00:00 2001
From: gregueiras <gregueiras@gmail.com>
Date: Mon, 26 Nov 2018 22:01:43 +0000
Subject: [PATCH 03/19] Format

---
 browser/main/modals/PreferencesModal/UiTab.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/browser/main/modals/PreferencesModal/UiTab.js b/browser/main/modals/PreferencesModal/UiTab.js
index 498ba897..dea08a5c 100644
--- a/browser/main/modals/PreferencesModal/UiTab.js
+++ b/browser/main/modals/PreferencesModal/UiTab.js
@@ -47,7 +47,6 @@ class UiTab extends React.Component {
 
     this.handleSlider(null, 1)
     this.handleSlider(null, 2)
-
   }
 
   componentWillUnmount () {

From 1419c71ef558a98a72e7afbfee9b1851f04303a3 Mon Sep 17 00:00:00 2001
From: gregueiras <gregueiras@gmail.com>
Date: Tue, 27 Nov 2018 10:40:42 +0000
Subject: [PATCH 04/19] Border added

---
 browser/main/modals/PreferencesModal/ConfigTab.styl | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/browser/main/modals/PreferencesModal/ConfigTab.styl b/browser/main/modals/PreferencesModal/ConfigTab.styl
index 3c35b32a..dbe6535e 100644
--- a/browser/main/modals/PreferencesModal/ConfigTab.styl
+++ b/browser/main/modals/PreferencesModal/ConfigTab.styl
@@ -19,6 +19,8 @@
   padding-right 10px
   padding-left  10px
   position relative
+  border $ui-borderColor
+  border-radius 5px
   background $ui-backgroundColor
 
 div[id^="secondRow"]

From 8be0ea64a58853ff7a715b2ee7324cafac4d860c Mon Sep 17 00:00:00 2001
From: gregueiras <gregueiras@gmail.com>
Date: Tue, 27 Nov 2018 16:41:02 +0000
Subject: [PATCH 05/19] Scheduled Theme default configuration

---
 browser/main/lib/ConfigManager.js | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/browser/main/lib/ConfigManager.js b/browser/main/lib/ConfigManager.js
index 4cbe80a7..6d837885 100644
--- a/browser/main/lib/ConfigManager.js
+++ b/browser/main/lib/ConfigManager.js
@@ -30,6 +30,10 @@ export const DEFAULT_CONFIG = {
   ui: {
     language: 'en',
     theme: 'default',
+    enableScheduleTheme: false,
+    scheduledTheme: 'Monokai',
+    scheduleStart: 1200,
+    scheduleEnd: 360,
     showCopyNotification: true,
     disableDirectWrite: false,
     defaultNote: 'ALWAYS_ASK' // 'ALWAYS_ASK', 'SNIPPET_NOTE', 'MARKDOWN_NOTE'

From f38fef23a06577a3f011b1d0427082edcb195830 Mon Sep 17 00:00:00 2001
From: gregueiras <gregueiras@gmail.com>
Date: Wed, 28 Nov 2018 12:04:33 +0000
Subject: [PATCH 06/19] ThemeManager Created

---
 browser/main/Main.js                          | 12 ++---
 browser/main/lib/ConfigManager.js             | 19 ++-----
 browser/main/lib/ThemeManager.js              | 49 +++++++++++++++++++
 browser/main/modals/PreferencesModal/UiTab.js |  5 +-
 4 files changed, 62 insertions(+), 23 deletions(-)
 create mode 100644 browser/main/lib/ThemeManager.js

diff --git a/browser/main/Main.js b/browser/main/Main.js
index c426f2bd..fa632eef 100644
--- a/browser/main/Main.js
+++ b/browser/main/Main.js
@@ -17,6 +17,7 @@ import store from 'browser/main/store'
 import i18n from 'browser/lib/i18n'
 import { getLocales } from 'browser/lib/Languages'
 import applyShortcuts from 'browser/main/lib/shortcutManager'
+import theme from 'browser/main/lib/ThemeManager'
 const path = require('path')
 const electron = require('electron')
 const { remote } = electron
@@ -140,13 +141,12 @@ class Main extends React.Component {
   componentDidMount () {
     const { dispatch, config } = this.props
 
-    const supportedThemes = ['dark', 'white', 'solarized-dark', 'monokai', 'dracula']
+    this.refreshTheme = setInterval(() => {
+      theme.choose(ConfigManager.get().ui)
+    }, 5 * 1000)
 
-    if (supportedThemes.indexOf(config.ui.theme) !== -1) {
-      document.body.setAttribute('data-theme', config.ui.theme)
-    } else {
-      document.body.setAttribute('data-theme', 'default')
-    }
+    theme.choose(config.ui)
+    theme.apply(config.ui.theme)
 
     if (getLocales().indexOf(config.ui.language) !== -1) {
       i18n.setLocale(config.ui.language)
diff --git a/browser/main/lib/ConfigManager.js b/browser/main/lib/ConfigManager.js
index 6d837885..40d0771e 100644
--- a/browser/main/lib/ConfigManager.js
+++ b/browser/main/lib/ConfigManager.js
@@ -2,6 +2,7 @@ import _ from 'lodash'
 import RcParser from 'browser/lib/RcParser'
 import i18n from 'browser/lib/i18n'
 import ee from 'browser/main/lib/eventEmitter'
+import theme from 'browser/main/lib/ThemeManager'
 
 const OSX = global.process.platform === 'darwin'
 const win = global.process.platform === 'win32'
@@ -30,8 +31,9 @@ export const DEFAULT_CONFIG = {
   ui: {
     language: 'en',
     theme: 'default',
+    defaultTheme: 'default',
     enableScheduleTheme: false,
-    scheduledTheme: 'Monokai',
+    scheduledTheme: 'monokai',
     scheduleStart: 1200,
     scheduleEnd: 360,
     showCopyNotification: true,
@@ -149,19 +151,8 @@ function set (updates) {
   if (!validate(newConfig)) throw new Error('INVALID CONFIG')
   _save(newConfig)
 
-  if (newConfig.ui.theme === 'dark') {
-    document.body.setAttribute('data-theme', 'dark')
-  } else if (newConfig.ui.theme === 'white') {
-    document.body.setAttribute('data-theme', 'white')
-  } else if (newConfig.ui.theme === 'solarized-dark') {
-    document.body.setAttribute('data-theme', 'solarized-dark')
-  } else if (newConfig.ui.theme === 'monokai') {
-    document.body.setAttribute('data-theme', 'monokai')
-  } else if (newConfig.ui.theme === 'dracula') {
-    document.body.setAttribute('data-theme', 'dracula')
-  } else {
-    document.body.setAttribute('data-theme', 'default')
-  }
+  theme.choose(newConfig.ui)
+  theme.apply(newConfig.ui.theme)
 
   i18n.setLocale(newConfig.ui.language)
 
diff --git a/browser/main/lib/ThemeManager.js b/browser/main/lib/ThemeManager.js
new file mode 100644
index 00000000..b2dc9b1c
--- /dev/null
+++ b/browser/main/lib/ThemeManager.js
@@ -0,0 +1,49 @@
+function choose (ui) {
+  console.log(ui.enableScheduleTheme)
+  if (ui.enableScheduleTheme !== 'on') {
+    return
+  }
+
+  const start = parseInt(ui.scheduleStart)
+  const end = parseInt(ui.scheduleEnd)
+
+  const now = new Date()
+  const minutes = now.getHours() * 60 + now.getMinutes()
+
+  console.log(ui.scheduleStart, minutes, ui.scheduleEnd)
+
+  if ((end > start && minutes >= start && minutes <= end) ||
+    (start > end && (minutes >= start || minutes <= end))) {
+    console.log('SC', ui.theme, ui.scheduledTheme)
+    if (ui.theme !== ui.scheduledTheme) {
+      ui.defaultTheme = ui.theme
+      ui.theme = ui.scheduledTheme
+      apply(ui.theme)
+    }
+
+    console.log(ui.defaultTheme, ui.theme)
+  } else {
+    console.log('TH', ui.theme, ui.defaultTheme)
+    if (ui.theme !== ui.defaultTheme) {
+      ui.theme = ui.defaultTheme
+      apply(ui.theme)
+    }
+
+    console.log(ui.theme)
+  }
+}
+
+function apply (theme) {
+  console.log('Apply ', theme)
+  const supportedThemes = ['dark', 'white', 'solarized-dark', 'monokai', 'dracula']
+  if (supportedThemes.indexOf(theme) !== -1) {
+    document.body.setAttribute('data-theme', theme)
+  } else {
+    document.body.setAttribute('data-theme', 'default')
+  }
+}
+
+export default {
+  choose,
+  apply
+}
diff --git a/browser/main/modals/PreferencesModal/UiTab.js b/browser/main/modals/PreferencesModal/UiTab.js
index dea08a5c..c87b1d7b 100644
--- a/browser/main/modals/PreferencesModal/UiTab.js
+++ b/browser/main/modals/PreferencesModal/UiTab.js
@@ -68,6 +68,7 @@ class UiTab extends React.Component {
     const newConfig = {
       ui: {
         theme: this.refs.uiTheme.value,
+        defaultTheme: this.refs.uiTheme.value,
         enableScheduleTheme: this.refs.enableScheduleTheme.value,
         scheduledTheme: this.refs.uiScheduledTheme.value,
         scheduleStart: this.refs.scheduleStart.value,
@@ -203,8 +204,6 @@ class UiTab extends React.Component {
 
     if (e) {
       this.handleUIChange(e)
-    } else {
-      console.log('HEY')
     }
   }
 
@@ -231,7 +230,7 @@ class UiTab extends React.Component {
               {i18n.__('Interface Theme')}
             </div>
             <div styleName='group-section-control'>
-              <select value={config.ui.theme}
+              <select value={config.ui.defaultTheme}
                 onChange={(e) => this.handleUIChange(e)}
                 ref='uiTheme'
               >

From 0f8c627474a3a58d7164e23a367ed8881f9d7ebe Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Gon=C3=A7alo=20Santos?= <gregueiras@gmail.com>
Date: Wed, 28 Nov 2018 12:09:42 +0000
Subject: [PATCH 07/19] Fixed checkbox

---
 browser/main/lib/ThemeManager.js              | 2 +-
 browser/main/modals/PreferencesModal/UiTab.js | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/browser/main/lib/ThemeManager.js b/browser/main/lib/ThemeManager.js
index b2dc9b1c..0cab6c2d 100644
--- a/browser/main/lib/ThemeManager.js
+++ b/browser/main/lib/ThemeManager.js
@@ -1,6 +1,6 @@
 function choose (ui) {
   console.log(ui.enableScheduleTheme)
-  if (ui.enableScheduleTheme !== 'on') {
+  if (!ui.enableScheduleTheme) {
     return
   }
 
diff --git a/browser/main/modals/PreferencesModal/UiTab.js b/browser/main/modals/PreferencesModal/UiTab.js
index c87b1d7b..463788c7 100644
--- a/browser/main/modals/PreferencesModal/UiTab.js
+++ b/browser/main/modals/PreferencesModal/UiTab.js
@@ -69,7 +69,7 @@ class UiTab extends React.Component {
       ui: {
         theme: this.refs.uiTheme.value,
         defaultTheme: this.refs.uiTheme.value,
-        enableScheduleTheme: this.refs.enableScheduleTheme.value,
+        enableScheduleTheme: this.refs.enableScheduleTheme.checked,
         scheduledTheme: this.refs.uiScheduledTheme.value,
         scheduleStart: this.refs.scheduleStart.value,
         scheduleEnd: this.refs.scheduleEnd.value,

From 36b97fc6a2a6e8ce3293137e99cb26f4c10fb82d Mon Sep 17 00:00:00 2001
From: gregueiras <gregueiras@gmail.com>
Date: Thu, 29 Nov 2018 11:58:36 +0000
Subject: [PATCH 08/19] Interface Improved

---
 .../modals/PreferencesModal/ConfigTab.styl    | 53 +++++++++++++++----
 browser/main/modals/PreferencesModal/UiTab.js | 15 ++++--
 2 files changed, 55 insertions(+), 13 deletions(-)

diff --git a/browser/main/modals/PreferencesModal/ConfigTab.styl b/browser/main/modals/PreferencesModal/ConfigTab.styl
index dbe6535e..67587d94 100644
--- a/browser/main/modals/PreferencesModal/ConfigTab.styl
+++ b/browser/main/modals/PreferencesModal/ConfigTab.styl
@@ -7,9 +7,11 @@
   justify-content: center
   position relative
   margin-bottom: 2em
+  margin-left 2em
 
 .box-minmax
   width 608px
+  height 45px
   display flex
   justify-content space-between
   font-size $tab--button-font-size
@@ -18,6 +20,7 @@
   margin-top 18px
   padding-right 10px
   padding-left  10px
+  padding-top 8px
   position relative
   border $ui-borderColor
   border-radius 5px
@@ -29,6 +32,8 @@ div[id^="secondRow"]
   left 0;
   top 0;
   margin-bottom -42px;
+  .rs-label
+    margin-left -20px
   
 div[id^="firstRow"]
   position absolute;
@@ -36,6 +41,14 @@ div[id^="firstRow"]
   left 0;
   top 0;
   margin-bottom -25px;
+  .rs-range
+      &::-webkit-slider-thumb
+        margin-top: 0px
+        transform: rotate(180deg)
+  .rs-label
+    margin-bottom -85px
+    margin-top 85px
+  
 
 .rs-range
   margin-top: 29px
@@ -51,18 +64,23 @@ div[id^="firstRow"]
     background: $ui-backgroundColor
     border-radius: 0px
     border: 0px solid #010101
+    cursor none
     
   &::-webkit-slider-thumb
     box-shadow: none
-    border: 0px solid $ui-borderColor
+    border: 1px solid $ui-borderColor
     box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.25)
-    height: 42px
-    width: 22px
+    height: 32px
+    width: 32px
     border-radius: 22px
-    background: $ui-backgroundColor
+    background: $ui-text-color
     cursor: pointer
     -webkit-appearance: none
     margin-top: -20px
+    border-color: $ui-text-color
+    height 32px
+    border-top-left-radius: 10%
+    border-top-right-radius: 10%
 
 .rs-label
   position: relative
@@ -76,8 +94,10 @@ div[id^="firstRow"]
   border: none
   margin-bottom: -5px
   margin-top: -10px
-  width: 0px
-  margin-left: 0px
+  clear:both;
+  float:left;
+  height 17px
+  margin-left: -25px
   left: attr(value)
   color: $ui-text-color
   font-style: normal
@@ -256,7 +276,10 @@ body[data-theme="dark"]
 
   .box-minmax, .rs-range, .rs-label
     colorDarkControl()
-
+  .rs-range
+    &::-webkit-slider-thumb
+      colorDarkControl()
+      background $ui-dark-text-color
 
 body[data-theme="solarized-dark"]
   .root
@@ -286,6 +309,10 @@ body[data-theme="solarized-dark"]
       colorSolarizedDarkControl()
   .box-minmax, .rs-range, .rs-label
       colorSolarizedDarkControl()
+  .rs-range
+    &::-webkit-slider-thumb
+      colorSolarizedDarkControl()
+      background $ui-solarized-dark-text-color
 
 body[data-theme="monokai"]
   .root
@@ -315,7 +342,11 @@ body[data-theme="monokai"]
       colorMonokaiControl()
   .box-minmax, .rs-range, .rs-label
       colorMonokaiControl()
-
+  .rs-range
+    &::-webkit-slider-thumb
+      colorMonokaiControl()
+      background $ui-monokai-text-color
+      
 body[data-theme="dracula"]
   .root
     color $ui-dracula-text-color
@@ -343,4 +374,8 @@ body[data-theme="dracula"]
     select, .group-section-control-input
       colorDraculaControl()
   .box-minmax, .rs-range, .rs-label
-    colorDraculaControl()
\ No newline at end of file
+    colorDraculaControl()
+  .rs-range
+    &::-webkit-slider-thumb
+      colorDraculaControl()
+      background $ui-dracula-text-color
\ No newline at end of file
diff --git a/browser/main/modals/PreferencesModal/UiTab.js b/browser/main/modals/PreferencesModal/UiTab.js
index 463788c7..f0387130 100644
--- a/browser/main/modals/PreferencesModal/UiTab.js
+++ b/browser/main/modals/PreferencesModal/UiTab.js
@@ -196,10 +196,17 @@ class UiTab extends React.Component {
     const rangeSlider = document.getElementById(sliderID)
     const rangeBullet = document.getElementById(bulletID)
 
+    let order
+    if (number === 1) {
+      order = 'Start:'
+    } else {
+      order = 'End:'
+    }
+
     if (rangeSlider && rangeBullet) {
-      rangeBullet.innerHTML = this.formatTime(rangeSlider.value)
+      rangeBullet.innerHTML = `${order}${this.formatTime(rangeSlider.value)}`
       const bulletPosition = (rangeSlider.value / rangeSlider.max)
-      rangeBullet.style.left = (bulletPosition * 578) + 'px'
+      rangeBullet.style.left = (bulletPosition * 574) + 6 * (1 - bulletPosition) + 'px'
     }
 
     if (e) {
@@ -277,12 +284,12 @@ class UiTab extends React.Component {
           <div styleName='group-section'>
             <div styleName='container'>
               <div styleName='range-slider' id='firstRow'>
-                <span id='rs-bullet-1' styleName='rs-label'>{this.formatTime(config.ui.scheduleStart)}</span>
+                <span id='rs-bullet-1' styleName='rs-label'>{`Start: ${this.formatTime(config.ui.scheduleStart)}`}</span>
                 <input id='rs-range-line-1' styleName='rs-range' type='range' value={config.ui.scheduleStart} min='0' max='1440' step='5' ref='scheduleStart'
                   onChange={(e) => this.handleSlider(e, 1)} />
               </div>
               <div styleName='range-slider' id='secondRow'>
-                <span id='rs-bullet-2' styleName='rs-label'>{this.formatTime(config.ui.scheduleEnd)}</span>
+                <span id='rs-bullet-2' styleName='rs-label'>{`End: ${this.formatTime(config.ui.scheduleEnd)}`}</span>
                 <input id='rs-range-line-2' styleName='rs-range' type='range' value={config.ui.scheduleEnd} min='0' max='1440' step='5' ref='scheduleEnd'
                   onChange={(e) => this.handleSlider(e, 2)} />
               </div>

From 33662974bf277a0b6b7be454f4a245621e7bd651 Mon Sep 17 00:00:00 2001
From: gregueiras <gregueiras@gmail.com>
Date: Thu, 29 Nov 2018 12:05:14 +0000
Subject: [PATCH 09/19] Fixed default theme thumb background

---
 browser/main/modals/PreferencesModal/ConfigTab.styl | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/browser/main/modals/PreferencesModal/ConfigTab.styl b/browser/main/modals/PreferencesModal/ConfigTab.styl
index 67587d94..9312041d 100644
--- a/browser/main/modals/PreferencesModal/ConfigTab.styl
+++ b/browser/main/modals/PreferencesModal/ConfigTab.styl
@@ -73,11 +73,11 @@ div[id^="firstRow"]
     height: 32px
     width: 32px
     border-radius: 22px
-    background: $ui-text-color
+    background: white
     cursor: pointer
     -webkit-appearance: none
     margin-top: -20px
-    border-color: $ui-text-color
+    border-color: $ui-default-button-backgroundColor
     height 32px
     border-top-left-radius: 10%
     border-top-right-radius: 10%
@@ -276,6 +276,8 @@ body[data-theme="dark"]
 
   .box-minmax, .rs-range, .rs-label
     colorDarkControl()
+  .rs-label
+    background none
   .rs-range
     &::-webkit-slider-thumb
       colorDarkControl()
@@ -309,6 +311,8 @@ body[data-theme="solarized-dark"]
       colorSolarizedDarkControl()
   .box-minmax, .rs-range, .rs-label
       colorSolarizedDarkControl()
+  .rs-label
+    background none
   .rs-range
     &::-webkit-slider-thumb
       colorSolarizedDarkControl()
@@ -342,6 +346,8 @@ body[data-theme="monokai"]
       colorMonokaiControl()
   .box-minmax, .rs-range, .rs-label
       colorMonokaiControl()
+  .rs-label
+    background none
   .rs-range
     &::-webkit-slider-thumb
       colorMonokaiControl()
@@ -375,6 +381,8 @@ body[data-theme="dracula"]
       colorDraculaControl()
   .box-minmax, .rs-range, .rs-label
     colorDraculaControl()
+  .rs-label
+    background none
   .rs-range
     &::-webkit-slider-thumb
       colorDraculaControl()

From ceed1780613cacf904193754cc9badf8304d8a36 Mon Sep 17 00:00:00 2001
From: gregueiras <gregueiras@gmail.com>
Date: Thu, 29 Nov 2018 12:12:14 +0000
Subject: [PATCH 10/19] Inverted thumb order

---
 browser/main/modals/PreferencesModal/UiTab.js | 16 ++++------------
 1 file changed, 4 insertions(+), 12 deletions(-)

diff --git a/browser/main/modals/PreferencesModal/UiTab.js b/browser/main/modals/PreferencesModal/UiTab.js
index f0387130..fac7e2e8 100644
--- a/browser/main/modals/PreferencesModal/UiTab.js
+++ b/browser/main/modals/PreferencesModal/UiTab.js
@@ -196,15 +196,7 @@ class UiTab extends React.Component {
     const rangeSlider = document.getElementById(sliderID)
     const rangeBullet = document.getElementById(bulletID)
 
-    let order
-    if (number === 1) {
-      order = 'Start:'
-    } else {
-      order = 'End:'
-    }
-
     if (rangeSlider && rangeBullet) {
-      rangeBullet.innerHTML = `${order}${this.formatTime(rangeSlider.value)}`
       const bulletPosition = (rangeSlider.value / rangeSlider.max)
       rangeBullet.style.left = (bulletPosition * 574) + 6 * (1 - bulletPosition) + 'px'
     }
@@ -284,13 +276,13 @@ class UiTab extends React.Component {
           <div styleName='group-section'>
             <div styleName='container'>
               <div styleName='range-slider' id='firstRow'>
-                <span id='rs-bullet-1' styleName='rs-label'>{`Start: ${this.formatTime(config.ui.scheduleStart)}`}</span>
-                <input id='rs-range-line-1' styleName='rs-range' type='range' value={config.ui.scheduleStart} min='0' max='1440' step='5' ref='scheduleStart'
+                <span id='rs-bullet-1' styleName='rs-label'>{`End: ${this.formatTime(config.ui.scheduleEnd)}`}</span>
+                <input id='rs-range-line-1' styleName='rs-range' type='range' value={config.ui.scheduleEnd} min='0' max='1440' step='5' ref='scheduleEnd'
                   onChange={(e) => this.handleSlider(e, 1)} />
               </div>
               <div styleName='range-slider' id='secondRow'>
-                <span id='rs-bullet-2' styleName='rs-label'>{`End: ${this.formatTime(config.ui.scheduleEnd)}`}</span>
-                <input id='rs-range-line-2' styleName='rs-range' type='range' value={config.ui.scheduleEnd} min='0' max='1440' step='5' ref='scheduleEnd'
+                <span id='rs-bullet-2' styleName='rs-label'>{`Start: ${this.formatTime(config.ui.scheduleStart)}`}</span>
+                <input id='rs-range-line-2' styleName='rs-range' type='range' value={config.ui.scheduleStart} min='0' max='1440' step='5' ref='scheduleStart'
                   onChange={(e) => this.handleSlider(e, 2)} />
               </div>
               <div styleName='box-minmax'>

From 8b54f5aa69a359822826a3ca4f6cef387370c141 Mon Sep 17 00:00:00 2001
From: gregueiras <gregueiras@gmail.com>
Date: Thu, 29 Nov 2018 12:25:14 +0000
Subject: [PATCH 11/19] Removed colons and semi colons

---
 .../modals/PreferencesModal/ConfigTab.styl    | 122 +++++++++---------
 1 file changed, 61 insertions(+), 61 deletions(-)

diff --git a/browser/main/modals/PreferencesModal/ConfigTab.styl b/browser/main/modals/PreferencesModal/ConfigTab.styl
index 9312041d..26d14a8a 100644
--- a/browser/main/modals/PreferencesModal/ConfigTab.styl
+++ b/browser/main/modals/PreferencesModal/ConfigTab.styl
@@ -1,12 +1,12 @@
 @import('./Tab')
 
 .container
-  display: flex
-  flex-direction: column
-  align-items: center
-  justify-content: center
+  display flex
+  flex-direction column
+  align-items center
+  justify-content center
   position relative
-  margin-bottom: 2em
+  margin-bottom 2em
   margin-left 2em
 
 .box-minmax
@@ -27,83 +27,83 @@
   background $ui-backgroundColor
 
 div[id^="secondRow"]
-  position absolute;
-  z-index 2;
-  left 0;
-  top 0;
-  margin-bottom -42px;
+  position absolute
+  z-index 2
+  left 0
+  top 0
+  margin-bottom -42px
   .rs-label
     margin-left -20px
   
 div[id^="firstRow"]
-  position absolute;
-  z-index 2;
-  left 0;
-  top 0;
-  margin-bottom -25px;
+  position absolute
+  z-index 2
+  left 0
+  top 0
+  margin-bottom -25px
   .rs-range
       &::-webkit-slider-thumb
-        margin-top: 0px
-        transform: rotate(180deg)
+        margin-top 0px
+        transform rotate(180deg)
   .rs-label
     margin-bottom -85px
     margin-top 85px
   
 
 .rs-range
-  margin-top: 29px
-  width: 600px
-  -webkit-appearance: none
+  margin-top 29px
+  width 600px
+  -webkit-appearance none
   &:focus
-    outline: black
+    outline black
   &::-webkit-slider-runnable-track
-    width: 100%
-    height: 0.1px
-    cursor: pointer
-    box-shadow: none
-    background: $ui-backgroundColor
-    border-radius: 0px
-    border: 0px solid #010101
+    width 100%
+    height 0.1px
+    cursor pointer
+    box-shadow none
+    background $ui-backgroundColor
+    border-radius 0px
+    border 0px solid #010101
     cursor none
     
   &::-webkit-slider-thumb
-    box-shadow: none
-    border: 1px solid $ui-borderColor
-    box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.25)
-    height: 32px
-    width: 32px
-    border-radius: 22px
-    background: white
-    cursor: pointer
-    -webkit-appearance: none
-    margin-top: -20px
-    border-color: $ui-default-button-backgroundColor
+    box-shadow none
+    border 1px solid $ui-borderColor
+    box-shadow 0px 10px 10px rgba(0, 0, 0, 0.25)
     height 32px
-    border-top-left-radius: 10%
-    border-top-right-radius: 10%
+    width 32px
+    border-radius 22px
+    background white
+    cursor pointer
+    -webkit-appearance none
+    margin-top -20px
+    border-color $ui-default-button-backgroundColor
+    height 32px
+    border-top-left-radius 10%
+    border-top-right-radius 10%
 
 .rs-label
-  position: relative
-  transform-origin: center center
-  display: block
-  background: transparent
-  border-radius: none
-  line-height: 30px
-  font-weight: normal
-  box-sizing: border-box
-  border: none
-  margin-bottom: -5px
-  margin-top: -10px
-  clear:both;
-  float:left;
+  position relative
+  transform-origin center center
+  display block
+  background transparent
+  border-radius none
+  line-height 30px
+  font-weight normal
+  box-sizing border-box
+  border none
+  margin-bottom -5px
+  margin-top -10px
+  clear both
+  float left
   height 17px
-  margin-left: -25px
-  left: attr(value)
-  color: $ui-text-color
-  font-style: normal
-  font-weight: normal
-  line-height: normal
-  font-size: $tab--button-font-size
+  margin-left -25px
+  left attr(value)
+  color $ui-text-color
+  font-style normal
+  font-weight normal
+  line-height normal
+  font-size $tab--button-font-size
 .root
   padding 15px
   color $ui-text-color

From cd53a65c14dac91c92866c3d62e644bca14f791b Mon Sep 17 00:00:00 2001
From: gregueiras <gregueiras@gmail.com>
Date: Thu, 29 Nov 2018 13:58:15 +0000
Subject: [PATCH 12/19] Code Style Improvements

---
 browser/main/Main.js              |  8 ++++----
 browser/main/lib/ConfigManager.js |  7 +++----
 browser/main/lib/ThemeManager.js  | 29 +++++++++++------------------
 3 files changed, 18 insertions(+), 26 deletions(-)

diff --git a/browser/main/Main.js b/browser/main/Main.js
index fa632eef..a3bdc28f 100644
--- a/browser/main/Main.js
+++ b/browser/main/Main.js
@@ -17,7 +17,7 @@ import store from 'browser/main/store'
 import i18n from 'browser/lib/i18n'
 import { getLocales } from 'browser/lib/Languages'
 import applyShortcuts from 'browser/main/lib/shortcutManager'
-import theme from 'browser/main/lib/ThemeManager'
+import {chooseTheme, applyTheme} from 'browser/main/lib/ThemeManager'
 const path = require('path')
 const electron = require('electron')
 const { remote } = electron
@@ -142,11 +142,11 @@ class Main extends React.Component {
     const { dispatch, config } = this.props
 
     this.refreshTheme = setInterval(() => {
-      theme.choose(ConfigManager.get().ui)
+      chooseTheme(ConfigManager.get().ui)
     }, 5 * 1000)
 
-    theme.choose(config.ui)
-    theme.apply(config.ui.theme)
+    chooseTheme(config.ui)
+    applyTheme(config.ui.theme)
 
     if (getLocales().indexOf(config.ui.language) !== -1) {
       i18n.setLocale(config.ui.language)
diff --git a/browser/main/lib/ConfigManager.js b/browser/main/lib/ConfigManager.js
index 40d0771e..f39eb32e 100644
--- a/browser/main/lib/ConfigManager.js
+++ b/browser/main/lib/ConfigManager.js
@@ -2,8 +2,7 @@ import _ from 'lodash'
 import RcParser from 'browser/lib/RcParser'
 import i18n from 'browser/lib/i18n'
 import ee from 'browser/main/lib/eventEmitter'
-import theme from 'browser/main/lib/ThemeManager'
-
+import {chooseTheme, applyTheme} from 'browser/main/lib/ThemeManager'
 const OSX = global.process.platform === 'darwin'
 const win = global.process.platform === 'win32'
 const electron = require('electron')
@@ -151,8 +150,8 @@ function set (updates) {
   if (!validate(newConfig)) throw new Error('INVALID CONFIG')
   _save(newConfig)
 
-  theme.choose(newConfig.ui)
-  theme.apply(newConfig.ui.theme)
+  chooseTheme(newConfig.ui)
+  applyTheme(newConfig.ui.theme)
 
   i18n.setLocale(newConfig.ui.language)
 
diff --git a/browser/main/lib/ThemeManager.js b/browser/main/lib/ThemeManager.js
index 0cab6c2d..a6be2f82 100644
--- a/browser/main/lib/ThemeManager.js
+++ b/browser/main/lib/ThemeManager.js
@@ -1,5 +1,4 @@
-function choose (ui) {
-  console.log(ui.enableScheduleTheme)
+const chooseTheme = (ui) => {
   if (!ui.enableScheduleTheme) {
     return
   }
@@ -10,31 +9,25 @@ function choose (ui) {
   const now = new Date()
   const minutes = now.getHours() * 60 + now.getMinutes()
 
-  console.log(ui.scheduleStart, minutes, ui.scheduleEnd)
+  const isEndAfterStart = end > start
+  const isBetweenStartAndEnd = minutes >= start && minutes <= end
+  const isBetweenEndAndStart = (minutes >= start || minutes <= end)
 
-  if ((end > start && minutes >= start && minutes <= end) ||
-    (start > end && (minutes >= start || minutes <= end))) {
-    console.log('SC', ui.theme, ui.scheduledTheme)
+  if ((isEndAfterStart && isBetweenStartAndEnd) || (!isEndAfterStart && isBetweenEndAndStart)) {
     if (ui.theme !== ui.scheduledTheme) {
       ui.defaultTheme = ui.theme
       ui.theme = ui.scheduledTheme
-      apply(ui.theme)
+      applyTheme(ui.theme)
     }
-
-    console.log(ui.defaultTheme, ui.theme)
   } else {
-    console.log('TH', ui.theme, ui.defaultTheme)
     if (ui.theme !== ui.defaultTheme) {
       ui.theme = ui.defaultTheme
-      apply(ui.theme)
+      applyTheme(ui.theme)
     }
-
-    console.log(ui.theme)
   }
 }
 
-function apply (theme) {
-  console.log('Apply ', theme)
+const applyTheme = (theme) => {
   const supportedThemes = ['dark', 'white', 'solarized-dark', 'monokai', 'dracula']
   if (supportedThemes.indexOf(theme) !== -1) {
     document.body.setAttribute('data-theme', theme)
@@ -43,7 +36,7 @@ function apply (theme) {
   }
 }
 
-export default {
-  choose,
-  apply
+module.exports = {
+  chooseTheme,
+  applyTheme
 }

From 7034e7b6201b6c459fefd581bb16a18407957373 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Gon=C3=A7alo=20Santos?= <gregueiras@gmail.com>
Date: Wed, 12 Dec 2018 11:37:59 +0000
Subject: [PATCH 13/19] Delete Slider.styl

I submitted an extra file, it was not necessary
---
 .../main/modals/PreferencesModal/Slider.styl  | 90 -------------------
 1 file changed, 90 deletions(-)
 delete mode 100644 browser/main/modals/PreferencesModal/Slider.styl

diff --git a/browser/main/modals/PreferencesModal/Slider.styl b/browser/main/modals/PreferencesModal/Slider.styl
deleted file mode 100644
index 607c8407..00000000
--- a/browser/main/modals/PreferencesModal/Slider.styl
+++ /dev/null
@@ -1,90 +0,0 @@
-.container
-  display: flex
-  flex-direction: column
-  align-items: center
-  justify-content: center
-.box-minmax
-  margin-top: 30px
-  width: 608px
-  display: flex
-  justify-content: space-between
-  font-size: 20px
-  color: #FFFFFF
-  span:first-child
-    margin-left: 10px
-.range-slider
-  margin-top: 30vh
-.rs-range
-  margin-top: 29px
-  width: 600px
-  -webkit-appearance: none
-  &:focus
-    outline: none
-  &::-webkit-slider-runnable-track
-    width: 100%
-    height: 1px
-    cursor: pointer
-    box-shadow: none
-    background: #ffffff
-    border-radius: 0px
-    border: 0px solid #010101
-  &::-moz-range-track
-    width: 100%
-    height: 1px
-    cursor: pointer
-    box-shadow: none
-    background: #ffffff
-    border-radius: 0px
-    border: 0px solid #010101
-  &::-webkit-slider-thumb
-    box-shadow: none
-    border: 0px solid #ffffff
-    box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.25)
-    height: 42px
-    width: 22px
-    border-radius: 22px
-    background: rgba(255, 255, 255, 1)
-    cursor: pointer
-    -webkit-appearance: none
-    margin-top: -20px
-  &::-moz-range-thumb
-    box-shadow: none
-    border: 0px solid #ffffff
-    box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.25)
-    height: 42px
-    width: 22px
-    border-radius: 22px
-    background: rgba(255, 255, 255, 1)
-    cursor: pointer
-    -webkit-appearance: none
-    margin-top: -20px
-  &::-moz-focus-outer
-    border: 0
-.rs-label
-  position: relative
-  transform-origin: center center
-  display: block
-  width: 98px
-  height: 98px
-  background: transparent
-  border-radius: 50%
-  line-height: 30px
-  text-align: center
-  font-weight: bold
-  padding-top: 22px
-  box-sizing: border-box
-  border: 2px solid #fff
-  margin-top: 20px
-  margin-left: -38px
-  left: attr(value)
-  color: #fff
-  font-style: normal
-  font-weight: normal
-  line-height: normal
-  font-size: 36px
-  &::after
-    content: "kg"
-    display: block
-    font-size: 20px
-    letter-spacing: 0.07em
-    margin-top: -2px
\ No newline at end of file

From a19ff6762e20a1832286f84d0e203cbb3a4315d2 Mon Sep 17 00:00:00 2001
From: gregueiras <gregueiras@gmail.com>
Date: Thu, 13 Dec 2018 18:50:02 +0000
Subject: [PATCH 14/19] Unit tests added

---
 tests/lib/themeManager-test.js | 93 ++++++++++++++++++++++++++++++++++
 1 file changed, 93 insertions(+)
 create mode 100644 tests/lib/themeManager-test.js

diff --git a/tests/lib/themeManager-test.js b/tests/lib/themeManager-test.js
new file mode 100644
index 00000000..454fade7
--- /dev/null
+++ b/tests/lib/themeManager-test.js
@@ -0,0 +1,93 @@
+/**
+ * @fileoverview Unit test for browser/main/lib/ThemeManager.js
+ */
+const test = require('ava')
+const { chooseTheme, applyTheme } = require('browser/main/lib/ThemeManager')
+
+const originalDate = Date
+
+test.beforeEach(t => {
+  t.context = {
+    theme: 'white',
+    scheduledTheme: 'dark',
+    enableScheduleTheme: true,
+    defaultTheme: 'monokai'
+  }
+  const constantDate = new Date('2017-11-27T14:33:42Z')
+  global.Date = class extends Date {
+    constructor () {
+      super()
+      return constantDate
+    }
+  }
+})
+
+test.afterEach(t => {
+  global.Date = originalDate
+})
+
+test('enableScheduleTheme is false, theme shouldn\'t change', t => {
+  t.context.enableScheduleTheme = false
+
+  const beforeTheme = t.context.theme
+  chooseTheme(t.context)
+  const afterTheme = t.context.theme
+
+  t.is(afterTheme, beforeTheme)
+})
+
+// NOT IN SCHEDULE
+test('scheduleEnd is bigger than scheduleStart and not in schedule, theme shouldn\'t change', t => {
+  const beforeTheme = t.context.defaultTheme
+  t.context.scheduleStart = 720 // 12:00
+  t.context.scheduleEnd = 870 // 14:30
+  chooseTheme(t.context)
+  const afterTheme = t.context.theme
+
+  t.is(afterTheme, beforeTheme)
+})
+
+test('scheduleStart is bigger than scheduleEnd and not in schedule, theme shouldn\'t change', t => {
+  const beforeTheme = t.context.defaultTheme
+  t.context.scheduleStart = 960 // 16:00
+  t.context.scheduleEnd = 600 // 10:00
+  chooseTheme(t.context)
+  const afterTheme = t.context.theme
+
+  t.is(afterTheme, beforeTheme)
+})
+
+// IN SCHEDULE
+test('scheduleEnd is bigger than scheduleStart and in schedule, theme should change', t => {
+  const beforeTheme = t.context.scheduledTheme
+  t.context.scheduleStart = 720 // 12:00
+  t.context.scheduleEnd = 900 // 15:00
+  chooseTheme(t.context)
+  const afterTheme = t.context.theme
+
+  t.is(afterTheme, beforeTheme)
+})
+
+test('scheduleStart is bigger than scheduleEnd and in schedule, theme should change', t => {
+  const beforeTheme = t.context.scheduledTheme
+  t.context.scheduleStart = 1200 // 20:00
+  t.context.scheduleEnd = 900 // 15:00
+  chooseTheme(t.context)
+  const afterTheme = t.context.theme
+
+  t.is(afterTheme, beforeTheme)
+})
+
+test('theme to apply is not a supported theme, theme shouldn\'t change', t => {
+  applyTheme('notATheme')
+  const afterTheme = document.body.dataset.theme
+
+  t.is(afterTheme, 'default')
+})
+
+test('theme to apply is a supported theme, theme should change', t => {
+  applyTheme(t.context.defaultTheme)
+  const afterTheme = document.body.dataset.theme
+
+  t.is(afterTheme, t.context.defaultTheme)
+})

From 9c3f34fe04ec4953c5f6a5e7e6cbe03c2fd830c4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Gon=C3=A7alo=20Santos?= <gregueiras@gmail.com>
Date: Tue, 25 Feb 2020 03:34:34 +0000
Subject: [PATCH 15/19] Fix Lint Errors

---
 browser/main/lib/ThemeManager.js              | 19 +++--
 browser/main/modals/PreferencesModal/UiTab.js | 70 +++++++++++++------
 tests/lib/themeManager-test.js                | 10 +--
 3 files changed, 68 insertions(+), 31 deletions(-)

diff --git a/browser/main/lib/ThemeManager.js b/browser/main/lib/ThemeManager.js
index a6be2f82..fa90def2 100644
--- a/browser/main/lib/ThemeManager.js
+++ b/browser/main/lib/ThemeManager.js
@@ -1,4 +1,4 @@
-const chooseTheme = (ui) => {
+const chooseTheme = ui => {
   if (!ui.enableScheduleTheme) {
     return
   }
@@ -11,9 +11,12 @@ const chooseTheme = (ui) => {
 
   const isEndAfterStart = end > start
   const isBetweenStartAndEnd = minutes >= start && minutes <= end
-  const isBetweenEndAndStart = (minutes >= start || minutes <= end)
+  const isBetweenEndAndStart = minutes >= start || minutes <= end
 
-  if ((isEndAfterStart && isBetweenStartAndEnd) || (!isEndAfterStart && isBetweenEndAndStart)) {
+  if (
+    (isEndAfterStart && isBetweenStartAndEnd) ||
+    (!isEndAfterStart && isBetweenEndAndStart)
+  ) {
     if (ui.theme !== ui.scheduledTheme) {
       ui.defaultTheme = ui.theme
       ui.theme = ui.scheduledTheme
@@ -27,8 +30,14 @@ const chooseTheme = (ui) => {
   }
 }
 
-const applyTheme = (theme) => {
-  const supportedThemes = ['dark', 'white', 'solarized-dark', 'monokai', 'dracula']
+const applyTheme = theme => {
+  const supportedThemes = [
+    'dark',
+    'white',
+    'solarized-dark',
+    'monokai',
+    'dracula'
+  ]
   if (supportedThemes.indexOf(theme) !== -1) {
     document.body.setAttribute('data-theme', theme)
   } else {
diff --git a/browser/main/modals/PreferencesModal/UiTab.js b/browser/main/modals/PreferencesModal/UiTab.js
index d9f90790..15bafef1 100644
--- a/browser/main/modals/PreferencesModal/UiTab.js
+++ b/browser/main/modals/PreferencesModal/UiTab.js
@@ -219,7 +219,7 @@ class UiTab extends React.Component {
    * Gets the total number of minutes and returns a string in the HH:MM format
    * @param {Number} time total number of minutes
    */
-  formatTime (time) {
+  formatTime(time) {
     let hour = Math.floor(time / 60)
     let minute = time % 60
 
@@ -234,7 +234,7 @@ class UiTab extends React.Component {
     return `${hour}:${minute}`
   }
 
-  handleSlider (e, number) {
+  handleSlider(e, number) {
     const sliderID = 'rs-range-line-' + number
     const bulletID = 'rs-bullet-' + number
 
@@ -242,8 +242,9 @@ class UiTab extends React.Component {
     const rangeBullet = document.getElementById(bulletID)
 
     if (rangeSlider && rangeBullet) {
-      const bulletPosition = (rangeSlider.value / rangeSlider.max)
-      rangeBullet.style.left = (bulletPosition * 574) + 6 * (1 - bulletPosition) + 'px'
+      const bulletPosition = rangeSlider.value / rangeSlider.max
+      rangeBullet.style.left =
+        bulletPosition * 574 + 6 * (1 - bulletPosition) + 'px'
     }
 
     if (e) {
@@ -251,7 +252,7 @@ class UiTab extends React.Component {
     }
   }
 
-  render () {
+  render() {
     const UiAlert = this.state.UiAlert
     const UiAlertElement =
       UiAlert != null ? (
@@ -274,8 +275,9 @@ class UiTab extends React.Component {
               {i18n.__('Interface Theme')}
             </div>
             <div styleName='group-section-control'>
-              <select value={config.ui.defaultTheme}
-                onChange={(e) => this.handleUIChange(e)}
+              <select
+                value={config.ui.defaultTheme}
+                onChange={e => this.handleUIChange(e)}
                 ref='uiTheme'
               >
                 <optgroup label='Light Themes'>
@@ -305,16 +307,16 @@ class UiTab extends React.Component {
               </select>
             </div>
           </div>
-          <div styleName='group-header2'>
-            {i18n.__('Theme Schedule')}
-          </div>
+          <div styleName='group-header2'>{i18n.__('Theme Schedule')}</div>
           <div styleName='group-checkBoxSection'>
             <label>
-              <input onChange={(e) => this.handleUIChange(e)}
+              <input
+                onChange={e => this.handleUIChange(e)}
                 checked={this.state.config.ui.enableScheduleTheme}
                 ref='enableScheduleTheme'
                 type='checkbox'
-              />&nbsp;
+              />
+              &nbsp;
               {i18n.__('Enable Scheduled Themes')}
             </label>
           </div>
@@ -323,8 +325,9 @@ class UiTab extends React.Component {
               {i18n.__('Scheduled Theme')}
             </div>
             <div styleName='group-section-control'>
-              <select value={config.ui.scheduledTheme}
-                onChange={(e) => this.handleUIChange(e)}
+              <select
+                value={config.ui.scheduledTheme}
+                onChange={e => this.handleUIChange(e)}
                 ref='uiScheduledTheme'
               >
                 <optgroup label='Light Themes'>
@@ -357,17 +360,42 @@ class UiTab extends React.Component {
           <div styleName='group-section'>
             <div styleName='container'>
               <div styleName='range-slider' id='firstRow'>
-                <span id='rs-bullet-1' styleName='rs-label'>{`End: ${this.formatTime(config.ui.scheduleEnd)}`}</span>
-                <input id='rs-range-line-1' styleName='rs-range' type='range' value={config.ui.scheduleEnd} min='0' max='1440' step='5' ref='scheduleEnd'
-                  onChange={(e) => this.handleSlider(e, 1)} />
+                <span
+                  id='rs-bullet-1'
+                  styleName='rs-label'
+                >{`End: ${this.formatTime(config.ui.scheduleEnd)}`}</span>
+                <input
+                  id='rs-range-line-1'
+                  styleName='rs-range'
+                  type='range'
+                  value={config.ui.scheduleEnd}
+                  min='0'
+                  max='1440'
+                  step='5'
+                  ref='scheduleEnd'
+                  onChange={e => this.handleSlider(e, 1)}
+                />
               </div>
               <div styleName='range-slider' id='secondRow'>
-                <span id='rs-bullet-2' styleName='rs-label'>{`Start: ${this.formatTime(config.ui.scheduleStart)}`}</span>
-                <input id='rs-range-line-2' styleName='rs-range' type='range' value={config.ui.scheduleStart} min='0' max='1440' step='5' ref='scheduleStart'
-                  onChange={(e) => this.handleSlider(e, 2)} />
+                <span
+                  id='rs-bullet-2'
+                  styleName='rs-label'
+                >{`Start: ${this.formatTime(config.ui.scheduleStart)}`}</span>
+                <input
+                  id='rs-range-line-2'
+                  styleName='rs-range'
+                  type='range'
+                  value={config.ui.scheduleStart}
+                  min='0'
+                  max='1440'
+                  step='5'
+                  ref='scheduleStart'
+                  onChange={e => this.handleSlider(e, 2)}
+                />
               </div>
               <div styleName='box-minmax'>
-                <span>00:00</span><span>24:00</span>
+                <span>00:00</span>
+                <span>24:00</span>
               </div>
             </div>
           </div>
diff --git a/tests/lib/themeManager-test.js b/tests/lib/themeManager-test.js
index 454fade7..49a4f300 100644
--- a/tests/lib/themeManager-test.js
+++ b/tests/lib/themeManager-test.js
@@ -15,7 +15,7 @@ test.beforeEach(t => {
   }
   const constantDate = new Date('2017-11-27T14:33:42Z')
   global.Date = class extends Date {
-    constructor () {
+    constructor() {
       super()
       return constantDate
     }
@@ -26,7 +26,7 @@ test.afterEach(t => {
   global.Date = originalDate
 })
 
-test('enableScheduleTheme is false, theme shouldn\'t change', t => {
+test("enableScheduleTheme is false, theme shouldn't change", t => {
   t.context.enableScheduleTheme = false
 
   const beforeTheme = t.context.theme
@@ -37,7 +37,7 @@ test('enableScheduleTheme is false, theme shouldn\'t change', t => {
 })
 
 // NOT IN SCHEDULE
-test('scheduleEnd is bigger than scheduleStart and not in schedule, theme shouldn\'t change', t => {
+test("scheduleEnd is bigger than scheduleStart and not in schedule, theme shouldn't change", t => {
   const beforeTheme = t.context.defaultTheme
   t.context.scheduleStart = 720 // 12:00
   t.context.scheduleEnd = 870 // 14:30
@@ -47,7 +47,7 @@ test('scheduleEnd is bigger than scheduleStart and not in schedule, theme should
   t.is(afterTheme, beforeTheme)
 })
 
-test('scheduleStart is bigger than scheduleEnd and not in schedule, theme shouldn\'t change', t => {
+test("scheduleStart is bigger than scheduleEnd and not in schedule, theme shouldn't change", t => {
   const beforeTheme = t.context.defaultTheme
   t.context.scheduleStart = 960 // 16:00
   t.context.scheduleEnd = 600 // 10:00
@@ -78,7 +78,7 @@ test('scheduleStart is bigger than scheduleEnd and in schedule, theme should cha
   t.is(afterTheme, beforeTheme)
 })
 
-test('theme to apply is not a supported theme, theme shouldn\'t change', t => {
+test("theme to apply is not a supported theme, theme shouldn't change", t => {
   applyTheme('notATheme')
   const afterTheme = document.body.dataset.theme
 

From 8a6df8bf95deb2064774a489d5671a48c550eff6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Gon=C3=A7alo=20Santos?= <gregueiras@gmail.com>
Date: Thu, 5 Mar 2020 16:07:45 +0000
Subject: [PATCH 16/19] Remove comment

---
 browser/main/modals/PreferencesModal/UiTab.js | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/browser/main/modals/PreferencesModal/UiTab.js b/browser/main/modals/PreferencesModal/UiTab.js
index 15bafef1..1d3cc662 100644
--- a/browser/main/modals/PreferencesModal/UiTab.js
+++ b/browser/main/modals/PreferencesModal/UiTab.js
@@ -215,10 +215,6 @@ class UiTab extends React.Component {
     }, 2000)()
   }
 
-  /**
-   * Gets the total number of minutes and returns a string in the HH:MM format
-   * @param {Number} time total number of minutes
-   */
   formatTime(time) {
     let hour = Math.floor(time / 60)
     let minute = time % 60

From 38ed5b854157a84561adfbc89745bcf7346b850c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Gon=C3=A7alo=20Santos?= <gregueiras@gmail.com>
Date: Thu, 5 Mar 2020 16:34:04 +0000
Subject: [PATCH 17/19] Remove handleSlider

---
 browser/main/modals/PreferencesModal/UiTab.js | 30 ++++---------------
 1 file changed, 6 insertions(+), 24 deletions(-)

diff --git a/browser/main/modals/PreferencesModal/UiTab.js b/browser/main/modals/PreferencesModal/UiTab.js
index 1d3cc662..c556dc87 100644
--- a/browser/main/modals/PreferencesModal/UiTab.js
+++ b/browser/main/modals/PreferencesModal/UiTab.js
@@ -63,9 +63,6 @@ class UiTab extends React.Component {
     }
     ipc.addListener('APP_SETTING_DONE', this.handleSettingDone)
     ipc.addListener('APP_SETTING_ERROR', this.handleSettingError)
-
-    this.handleSlider(null, 1)
-    this.handleSlider(null, 2)
   }
 
   componentWillUnmount() {
@@ -230,24 +227,6 @@ class UiTab extends React.Component {
     return `${hour}:${minute}`
   }
 
-  handleSlider(e, number) {
-    const sliderID = 'rs-range-line-' + number
-    const bulletID = 'rs-bullet-' + number
-
-    const rangeSlider = document.getElementById(sliderID)
-    const rangeBullet = document.getElementById(bulletID)
-
-    if (rangeSlider && rangeBullet) {
-      const bulletPosition = rangeSlider.value / rangeSlider.max
-      rangeBullet.style.left =
-        bulletPosition * 574 + 6 * (1 - bulletPosition) + 'px'
-    }
-
-    if (e) {
-      this.handleUIChange(e)
-    }
-  }
-
   render() {
     const UiAlert = this.state.UiAlert
     const UiAlertElement =
@@ -308,7 +287,7 @@ class UiTab extends React.Component {
             <label>
               <input
                 onChange={e => this.handleUIChange(e)}
-                checked={this.state.config.ui.enableScheduleTheme}
+                checked={config.ui.enableScheduleTheme}
                 ref='enableScheduleTheme'
                 type='checkbox'
               />
@@ -322,6 +301,7 @@ class UiTab extends React.Component {
             </div>
             <div styleName='group-section-control'>
               <select
+                disabled={!config.ui.enableScheduleTheme}
                 value={config.ui.scheduledTheme}
                 onChange={e => this.handleUIChange(e)}
                 ref='uiScheduledTheme'
@@ -361,6 +341,7 @@ class UiTab extends React.Component {
                   styleName='rs-label'
                 >{`End: ${this.formatTime(config.ui.scheduleEnd)}`}</span>
                 <input
+                  disabled={!config.ui.enableScheduleTheme}
                   id='rs-range-line-1'
                   styleName='rs-range'
                   type='range'
@@ -369,7 +350,7 @@ class UiTab extends React.Component {
                   max='1440'
                   step='5'
                   ref='scheduleEnd'
-                  onChange={e => this.handleSlider(e, 1)}
+                  onChange={e => this.handleUIChange(e)}
                 />
               </div>
               <div styleName='range-slider' id='secondRow'>
@@ -378,6 +359,7 @@ class UiTab extends React.Component {
                   styleName='rs-label'
                 >{`Start: ${this.formatTime(config.ui.scheduleStart)}`}</span>
                 <input
+                  disabled={!config.ui.enableScheduleTheme}
                   id='rs-range-line-2'
                   styleName='rs-range'
                   type='range'
@@ -386,7 +368,7 @@ class UiTab extends React.Component {
                   max='1440'
                   step='5'
                   ref='scheduleStart'
-                  onChange={e => this.handleSlider(e, 2)}
+                  onChange={e => this.handleUIChange(e)}
                 />
               </div>
               <div styleName='box-minmax'>

From 48c8164689a92d84b34e1202164915c71086c0dd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Gon=C3=A7alo=20Santos?= <gregueiras@gmail.com>
Date: Tue, 10 Mar 2020 15:41:34 +0000
Subject: [PATCH 18/19] Fix scheduled theme change timing

---
 browser/main/Main.js                          | 1 +
 browser/main/lib/ThemeManager.js              | 4 ++--
 browser/main/modals/PreferencesModal/UiTab.js | 4 ++--
 3 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/browser/main/Main.js b/browser/main/Main.js
index 230dddd7..9669e105 100644
--- a/browser/main/Main.js
+++ b/browser/main/Main.js
@@ -190,6 +190,7 @@ class Main extends React.Component {
       'menubar:togglemenubar',
       this.toggleMenuBarVisible.bind(this)
     )
+    clearInterval(this.refreshTheme)
   }
 
   toggleMenuBarVisible() {
diff --git a/browser/main/lib/ThemeManager.js b/browser/main/lib/ThemeManager.js
index fa90def2..fcb8a055 100644
--- a/browser/main/lib/ThemeManager.js
+++ b/browser/main/lib/ThemeManager.js
@@ -10,8 +10,8 @@ const chooseTheme = ui => {
   const minutes = now.getHours() * 60 + now.getMinutes()
 
   const isEndAfterStart = end > start
-  const isBetweenStartAndEnd = minutes >= start && minutes <= end
-  const isBetweenEndAndStart = minutes >= start || minutes <= end
+  const isBetweenStartAndEnd = minutes >= start && minutes < end
+  const isBetweenEndAndStart = minutes >= start || minutes < end
 
   if (
     (isEndAfterStart && isBetweenStartAndEnd) ||
diff --git a/browser/main/modals/PreferencesModal/UiTab.js b/browser/main/modals/PreferencesModal/UiTab.js
index c556dc87..f3a092f8 100644
--- a/browser/main/modals/PreferencesModal/UiTab.js
+++ b/browser/main/modals/PreferencesModal/UiTab.js
@@ -335,7 +335,7 @@ class UiTab extends React.Component {
           </div>
           <div styleName='group-section'>
             <div styleName='container'>
-              <div styleName='range-slider' id='firstRow'>
+              <div id='firstRow'>
                 <span
                   id='rs-bullet-1'
                   styleName='rs-label'
@@ -353,7 +353,7 @@ class UiTab extends React.Component {
                   onChange={e => this.handleUIChange(e)}
                 />
               </div>
-              <div styleName='range-slider' id='secondRow'>
+              <div id='secondRow'>
                 <span
                   id='rs-bullet-2'
                   styleName='rs-label'

From e1c95fb1f26116b0f0cd56d67c663d48c7f553b4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Gon=C3=A7alo=20Santos?= <gregueiras@gmail.com>
Date: Fri, 27 Mar 2020 01:42:18 +0000
Subject: [PATCH 19/19] Fix Saving Configuration Bug

---
 browser/main/Main.js                          |   5 +-
 browser/main/lib/ConfigManager.js             |   4 -
 browser/main/lib/ThemeManager.js              |  16 ++-
 browser/main/modals/PreferencesModal/UiTab.js |   4 +
 tests/lib/themeManager-test.js                |  93 ----------------
 tests/lib/themeManager.test.js                | 103 ++++++++++++++++++
 6 files changed, 125 insertions(+), 100 deletions(-)
 delete mode 100644 tests/lib/themeManager-test.js
 create mode 100644 tests/lib/themeManager.test.js

diff --git a/browser/main/Main.js b/browser/main/Main.js
index 9669e105..04786fc6 100644
--- a/browser/main/Main.js
+++ b/browser/main/Main.js
@@ -149,10 +149,11 @@ class Main extends React.Component {
     const { dispatch, config } = this.props
 
     this.refreshTheme = setInterval(() => {
-      chooseTheme(ConfigManager.get().ui)
+      const conf = ConfigManager.get()
+      chooseTheme(conf)
     }, 5 * 1000)
 
-    chooseTheme(config.ui)
+    chooseTheme(config)
     applyTheme(config.ui.theme)
 
     if (getLocales().indexOf(config.ui.language) !== -1) {
diff --git a/browser/main/lib/ConfigManager.js b/browser/main/lib/ConfigManager.js
index e02deceb..3888215b 100644
--- a/browser/main/lib/ConfigManager.js
+++ b/browser/main/lib/ConfigManager.js
@@ -2,7 +2,6 @@ import _ from 'lodash'
 import RcParser from 'browser/lib/RcParser'
 import i18n from 'browser/lib/i18n'
 import ee from 'browser/main/lib/eventEmitter'
-import { chooseTheme, applyTheme } from 'browser/main/lib/ThemeManager'
 
 const OSX = global.process.platform === 'darwin'
 const win = global.process.platform === 'win32'
@@ -204,9 +203,6 @@ function set(updates) {
   if (!validate(newConfig)) throw new Error('INVALID CONFIG')
   _save(newConfig)
 
-  chooseTheme(newConfig.ui)
-  applyTheme(newConfig.ui.theme)
-
   i18n.setLocale(newConfig.ui.language)
 
   let editorTheme = document.getElementById('editorTheme')
diff --git a/browser/main/lib/ThemeManager.js b/browser/main/lib/ThemeManager.js
index fcb8a055..a1b090e9 100644
--- a/browser/main/lib/ThemeManager.js
+++ b/browser/main/lib/ThemeManager.js
@@ -1,4 +1,11 @@
-const chooseTheme = ui => {
+import ConfigManager from 'browser/main/lib/ConfigManager'
+
+const saveChanges = newConfig => {
+  ConfigManager.set(newConfig)
+}
+
+const chooseTheme = config => {
+  const { ui } = config
   if (!ui.enableScheduleTheme) {
     return
   }
@@ -21,11 +28,13 @@ const chooseTheme = ui => {
       ui.defaultTheme = ui.theme
       ui.theme = ui.scheduledTheme
       applyTheme(ui.theme)
+      saveChanges(config)
     }
   } else {
     if (ui.theme !== ui.defaultTheme) {
       ui.theme = ui.defaultTheme
       applyTheme(ui.theme)
+      saveChanges(config)
     }
   }
 }
@@ -40,6 +49,11 @@ const applyTheme = theme => {
   ]
   if (supportedThemes.indexOf(theme) !== -1) {
     document.body.setAttribute('data-theme', theme)
+    if (document.body.querySelector('.MarkdownPreview')) {
+      document.body
+        .querySelector('.MarkdownPreview')
+        .contentDocument.body.setAttribute('data-theme', theme)
+    }
   } else {
     document.body.setAttribute('data-theme', 'default')
   }
diff --git a/browser/main/modals/PreferencesModal/UiTab.js b/browser/main/modals/PreferencesModal/UiTab.js
index f3a092f8..59135132 100644
--- a/browser/main/modals/PreferencesModal/UiTab.js
+++ b/browser/main/modals/PreferencesModal/UiTab.js
@@ -13,6 +13,7 @@ import i18n from 'browser/lib/i18n'
 import { getLanguages } from 'browser/lib/Languages'
 import normalizeEditorFontFamily from 'browser/lib/normalizeEditorFontFamily'
 import uiThemes from 'browser/lib/ui-themes'
+import { chooseTheme, applyTheme } from 'browser/main/lib/ThemeManager'
 
 const OSX = global.process.platform === 'darwin'
 
@@ -194,6 +195,9 @@ class UiTab extends React.Component {
       preview: this.state.config.preview
     }
 
+    chooseTheme(newConfig)
+    applyTheme(newConfig.ui.theme)
+
     ConfigManager.set(newConfig)
 
     store.dispatch({
diff --git a/tests/lib/themeManager-test.js b/tests/lib/themeManager-test.js
deleted file mode 100644
index 49a4f300..00000000
--- a/tests/lib/themeManager-test.js
+++ /dev/null
@@ -1,93 +0,0 @@
-/**
- * @fileoverview Unit test for browser/main/lib/ThemeManager.js
- */
-const test = require('ava')
-const { chooseTheme, applyTheme } = require('browser/main/lib/ThemeManager')
-
-const originalDate = Date
-
-test.beforeEach(t => {
-  t.context = {
-    theme: 'white',
-    scheduledTheme: 'dark',
-    enableScheduleTheme: true,
-    defaultTheme: 'monokai'
-  }
-  const constantDate = new Date('2017-11-27T14:33:42Z')
-  global.Date = class extends Date {
-    constructor() {
-      super()
-      return constantDate
-    }
-  }
-})
-
-test.afterEach(t => {
-  global.Date = originalDate
-})
-
-test("enableScheduleTheme is false, theme shouldn't change", t => {
-  t.context.enableScheduleTheme = false
-
-  const beforeTheme = t.context.theme
-  chooseTheme(t.context)
-  const afterTheme = t.context.theme
-
-  t.is(afterTheme, beforeTheme)
-})
-
-// NOT IN SCHEDULE
-test("scheduleEnd is bigger than scheduleStart and not in schedule, theme shouldn't change", t => {
-  const beforeTheme = t.context.defaultTheme
-  t.context.scheduleStart = 720 // 12:00
-  t.context.scheduleEnd = 870 // 14:30
-  chooseTheme(t.context)
-  const afterTheme = t.context.theme
-
-  t.is(afterTheme, beforeTheme)
-})
-
-test("scheduleStart is bigger than scheduleEnd and not in schedule, theme shouldn't change", t => {
-  const beforeTheme = t.context.defaultTheme
-  t.context.scheduleStart = 960 // 16:00
-  t.context.scheduleEnd = 600 // 10:00
-  chooseTheme(t.context)
-  const afterTheme = t.context.theme
-
-  t.is(afterTheme, beforeTheme)
-})
-
-// IN SCHEDULE
-test('scheduleEnd is bigger than scheduleStart and in schedule, theme should change', t => {
-  const beforeTheme = t.context.scheduledTheme
-  t.context.scheduleStart = 720 // 12:00
-  t.context.scheduleEnd = 900 // 15:00
-  chooseTheme(t.context)
-  const afterTheme = t.context.theme
-
-  t.is(afterTheme, beforeTheme)
-})
-
-test('scheduleStart is bigger than scheduleEnd and in schedule, theme should change', t => {
-  const beforeTheme = t.context.scheduledTheme
-  t.context.scheduleStart = 1200 // 20:00
-  t.context.scheduleEnd = 900 // 15:00
-  chooseTheme(t.context)
-  const afterTheme = t.context.theme
-
-  t.is(afterTheme, beforeTheme)
-})
-
-test("theme to apply is not a supported theme, theme shouldn't change", t => {
-  applyTheme('notATheme')
-  const afterTheme = document.body.dataset.theme
-
-  t.is(afterTheme, 'default')
-})
-
-test('theme to apply is a supported theme, theme should change', t => {
-  applyTheme(t.context.defaultTheme)
-  const afterTheme = document.body.dataset.theme
-
-  t.is(afterTheme, t.context.defaultTheme)
-})
diff --git a/tests/lib/themeManager.test.js b/tests/lib/themeManager.test.js
new file mode 100644
index 00000000..d24f4937
--- /dev/null
+++ b/tests/lib/themeManager.test.js
@@ -0,0 +1,103 @@
+/**
+ * @fileoverview Unit test for browser/main/lib/ThemeManager.js
+ */
+const { chooseTheme, applyTheme } = require('browser/main/lib/ThemeManager')
+jest.mock('../../browser/main/lib/ConfigManager', () => {
+  return {
+    set: () => {}
+  }
+})
+
+const originalDate = Date
+let context = {}
+
+beforeAll(() => {
+  const constantDate = new Date('2017-11-27T14:33:42Z')
+  global.Date = class extends Date {
+    constructor() {
+      super()
+      return constantDate
+    }
+  }
+})
+
+beforeEach(() => {
+  context = {
+    ui: {
+      theme: 'white',
+      scheduledTheme: 'dark',
+      enableScheduleTheme: true,
+      defaultTheme: 'monokai'
+    }
+  }
+})
+
+afterAll(() => {
+  global.Date = originalDate
+})
+
+test("enableScheduleTheme is false, theme shouldn't change", () => {
+  context.ui.enableScheduleTheme = false
+
+  const beforeTheme = context.ui.theme
+  chooseTheme(context)
+  const afterTheme = context.ui.theme
+
+  expect(afterTheme).toBe(beforeTheme)
+})
+
+// NOT IN SCHEDULE
+test("scheduleEnd is bigger than scheduleStart and not in schedule, theme shouldn't change", () => {
+  const beforeTheme = context.ui.defaultTheme
+  context.ui.scheduleStart = 720 // 12:00
+  context.ui.scheduleEnd = 870 // 14:30
+  chooseTheme(context)
+  const afterTheme = context.ui.theme
+
+  expect(afterTheme).toBe(beforeTheme)
+})
+
+test("scheduleStart is bigger than scheduleEnd and not in schedule, theme shouldn't change", () => {
+  const beforeTheme = context.ui.defaultTheme
+  context.ui.scheduleStart = 960 // 16:00
+  context.ui.scheduleEnd = 600 // 10:00
+  chooseTheme(context)
+  const afterTheme = context.ui.theme
+
+  expect(afterTheme).toBe(beforeTheme)
+})
+
+// IN SCHEDULE
+test('scheduleEnd is bigger than scheduleStart and in schedule, theme should change', () => {
+  const beforeTheme = context.ui.scheduledTheme
+  context.ui.scheduleStart = 720 // 12:00
+  context.ui.scheduleEnd = 900 // 15:00
+  chooseTheme(context)
+  const afterTheme = context.ui.theme
+
+  expect(afterTheme).toBe(beforeTheme)
+})
+
+test('scheduleStart is bigger than scheduleEnd and in schedule, theme should change', () => {
+  const beforeTheme = context.ui.scheduledTheme
+  context.ui.scheduleStart = 1200 // 20:00
+  context.ui.scheduleEnd = 900 // 15:00
+  chooseTheme(context)
+  const afterTheme = context.ui.theme
+
+  expect(afterTheme).toBe(beforeTheme)
+})
+
+test("theme to apply is not a supported theme, theme shouldn't change", () => {
+  applyTheme('notATheme')
+  const afterTheme = document.body.dataset.theme
+
+  expect(afterTheme).toBe('default')
+})
+
+test('theme to apply is a supported theme, theme should change', () => {
+  applyTheme(context.ui.defaultTheme)
+  const afterTheme = document.body.dataset.theme
+
+  expect(afterTheme).toBe(context.ui.defaultTheme)
+})