From 6ca7f7e4ec945a24534dea9b70d80997fef8b812 Mon Sep 17 00:00:00 2001
From: Cadence Ember <cloudrac3r@vivaldi.net>
Date: Sat, 28 Mar 2020 00:37:54 +1300
Subject: [PATCH 1/6] Position buttons better in settings

---
 .../components/ft-select/ft-select.css        | 114 +++++++++---------
 .../components/ft-slider/ft-slider.css        |   1 +
 .../ft-toggle-switch/ft-toggle-switch.css     |  74 ------------
 .../ft-toggle-switch/ft-toggle-switch.js      |   4 +
 .../ft-toggle-switch/ft-toggle-switch.sass    |  68 +++++++++++
 .../ft-toggle-switch/ft-toggle-switch.vue     |   4 +-
 .../general-settings/general-settings.css     |  21 ----
 .../general-settings/general-settings.sass    |   1 +
 .../general-settings/general-settings.vue     |  11 +-
 .../player-settings/player-settings.css       |  21 ----
 .../player-settings/player-settings.sass      |   1 +
 .../player-settings/player-settings.vue       |  89 ++++++++------
 src/renderer/sass-partials/_settings.sass     |  29 +++++
 13 files changed, 218 insertions(+), 220 deletions(-)
 delete mode 100644 src/renderer/components/ft-toggle-switch/ft-toggle-switch.css
 create mode 100644 src/renderer/components/ft-toggle-switch/ft-toggle-switch.sass
 delete mode 100644 src/renderer/components/general-settings/general-settings.css
 create mode 100644 src/renderer/components/general-settings/general-settings.sass
 delete mode 100644 src/renderer/components/player-settings/player-settings.css
 create mode 100644 src/renderer/components/player-settings/player-settings.sass
 create mode 100644 src/renderer/sass-partials/_settings.sass

diff --git a/src/renderer/components/ft-select/ft-select.css b/src/renderer/components/ft-select/ft-select.css
index f6cbe2aba..156a4f5bc 100644
--- a/src/renderer/components/ft-select/ft-select.css
+++ b/src/renderer/components/ft-select/ft-select.css
@@ -22,110 +22,110 @@
 
 /* select starting stylings ------------------------------*/
 .select {
-	position: relative;
-	width: 200px;
-	padding: 10px 10px 10px 0;
-  margin-top: 10px;
+  position: relative;
+  width: 200px;
+  padding: 0px 10px 10px 0;
+  margin-top: 30px;
 }
 
 .select-text {
-	position: relative;
-	font-family: inherit;
-	background-color: transparent;
+  position: relative;
+  font-family: inherit;
+  background-color: transparent;
   color: var(--primary-text-color);
-	width: 200px;
-	padding: 10px 10px 10px 0;
-	font-size: 18px;
-	border-radius: 0;
-	border: none;
+  width: 200px;
+  padding: 10px 10px 10px 0;
+  font-size: 18px;
+  border-radius: 0;
+  border: none;
 }
 
 .select option {
-	color: #000000;
+  color: #000000;
 }
 
 /* Remove focus */
 .select-text:focus {
-	outline: none;
+  outline: none;
 }
 
