From 63946f7561e336a35311adbc1e599ecace03e1f1 Mon Sep 17 00:00:00 2001
From: absidue <48293849+absidue@users.noreply.github.com>
Date: Sat, 24 Sep 2022 11:12:11 +0200
Subject: [PATCH] Add a settings section component to reduce duplicate code
 (#2609)

---
 .../components/data-settings/data-settings.js |  2 +
 .../data-settings/data-settings.sass          |  1 -
 .../data-settings/data-settings.vue           | 13 ++--
 .../distraction-settings.js                   |  2 +
 .../distraction-settings.sass                 |  1 -
 .../distraction-settings.vue                  | 30 ++------
 .../download-settings/download-settings.js    |  2 +
 .../download-settings/download-settings.sass  |  6 --
 .../download-settings/download-settings.vue   | 14 ++--
 .../external-player-settings.js               |  2 +
 .../external-player-settings.sass             |  1 -
 .../external-player-settings.vue              | 15 ++--
 .../ft-settings-section.js                    | 11 +++
 .../ft-settings-section.sass}                 | 68 ++++++++++---------
 .../ft-settings-section.vue                   | 14 ++++
 .../ft-sponsor-block-category.sass            |  1 -
 .../general-settings/general-settings.js      |  2 +
 .../general-settings/general-settings.sass    |  2 -
 .../general-settings/general-settings.vue     | 14 ++--
 .../parental-control-settings.js              |  2 +
 .../parental-control-settings.sass            |  1 -
 .../parental-control-settings.vue             | 13 ++--
 .../player-settings/player-settings.js        |  2 +
 .../player-settings/player-settings.sass      |  2 -
 .../player-settings/player-settings.vue       | 12 ++--
 .../privacy-settings/privacy-settings.js      |  2 +
 .../privacy-settings/privacy-settings.sass    |  1 -
 .../privacy-settings/privacy-settings.vue     | 13 ++--
 .../proxy-settings/proxy-settings.js          |  2 +
 .../proxy-settings/proxy-settings.sass        |  5 --
 .../proxy-settings/proxy-settings.vue         | 15 ++--
 .../sponsor-block-settings.js                 |  2 +
 .../sponsor-block-settings.sass               |  5 --
 .../sponsor-block-settings.vue                | 17 ++---
 .../subscription-settings.js                  |  2 +
 .../subscription-settings.sass                |  6 --
 .../subscription-settings.vue                 | 15 ++--
 .../theme-settings/theme-settings.js          |  2 +
 .../theme-settings/theme-settings.sass        |  1 -
 .../theme-settings/theme-settings.vue         | 13 ++--
 40 files changed, 140 insertions(+), 194 deletions(-)
 delete mode 100644 src/renderer/components/data-settings/data-settings.sass
 delete mode 100644 src/renderer/components/distraction-settings/distraction-settings.sass
 delete mode 100644 src/renderer/components/external-player-settings/external-player-settings.sass
 create mode 100644 src/renderer/components/ft-settings-section/ft-settings-section.js
 rename src/renderer/{sass-partials/_settings.sass => components/ft-settings-section/ft-settings-section.sass} (52%)
 create mode 100644 src/renderer/components/ft-settings-section/ft-settings-section.vue
 delete mode 100644 src/renderer/components/parental-control-settings/parental-control-settings.sass
 delete mode 100644 src/renderer/components/privacy-settings/privacy-settings.sass
 delete mode 100644 src/renderer/components/proxy-settings/proxy-settings.sass
 delete mode 100644 src/renderer/components/sponsor-block-settings/sponsor-block-settings.sass
 delete mode 100644 src/renderer/components/subscription-settings/subscription-settings.sass
 delete mode 100644 src/renderer/components/theme-settings/theme-settings.sass

diff --git a/src/renderer/components/data-settings/data-settings.js b/src/renderer/components/data-settings/data-settings.js
index 63bd50f4..c77e830f 100644
--- a/src/renderer/components/data-settings/data-settings.js
+++ b/src/renderer/components/data-settings/data-settings.js
@@ -1,4 +1,5 @@
 import Vue from 'vue'
+import FtSettingsSection from '../ft-settings-section/ft-settings-section.vue'
 import { mapActions, mapMutations } from 'vuex'
 import FtCard from '../ft-card/ft-card.vue'
 import FtButton from '../ft-button/ft-button.vue'
