From de408b5a3a9d66d8061f801e5ebe05ec7f277c08 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Chris=20Ch=C3=A1vez?= <xnpiochv@gmail.com>
Date: Mon, 6 May 2024 04:16:46 -0500
Subject: [PATCH] [FC-0036] refactor: Further refinements to tag drawer (#970)

* refactor: Further refinements to tag drawer
* Padding to top and left tagging drawer
* Changes in headings in the tagging drawer
---
 .../ContentTagsCollapsible.jsx                |  2 +-
 src/content-tags-drawer/ContentTagsDrawer.jsx | 38 ++++++++++---------
 2 files changed, 21 insertions(+), 19 deletions(-)

diff --git a/src/content-tags-drawer/ContentTagsCollapsible.jsx b/src/content-tags-drawer/ContentTagsCollapsible.jsx
index 2428e3633e..50eb2c79bd 100644
--- a/src/content-tags-drawer/ContentTagsCollapsible.jsx
+++ b/src/content-tags-drawer/ContentTagsCollapsible.jsx
@@ -382,7 +382,7 @@ const ContentTagsCollapsible = ({
           <Collapsible.Visible whenOpen>
             <Icon src={KeyboardArrowUp} />
           </Collapsible.Visible>
-          <h4 className="flex-grow-1 pl-2">{name}</h4>
+          <h3 className="h5 flex-grow-1 pl-2">{name}</h3>
         </Collapsible.Trigger>
 
         <Collapsible.Body className="collapsible-body">
diff --git a/src/content-tags-drawer/ContentTagsDrawer.jsx b/src/content-tags-drawer/ContentTagsDrawer.jsx
index a1d15810de..b26d87d177 100644
--- a/src/content-tags-drawer/ContentTagsDrawer.jsx
+++ b/src/content-tags-drawer/ContentTagsDrawer.jsx
@@ -90,10 +90,10 @@ const ContentTagsDrawer = ({ id, onClose }) => {
 
   return (
     <ContentTagsDrawerContext.Provider value={context}>
-      <div id="content-tags-drawer" className="mt-1 tags-drawer d-flex flex-column justify-content-between min-vh-100">
+      <div id="content-tags-drawer" className="mt-1 tags-drawer d-flex flex-column justify-content-between min-vh-100 pt-3">
         <Container size="xl">
           { isContentDataLoaded
-            ? <h2>{ contentName }</h2>
+            ? <h2 className="h3 pl-2.5">{ contentName }</h2>
             : (
               <div className="d-flex justify-content-center align-items-center flex-column">
                 <Spinner
@@ -103,23 +103,25 @@ const ContentTagsDrawer = ({ id, onClose }) => {
                 />
               </div>
             )}
-
           <hr />
-          <p className="lead text-gray-500 font-weight-bold">{intl.formatMessage(messages.headerSubtitle)}</p>
-
-          { isTaxonomyListLoaded && isContentTaxonomyTagsLoaded
-            ? tagsByTaxonomy.map((data) => (
-              <div key={`taxonomy-tags-collapsible-${data.id}`}>
-                <ContentTagsCollapsible
-                  contentId={contentId}
-                  taxonomyAndTagsData={data}
-                  stagedContentTags={stagedContentTags[data.id] || []}
-                  collapsibleState={collapsibleStates[data.id] || false}
-                />
-                <hr />
-              </div>
-            ))
-            : <Loading />}
+          <Container>
+            <p className="h4 text-gray-500 font-weight-bold">
+              {intl.formatMessage(messages.headerSubtitle)}
+            </p>
+            { isTaxonomyListLoaded && isContentTaxonomyTagsLoaded
+              ? tagsByTaxonomy.map((data) => (
+                <div key={`taxonomy-tags-collapsible-${data.id}`}>
+                  <ContentTagsCollapsible
+                    contentId={contentId}
+                    taxonomyAndTagsData={data}
+                    stagedContentTags={stagedContentTags[data.id] || []}
+                    collapsibleState={collapsibleStates[data.id] || false}
+                  />
+                  <hr />
+                </div>
+              ))
+              : <Loading />}
+          </Container>
         </Container>
 
         { isTaxonomyListLoaded && isContentTaxonomyTagsLoaded && (