UX: theme setting highlight update (#18607)

app/assets/javascripts/admin/addon/templates/customize-themes-show.hbs

@@ -282,6 +282,7 @@
     {{#if this.hasSettings}}
       <div class="control-unit">
         <div class="mini-title">{{i18n "admin.customize.theme.theme_settings"}}</div>
+        <p><i>{{i18n "admin.customize.theme.overriden_settings_explanation"}}</i></p>
         <DSection @class="form-horizontal theme settings control-unit">
           {{#each this.settings as |setting|}}
             <ThemeSettingEditor @setting={{setting}} @model={{this.model}} @class="theme-setting control-unit" />

app/assets/stylesheets/common/admin/settings.scss

@@ -109,8 +109,21 @@
     }
   }
   .setting.overridden {
+    input {
+      background-color: var(--highlight-medium);
+    }
     h3 {
-      color: var(--highlight-high);
+      position: relative;
+      &:before {
+        content: "";
+        position: absolute;
+        top: 0.5rem;
+        left: -1rem;
+        width: 0.5rem;
+        height: 0.5rem;
+        border-radius: 100%;
+        background-color: var(--highlight-high);
+      }
     }
   }
   .setting.overridden.string {

config/locales/client.en.yml

@@ -4844,6 +4844,7 @@ en:
           has_overwritten_history: "Current theme version no longer exists because the Git history has been overwritten by a force push."
           add: "Add"
           theme_settings: "Theme Settings"
+          overriden_settings_explanation: "Overridden settings are marked with a dot and have a highlighted color. To reset these settings to the default value, press the reset button next to them."
           no_settings: "This theme has no settings."
           theme_translations: "Theme Translations"
           empty: "No items"