-	/* Use custom arrow */
+  /* Use custom arrow */
 .select .select-text {
-	appearance: none;
-	-webkit-appearance:none
+  appearance: none;
+  -webkit-appearance:none
 }
 
 .iconSelect {
-	position: absolute;
-	top: 18px;
-	right: 10px;
-	/* Styling the down arrow */
-	padding: 0;
-	content: '';
-	border-left: 6px solid transparent;
-	border-right: 6px solid transparent;
-	pointer-events: none;
+  position: absolute;
+  top: 10px;
+  right: 15px;
+  /* Styling the down arrow */
+  padding: 0;
+  content: '';
+  border-left: 6px solid transparent;
+  border-right: 6px solid transparent;
+  pointer-events: none;
   color: var(--tertiary-text-color);
 }
 
 
 /* LABEL ======================================= */
 .select-label {
-	font-size: 18px;
-	font-weight: normal;
-	position: absolute;
-	pointer-events: none;
-	left: 0;
-	top: 10px;
-	transition: 0.2s ease all;
+  font-size: 18px;
+  font-weight: normal;
+  position: absolute;
+  pointer-events: none;
+  left: 0;
+  top: 10px;
+  transition: 0.2s ease all;
   color: var(--tertiary-text-color);
 }
 
 /* active state */
 .select-text:focus ~ .select-label, .select-text:valid ~ .select-label {
-	color: var(--accent-color);
-	top: -20px;
-	transition: 0.2s ease all;
-	font-size: 14px;
+  color: var(--accent-color);
+  top: -20px;
+  transition: 0.2s ease all;
+  font-size: 14px;
 }
 
 /* BOTTOM BARS ================================= */
 .select-bar {
-	position: relative;
-	display: block;
-	width: 200px;
+  position: relative;
+  display: block;
+  width: 200px;
 }
 
 .select-bar:before, .select-bar:after {
-	content: '';
-	height: 2px;
-	width: 0;
-	bottom: 1px;
-	position: absolute;
-	background: var(--accent-color);
-	transition: 0.2s ease all;
+  content: '';
+  height: 2px;
+  width: 0;
+  bottom: 1px;
+  position: absolute;
+  background: var(--accent-color);
+  transition: 0.2s ease all;
 }
 
 .select-bar:before {
-	left: 50%;
+  left: 50%;
 }
 
 .select-bar:after {
-	right: 50%;
+  right: 50%;
 }
 
 /* active state */
 .select-text:focus ~ .select-bar:before, .select-text:focus ~ .select-bar:after {
-	width: 50%;
+  width: 50%;
 }
 
 /* HIGHLIGHTER ================================== */
 .select-highlight {
-	position: absolute;
-	height: 60%;
-	width: 100px;
-	top: 25%;
-	left: 0;
-	pointer-events: none;
-	opacity: 0.5;
+  position: absolute;
+  height: 60%;
+  width: 100px;
+  top: 25%;
+  left: 0;
+  pointer-events: none;
+  opacity: 0.5;
 }
diff --git a/src/renderer/components/ft-slider/ft-slider.css b/src/renderer/components/ft-slider/ft-slider.css
index 7613e52b7..7e7753d29 100644
--- a/src/renderer/components/ft-slider/ft-slider.css
+++ b/src/renderer/components/ft-slider/ft-slider.css
@@ -10,6 +10,7 @@
     font-size: 16px;
     line-height: 1.5;
     padding: 5px;
+    margin: 12px 8px;
 }
 
 /* Input */
