Add a settings section component to reduce duplicate code (#2609)

2022-09-24 11:12:11 +02:00 · 2022-09-24 11:12:11 +02:00 · 63946f7561
parent 1512178489
commit 63946f7561
40 changed files with 140 additions and 194 deletions
--- 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,
--- a/src/renderer/components/data-settings/data-settings.sass
+++ b/src/renderer/components/data-settings/data-settings.sass
@ -1 +0,0 @@
-@use "../../sass-partials/settings"
--- 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" />
--- 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,
--- a/src/renderer/components/distraction-settings/distraction-settings.sass
+++ b/src/renderer/components/distraction-settings/distraction-settings.sass
@ -1 +0,0 @@
-@use "../../sass-partials/settings"
--- 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" />
--- 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,
--- 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
--- 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" />
--- 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,
--- a/src/renderer/components/external-player-settings/external-player-settings.sass
+++ b/src/renderer/components/external-player-settings/external-player-settings.sass
@ -1 +0,0 @@
-@use "../../sass-partials/settings"
--- 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" />
--- a/src/renderer/components/ft-settings-section/ft-settings-section.js
+++ 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
+    }
+  }
+})
--- a/src/renderer/components/ft-settings-section/ft-settings-section.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
--- a/src/renderer/components/ft-settings-section/ft-settings-section.vue
+++ 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" />
--- 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
--- 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,
--- 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
--- 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" />
--- 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,
--- a/src/renderer/components/parental-control-settings/parental-control-settings.sass
+++ b/src/renderer/components/parental-control-settings/parental-control-settings.sass
@ -1 +0,0 @@
-@use "../../sass-partials/settings"
--- 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" />
--- 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,
--- 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
--- 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" />
--- 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,
--- a/src/renderer/components/privacy-settings/privacy-settings.sass
+++ b/src/renderer/components/privacy-settings/privacy-settings.sass
@ -1 +0,0 @@
-@use "../../sass-partials/settings"
--- 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" />
--- 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,
--- a/src/renderer/components/proxy-settings/proxy-settings.sass
+++ b/src/renderer/components/proxy-settings/proxy-settings.sass
@ -1,5 +0,0 @@
-@use "../../sass-partials/settings"
-
-@media only screen and (max-width: 500px)
-  .subscriptionSettingsFlexBox
-    justify-content: flex-start
--- 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" />
--- 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,
--- a/src/renderer/components/sponsor-block-settings/sponsor-block-settings.sass
+++ b/src/renderer/components/sponsor-block-settings/sponsor-block-settings.sass
@ -1,5 +0,0 @@
-@use "../../sass-partials/settings"
-
-@media only screen and (max-width: 500px)
-  .sponsorBlockSettingsFlexBox
-    justify-content: flex-start
--- 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" />
--- 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
  },
--- a/src/renderer/components/subscription-settings/subscription-settings.sass
+++ b/src/renderer/components/subscription-settings/subscription-settings.sass
@ -1,6 +0,0 @@
-@use "../../sass-partials/settings"
-
-@media only screen and (max-width: 500px)
-  .subscriptionSettingsFlexBox
-    justify-content: flex-start
-    
--- 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" />
--- 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,
--- a/src/renderer/components/theme-settings/theme-settings.sass
+++ b/src/renderer/components/theme-settings/theme-settings.sass
@ -1 +0,0 @@
-@use "../../sass-partials/settings"
--- 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" />