From d317f5e2c61b982f454e6dea75a6a705b89d9620 Mon Sep 17 00:00:00 2001
From: Bauke <me@bauke.xyz>
Date: Mon, 11 Sep 2023 12:43:46 +0200
Subject: [PATCH] Factor out the select element styling and apply it.

---
 source/options/components/anonymize-usernames.tsx | 13 +++++++++++--
 source/options/components/hide-topics.tsx         |  6 ++++--
 source/scss/_settings.scss                        | 15 +++++++++++++++
 source/scss/settings/_hide-topics.scss            |  7 +------
 4 files changed, 31 insertions(+), 10 deletions(-)

diff --git a/source/options/components/anonymize-usernames.tsx b/source/options/components/anonymize-usernames.tsx
index bfd9f89..b2b49c2 100644
--- a/source/options/components/anonymize-usernames.tsx
+++ b/source/options/components/anonymize-usernames.tsx
@@ -55,7 +55,8 @@ export class AnonymizeUsernamesSetting extends Component<SettingProps, State> {
     return (
       <Setting {...this.props}>
         <p class="info">
-          Anonymizes usernames by replacing them with "Anonymous #".
+          Anonymizes usernames by replacing them with an incrementing "Anonymous
+          #" or a SHA-256 hash of the username.
           <br />
           Note that User Labels and Username Colors will still be applied to any
           usernames as normal.
@@ -63,7 +64,15 @@ export class AnonymizeUsernamesSetting extends Component<SettingProps, State> {
 
         <ul class="checkbox-list">
           <li>
-            <select onChange={this.replacementTypeChanged}>
+            <label for="anonymize-usernames-replacement-type">
+              Replacement type:
+            </label>{" "}
+            <select
+              class="styled-select"
+              name="anonymize-usernames-replacement-type"
+              id="anonymize-usernames-replacement-type"
+              onChange={this.replacementTypeChanged}
+            >
               {replacementTypeOptions}
             </select>
           </li>
diff --git a/source/options/components/hide-topics.tsx b/source/options/components/hide-topics.tsx
index dc3fb50..76c5667 100644
--- a/source/options/components/hide-topics.tsx
+++ b/source/options/components/hide-topics.tsx
@@ -145,8 +145,10 @@ export class HideTopicsSetting extends Component<SettingProps, State> {
         : "";
 
       return (
-        <div class={`hide-topics-editor ${hasUnsavedChanges}`}>
-          <select onChange={matcherHandler}>{matcherOptions}</select>
+        <div class={`has-save-status hide-topics-editor ${hasUnsavedChanges}`}>
+          <select class="styled-select" onChange={matcherHandler}>
+            {matcherOptions}
+          </select>
           <input
             type="text"
             placeholder="Value to match"
diff --git a/source/scss/_settings.scss b/source/scss/_settings.scss
index c7cd1e7..d38e67b 100644
--- a/source/scss/_settings.scss
+++ b/source/scss/_settings.scss
@@ -130,4 +130,19 @@
       min-width: 10rem;
     }
   }
+
+  .has-save-status {
+    --save-status-color: var(--blue);
+
+    &.unsaved-changes {
+      --save-status-color: var(--unsaved-changes-color);
+    }
+  }
+
+  .styled-select {
+    background-color: var(--background-primary);
+    border: 1px solid var(--save-status-color, var(--blue));
+    color: var(--foreground);
+    padding: 8px;
+  }
 }
diff --git a/source/scss/settings/_hide-topics.scss b/source/scss/settings/_hide-topics.scss
index f1b9cc0..514b3e1 100644
--- a/source/scss/settings/_hide-topics.scss
+++ b/source/scss/settings/_hide-topics.scss
@@ -51,8 +51,7 @@
       min-width: 10rem;
     }
 
-    input,
-    select {
+    input {
       background-color: var(--background-primary);
       border: 1px solid var(--save-status-color);
       color: var(--foreground);
@@ -62,9 +61,5 @@
     select {
       padding-right: 16px;
     }
-
-    &.unsaved-changes {
-      --save-status-color: var(--unsaved-changes-color);
-    }
   }
 }