[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
openedx · May 6, 2024 · de408b5 · de408b5
1 parent 2f5d4f7
commit de408b5
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 19 deletions.
diff --git 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
@@ -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 && (