From aeadef9aa54e7116b865ddc55ddd9e11f19caa5e Mon Sep 17 00:00:00 2001
From: Faizaan Gagan <fzngagan@gmail.com>
Date: Mon, 15 Feb 2021 17:21:59 +0530
Subject: [PATCH] improved wizard settings UX

---
 .../templates/components/wizard-realtime-validations.hbs    | 6 +++---
 assets/stylesheets/common/wizard-admin.scss                 | 6 ++++++
 config/locales/client.en.yml                                | 2 +-
 3 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/assets/javascripts/discourse/templates/components/wizard-realtime-validations.hbs b/assets/javascripts/discourse/templates/components/wizard-realtime-validations.hbs
index 57cf6162..8a381c9f 100644
--- a/assets/javascripts/discourse/templates/components/wizard-realtime-validations.hbs
+++ b/assets/javascripts/discourse/templates/components/wizard-realtime-validations.hbs
@@ -4,9 +4,9 @@
   {{#each-in field.validations as |name props|}}
     <li>
       <span class="setting-title">
-        {{input type="checkbox" checked=props.status }}
-        {{i18n 'admin.wizard.field.validations.enable'
-          validation_type=(i18n (concat 'admin.wizard.field.validations.' name))}}
+        <h4>{{i18n (concat 'admin.wizard.field.validations.' name)}}</h4>
+        {{input type="checkbox" checked=props.status}}
+        {{i18n 'admin.wizard.field.validations.enabled'}}
       </span>
       <div class="validation-container">
         <div class="validation-section">
diff --git a/assets/stylesheets/common/wizard-admin.scss b/assets/stylesheets/common/wizard-admin.scss
index 6fead6da..195594e9 100644
--- a/assets/stylesheets/common/wizard-admin.scss
+++ b/assets/stylesheets/common/wizard-admin.scss
@@ -647,6 +647,12 @@
 .realtime-validations ul {
   list-style: none;
   margin: 0;
+
+  li {
+    background-color: var(--tertiary-low);
+    padding: 0 1em;
+    margin: 0 0 1em 0;
+  }
 }
 
 .validation-container {
diff --git a/config/locales/client.en.yml b/config/locales/client.en.yml
index df0c8801..381ca874 100644
--- a/config/locales/client.en.yml
+++ b/config/locales/client.en.yml
@@ -178,7 +178,7 @@ en:
             instructions: "<a href='https://momentjs.com/docs/#/displaying/format/' target='_blank'>Moment.js format</a>"
           validations:
             header: "Realtime Validations"
-            enable: "Enable %{validation_type}"
+            enabled: "Enable this validation"
             similar_topics: "Similar Topics"
             position: "Position"
             above: "Above"