UX: Add DPageHeader to watched words and color palettes (#30686)

Part of our admin UI consistency efforts, this is a stop-gap
until we can do a further UI review of these pages.

app/assets/javascripts/admin/addon/templates/customize-colors-index.hbs

@@ -1 +1,3 @@
-<p class="about">{{i18n "admin.customize.colors.about"}}</p>
+<div class="alert alert-info about-customize-colors">{{i18n
+    "admin.customize.colors.about"
+  }}</div>

app/assets/javascripts/admin/addon/templates/customize-colors.hbs

@@ -1,6 +1,19 @@
-<div class="content-list color-schemes">
+<DPageHeader
-  <h3>{{i18n "admin.customize.colors.long_title"}}</h3>
+  @titleLabel={{i18n "admin.customize.colors.long_title"}}
+  @descriptionLabel={{i18n "admin.customize.colors.description"}}
+  @learnMoreUrl="https://meta.discourse.org/t/allow-users-to-select-new-color-palettes/60857"
+  @hideTabs={{true}}
+>
+  <:breadcrumbs>
+    <DBreadcrumbsItem @path="/admin" @label={{i18n "admin_title"}} />
+    <DBreadcrumbsItem
+      @path="/admin/customize/colors"
+      @label={{i18n "admin.customize.colors.long_title"}}
+    />
+  </:breadcrumbs>
+</DPageHeader>
 
+<div class="content-list color-schemes">
   <ul>
     {{#each this.model as |scheme|}}
       {{#unless scheme.is_base}}

app/assets/javascripts/admin/addon/templates/watched-words.hbs

@@ -1,3 +1,18 @@
+<DPageHeader
+  @titleLabel={{i18n "admin.watched_words.title"}}
+  @descriptionLabel={{i18n "admin.watched_words.description"}}
+  @learnMoreUrl="https://meta.discourse.org/t/241735"
+  @hideTabs={{true}}
+>
+  <:breadcrumbs>
+    <DBreadcrumbsItem @path="/admin" @label={{i18n "admin_title"}} />
+    <DBreadcrumbsItem
+      @path="/admin/customize/watched_words"
+      @label={{i18n "admin.watched_words.title"}}
+    />
+  </:breadcrumbs>
+</DPageHeader>
+
 <div class="admin-contents">
   <div class="admin-controls">
     <div class="controls">

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

@@ -1072,3 +1072,9 @@
     }
   }
 }
+
+.about-customize-colors {
+  text-align: center;
+  width: 65%;
+  margin-left: 30%;
+}

config/locales/client.en.yml

@@ -6245,10 +6245,11 @@ en:
             title: "Select base color palette"
             description: "Base palette:"
           title: "Colors"
-          edit: "Edit Color Palettes"
+          edit: "Edit color palettes"
-          long_title: "Color Palettes"
+          long_title: "Color palettes"
+          description: "Color palettes define the core colors used across your site’s interface, while themes can provide additional styling, layouts and components - both can work together to create your site’s unique look and feel, and both can be made available for users to select their preference."
           about: "Modify the colors used by your themes. Create a new color palette to start."
-          new_name: "New Color Palette"
+          new_name: "New color palette"
           copy_name_prefix: "Copy of"
           delete_confirm: "Delete this color palette?"
           undo: "Undo"
@@ -6600,7 +6601,8 @@ en:
           title: "Error Logs"
 
       watched_words:
-        title: "Watched Words"
+        title: "Watched words"
+        description: "Watched words are moderation tools that can perform multiple different actions including blocking, censoring, linking, or flagging posts containing certain words"
         search: "search"
         clear_filter: "Clear"
         show_words: