fix: style fixes and misc clean up

package.json

@@ -87,7 +87,7 @@
     "react-dom": "^17.0.1",
     "react-redux": "^7.2.1",
     "react-router-dom": "^5.2.0",
-    "redux": "4.0.5",
+    "redux": "^4.0.5",
     "@fortawesome/free-solid-svg-icons": "^5.8.1",
     "@fortawesome/react-fontawesome": "^0.1.4",
     "algoliasearch": "^4.8.5",
@@ -96,6 +96,5 @@
     "react-instantsearch-dom": "^6.8.3",
     "react-loading-skeleton": "^2.1.1",
     "lodash.debounce": "^4.0.8"
-  },
-  "dependencies": {}
+  }
 }

src/course-search/FacetDropdown.jsx

@@ -12,13 +12,8 @@ const FacetDropdown = ({
   <div className="facet-list">
     <Dropdown className={classNames('mb-0 mr-md-3', type)}>
       <Dropdown.Toggle
-        className={
-          classNames(
-            'bg-white', 'text-capitalize', 'rounded-0', 'border-0',
-            'd-flex', 'justify-content-between', 'align-items-center', 'text-dark',
-            { 'font-weight-bold': isBold },
-          )
-        }
+        variant="inverse-primary"
+        className={classNames({ 'font-weight-bold': isBold })}
       >
         {title}
       </Dropdown.Toggle>

src/course-search/FacetItem.jsx

@@ -6,15 +6,12 @@ import classNames from 'classnames';
 const FacetItem = ({
   handleInputOnChange, item, isChecked,
 }) => (
-  <Dropdown.Item
-    key={item.label}
-    as="label"
-    className="mb-0 py-3"
-  >
+  <Dropdown.Item as="label" className="mb-0 py-3">
     <Input
       type="checkbox"
       checked={isChecked}
       onChange={() => handleInputOnChange(item)}
+      className="position-relative mr-2"
     />
     <span className={classNames('facet-item-label', { 'is-refined': isChecked })}>
       {item.label}

src/course-search/FacetListBase.jsx

@@ -47,8 +47,8 @@ const FacetListBase = ({
 
   const renderItems = useCallback(
     () => {
-      if (!items || !items.length) {
-        return <span className="py-2 px-2 no-options-found">{NO_OPTIONS_FOUND}</span>;
+      if (!items?.length) {
+        return <span className="p-2 d-block">{NO_OPTIONS_FOUND}</span>;
       }
 
       return items.map(item => {

src/course-search/MobileFilterMenu.jsx

@@ -70,7 +70,7 @@ export const MobileFilterMenuBase = ({ children, className, items }) => {
             </div>
             <div className="modal-footer py-3">
               <div className="col">
-                <ClearCurrentRefinements className="bg-white btn-block text-dark" variant="link" />
+                <ClearCurrentRefinements className="btn-block" variant="inverse-primary" />
               </div>
               <div className="col">
                 <Button

src/course-search/SearchHeader.jsx

@@ -23,9 +23,7 @@ const SearchHeader = () => {
             />
           </Col>
           <Col xs={12}>
-            <SearchFilters
-              className="mb-3"
-            />
+            <SearchFilters className="mb-3" />
           </Col>
         </Row>
       </Container>

src/course-search/TypeaheadFacetDropdown.jsx

@@ -1,7 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Input } from '@edx/paragon';
 import debounce from 'lodash.debounce';
+import { Input } from '@edx/paragon';
+
 import FacetDropdown from './FacetDropdown';
 
 const TypeaheadFacetDropdown = ({
@@ -20,14 +21,16 @@ const TypeaheadFacetDropdown = ({
 
   const transformMenuOptions = menuOptions => (
     <>
-      <Input
-        autoFocus
-        type="search"
-        className="typeahead-dropdown-input"
-        placeholder={options.placeholder}
-        aria-label={options.ariaLabel}
-        onChange={(event) => handleSearch(event.currentTarget.value)}
-      />
+      <div className="p-2">
+        <Input
+          autoFocus
+          type="search"
+          className="typeahead-dropdown-input"
+          onChange={event => handleSearch(event.currentTarget.value)}
+          placeholder={options.placeholder}
+          aria-label={options.ariaLabel}
+        />
+      </div>
       <div className="typeahead-dropdown-menu-scrollable-items">
         {menuOptions}
       </div>

src/course-search/data/constants.js

@@ -5,7 +5,7 @@ export const SEARCH_FACET_FILTERS = [
     attribute: 'skill_names',
     title: 'Skills',
     typeaheadOptions: {
-      placeholder: 'Find a skill',
+      placeholder: 'Find a skill...',
       ariaLabel: 'Type to find a skill',
       minLength: 3,
     },

src/course-search/styles/_FacetList.scss

@@ -1,21 +1,9 @@
+$facet-dropdown-max-height: 250px;
+
 .facet-list {
   .dropdown {
     @extend .mb-3;
 
-    .dropdown-toggle {
-      text-align: left;
-      padding-left: 10px;
-      padding-right: 10px;
-
-      &:before {
-        border-radius: 0;
-      }
-
-      &:after {
-        margin-left: 10px;
-      }
-    }
-
     .facet-item-label {
       font-weight: normal;
 
@@ -29,8 +17,8 @@
     }
 
     .dropdown-menu {
-      max-height: 250px;
-      overflow: scroll;
+      max-height: $facet-dropdown-max-height;
+      overflow-y: scroll;
       max-width: 420px;
       width: max-content;
 
@@ -43,31 +31,11 @@
 
   .typeahead {
     .dropdown-menu {
-      .facet-list & {
-        padding: 50px 0 0;
-        max-height: none;
-        overflow: visible;
-        width: 420px;
-      }
+      max-height: unset;
 
       .typeahead-dropdown-menu-scrollable-items {
-        position: relative;
-        max-height: 200px;
-        overflow: auto;
-
-        .no-options-found {
-          display: block;
-        }
-      }
-
-      .typeahead-dropdown-input {
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 98%;
-        background: white;
-        padding: 5px;
-        margin: 4px;
+        max-height: $facet-dropdown-max-height;
+        overflow-y: scroll;
       }
     }
   }

src/course-search/styles/_MobileSearchFilters.scss

@@ -35,13 +35,6 @@
       @extend .border-bottom;
       @extend .py-3;
       width: 100%;
-
-      &:after {
-        position: table;
-        float: right;
-        height: 100%;
-        vertical-align: middle;
-      }
     }
 
     &:first-child {

src/course-search/tests/FacetListBase.test.jsx

@@ -165,7 +165,7 @@ describe('<FacetListBase />', () => {
 
     // input some search text
     await act(async () => {
-      fireEvent.change(screen.queryByPlaceholderText('Find a skill'), { target: { value: 'Blockchain' } });
+      fireEvent.change(screen.queryByPlaceholderText('Find a skill...'), { target: { value: 'Blockchain' } });
     });
 
     await new Promise((r) => setTimeout(r, 210));