From d69283f8a819228c1bf5252904886eaf69721d2f Mon Sep 17 00:00:00 2001
From: Bauke <me@bauke.xyz>
Date: Wed, 13 Sep 2023 14:33:00 +0200
Subject: [PATCH] Factor out checkbox styling and use it.

---
 source/options/components/hide-votes.tsx        |  2 +-
 source/options/components/miscellaneous.tsx     |  2 +-
 source/options/components/username-colors.tsx   |  2 +-
 source/scss/_settings.scss                      | 13 +++++++++++++
 .../scss/settings/_miscellaneous-features.scss  | 17 +++++------------
 5 files changed, 21 insertions(+), 15 deletions(-)

diff --git a/source/options/components/hide-votes.tsx b/source/options/components/hide-votes.tsx
index 103a56d..8cf5aad 100644
--- a/source/options/components/hide-votes.tsx
+++ b/source/options/components/hide-votes.tsx
@@ -48,7 +48,7 @@ export class HideVotesSetting extends Component<SettingProps, State> {
 
     const checkboxes = checkboxesData.map(({label, target}) => (
       <li>
-        <label>
+        <label class="styled-checkbox">
           <input
             type="checkbox"
             checked={hideVotes.value[target]}
diff --git a/source/options/components/miscellaneous.tsx b/source/options/components/miscellaneous.tsx
index 37aa7e6..c28b634 100644
--- a/source/options/components/miscellaneous.tsx
+++ b/source/options/components/miscellaneous.tsx
@@ -100,7 +100,7 @@ export class MiscellaneousSetting extends Component<SettingProps, State> {
 
       return (
         <li class={enabled ? "enabled" : ""}>
-          <label for={feature}>
+          <label class="styled-checkbox" for={feature}>
             <input
               type="checkbox"
               id={feature}
diff --git a/source/options/components/username-colors.tsx b/source/options/components/username-colors.tsx
index bb92e39..6d53f41 100644
--- a/source/options/components/username-colors.tsx
+++ b/source/options/components/username-colors.tsx
@@ -205,7 +205,7 @@ export class UsernameColorsSetting extends Component<SettingProps, State> {
 
           <ul class="checkbox-list">
             <li>
-              <label>
+              <label class="styled-checkbox">
                 <input
                   type="checkbox"
                   checked={randomizeChecked.value}
diff --git a/source/scss/_settings.scss b/source/scss/_settings.scss
index d38e67b..d392e05 100644
--- a/source/scss/_settings.scss
+++ b/source/scss/_settings.scss
@@ -139,6 +139,19 @@
     }
   }
 
+  .styled-checkbox {
+    align-items: center;
+    background-color: var(--background-primary);
+    border: 1px solid var(--blue);
+    cursor: pointer;
+    display: flex;
+    padding: 8px;
+
+    input[type="checkbox"] {
+      margin-right: 1rem;
+    }
+  }
+
   .styled-select {
     background-color: var(--background-primary);
     border: 1px solid var(--save-status-color, var(--blue));
diff --git a/source/scss/settings/_miscellaneous-features.scss b/source/scss/settings/_miscellaneous-features.scss
index 5478b0f..39ad11d 100644
--- a/source/scss/settings/_miscellaneous-features.scss
+++ b/source/scss/settings/_miscellaneous-features.scss
@@ -13,21 +13,14 @@
     &.enabled {
       --border-color: var(--green);
     }
+
+    .styled-checkbox {
+      border: none;
+      border-bottom: 1px solid var(--border-color);
+    }
   }
 
   .description {
     margin: 8px;
   }
-
-  label {
-    align-items: center;
-    border-bottom: 1px solid var(--border-color);
-    cursor: pointer;
-    display: flex;
-    padding: 8px;
-  }
-
-  input[type="checkbox"] {
-    margin-right: 1rem;
-  }
 }