Introduce a cohesive UI section #3325

sciety · Jun 14, 2024 · 8199f40 · 8199f40
1 parent 5c50aea
commit 8199f40
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 8 deletions.
diff --git a/src/read-side/html-pages/group-page/group-management-page/render-as-html/render-as-html.ts b/src/read-side/html-pages/group-page/group-management-page/render-as-html/render-as-html.ts
@@ -17,11 +17,15 @@ export const renderAsHtml = (viewModel: ViewModel): HtmlPage => toHtmlPage({
   <p>
     <a href="${viewModel.groupHomePageHref}">View public group page</a>
   </p>
-  <section class="group-management-section">
-    ${renderCurrentlyFeaturedLists(viewModel.currentlyFeaturedLists)}
-  </section>
-  <section class="group-management-section">
-    ${renderListsThatCanBeFeatured(viewModel.listsThatCanBeFeatured)}
+  <section>
+    <h2>Featured lists</h2>
+    <p>Featuring a list on your group home page lets you highlight your review and curation activity to readers.</p>
+    <section class="group-management-section">
+      ${renderCurrentlyFeaturedLists(viewModel.currentlyFeaturedLists)}
+    </section>
+    <section class="group-management-section">
+      ${renderListsThatCanBeFeatured(viewModel.listsThatCanBeFeatured)}
+    </section>
   </section>
   `),
 });
diff --git a/...-pages/group-page/group-management-page/render-as-html/render-currently-featured-lists.ts b/...-pages/group-page/group-management-page/render-as-html/render-currently-featured-lists.ts
@@ -30,7 +30,7 @@ export const renderCurrentlyFeaturedLists = (viewModel: CurrentlyFeaturedLists):
     () => '<p>Currently no featured lists</p>',
     () => renderForms(viewModel),
   ),
-  (content) => `<h2>Currently featured lists</h2>
+  (content) => `<h3>Currently featured lists</h3>
       ${content}
     `,
   toHtmlFragment,

diff --git a/...ages/group-page/group-management-page/render-as-html/render-lists-that-can-be-featured.ts b/...ages/group-page/group-management-page/render-as-html/render-lists-that-can-be-featured.ts
@@ -24,8 +24,7 @@ export const renderListsThatCanBeFeatured = (viewModel: ListsThatCanBeFeatured):
     (items) => `<ul class="list-names-with-actions">${renderListItems(items)}</ul>`,
   ),
   (forms) => toHtmlFragment(`
-    <h2>Feature a list</h2>
-    <p class="standard-form__sub_heading_secondary_text">Choose a list to feature on your group page.</p>
+    <h3>Feature a list</h3>
     ${forms}
   `),
 );