diff --git a/src/renderer/components/ft-toggle-switch/ft-toggle-switch.css b/src/renderer/components/ft-toggle-switch/ft-toggle-switch.css
deleted file mode 100644
index abebec5ec..000000000
--- a/src/renderer/components/ft-toggle-switch/ft-toggle-switch.css
+++ /dev/null
@@ -1,74 +0,0 @@
-/* Thanks to Guus Lieben for the Material Design Switch */
-
-.switch-input {
-    display: none;
-}
-
-.switch-label {
-    position: relative;
-    display: inline-block;
-    min-width: 112px;
-    cursor: pointer;
-    font-weight: 500;
-    text-align: left;
-    margin: 16px;
-    padding: 16px 0 16px 44px;
-}
-
-.switch-label:before,
-.switch-label:after {
-    content: "";
-    position: absolute;
-    margin: 0;
-    outline: 0;
-    top: 50%;
-    -ms-transform: translate(0, -50%);
-    -webkit-transform: translate(0, -50%);
-    transform: translate(0, -50%);
-    -webkit-transition: all 0.3s ease;
-    transition: all 0.3s ease;
-}
-
-.switch-label:before {
-    left: 1px;
-    width: 34px;
-    height: 14px;
-    background-color: #9E9E9E;
-    border-radius: 8px;
-}
-
-.switch-label:after {
-    left: 0;
-    width: 20px;
-    height: 20px;
-    background-color: #FAFAFA;
-    border-radius: 50%;
-    box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.14), 0 2px 2px 0 rgba(0, 0, 0, 0.098), 0 1px 5px 0 rgba(0, 0, 0, 0.084);
-}
-
-.switch-label .toggle--on {
-    display: none;
-}
-
-.switch-label .toggle--off {
-    display: inline-block;
-}
-
-.switch-input:checked+.switch-label:before {
-    background-color: var(--accent-color-light);
-}
-
-.switch-input:checked+.switch-label:after {
-    background-color: var(--accent-color);
-    -ms-transform: translate(80%, -50%);
-    -webkit-transform: translate(80%, -50%);
-    transform: translate(80%, -50%);
-}
-
-.switch-input:checked+.switch-label .toggle--on {
-    display: inline-block;
-}
-
-.switch-input:checked+.switch-label .toggle--off {
-    display: none;
-}
diff --git a/src/renderer/components/ft-toggle-switch/ft-toggle-switch.js b/src/renderer/components/ft-toggle-switch/ft-toggle-switch.js
index 6241895c9..4a5bd8250 100644
--- a/src/renderer/components/ft-toggle-switch/ft-toggle-switch.js
+++ b/src/renderer/components/ft-toggle-switch/ft-toggle-switch.js
@@ -10,6 +10,10 @@ export default Vue.extend({
     defaultValue: {
       type: Boolean,
       default: false
+    },
+    compact: {
+      type: Boolean,
+      default: false
     }
   },
   data: function () {
diff --git a/src/renderer/components/ft-toggle-switch/ft-toggle-switch.sass b/src/renderer/components/ft-toggle-switch/ft-toggle-switch.sass
new file mode 100644
index 000000000..946cd67cc
--- /dev/null
+++ b/src/renderer/components/ft-toggle-switch/ft-toggle-switch.sass
@@ -0,0 +1,68 @@
+/* Thanks to Guus Lieben for the Material Design Switch */
+
+.switch-input
+  display: none
+
+.switch-label
+  position: relative
+  display: inline-block
+  min-width: 112px
+  cursor: pointer
+  font-weight: 500
+  text-align: left
+  margin: 16px
+  padding: 16px 0 16px 44px
+
+  &.compact
+    padding: 12px 0 12px 44px
+    margin: 0px
+
+
+.switch-label:before,
+.switch-label:after
+  content: ""
+  position: absolute
+  margin: 0
+  outline: 0
+  top: 50%
+  -ms-transform: translate(0, -50%)
+  -webkit-transform: translate(0, -50%)
+  transform: translate(0, -50%)
+  -webkit-transition: all 0.3s ease
+  transition: all 0.3s ease
+
+.switch-label:before
+  left: 1px
+  width: 34px
+  height: 14px
+  background-color: #9E9E9E
+  border-radius: 8px
+
+.switch-label:after
+  left: 0
+  width: 20px
+  height: 20px
+  background-color: #FAFAFA
+  border-radius: 50%
+  box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.14), 0 2px 2px 0 rgba(0, 0, 0, 0.098), 0 1px 5px 0 rgba(0, 0, 0, 0.084)
+
+.switch-label .toggle--on
+  display: none
+
+.switch-label .toggle--off
+  display: inline-block
+
+.switch-input:checked+.switch-label:before
+  background-color: var(--accent-color-light)
+
+.switch-input:checked+.switch-label:after
+  background-color: var(--accent-color)
+  -ms-transform: translate(80%, -50%)
+  -webkit-transform: translate(80%, -50%)
+  transform: translate(80%, -50%)
+
+.switch-input:checked+.switch-label .toggle--on
+  display: inline-block
+
+.switch-input:checked+.switch-label .toggle--off
+  display: none
diff --git a/src/renderer/components/ft-toggle-switch/ft-toggle-switch.vue b/src/renderer/components/ft-toggle-switch/ft-toggle-switch.vue
index b9545c47b..848713907 100644
--- a/src/renderer/components/ft-toggle-switch/ft-toggle-switch.vue
+++ b/src/renderer/components/ft-toggle-switch/ft-toggle-switch.vue
@@ -11,7 +11,7 @@
     >
     <label
       :for="id"
-      class="switch-label"
+      :class='(compact ? "compact " : "")+"switch-label"'
     >
       {{ label }}
     </label>
@@ -19,4 +19,4 @@
 </template>
 
 <script src="./ft-toggle-switch.js" />
-<style scoped src="./ft-toggle-switch.css" />
+<style scoped lang="sass" src="./ft-toggle-switch.sass" />
diff --git a/src/renderer/components/general-settings/general-settings.css b/src/renderer/components/general-settings/general-settings.css
deleted file mode 100644
index 40a7fd47f..000000000
--- a/src/renderer/components/general-settings/general-settings.css
+++ /dev/null
@@ -1,21 +0,0 @@
-.relative {
-  position: relative;
-}
-
-.card {
-  width: 85%;
-  margin: 0 auto;
-  margin-bottom: 10px;
-}
-
-@media only screen and (max-width: 680px) {
-  .card {
-    width: 90%;
-  }
-}
-
-@media only screen and (max-width: 460px) {
-  .generalSettingsFlexBox {
-    justify-content: flex-start;
-  }
-}
diff --git a/src/renderer/components/general-settings/general-settings.sass b/src/renderer/components/general-settings/general-settings.sass
new file mode 100644
index 000000000..05cb0dfb9
--- /dev/null
+++ b/src/renderer/components/general-settings/general-settings.sass
@@ -0,0 +1 @@
+@use "../../sass-partials/settings"
diff --git a/src/renderer/components/general-settings/general-settings.vue b/src/renderer/components/general-settings/general-settings.vue
index 0f1bca97a..4db7ac17d 100644
--- a/src/renderer/components/general-settings/general-settings.vue
+++ b/src/renderer/components/general-settings/general-settings.vue
@@ -1,6 +1,6 @@
 <template>
   <ft-card
-    class="relative card">
+    class="card">
     <h3
       class="videoTitle"
     >
@@ -9,17 +9,18 @@
     <ft-flex-box class="generalSettingsFlexBox">
       <ft-toggle-switch
         label="Fallback to Non-Preferred Backend on Failure"
+        :compact=true
         :default-value="backendFallback"
         @change="updateBackendFallback"
       />
       <ft-toggle-switch
         label="Check for Updates"
+        :compact=true
         :default-value="checkForUpdates"
         @change="updateCheckForUpdates"
       />
     </ft-flex-box>
-    <br>
-    <ft-flex-box>
+    <div class="switchGrid">
       <ft-select
         placeholder="Preferred API Backend"
         :value="backendPreference"
@@ -55,9 +56,9 @@
         :select-values="thumbnailTypeValues"
         @change="updateThumbnailPreference"
       />
-    </ft-flex-box>
+    </div>
   </ft-card>
 </template>
 
 <script src="./general-settings.js" />
-<style scoped src="./general-settings.css" />
+<style scoped lang="sass" src="./general-settings.sass" />
diff --git a/src/renderer/components/player-settings/player-settings.css b/src/renderer/components/player-settings/player-settings.css
deleted file mode 100644
index 86eef4fb1..000000000
--- a/src/renderer/components/player-settings/player-settings.css
+++ /dev/null
@@ -1,21 +0,0 @@
-.relative {
-  position: relative;
-}
-
-.card {
-  width: 85%;
-  margin: 0 auto;
-  margin-bottom: 10px;
-}
-
-@media only screen and (max-width: 680px) {
-  .card {
-    width: 90%;
-  }
-}
-
-@media only screen and (max-width: 460px) {
-  .playerSettingsFlexBox {
-    justify-content: flex-start;
-  }
-}
diff --git a/src/renderer/components/player-settings/player-settings.sass b/src/renderer/components/player-settings/player-settings.sass
new file mode 100644
index 000000000..05cb0dfb9
--- /dev/null
+++ b/src/renderer/components/player-settings/player-settings.sass
@@ -0,0 +1 @@
+@use "../../sass-partials/settings"
diff --git a/src/renderer/components/player-settings/player-settings.vue b/src/renderer/components/player-settings/player-settings.vue
index 9af5f4f34..d43113f40 100644
--- a/src/renderer/components/player-settings/player-settings.vue
+++ b/src/renderer/components/player-settings/player-settings.vue
@@ -6,44 +6,54 @@
     >
       {{ title }}
     </h3>
-    <ft-flex-box class="playerSettingsFlexBox">
-      <ft-toggle-switch
-        label="Remember History"
-        :default-value="rememberHistory"
-        @change="updateRememberHistory"
-      />
-      <ft-toggle-switch
-        label="Autoplay Videos"
-        :default-value="autoplayVideos"
-        @change="updateAutoplayVideos"
-      />
-      <ft-toggle-switch
-        label="Autoplay Playlists"
-        :default-value="autoplayPlaylists"
-        @change="updateAutoplayPlaylists"
-      />
-      <ft-toggle-switch
-        label="Play Next Video"
-        :default-value="playNextVideo"
-        @change="updatePlayNextVideo"
-      />
-      <ft-toggle-switch
-        label="Enable Subtitles by Default"
-        :default-value="enableSubtitles"
-        @change="updateEnableSubtitles"
-      />
-      <ft-toggle-switch
-        label="Force Local Backend for Legacy Formats"
-        :default-value="forceLocalBackendForLegacy"
-        @change="updateForceLocalBackendForLegacy"
-      />
-      <ft-toggle-switch
-        label="Proxy Videos Through Invidious"
-        :default-value="proxyVideos"
-        @change="updateProxyVideos"
-      />
-    </ft-flex-box>
-    <br>
+    <div class="switchColumnGrid">
+      <div class="switchColumn">
+        <ft-toggle-switch
+          label="Remember History"
+          :compact=true
+          :default-value="rememberHistory"
+          @change="updateRememberHistory"
+        />
+        <ft-toggle-switch
+          label="Enable Subtitles by Default"
+          :compact=true
+          :default-value="enableSubtitles"
+          @change="updateEnableSubtitles"
+        />
+        <ft-toggle-switch
+          label="Force Local Backend for Legacy Formats"
+          :compact=true
+          :default-value="forceLocalBackendForLegacy"
+          @change="updateForceLocalBackendForLegacy"
+        />
+        <ft-toggle-switch
+          label="Proxy Videos Through Invidious"
+          :compact=true
+          :default-value="proxyVideos"
+          @change="updateProxyVideos"
+        />
+      </div>
+      <div class="switchColumn">
+        <ft-toggle-switch
+          label="Autoplay Videos"
+          :compact=true
+          :default-value="autoplayVideos"
+          @change="updateAutoplayVideos"
+        />
+        <ft-toggle-switch
+          label="Autoplay Playlists"
+          :compact=true
+          :default-value="autoplayPlaylists"
+          @change="updateAutoplayPlaylists"
+        />
+        <ft-toggle-switch
+          label="Play Next Video"
+          :compact=true
+          :default-value="playNextVideo"
+          @change="updatePlayNextVideo"
+        />
+      </div>
+    </div>
     <ft-flex-box>
       <ft-slider
         label="Default Volume"
@@ -64,7 +74,6 @@
         @change="updateDefaultPlayback"
       />
     </ft-flex-box>
-    <br>
     <ft-flex-box>
       <ft-select
         placeholder="Default Video Format"
@@ -85,4 +94,4 @@
 </template>
 
 <script src="./player-settings.js" />
-<style scoped src="./player-settings.css" />
+<style scoped lang="sass" src="./player-settings.sass" />
diff --git a/src/renderer/sass-partials/_settings.sass b/src/renderer/sass-partials/_settings.sass
new file mode 100644
index 000000000..2eb4af2a7
--- /dev/null
+++ b/src/renderer/sass-partials/_settings.sass
@@ -0,0 +1,29 @@
+.switchGrid
+  display: grid
+  grid-template-columns: auto auto
+  justify-content: space-evenly
+  align-items: center
+
+  @media only screen and (max-width: 680px)
+    grid-template-columns: auto
+
+.switchColumnGrid
+  @extend .switchGrid
+  align-items: start
+
+.switchColumn
+  display: flex
+  flex-direction: column
+  justify-items: start
+
+.card
+  width: 85%
+  margin: 0 auto
+  margin-bottom: 10px
+
+  @media only screen and (max-width: 680px)
+    width: 90%
+
+@media only screen and (max-width: 460px)
+  .generalSettingsFlexBox, .playerSettingsFlexBox
+    justify-content: flex-start

From 15051812bb6f088ebeeb81ec00d9dde66bddaf47 Mon Sep 17 00:00:00 2001
From: Cadence Ember <cloudrac3r@vivaldi.net>
Date: Sat, 28 Mar 2020 17:04:37 +1300
Subject: [PATCH 2/6] Fixes:

- Search bar is primary-color-hover in thin mode with match top bar set
- Search filters .expand class does not take effect in thin mode
- Grid point moved from 901 to 961 px
---
 src/renderer/components/top-nav/top-nav.sass | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/renderer/components/top-nav/top-nav.sass b/src/renderer/components/top-nav/top-nav.sass
index 173ae3827..4040bcb30 100644
--- a/src/renderer/components/top-nav/top-nav.sass
+++ b/src/renderer/components/top-nav/top-nav.sass
@@ -17,7 +17,7 @@
   align-items: center
   align-content: center
 
-  @media only screen and (min-width: 901px)
+  @media only screen and (min-width: 961px)
     display: grid
     grid-template-columns: 1fr 440px 1fr
 
@@ -111,6 +111,9 @@
       top: 60px
       background-color: var(--side-nav-color)
 
+      @include top-nav-is-colored
+        background-color: var(--primary-color-hover)
+
     .searchInput
       flex: 1
 
@@ -126,5 +129,6 @@
       right: 0
       margin: 95px 10px 0px
 
-    &.expand
-      margin-left: 100px
+    @media only screen and (min-width: 681px)
+      &.expand
+        margin-left: 100px

From 0ecabbd3739dd5af0530e96783f1c14b2a888561 Mon Sep 17 00:00:00 2001
From: Cadence Ember <cloudrac3r@vivaldi.net>
Date: Sun, 12 Apr 2020 15:01:48 +1200
Subject: [PATCH 3/6] Top switches not compact

---
 src/renderer/components/general-settings/general-settings.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/renderer/components/general-settings/general-settings.vue b/src/renderer/components/general-settings/general-settings.vue
index 4db7ac17d..47029b929 100644
--- a/src/renderer/components/general-settings/general-settings.vue
+++ b/src/renderer/components/general-settings/general-settings.vue
@@ -9,13 +9,13 @@
     <ft-flex-box class="generalSettingsFlexBox">
       <ft-toggle-switch
         label="Fallback to Non-Preferred Backend on Failure"
-        :compact=true
+        :compact=false
         :default-value="backendFallback"
         @change="updateBackendFallback"
       />
       <ft-toggle-switch
         label="Check for Updates"
-        :compact=true
+        :compact=false
         :default-value="checkForUpdates"
         @change="updateCheckForUpdates"
       />

From fec233fab73ed8c57f5f6b97e0110d559d951757 Mon Sep 17 00:00:00 2001
From: Cadence Ember <cloudrac3r@vivaldi.net>
Date: Sun, 12 Apr 2020 15:18:38 +1200
Subject: [PATCH 4/6] Refactor ft-toggle-switch

---
 .../ft-toggle-switch/ft-toggle-switch.sass    | 78 ++++++++-----------
 1 file changed, 32 insertions(+), 46 deletions(-)

diff --git a/src/renderer/components/ft-toggle-switch/ft-toggle-switch.sass b/src/renderer/components/ft-toggle-switch/ft-toggle-switch.sass
index 946cd67cc..e1d60f844 100644
--- a/src/renderer/components/ft-toggle-switch/ft-toggle-switch.sass
+++ b/src/renderer/components/ft-toggle-switch/ft-toggle-switch.sass
@@ -14,55 +14,41 @@
   padding: 16px 0 16px 44px
 
   &.compact
-    padding: 12px 0 12px 44px
     margin: 0px
+    padding: 12px 0 12px 44px
 
+  &:before, &:after
+    content: ""
+    position: absolute
+    margin: 0
+    outline: 0
+    top: 50%
+    -ms-transform: translate(0, -50%)
+    -webkit-transform: translate(0, -50%)
+    transform: translate(0, -50%)
+    -webkit-transition: all 0.3s ease
+    transition: all 0.3s ease
 
-.switch-label:before,
-.switch-label:after
-  content: ""
-  position: absolute
-  margin: 0
-  outline: 0
-  top: 50%
-  -ms-transform: translate(0, -50%)
-  -webkit-transform: translate(0, -50%)
-  transform: translate(0, -50%)
-  -webkit-transition: all 0.3s ease
-  transition: all 0.3s ease
+  &:before
+    left: 1px
+    width: 34px
+    height: 14px
+    background-color: #9E9E9E
+    border-radius: 8px
 
-.switch-label:before
-  left: 1px
-  width: 34px
-  height: 14px
-  background-color: #9E9E9E
-  border-radius: 8px
+    .switch-input:checked + &
+      background-color: var(--accent-color-light)
 
-.switch-label:after
-  left: 0
-  width: 20px
-  height: 20px
-  background-color: #FAFAFA
-  border-radius: 50%
-  box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.14), 0 2px 2px 0 rgba(0, 0, 0, 0.098), 0 1px 5px 0 rgba(0, 0, 0, 0.084)
+  &:after
+    left: 0
+    width: 20px
+    height: 20px
+    background-color: #FAFAFA
+    border-radius: 50%
+    box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.14), 0 2px 2px 0 rgba(0, 0, 0, 0.098), 0 1px 5px 0 rgba(0, 0, 0, 0.084)
 
