From 840d01e1a1de1dabd8b5d94e7e7311c83ffbae7f Mon Sep 17 00:00:00 2001
From: Jakob Scheid <jakob.scheid@icloud.com>
Date: Wed, 22 Jul 2026 13:53:08 +0200
Subject: [PATCH] refactor(settings): move settings button style into a CSS
 module

---
 .../settings/components/Selection.vue         | 23 ++-----------------
 .../settings/components/SettingsButton.css    | 19 +++++++++++++++
 2 files changed, 21 insertions(+), 21 deletions(-)
 create mode 100644 src/features/settings/components/SettingsButton.css

diff --git a/src/features/settings/components/Selection.vue b/src/features/settings/components/Selection.vue
index 262ea0d..2c1cde1 100644
--- a/src/features/settings/components/Selection.vue
+++ b/src/features/settings/components/Selection.vue
@@ -66,7 +66,7 @@ watch(selected, (newValue, oldValue) => {
         {{ t(props.setting.i18n) }}
         <ul class="options-list">
             <li v-for="option in props.setting.options" :key="option.name">
-                <label class="option">
+                <label class="settings-button">
                     <input
                         :type="optionType"
                         :name="props.path"
@@ -84,6 +84,7 @@ watch(selected, (newValue, oldValue) => {
     </div>
 </template>
 
+<style scoped src="./SettingsButton.css"></style>
 <style scoped>
 .options-list {
     list-style: none;
@@ -92,26 +93,6 @@ watch(selected, (newValue, oldValue) => {
     margin-top: 0.5em;
 }
 
-.option {
-    --padding-x: 0.7em;
-    padding: 0.3em var(--padding-x);
-    margin-top: 0.2em;
-    width: calc(100% - 2 * var(--padding-x));
-    border-radius: 0.8em;
-    display: inline-flex;
-    align-items: center;
-    gap: 0.5em;
-    cursor: pointer;
-    background-color: var(--light-bg);
-
-    user-select: none;
-    -moz-user-select: none;
-}
-
-.option:hover {
-    background-color: var(--light-hover);
-}
-
 .option-input {
     appearance: none;
     display: none;
diff --git a/src/features/settings/components/SettingsButton.css b/src/features/settings/components/SettingsButton.css
new file mode 100644
index 0000000..1bc593f
--- /dev/null
+++ b/src/features/settings/components/SettingsButton.css
@@ -0,0 +1,19 @@
+.settings-button {
+    --padding-x: 0.7em;
+    padding: 0.3em var(--padding-x);
+    margin-top: 0.2em;
+    width: calc(100% - 2 * var(--padding-x));
+    border-radius: 0.8em;
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5em;
+    cursor: pointer;
+    background-color: var(--light-bg);
+
+    user-select: none;
+    -moz-user-select: none;
+}
+
+.settings-button:hover {
+    background-color: var(--light-hover);
+}
\ No newline at end of file