feat: Adjust library home filter styles

src/index.scss

@@ -26,7 +26,7 @@
 @import "textbooks/Textbooks";
 @import "content-tags-drawer/ContentTagsDropDownSelector";
 @import "content-tags-drawer/ContentTagsCollapsible";
-@import "search-modal/SearchModal";
+@import "search-modal";
 @import "certificates/scss/Certificates";
 @import "group-configurations/GroupConfigurations";
 @import "library-authoring";

src/library-authoring/LibraryAuthoringPage.jsx

@@ -102,8 +102,8 @@ const LibraryAuthoringPage = () => {
           />
           <SearchKeywordsField className="w-50" />
           <div className="d-flex mt-3 align-items-center">
-            <FilterByBlockType />
             <FilterByTags />
+            <FilterByBlockType />
             <ClearFiltersButton />
             <div className="flex-grow-1" />
             <div className="text-muted x-small align-middle"><Stats /></div>

src/search-modal/FilterBy.scss

@@ -0,0 +1,7 @@
+// Options for the "filter by tag/block type" menu
+.pgn__menu.filter-by-refinement-menu {
+  .pgn__menu-item {
+    // Make the "filter by tag/block type" menu expand to fit the tags hierarchy and longer block type names
+    width: 100%;
+  }
+}

src/search-modal/FilterByBlockType.jsx

@@ -72,6 +72,7 @@ const FilterByBlockType = () => {
     <SearchFilterWidget
       appliedFilters={blockTypesFilter.map(blockType => ({ label: <BlockTypeLabel type={blockType} /> }))}
       label={<FormattedMessage {...messages.blockTypeFilter} />}
+      filterType="blockType"
     >
       <Form.Group>
         <Form.CheckboxSet

src/search-modal/FilterByTags.jsx

@@ -185,6 +185,7 @@ const FilterByTags = () => {
     <SearchFilterWidget
       appliedFilters={tagsFilter.map(tf => ({ label: tf.split(TAG_SEP).pop() }))}
       label={<FormattedMessage {...messages.blockTagsFilter} />}
+      filterType="tags"
     >
       <Form.Group className="pt-3">
         <SearchField
@@ -199,7 +200,7 @@ const FilterByTags = () => {
           placeholder={intl.formatMessage(messages.searchTagsByKeywordPlaceholder)}
           className="mx-3 mb-1"
         />
-        <Menu className="tags-refinement-menu" style={{ boxShadow: 'none' }}>
+        <Menu className="filter-by-refinement-menu" style={{ boxShadow: 'none' }}>
           <TagOptions
             tagSearchKeywords={tagSearchKeywords}
             toggleTagChildren={toggleTagChildren}

src/search-modal/SearchFilterWidget.jsx

@@ -1,7 +1,7 @@
 /* eslint-disable react/prop-types */
 // @ts-check
 import React from 'react';
-import { ArrowDropDown } from '@openedx/paragon/icons';
+import { ArrowDropDown, Tag, FilterList } from '@openedx/paragon/icons';
 import {
   Badge,
   Button,
@@ -20,12 +20,22 @@ import {
  * When clicked, the button will display a dropdown menu containing this
  * element's `children`. So use this to wrap a <RefinementList> etc.
  *
- * @type {React.FC<{appliedFilters: {label: React.ReactNode}[], label: React.ReactNode, children: React.ReactNode}>}
+ * @type {React.FC<{
+ *   appliedFilters: {label: React.ReactNode}[],
+ *   label: React.ReactNode,
+ *   children: React.ReactNode,
+ *   filterType?: string
+ * }>}
  */
 const SearchFilterWidget = ({ appliedFilters, ...props }) => {
   const [isOpen, open, close] = useToggle(false);
   const [target, setTarget] = React.useState(null);
 
+  const iconMap = {
+    blockType: FilterList,
+    tags: Tag,
+  };
+
   return (
     <>
       <div className="d-flex mr-3">
@@ -34,6 +44,7 @@ const SearchFilterWidget = ({ appliedFilters, ...props }) => {
           variant={appliedFilters.length ? 'light' : 'outline-primary'}
           size="sm"
           onClick={open}
+          iconBefore={iconMap[props.filterType]}
           iconAfter={ArrowDropDown}
         >
           {props.label}

src/search-modal/SearchModal.scss

@@ -39,22 +39,6 @@
     }
   }
 
-  // Options for the "filter by tag" menu
-  .pgn__menu.tags-refinement-menu {
-    .pgn__menu-item {
-      // Make the "filter by tag" menu much wider than normal, because we need the space to display the tags hierarchy
-      width: 100%;
-    }
-  }
-
-  // Options for the "filter by block type" menu
-  .pgn__menu.block-type-refinement-menu {
-    .pgn__menu-item {
-      // Make the "filter by block type" menu expand to fit longer block types names
-      width: 100%;
-    }
-  }
-
   .pgn__menu-item {
     // Fix a bug in Paragon menu dropdowns: the checkbox currently shrinks if the text is too long.
     // https://github.com/openedx/paragon/pull/3019

src/search-modal/index.scss

@@ -0,0 +1,2 @@
+@import "search-modal/SearchModal";
+@import "search-modal/FilterBy";