-.switch-label .toggle--on
-  display: none
-
-.switch-label .toggle--off
-  display: inline-block
-
-.switch-input:checked+.switch-label:before
-  background-color: var(--accent-color-light)
-
-.switch-input:checked+.switch-label:after
-  background-color: var(--accent-color)
-  -ms-transform: translate(80%, -50%)
-  -webkit-transform: translate(80%, -50%)
-  transform: translate(80%, -50%)
-
-.switch-input:checked+.switch-label .toggle--on
-  display: inline-block
-
-.switch-input:checked+.switch-label .toggle--off
-  display: none
+    .switch-input:checked + &
+      background-color: var(--accent-color)
+      -ms-transform: translate(80%, -50%)
+      -webkit-transform: translate(80%, -50%)
+      transform: translate(80%, -50%)

From 59a922578bec0322d7c7af69bd84522682619fb4 Mon Sep 17 00:00:00 2001
From: Cadence Ember <cloudrac3r@vivaldi.net>
Date: Sun, 12 Apr 2020 15:51:29 +1200
Subject: [PATCH 5/6] Add classes the proper way

---
 src/renderer/components/ft-toggle-switch/ft-toggle-switch.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/renderer/components/ft-toggle-switch/ft-toggle-switch.vue b/src/renderer/components/ft-toggle-switch/ft-toggle-switch.vue
