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

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,

src/renderer/components/data-settings/data-settings.sass

@@ -1 +0,0 @@
-@use "../../sass-partials/settings"

src/renderer/components/data-settings/data-settings.vue

@@ -1,11 +1,7 @@
 <template>
-  <details>
+  <ft-settings-section
-    <summary>
+    :title="$t('Settings.Data Settings.Data Settings')"
-      <h3>
+  >
-        {{ $t("Settings.Data Settings.Data Settings") }}
-      </h3>
-    </summary>
-    <hr>
     <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" />

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,

src/renderer/components/distraction-settings/distraction-settings.sass

@@ -1 +0,0 @@
-@use "../../sass-partials/settings"

src/renderer/components/distraction-settings/distraction-settings.vue

@@ -1,11 +1,7 @@
 <template>
-  <details>
+  <ft-settings-section
-    <summary>
+    :title="$t('Settings.Distraction Free Settings.Distraction Free Settings')"
-      <h3>
+  >
-        {{ $t("Settings.Distraction Free Settings.Distraction Free Settings") }}
-      </h3>
-    </summary>
-    <hr>
     <div class="switchColumnGrid">
       <div class="switchColumn">
         <ft-toggle-switch
@@ -96,25 +92,7 @@
         />
       </div>
     </div>
-    <br>
+  </ft-settings-section>
-    <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>
 </template>
 
 <script src="./distraction-settings.js" />
-<style scoped lang="sass" src="./distraction-settings.sass" />

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,

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

src/renderer/components/download-settings/download-settings.vue

@@ -1,11 +1,7 @@
 <template>
-  <details>
+  <ft-settings-section
-    <summary>
+    :title="$t('Settings.Download Settings.Download Settings')"
-      <h3>
+  >
-        {{ $t("Settings.Download Settings.Download Settings") }}
-      </h3>
-    </summary>
-    <hr>
     <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" />

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,

src/renderer/components/external-player-settings/external-player-settings.sass

@@ -1 +0,0 @@
-@use "../../sass-partials/settings"

src/renderer/components/external-player-settings/external-player-settings.vue

@@ -1,11 +1,7 @@
 <template>
-  <details>
+  <ft-settings-section
-    <summary>
+    :title="$t('Settings.External Player Settings.External Player Settings')"
-      <h3>
+  >
-        {{ $t("Settings.External Player Settings.External Player Settings") }}
-      </h3>
-    </summary>
-    <hr>
     <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" />

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
+    }
+  }
+})

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
+:deep(.switchColumnGrid)
-  @extend .switchGrid
+  @extend :deep(.switchGrid)
   align-items: start
 
-.switchColumn
+:deep(.switchColumn)
   display: flex
   flex-direction: column
   justify-items: start
 
-details
+:deep(.center)
-  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
   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

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" />

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

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,

src/renderer/components/general-settings/general-settings.sass

@@ -1,5 +1,3 @@
-@use "../../sass-partials/settings"
-
 .select
   min-width: 240px
   width: auto

src/renderer/components/general-settings/general-settings.vue

@@ -1,11 +1,7 @@
 <template>
-  <details>
+  <ft-settings-section
-    <summary>
+    :title="$t('Settings.General Settings.General Settings')"
-      <h3>
+  >
-        {{ $t("Settings.General Settings.General Settings") }}
-      </h3>
-    </summary>
-    <hr>
     <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" />

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,

src/renderer/components/parental-control-settings/parental-control-settings.sass

@@ -1 +0,0 @@
-@use "../../sass-partials/settings"

src/renderer/components/parental-control-settings/parental-control-settings.vue

@@ -1,11 +1,7 @@
 <template>
-  <details>
+  <ft-settings-section
-    <summary>
+    :title="$t('Settings.Parental Control Settings.Parental Control Settings')"
-      <h3>
+  >
-        {{ $t("Settings.Parental Control Settings.Parental Control Settings") }}
-      </h3>
-    </summary>
-    <hr>
     <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" />

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,

src/renderer/components/player-settings/player-settings.sass

@@ -1,5 +1,3 @@
-@use "../../sass-partials/settings"
-
 .screenshotFolderContainer
   width: 95%
   margin: 0 auto

src/renderer/components/player-settings/player-settings.vue

@@ -1,11 +1,7 @@
 <template>
-  <details>
+  <ft-settings-section
-    <summary>
+    :title="$t('Settings.Player Settings.Player Settings')"
-      <h3>
+  >
-        {{ $t("Settings.Player Settings.Player Settings") }}
-      </h3>
-    </summary>
-    <hr>
     <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" />

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,

src/renderer/components/privacy-settings/privacy-settings.sass

@@ -1 +0,0 @@
-@use "../../sass-partials/settings"

src/renderer/components/privacy-settings/privacy-settings.vue

@@ -1,11 +1,7 @@
 <template>
-  <details>
+  <ft-settings-section
-    <summary>
+    :title="$t('Settings.Privacy Settings.Privacy Settings')"
-      <h3>
+  >
-        {{ $t("Settings.Privacy Settings.Privacy Settings") }}
-      </h3>
-    </summary>
-    <hr>
     <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" />

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,

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

src/renderer/components/proxy-settings/proxy-settings.vue

@@ -1,12 +1,8 @@
 <template>
-  <details>
+  <ft-settings-section
-    <summary>
+    :title="$t('Settings.Proxy Settings.Proxy Settings')"
-      <h3>
+  >
-        {{ $t("Settings.Proxy Settings.Proxy Settings") }}
+    <ft-flex-box class="settingsFlexStart500px">
-      </h3>
-    </summary>
-    <hr>
-    <ft-flex-box class="subscriptionSettingsFlexBox">
       <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" />

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,

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

src/renderer/components/sponsor-block-settings/sponsor-block-settings.vue

@@ -1,12 +1,8 @@
 <template>
-  <details>
+  <ft-settings-section
-    <summary>
+    :title="$t('Settings.SponsorBlock Settings.SponsorBlock Settings')"
-      <h3>
+  >
-        {{ $t("Settings.SponsorBlock Settings.SponsorBlock Settings") }}
+    <ft-flex-box class="settingsFlexStart500px">
-      </h3>
-    </summary>
-    <hr>
-    <ft-flex-box class="sponsorBlockSettingsFlexBox">
       <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" />

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
   },

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
-    

src/renderer/components/subscription-settings/subscription-settings.vue

@@ -1,12 +1,8 @@
 <template>
-  <details>
+  <ft-settings-section
-    <summary>
+    :title="$t('Settings.Subscription Settings.Subscription Settings')"
-      <h3>
+  >
-        {{ $t("Settings.Subscription Settings.Subscription Settings") }}
+    <ft-flex-box class="settingsFlexStart500px">
-      </h3>
-    </summary>
-    <hr>
-    <ft-flex-box class="subscriptionSettingsFlexBox">
       <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" />

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,

src/renderer/components/theme-settings/theme-settings.sass

@@ -1 +0,0 @@
-@use "../../sass-partials/settings"

src/renderer/components/theme-settings/theme-settings.vue

@@ -1,11 +1,7 @@
 <template>
-  <details>
+  <ft-settings-section
-    <summary>
+    :title="$t('Settings.Theme Settings.Theme Settings')"
-      <h3>
+  >
-        {{ $t("Settings.Theme Settings.Theme Settings") }}
-      </h3>
-    </summary>
-    <hr>
     <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" />