@@ -16,6 +17,7 @@ import ytch from 'yt-channel-info'
 export default Vue.extend({
   name: 'DataSettings',
   components: {
+    'ft-settings-section': FtSettingsSection,
     'ft-card': FtCard,
     'ft-button': FtButton,
     'ft-toggle-switch': FtToggleSwitch,
diff --git a/src/renderer/components/data-settings/data-settings.sass b/src/renderer/components/data-settings/data-settings.sass
deleted file mode 100644
index 05cb0dfb..00000000
--- a/src/renderer/components/data-settings/data-settings.sass
+++ /dev/null
@@ -1 +0,0 @@
-@use "../../sass-partials/settings"
diff --git a/src/renderer/components/data-settings/data-settings.vue b/src/renderer/components/data-settings/data-settings.vue
index ae9fa730..aa65ee28 100644
--- a/src/renderer/components/data-settings/data-settings.vue
+++ b/src/renderer/components/data-settings/data-settings.vue
@@ -1,11 +1,7 @@
 <template>
-  <details>
-    <summary>
-      <h3>
-        {{ $t("Settings.Data Settings.Data Settings") }}
-      </h3>
-    </summary>
-    <hr>
+  <ft-settings-section
+    :title="$t('Settings.Data Settings.Data Settings')"
+  >
     <ft-flex-box>
       <ft-button
         :label="$t('Settings.Data Settings.Import Subscriptions')"
@@ -69,8 +65,7 @@
       :option-values="subscriptionsPromptValues"
       @click="exportSubscriptions"
     />
-  </details>
+  </ft-settings-section>
 </template>
 
 <script src="./data-settings.js" />
-<style scoped lang="sass" src="./data-settings.sass" />
diff --git a/src/renderer/components/distraction-settings/distraction-settings.js b/src/renderer/components/distraction-settings/distraction-settings.js
index 891cf702..de6963ce 100644
--- a/src/renderer/components/distraction-settings/distraction-settings.js
+++ b/src/renderer/components/distraction-settings/distraction-settings.js
@@ -1,5 +1,6 @@
 import Vue from 'vue'
 import { mapActions } from 'vuex'
+import FtSettingsSection from '../ft-settings-section/ft-settings-section.vue'
 import FtCard from '../ft-card/ft-card.vue'
 import FtToggleSwitch from '../ft-toggle-switch/ft-toggle-switch.vue'
 import FtButton from '../ft-button/ft-button.vue'
@@ -9,6 +10,7 @@ import FtFlexBox from '../ft-flex-box/ft-flex-box.vue'
 export default Vue.extend({
   name: 'PlayerSettings',
   components: {
+    'ft-settings-section': FtSettingsSection,
     'ft-card': FtCard,
     'ft-toggle-switch': FtToggleSwitch,
     'ft-button': FtButton,
diff --git a/src/renderer/components/distraction-settings/distraction-settings.sass b/src/renderer/components/distraction-settings/distraction-settings.sass
deleted file mode 100644
index 05cb0dfb..00000000
--- a/src/renderer/components/distraction-settings/distraction-settings.sass
+++ /dev/null
@@ -1 +0,0 @@
-@use "../../sass-partials/settings"
diff --git a/src/renderer/components/distraction-settings/distraction-settings.vue b/src/renderer/components/distraction-settings/distraction-settings.vue
index 4c59582d..d6f56a07 100644
--- a/src/renderer/components/distraction-settings/distraction-settings.vue
+++ b/src/renderer/components/distraction-settings/distraction-settings.vue
@@ -1,11 +1,7 @@
 <template>
-  <details>
-    <summary>
-      <h3>
-        {{ $t("Settings.Distraction Free Settings.Distraction Free Settings") }}
-      </h3>
-    </summary>
-    <hr>
+  <ft-settings-section
+    :title="$t('Settings.Distraction Free Settings.Distraction Free Settings')"
+  >
     <div class="switchColumnGrid">
       <div class="switchColumn">
         <ft-toggle-switch
@@ -96,25 +92,7 @@
         />
       </div>
     </div>
-    <br>
-    <ft-flex-box>
-      <ft-select
-        v-if="false"
-        placeholder="Distraction View Type"
-        :value="viewValues[0]"
-        :select-names="viewNames"
-        :select-values="viewValues"
-      />
-    </ft-flex-box>
-    <br>
-    <ft-flex-box>
-      <ft-button
-        v-if="false"
-        label="Manage My Distractions"
-      />
-    </ft-flex-box>
-  </details>
+  </ft-settings-section>
 </template>
 
 <script src="./distraction-settings.js" />
-<style scoped lang="sass" src="./distraction-settings.sass" />
diff --git a/src/renderer/components/download-settings/download-settings.js b/src/renderer/components/download-settings/download-settings.js
index 7192cd68..9e4faabc 100644
--- a/src/renderer/components/download-settings/download-settings.js
+++ b/src/renderer/components/download-settings/download-settings.js
@@ -1,4 +1,5 @@
 import Vue from 'vue'
+import FtSettingsSection from '../ft-settings-section/ft-settings-section.vue'
 import FtFlexBox from '../ft-flex-box/ft-flex-box.vue'
 import FtToggleSwitch from '../ft-toggle-switch/ft-toggle-switch.vue'
 import FtSelect from '../ft-select/ft-select.vue'
@@ -11,6 +12,7 @@ import { IpcChannels } from '../../../constants'
 export default Vue.extend({
   name: 'DownloadSettings',
   components: {
+    'ft-settings-section': FtSettingsSection,
     'ft-toggle-switch': FtToggleSwitch,
     'ft-flex-box': FtFlexBox,
     'ft-select': FtSelect,
diff --git a/src/renderer/components/download-settings/download-settings.sass b/src/renderer/components/download-settings/download-settings.sass
index 330bf087..5d475ff8 100644
--- a/src/renderer/components/download-settings/download-settings.sass
+++ b/src/renderer/components/download-settings/download-settings.sass
@@ -1,8 +1,2 @@
-@use "../../sass-partials/settings"
-
-@media only screen and (max-width: 500px)
-  .downloadSettingsFlexBox
-    justify-content: flex-start
-
 .folderDisplay
   width: 50vh
diff --git a/src/renderer/components/download-settings/download-settings.vue b/src/renderer/components/download-settings/download-settings.vue
index 3cd274bf..1620a213 100644
--- a/src/renderer/components/download-settings/download-settings.vue
+++ b/src/renderer/components/download-settings/download-settings.vue
@@ -1,11 +1,7 @@
 <template>
-  <details>
-    <summary>
-      <h3>
-        {{ $t("Settings.Download Settings.Download Settings") }}
-      </h3>
-    </summary>
-    <hr>
+  <ft-settings-section
+    :title="$t('Settings.Download Settings.Download Settings')"
+  >
     <ft-flex-box>
       <ft-select
         :placeholder="$t('Settings.Download Settings.Download Behavior')"
@@ -17,7 +13,7 @@
     </ft-flex-box>
     <ft-flex-box
       v-if="downloadBehavior === 'download'"
-      class="downloadSettingsFlexBox"
+      class="settingsFlexStart500px"
     >
       <ft-toggle-switch
         :label="$t('Settings.Download Settings.Ask Download Path')"
@@ -44,7 +40,7 @@
         @click="chooseDownloadingFolder"
       />
     </ft-flex-box>
-  </details>
+  </ft-settings-section>
 </template>
 
 <script src="./download-settings.js" />
diff --git a/src/renderer/components/external-player-settings/external-player-settings.js b/src/renderer/components/external-player-settings/external-player-settings.js
index f847a987..0676a196 100644
--- a/src/renderer/components/external-player-settings/external-player-settings.js
+++ b/src/renderer/components/external-player-settings/external-player-settings.js
@@ -1,5 +1,6 @@
 import Vue from 'vue'
 import { mapActions } from 'vuex'
+import FtSettingsSection from '../ft-settings-section/ft-settings-section.vue'
 import FtCard from '../ft-card/ft-card.vue'
 import FtSelect from '../ft-select/ft-select.vue'
 import FtInput from '../ft-input/ft-input.vue'
@@ -9,6 +10,7 @@ import FtFlexBox from '../ft-flex-box/ft-flex-box.vue'
 export default Vue.extend({
   name: 'ExternalPlayerSettings',
   components: {
+    'ft-settings-section': FtSettingsSection,
     'ft-card': FtCard,
     'ft-select': FtSelect,
     'ft-input': FtInput,
diff --git a/src/renderer/components/external-player-settings/external-player-settings.sass b/src/renderer/components/external-player-settings/external-player-settings.sass
deleted file mode 100644
index 05cb0dfb..00000000
--- a/src/renderer/components/external-player-settings/external-player-settings.sass
+++ /dev/null
@@ -1 +0,0 @@
-@use "../../sass-partials/settings"
diff --git a/src/renderer/components/external-player-settings/external-player-settings.vue b/src/renderer/components/external-player-settings/external-player-settings.vue
index e1f962c5..a09da588 100644
--- a/src/renderer/components/external-player-settings/external-player-settings.vue
+++ b/src/renderer/components/external-player-settings/external-player-settings.vue
@@ -1,11 +1,7 @@
 <template>
-  <details>
-    <summary>
-      <h3>
-        {{ $t("Settings.External Player Settings.External Player Settings") }}
-      </h3>
-    </summary>
-    <hr>
+  <ft-settings-section
+    :title="$t('Settings.External Player Settings.External Player Settings')"
+  >
     <div class="switchColumnGrid">
       <div class="switchColumn">
         <ft-select
@@ -30,7 +26,7 @@
     </div>
     <ft-flex-box
       v-if="externalPlayer !== ''"
-      class="externalPlayerSettingsFlexBox"
+      class="settingsFlexStart460px"
     >
       <ft-input
         :placeholder="$t('Settings.External Player Settings.Custom External Player Executable')"
@@ -49,8 +45,7 @@
         @input="updateExternalPlayerCustomArgs"
       />
     </ft-flex-box>
-  </details>
+  </ft-settings-section>
 </template>
 
 <script src="./external-player-settings.js" />
-<style scoped lang="sass" src="./external-player-settings.sass" />
diff --git a/src/renderer/components/ft-settings-section/ft-settings-section.js b/src/renderer/components/ft-settings-section/ft-settings-section.js
new file mode 100644
index 00000000..8d164095
--- /dev/null
+++ b/src/renderer/components/ft-settings-section/ft-settings-section.js
@@ -0,0 +1,11 @@
+import Vue from 'vue'
+
+export default Vue.extend({
+  name: 'FtSettingsSection',
+  props: {
+    title: {
+      type: String,
+      required: true
+    }
+  }
+})
diff --git a/src/renderer/sass-partials/_settings.sass b/src/renderer/components/ft-settings-section/ft-settings-section.sass
similarity index 52%
rename from src/renderer/sass-partials/_settings.sass
rename to src/renderer/components/ft-settings-section/ft-settings-section.sass
index af92776f..7f1afebd 100644
--- a/src/renderer/sass-partials/_settings.sass
+++ b/src/renderer/components/ft-settings-section/ft-settings-section.sass
@@ -1,4 +1,30 @@
-.switchGrid
+.settingsSection
+  background-color: var(--card-bg-color)
+  width: 85%
+  margin: 0 auto
+
+  &[open]
+    padding-bottom: 15px
+
+  @media only screen and (max-width: 680px)
+    width: 90%
+
+.sectionLine
+  width: 100%
+  height: 2px
+  border: 0
+  margin-top: -1px
+  background-color: var(--primary-color)
+
+.sectionHeader
+  display: block
+  cursor: pointer
+  padding: 1px
+
+.sectionTitle
+  margin-left: 2%
+
+:deep(.switchGrid)
   display: grid
   grid-template-columns: auto auto
   justify-content: space-evenly
@@ -7,44 +33,22 @@
   @media only screen and (max-width: 680px)
     grid-template-columns: auto
 
-.switchColumnGrid
-  @extend .switchGrid
+:deep(.switchColumnGrid)
+  @extend :deep(.switchGrid)
   align-items: start
 
-.switchColumn
+:deep(.switchColumn)
   display: flex
   flex-direction: column
   justify-items: start
 
-details
-  background-color: var(--card-bg-color)
-  width: 85%
-  margin: 0 auto
-
-  &[open]
-    padding-bottom: 15px
-
-  hr
-    width: 100%
-    height: 2px
-    border: 0
-    margin-top: -1px
-    background-color: var(--primary-color)
-
-  summary
-    display: block
-    cursor: pointer
-    padding: 1px 1px 1px 1px
-
-    h3
-      margin-left: 2%
-
-  @media only screen and (max-width: 680px)
-    width: 90%
-
-.center
+:deep(.center)
   text-align: center
 
 @media only screen and (max-width: 460px)
-  .generalSettingsFlexBox, .playerSettingsFlexBox, .externalPlayerSettingsFlexBox
+  :deep(.settingsFlexStart460px)
+    justify-content: flex-start
+
+@media only screen and (max-width: 500px)
+  :deep(.settingsFlexStart500px)
     justify-content: flex-start
diff --git a/src/renderer/components/ft-settings-section/ft-settings-section.vue b/src/renderer/components/ft-settings-section/ft-settings-section.vue
new file mode 100644
index 00000000..428ae041
--- /dev/null
+++ b/src/renderer/components/ft-settings-section/ft-settings-section.vue
@@ -0,0 +1,14 @@
+<template>
+  <details class="settingsSection">
+    <summary class="sectionHeader">
+      <h3 class="sectionTitle">
+        {{ title }}
+      </h3>
+    </summary>
+    <hr class="sectionLine">
+    <slot />
+  </details>
+</template>
+
+<script src="./ft-settings-section.js" />
+<style scoped src="./ft-settings-section.sass" lang="sass" />
diff --git a/src/renderer/components/ft-sponsor-block-category/ft-sponsor-block-category.sass b/src/renderer/components/ft-sponsor-block-category/ft-sponsor-block-category.sass
index ead66f12..66a10f1c 100644
--- a/src/renderer/components/ft-sponsor-block-category/ft-sponsor-block-category.sass
+++ b/src/renderer/components/ft-sponsor-block-category/ft-sponsor-block-category.sass
@@ -1,4 +1,3 @@
-@use "../../sass-partials/settings"
 .sponsorBlockCategory
     margin-top: 30px
     padding: 0 10px
diff --git a/src/renderer/components/general-settings/general-settings.js b/src/renderer/components/general-settings/general-settings.js
index 36c930c8..1de312df 100644
--- a/src/renderer/components/general-settings/general-settings.js
+++ b/src/renderer/components/general-settings/general-settings.js
@@ -1,5 +1,6 @@
 import Vue from 'vue'
 import { mapActions, mapMutations } from 'vuex'
+import FtSettingsSection from '../ft-settings-section/ft-settings-section.vue'
 import FtCard from '../ft-card/ft-card.vue'
 import FtSelect from '../ft-select/ft-select.vue'
 import FtInput from '../ft-input/ft-input.vue'
@@ -12,6 +13,7 @@ import debounce from 'lodash.debounce'
 export default Vue.extend({
   name: 'GeneralSettings',
   components: {
+    'ft-settings-section': FtSettingsSection,
     'ft-card': FtCard,
     'ft-select': FtSelect,
     'ft-input': FtInput,
diff --git a/src/renderer/components/general-settings/general-settings.sass b/src/renderer/components/general-settings/general-settings.sass
index 5c853072..1a6a14af 100644
--- a/src/renderer/components/general-settings/general-settings.sass
+++ b/src/renderer/components/general-settings/general-settings.sass
@@ -1,5 +1,3 @@
-@use "../../sass-partials/settings"
-
 .select
   min-width: 240px
   width: auto
diff --git a/src/renderer/components/general-settings/general-settings.vue b/src/renderer/components/general-settings/general-settings.vue
index c24db4f4..a5aff4a1 100644
--- a/src/renderer/components/general-settings/general-settings.vue
+++ b/src/renderer/components/general-settings/general-settings.vue
@@ -1,11 +1,7 @@
 <template>
-  <details>
-    <summary>
-      <h3>
-        {{ $t("Settings.General Settings.General Settings") }}
-      </h3>
-    </summary>
-    <hr>
+  <ft-settings-section
+    :title="$t('Settings.General Settings.General Settings')"
+  >
     <div class="switchColumnGrid">
       <div class="switchColumn">
         <ft-toggle-switch
@@ -96,7 +92,7 @@
     <div
       v-if="backendPreference === 'invidious' || backendFallback"
     >
-      <ft-flex-box class="generalSettingsFlexBox">
+      <ft-flex-box class="settingsFlexStart460px">
         <ft-input
           :placeholder="$t('Settings.General Settings.Current Invidious Instance')"
           :show-action-button="false"
@@ -141,7 +137,7 @@
         />
       </ft-flex-box>
     </div>
-  </details>
+  </ft-settings-section>
 </template>
 
 <script src="./general-settings.js" />
diff --git a/src/renderer/components/parental-control-settings/parental-control-settings.js b/src/renderer/components/parental-control-settings/parental-control-settings.js
index d5e1b087..b501e7c0 100644
--- a/src/renderer/components/parental-control-settings/parental-control-settings.js
+++ b/src/renderer/components/parental-control-settings/parental-control-settings.js
@@ -1,5 +1,6 @@
 import Vue from 'vue'
 import { mapActions } from 'vuex'
+import FtSettingsSection from '../ft-settings-section/ft-settings-section.vue'
 import FtCard from '../ft-card/ft-card.vue'
 import FtToggleSwitch from '../ft-toggle-switch/ft-toggle-switch.vue'
 import FtButton from '../ft-button/ft-button.vue'
@@ -9,6 +10,7 @@ import FtFlexBox from '../ft-flex-box/ft-flex-box.vue'
 export default Vue.extend({
   name: 'ParentalControlSettings',
   components: {
+    'ft-settings-section': FtSettingsSection,
     'ft-card': FtCard,
     'ft-toggle-switch': FtToggleSwitch,
     'ft-button': FtButton,
diff --git a/src/renderer/components/parental-control-settings/parental-control-settings.sass b/src/renderer/components/parental-control-settings/parental-control-settings.sass
deleted file mode 100644
index 05cb0dfb..00000000
--- a/src/renderer/components/parental-control-settings/parental-control-settings.sass
+++ /dev/null
@@ -1 +0,0 @@
-@use "../../sass-partials/settings"
diff --git a/src/renderer/components/parental-control-settings/parental-control-settings.vue b/src/renderer/components/parental-control-settings/parental-control-settings.vue
index 2ae9d037..2d5485c4 100644
--- a/src/renderer/components/parental-control-settings/parental-control-settings.vue
+++ b/src/renderer/components/parental-control-settings/parental-control-settings.vue
@@ -1,11 +1,7 @@
 <template>
-  <details>
-    <summary>
-      <h3>
-        {{ $t("Settings.Parental Control Settings.Parental Control Settings") }}
-      </h3>
-    </summary>
-    <hr>
+  <ft-settings-section
+    :title="$t('Settings.Parental Control Settings.Parental Control Settings')"
+  >
     <div class="switchColumnGrid">
       <div class="switchColumn">
         <ft-toggle-switch
@@ -30,8 +26,7 @@
         />
       </div>
     </div>
-  </details>
+  </ft-settings-section>
 </template>
 
 <script src="./parental-control-settings.js" />
-<style scoped lang="sass" src="./parental-control-settings.sass" />
diff --git a/src/renderer/components/player-settings/player-settings.js b/src/renderer/components/player-settings/player-settings.js
index e662961e..58fd411f 100644
--- a/src/renderer/components/player-settings/player-settings.js
+++ b/src/renderer/components/player-settings/player-settings.js
@@ -1,5 +1,6 @@
 import Vue from 'vue'
 import { mapActions } from 'vuex'
+import FtSettingsSection from '../ft-settings-section/ft-settings-section.vue'
 import FtCard from '../ft-card/ft-card.vue'
 import FtSelect from '../ft-select/ft-select.vue'
 import FtToggleSwitch from '../ft-toggle-switch/ft-toggle-switch.vue'
@@ -15,6 +16,7 @@ import path from 'path'
 export default Vue.extend({
   name: 'PlayerSettings',
   components: {
+    'ft-settings-section': FtSettingsSection,
     'ft-card': FtCard,
     'ft-select': FtSelect,
     'ft-toggle-switch': FtToggleSwitch,
diff --git a/src/renderer/components/player-settings/player-settings.sass b/src/renderer/components/player-settings/player-settings.sass
index 609b568d..7d6b9af5 100644
--- a/src/renderer/components/player-settings/player-settings.sass
+++ b/src/renderer/components/player-settings/player-settings.sass
@@ -1,5 +1,3 @@
-@use "../../sass-partials/settings"
-
 .screenshotFolderContainer
   width: 95%
   margin: 0 auto
diff --git a/src/renderer/components/player-settings/player-settings.vue b/src/renderer/components/player-settings/player-settings.vue
index aba0f416..95fe1d5b 100644
--- a/src/renderer/components/player-settings/player-settings.vue
+++ b/src/renderer/components/player-settings/player-settings.vue
@@ -1,11 +1,7 @@
 <template>
-  <details>
-    <summary>
-      <h3>
-        {{ $t("Settings.Player Settings.Player Settings") }}
-      </h3>
-    </summary>
-    <hr>
+  <ft-settings-section
+    :title="$t('Settings.Player Settings.Player Settings')"
+  >
     <div class="switchColumnGrid">
       <div class="switchColumn">
         <ft-toggle-switch
@@ -231,7 +227,7 @@
         />
       </ft-flex-box>
     </div>
-  </details>
+  </ft-settings-section>
 </template>
 
 <script src="./player-settings.js" />
diff --git a/src/renderer/components/privacy-settings/privacy-settings.js b/src/renderer/components/privacy-settings/privacy-settings.js
index ceb9ca1a..16e07fe9 100644
--- a/src/renderer/components/privacy-settings/privacy-settings.js
+++ b/src/renderer/components/privacy-settings/privacy-settings.js
@@ -1,5 +1,6 @@
 import Vue from 'vue'
 import { mapActions } from 'vuex'
+import FtSettingsSection from '../ft-settings-section/ft-settings-section.vue'
 import FtCard from '../ft-card/ft-card.vue'
 import FtButton from '../ft-button/ft-button.vue'
 import FtToggleSwitch from '../ft-toggle-switch/ft-toggle-switch.vue'
@@ -10,6 +11,7 @@ import { MAIN_PROFILE_ID } from '../../../constants'
 export default Vue.extend({
   name: 'PrivacySettings',
   components: {
+    'ft-settings-section': FtSettingsSection,
     'ft-card': FtCard,
     'ft-button': FtButton,
     'ft-toggle-switch': FtToggleSwitch,
diff --git a/src/renderer/components/privacy-settings/privacy-settings.sass b/src/renderer/components/privacy-settings/privacy-settings.sass
deleted file mode 100644
index 05cb0dfb..00000000
--- a/src/renderer/components/privacy-settings/privacy-settings.sass
+++ /dev/null
@@ -1 +0,0 @@
-@use "../../sass-partials/settings"
diff --git a/src/renderer/components/privacy-settings/privacy-settings.vue b/src/renderer/components/privacy-settings/privacy-settings.vue
index 86052ea6..e1357c34 100644
--- a/src/renderer/components/privacy-settings/privacy-settings.vue
+++ b/src/renderer/components/privacy-settings/privacy-settings.vue
@@ -1,11 +1,7 @@
 <template>
-  <details>
-    <summary>
-      <h3>
-        {{ $t("Settings.Privacy Settings.Privacy Settings") }}
-      </h3>
-    </summary>
-    <hr>
+  <ft-settings-section
+    :title="$t('Settings.Privacy Settings.Privacy Settings')"
+  >
     <div class="switchColumnGrid">
       <div class="switchColumn">
         <ft-toggle-switch
@@ -76,8 +72,7 @@
       :option-values="promptValues"
       @click="handleRemoveSubscriptions"
     />
-  </details>
+  </ft-settings-section>
 </template>
 
 <script src="./privacy-settings.js" />
-<style scoped lang="sass" src="./privacy-settings.sass" />
diff --git a/src/renderer/components/proxy-settings/proxy-settings.js b/src/renderer/components/proxy-settings/proxy-settings.js
index 4efa0f51..bdf942af 100644
--- a/src/renderer/components/proxy-settings/proxy-settings.js
+++ b/src/renderer/components/proxy-settings/proxy-settings.js
@@ -1,5 +1,6 @@
 import Vue from 'vue'
 import { mapActions } from 'vuex'
+import FtSettingsSection from '../ft-settings-section/ft-settings-section.vue'
 import FtCard from '../ft-card/ft-card.vue'
 import FtToggleSwitch from '../ft-toggle-switch/ft-toggle-switch.vue'
 import FtButton from '../ft-button/ft-button.vue'
@@ -18,6 +19,7 @@ import { IpcChannels } from '../../../constants'
 export default Vue.extend({
   name: 'ProxySettings',
   components: {
+    'ft-settings-section': FtSettingsSection,
     'ft-card': FtCard,
     'ft-toggle-switch': FtToggleSwitch,
     'ft-button': FtButton,
diff --git a/src/renderer/components/proxy-settings/proxy-settings.sass b/src/renderer/components/proxy-settings/proxy-settings.sass
deleted file mode 100644
index a1ddf931..00000000
--- a/src/renderer/components/proxy-settings/proxy-settings.sass
+++ /dev/null
@@ -1,5 +0,0 @@
-@use "../../sass-partials/settings"
-
-@media only screen and (max-width: 500px)
-  .subscriptionSettingsFlexBox
-    justify-content: flex-start
diff --git a/src/renderer/components/proxy-settings/proxy-settings.vue b/src/renderer/components/proxy-settings/proxy-settings.vue
index 594aab60..4c1d4ca6 100644
--- a/src/renderer/components/proxy-settings/proxy-settings.vue
+++ b/src/renderer/components/proxy-settings/proxy-settings.vue
@@ -1,12 +1,8 @@
 <template>
-  <details>
-    <summary>
-      <h3>
-        {{ $t("Settings.Proxy Settings.Proxy Settings") }}
-      </h3>
-    </summary>
-    <hr>
-    <ft-flex-box class="subscriptionSettingsFlexBox">
+  <ft-settings-section
+    :title="$t('Settings.Proxy Settings.Proxy Settings')"
+  >
+    <ft-flex-box class="settingsFlexStart500px">
       <ft-toggle-switch
         :label="$t('Settings.Proxy Settings.Enable Tor / Proxy')"
         :default-value="useProxy"
@@ -77,8 +73,7 @@
         </p>
       </div>
     </div>
-  </details>
+  </ft-settings-section>
 </template>
 
 <script src="./proxy-settings.js" />
-<style scoped lang="sass" src="./proxy-settings.sass" />
diff --git a/src/renderer/components/sponsor-block-settings/sponsor-block-settings.js b/src/renderer/components/sponsor-block-settings/sponsor-block-settings.js
index 5c61110c..30feb58f 100644
--- a/src/renderer/components/sponsor-block-settings/sponsor-block-settings.js
+++ b/src/renderer/components/sponsor-block-settings/sponsor-block-settings.js
@@ -1,5 +1,6 @@
 import Vue from 'vue'
 import { mapActions } from 'vuex'
+import FtSettingsSection from '../ft-settings-section/ft-settings-section.vue'
 import FtCard from '../ft-card/ft-card.vue'
 import FtToggleSwitch from '../ft-toggle-switch/ft-toggle-switch.vue'
 import FtInput from '../ft-input/ft-input.vue'
@@ -9,6 +10,7 @@ import FtSponsorBlockCategory from '../ft-sponsor-block-category/ft-sponsor-bloc
 export default Vue.extend({
   name: 'SponsorBlockSettings',
   components: {
+    'ft-settings-section': FtSettingsSection,
     'ft-card': FtCard,
     'ft-toggle-switch': FtToggleSwitch,
     'ft-input': FtInput,
diff --git a/src/renderer/components/sponsor-block-settings/sponsor-block-settings.sass b/src/renderer/components/sponsor-block-settings/sponsor-block-settings.sass
deleted file mode 100644
index 89db0c8c..00000000
--- a/src/renderer/components/sponsor-block-settings/sponsor-block-settings.sass
+++ /dev/null
@@ -1,5 +0,0 @@
-@use "../../sass-partials/settings"
-
-@media only screen and (max-width: 500px)
-  .sponsorBlockSettingsFlexBox
-    justify-content: flex-start
\ No newline at end of file
diff --git a/src/renderer/components/sponsor-block-settings/sponsor-block-settings.vue b/src/renderer/components/sponsor-block-settings/sponsor-block-settings.vue
index eb987531..abda76ee 100644
--- a/src/renderer/components/sponsor-block-settings/sponsor-block-settings.vue
+++ b/src/renderer/components/sponsor-block-settings/sponsor-block-settings.vue
@@ -1,12 +1,8 @@
 <template>
-  <details>
-    <summary>
-      <h3>
-        {{ $t("Settings.SponsorBlock Settings.SponsorBlock Settings") }}
-      </h3>
-    </summary>
-    <hr>
-    <ft-flex-box class="sponsorBlockSettingsFlexBox">
+  <ft-settings-section
+    :title="$t('Settings.SponsorBlock Settings.SponsorBlock Settings')"
+  >
+    <ft-flex-box class="settingsFlexStart500px">
       <ft-toggle-switch
         :label="$t('Settings.SponsorBlock Settings.Enable SponsorBlock')"
         :default-value="useSponsorBlock"
@@ -16,7 +12,7 @@
     <div
       v-if="useSponsorBlock"
     >
-      <ft-flex-box class="sponsorBlockSettingsFlexBox">
+      <ft-flex-box class="settingsFlexStart500px">
         <ft-toggle-switch
           :label="$t('Settings.SponsorBlock Settings.Notify when sponsor segment is skipped')"
           :default-value="sponsorBlockShowSkippedToast"
@@ -40,8 +36,7 @@
         />
       </ft-flex-box>
     </div>
-  </details>
+  </ft-settings-section>
 </template>
 
 <script src="./sponsor-block-settings.js" />
-<style scoped lang="sass" src="./sponsor-block-settings.sass" />
diff --git a/src/renderer/components/subscription-settings/subscription-settings.js b/src/renderer/components/subscription-settings/subscription-settings.js
index fec632ce..2e56430a 100644
--- a/src/renderer/components/subscription-settings/subscription-settings.js
+++ b/src/renderer/components/subscription-settings/subscription-settings.js
@@ -1,11 +1,13 @@
 import Vue from 'vue'
 import { mapActions } from 'vuex'
+import FtSettingsSection from '../ft-settings-section/ft-settings-section.vue'
 import FtToggleSwitch from '../ft-toggle-switch/ft-toggle-switch.vue'
 import FtFlexBox from '../ft-flex-box/ft-flex-box.vue'
 
 export default Vue.extend({
   name: 'SubscriptionSettings',
   components: {
+    'ft-settings-section': FtSettingsSection,
     'ft-toggle-switch': FtToggleSwitch,
     'ft-flex-box': FtFlexBox
   },
diff --git a/src/renderer/components/subscription-settings/subscription-settings.sass b/src/renderer/components/subscription-settings/subscription-settings.sass
deleted file mode 100644
index 21c65d94..00000000
--- a/src/renderer/components/subscription-settings/subscription-settings.sass
+++ /dev/null
@@ -1,6 +0,0 @@
-@use "../../sass-partials/settings"
-
-@media only screen and (max-width: 500px)
-  .subscriptionSettingsFlexBox
-    justify-content: flex-start
-    
diff --git a/src/renderer/components/subscription-settings/subscription-settings.vue b/src/renderer/components/subscription-settings/subscription-settings.vue
index 47296227..5a0289e0 100644
--- a/src/renderer/components/subscription-settings/subscription-settings.vue
+++ b/src/renderer/components/subscription-settings/subscription-settings.vue
@@ -1,12 +1,8 @@
 <template>
-  <details>
-    <summary>
-      <h3>
-        {{ $t("Settings.Subscription Settings.Subscription Settings") }}
-      </h3>
-    </summary>
-    <hr>
-    <ft-flex-box class="subscriptionSettingsFlexBox">
+  <ft-settings-section
+    :title="$t('Settings.Subscription Settings.Subscription Settings')"
+  >
+    <ft-flex-box class="settingsFlexStart500px">
       <ft-toggle-switch
         :label="$t('Settings.Subscription Settings.Hide Videos on Watch')"
         :default-value="hideWatchedSubs"
@@ -19,8 +15,7 @@
         @change="updateUseRssFeeds"
       />
     </ft-flex-box>
-  </details>
+  </ft-settings-section>
 </template>
 
 <script src="./subscription-settings.js" />
-<style scoped lang="sass" src="./subscription-settings.sass" />
diff --git a/src/renderer/components/theme-settings/theme-settings.js b/src/renderer/components/theme-settings/theme-settings.js
index d91a6e01..a3a4c910 100644
--- a/src/renderer/components/theme-settings/theme-settings.js
+++ b/src/renderer/components/theme-settings/theme-settings.js
@@ -1,5 +1,6 @@
 import Vue from 'vue'
 import { mapActions } from 'vuex'
+import FtSettingsSection from '../ft-settings-section/ft-settings-section.vue'
 import FtCard from '../ft-card/ft-card.vue'
 import FtSelect from '../ft-select/ft-select.vue'
 import FtToggleSwitch from '../ft-toggle-switch/ft-toggle-switch.vue'
@@ -10,6 +11,7 @@ import FtPrompt from '../ft-prompt/ft-prompt.vue'
 export default Vue.extend({
   name: 'ThemeSettings',
   components: {
+    'ft-settings-section': FtSettingsSection,
     'ft-card': FtCard,
     'ft-select': FtSelect,
     'ft-toggle-switch': FtToggleSwitch,
diff --git a/src/renderer/components/theme-settings/theme-settings.sass b/src/renderer/components/theme-settings/theme-settings.sass
deleted file mode 100644
index 05cb0dfb..00000000
--- a/src/renderer/components/theme-settings/theme-settings.sass
+++ /dev/null
@@ -1 +0,0 @@
-@use "../../sass-partials/settings"
diff --git a/src/renderer/components/theme-settings/theme-settings.vue b/src/renderer/components/theme-settings/theme-settings.vue
index f8d1522f..5abf8706 100644
--- a/src/renderer/components/theme-settings/theme-settings.vue
+++ b/src/renderer/components/theme-settings/theme-settings.vue
@@ -1,11 +1,7 @@
 <template>
-  <details>
-    <summary>
-      <h3>
-        {{ $t("Settings.Theme Settings.Theme Settings") }}
-      </h3>
-    </summary>
-    <hr>
+  <ft-settings-section
+    :title="$t('Settings.Theme Settings.Theme Settings')"
+  >
     <ft-flex-box>
       <ft-toggle-switch
         :label="$t('Settings.Theme Settings.Match Top Bar with Main Color')"
@@ -70,8 +66,7 @@
       :option-values="restartPromptValues"
       @click="handleSmoothScrolling"
     />
-  </details>
+  </ft-settings-section>
 </template>
 
 <script src="./theme-settings.js" />
-<style scoped lang="sass" src="./theme-settings.sass" />