feat: update courseware search button (#1382)

src/course-home/courseware-search/CoursewareSearchToggle.jsx

@@ -1,7 +1,7 @@
 import React, { useEffect } from 'react';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
-import { Button, Icon } from '@openedx/paragon';
-import { Search } from '@openedx/paragon/icons';
+import { Button } from '@openedx/paragon';
+import { ManageSearch } from '@openedx/paragon/icons';
 import { useDispatch } from 'react-redux';
 import messages from './messages';
 import { useCoursewareSearchFeatureFlag, useCoursewareSearchParams } from './hooks';
@@ -25,16 +25,17 @@ const CoursewareSearchToggle = ({
   if (!enabled) { return null; }
 
   return (
-    <div className="courseware-searc-toggle">
+    <div className="courseware-search-toggle">
       <Button
-        variant="tertiary"
+        variant="outline-primary"
         size="sm"
         className="p-1 mt-2 mr-2 rounded-lg"
         aria-label={intl.formatMessage(messages.searchOpenAction)}
         onClick={handleSearchOpenClick}
         data-testid="courseware-search-open-button"
+        iconAfter={ManageSearch}
       >
-        <Icon src={Search} />
+        {intl.formatMessage(messages.contentSearchButton)}
       </Button>
     </div>
   );

src/course-home/courseware-search/messages.js

@@ -2,79 +2,84 @@ import { defineMessages } from '@edx/frontend-platform/i18n';
 
 const messages = defineMessages({
   searchOpenAction: {
-    id: 'learn.coursewareSerch.openAction',
+    id: 'learn.coursewareSearch.openAction',
     defaultMessage: 'Search within this course',
     description: 'Aria-label for a button that will pop up Courseware Search.',
   },
+  contentSearchButton: {
+    id: 'learn.coursewareSearch.contentSearchButton',
+    defaultMessage: 'Content search',
+    description: 'Text for a button that will pop up Courseware Search.',
+  },
   searchSubmitLabel: {
-    id: 'learn.coursewareSerch.submitLabel',
+    id: 'learn.coursewareSearch.submitLabel',
     defaultMessage: 'Search',
     description: 'Button label that will submit Courseware Search.',
   },
   searchClearAction: {
-    id: 'learn.coursewareSerch.clearAction',
+    id: 'learn.coursewareSearch.clearAction',
     defaultMessage: 'Clear search',
     description: 'Button label that will the current Courseware Search input.',
   },
   searchCloseAction: {
-    id: 'learn.coursewareSerch.closeAction',
+    id: 'learn.coursewareSearch.closeAction',
     defaultMessage: 'Close the search form',
     description: 'Aria-label for a button that will close Courseware Search.',
   },
   searchModuleTitle: {
-    id: 'learn.coursewareSerch.searchModuleTitle',
+    id: 'learn.coursewareSearch.searchModuleTitle',
     defaultMessage: 'Search this course',
     description: 'Title for the Courseware Search module.',
   },
   searchBarPlaceholderText: {
-    id: 'learn.coursewareSerch.searchBarPlaceholderText',
+    id: 'learn.coursewareSearch.searchBarPlaceholderText',
     defaultMessage: 'Search',
     description: 'Placeholder text for the Courseware Search input control',
   },
   loading: {
-    id: 'learn.coursewareSerch.loading',
+    id: 'learn.coursewareSearch.loading',
     defaultMessage: 'Searching...',
     description: 'Screen reader text to use on the spinner while the search is performing.',
   },
   searchResultsNone: {
-    id: 'learn.coursewareSerch.searchResultsNone',
+    id: 'learn.coursewareSearch.searchResultsNone',
     defaultMessage: 'No results found.',
     description: 'Text to show when the Courseware Search found no results matching the criteria.',
   },
   searchResultsLabel: {
-    id: 'learn.coursewareSerch.searchResultsLabel',
+    id: 'learn.coursewareSearch.searchResultsLabel',
     defaultMessage: 'Results for "{keyword}":',
     description: 'Text to show above the search results response list.',
   },
   searchResultsError: {
-    id: 'learn.coursewareSerch.searchResultsError',
+    id: 'learn.coursewareSearch.searchResultsError',
     defaultMessage: 'There was an error on the search process. Please try again in a few minutes. If the problem persists, please contact the support team.',
     description: 'Error message to show to the users when there\'s an error with the endpoint or the returned payload format.',
   },
 
   // These are translations for labeling the filters
   'filter:all': {
-    id: 'learn.coursewareSerch.filter:all',
+    id: 'learn.coursewareSearch.filter:all',
     defaultMessage: 'All content',
     description: 'Label for the search results filter that shows all content (no filter).',
   },
   'filter:text': {
-    id: 'learn.coursewareSerch.filter:text',
+    id: 'learn.coursewareSearch.filter:text',
     defaultMessage: 'Text',
     description: 'Label for the search results filter that shows results with text content.',
   },
   'filter:video': {
-    id: 'learn.coursewareSerch.filter:video',
+    id: 'learn.coursewareSearch.filter:video',
     defaultMessage: 'Video',
     description: 'Label for the search results filter that shows results with video content.',
   },
   'filter:sequence': {
-    id: 'learn.coursewareSerch.filter:sequence',
+    id: 'learn.coursewareSearch.filter:sequence',
     defaultMessage: 'Section',
     description: 'Label for the search results filter that shows results with section content.',
   },
   'filter:other': {
-    id: 'learn.coursewareSerch.filter:other',
+    id: 'learn.coursewareSearch.filter:other',
     defaultMessage: 'Other',
     description: 'Label for the search results filter that shows results with other content.',
   },

src/course-tabs/CourseTabsNavigation.jsx

@@ -16,23 +16,27 @@ const CourseTabsNavigation = ({
   return (
     <div id="courseTabsNavigation" className={classNames('course-tabs-navigation', className)}>
       <div className="container-xl">
-        <Tabs
-          className="nav-underline-tabs"
-          aria-label={intl.formatMessage(messages.courseMaterial)}
-        >
-          {tabs.map(({ url, title, slug }) => (
-            <a
-              key={slug}
-              className={classNames('nav-item flex-shrink-0 nav-link', { active: slug === activeTabSlug })}
-              href={url}
+        <div className="nav-bar">
+          <div className="nav-menu">
+            <Tabs
+              className="nav-underline-tabs"
+              aria-label={intl.formatMessage(messages.courseMaterial)}
             >
-              {title}
-            </a>
-          ))}
-        </Tabs>
-      </div>
-      <div className="course-tabs-navigation__search-toggle">
-        <CoursewareSearchToggle />
+              {tabs.map(({ url, title, slug }) => (
+                <a
+                  key={slug}
+                  className={classNames('nav-item flex-shrink-0 nav-link', { active: slug === activeTabSlug })}
+                  href={url}
+                >
+                  {title}
+                </a>
+              ))}
+            </Tabs>
+          </div>
+          <div className="search-toggle">
+            <CoursewareSearchToggle />
+          </div>
+        </div>
       </div>
       {show && <CoursewareSearch />}
     </div>

src/course-tabs/course-tabs-navigation.scss

@@ -16,9 +16,23 @@
     }
   }
 
-  &__search-toggle {
-    position: absolute;
-    top: .05rem;
-    right: 0;
+  .nav-bar {
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    gap: 10px;
   }
+
+  .nav-menu {
+    flex: 1;
+  }
+
+  .search-toggle {
+    flex-grow: 0;
+    text-align: right;
+    white-space: nowrap;
+    margin-bottom: 10px;
+  }
+
+
 }