improved wizard settings UX

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">

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 {

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"