From 5cf92df3ba3598f9d0d5e648bfb5094b40fcfe81 Mon Sep 17 00:00:00 2001
From: hensm <m+github@matt.tf>
Date: Sat, 27 Jun 2020 19:37:01 +0100
Subject: [PATCH] Add recommended option badge

---
 ext/src/_locales/en/messages.json   | 5 +++++
 ext/src/ui/options/index.tsx        | 3 +++
 ext/src/ui/options/styles/index.css | 9 +++++++++
 3 files changed, 17 insertions(+)

diff --git a/ext/src/_locales/en/messages.json b/ext/src/_locales/en/messages.json
index 732330d..e782616 100755
--- a/ext/src/_locales/en/messages.json
+++ b/ext/src/_locales/en/messages.json
@@ -374,6 +374,11 @@
       , "description": "Mirroring app ID option description."
     }
 
+  , "optionsOptionRecommended": {
+        "message": "recommended"
+      , "description": "Badge next to option label indicating boolean option is recommended enabled."
+    }
+
   , "optionsReset": {
         "message": "Restore Defaults"
       , "description": "Restore default options button label."
diff --git a/ext/src/ui/options/index.tsx b/ext/src/ui/options/index.tsx
index d6914d4..e8cabfe 100644
--- a/ext/src/ui/options/index.tsx
+++ b/ext/src/ui/options/index.tsx
@@ -380,6 +380,9 @@ class OptionsApp extends Component<{}, OptionsAppState> {
                             </div>
                             <div className="option__label">
                                 { _("optionsUserAgentWhitelistEnabled") }
+                                <span className="option__recommended">
+                                    { _("optionsOptionRecommended") }
+                                </span>
                             </div>
                         </label>
 
diff --git a/ext/src/ui/options/styles/index.css b/ext/src/ui/options/styles/index.css
index dcd3b78..f449cea 100644
--- a/ext/src/ui/options/styles/index.css
+++ b/ext/src/ui/options/styles/index.css
@@ -294,6 +294,15 @@
     display: inline-block;
 }
 
+.option__recommended {
+    background-color: var(--blue-60);
+    border-radius: 2px;
+    color: white;
+    font-size: smaller;
+    margin-inline-start: 5px;
+    padding: 0 5px;
+}
+
 .option__description {
     color: var(--secondary-color);
     font-size: smaller;