index 848713907..09d763496 100644
--- a/src/renderer/components/ft-toggle-switch/ft-toggle-switch.vue
+++ b/src/renderer/components/ft-toggle-switch/ft-toggle-switch.vue
@@ -11,7 +11,8 @@
     >
     <label
       :for="id"
-      :class='(compact ? "compact " : "")+"switch-label"'
+      class="switch-label"
+      :class="{compact}"
     >
       {{ label }}
     </label>

From eec1f198218e830c1fb7a723eeaf5200edaf984e Mon Sep 17 00:00:00 2001
From: Cadence Ember <cloudrac3r@vivaldi.net>
Date: Sun, 12 Apr 2020 16:02:09 +1200
Subject: [PATCH 6/6] Use default when compact is false

---
 src/renderer/components/general-settings/general-settings.vue | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/renderer/components/general-settings/general-settings.vue b/src/renderer/components/general-settings/general-settings.vue
index 47029b929..a33bac722 100644
--- a/src/renderer/components/general-settings/general-settings.vue
+++ b/src/renderer/components/general-settings/general-settings.vue
@@ -9,13 +9,11 @@
     <ft-flex-box class="generalSettingsFlexBox">
       <ft-toggle-switch
         label="Fallback to Non-Preferred Backend on Failure"
-        :compact=false
         :default-value="backendFallback"
         @change="updateBackendFallback"
       />
       <ft-toggle-switch
         label="Check for Updates"
-        :compact=false
         :default-value="checkForUpdates"
         @change="updateCheckForUpdates"
       />