Wire nav search to SEARCH_CATALOG_URL and update search input styles. (#2)

Redirect header search to /search and restyle the search field.

Co-authored-by: Paul Nathaniel Sango <paulnathanielsango@192.168.1.4>

Author: pns-opswerks

src/containers/LearnerDashboardHeader/LearnerDashboardMenu.jsx

@@ -3,7 +3,6 @@ import {
   IconHome,
   IconBook,
   IconClockHour3,
-  IconSearch,
   IconHelpHexagon,
   IconBell,
 } from '@tabler/icons-react';
@@ -17,7 +16,26 @@ const ICON_MAP = {
   Home: IconHome,
   LibraryBooks: IconBook,
   ClockHour3: IconClockHour3,
-  Search: IconSearch,
+  Search: ({ size = 18, className, ...props }) => (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+      aria-hidden="true"
+      {...props}
+    >
+      <path
+        d="M18.665 18.665L12.665 12.665M0.665039 7.66504C0.665039 8.58429 0.846099 9.49454 1.19788 10.3438C1.54967 11.1931 2.06528 11.9648 2.71529 12.6148C3.3653 13.2648 4.13698 13.7804 4.98626 14.1322C5.83553 14.484 6.74579 14.665 7.66504 14.665C8.58429 14.665 9.49454 14.484 10.3438 14.1322C11.1931 13.7804 11.9648 13.2648 12.6148 12.6148C13.2648 11.9648 13.7804 11.1931 14.1322 10.3438C14.484 9.49454 14.665 8.58429 14.665 7.66504C14.665 6.74579 14.484 5.83553 14.1322 4.98626C13.7804 4.13698 13.2648 3.3653 12.6148 2.71529C11.9648 2.06528 11.1931 1.54967 10.3438 1.19788C9.49454 0.846099 8.58429 0.665039 7.66504 0.665039C6.74579 0.665039 5.83553 0.846099 4.98626 1.19788C4.13698 1.54967 3.3653 2.06528 2.71529 2.71529C2.06528 3.3653 1.54967 4.13698 1.19788 4.98626C0.846099 5.83553 0.665039 6.74579 0.665039 7.66504Z"
+        stroke="currentColor"
+        strokeWidth="1.33"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  ),
   HelpHexagon: IconHelpHexagon,
 };
 
@@ -35,6 +53,7 @@ const getLearnerHeaderMenu = (
   exploreCoursesClick,
 ) => {
   const BASE_URL = getConfig().LMS_BASE_URL;
+  const searchCatalogUrl = getConfig().SEARCH_CATALOG_URL;
   const configNavLinks = getConfig().HEADER_NAV_LINKS;
   const isLinkActive = (link) => {
     if (link.url === '/dashboard' || link.url.endsWith('/dashboard')) {
@@ -81,13 +100,13 @@ const getLearnerHeaderMenu = (
         : []),
     ];
 
-  const searchItem = courseSearchUrl ? [{
+  const searchItem = searchCatalogUrl ? [{
     type: 'item',
     href: null,
     className: 'lw-search-item',
     content: (
       <div className="lw-search-wrapper">
-        <IconSearch size={16} className="lw-search-icon" />
+        <ICON_MAP.Search size={18} className="lw-search-icon" />
         <input
           className="lw-search-input"
           type="search"
@@ -96,7 +115,7 @@ const getLearnerHeaderMenu = (
           onKeyDown={(e) => {
             if (e.key === 'Enter') {
               const q = e.target.value.trim();
-              window.location.href = urls.baseAppUrl(courseSearchUrl)
+              window.location.href = urls.baseAppUrl(searchCatalogUrl)
                 + (q ? `?q=${encodeURIComponent(q)}` : '');
             }
           }}

src/containers/LearnerDashboardHeader/index.scss

@@ -134,40 +134,75 @@
   flex-shrink: 0;
 }
 
-// Pill search input in the header secondary slot (before bell icon)
-.lw-search-wrapper {
-  position: relative;
+// Search input in the header secondary slot (before bell icon)
+// Scoped to override shared frontend-component-header pill defaults.
+.site-header-desktop .lw-search-wrapper {
+  box-sizing: border-box;
   display: inline-flex;
   align-items: center;
+  gap: 8px;
+  width: 233px;
+  height: 40px;
+  padding: 8px 12px;
   margin-right: 0.5rem;
+  border-radius: 6px;
+  border: 1px solid #E2E8F0;
+  background: #F8FAFC;
+  opacity: 1;
+  transition: border-color 150ms ease, background 150ms ease, box-shadow 150ms ease;
+
+  &:focus-within {
+    border-color: #059669;
+    background: #fff;
+    box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.16);
+
+    .lw-search-icon {
+      color: #059669;
+    }
+  }
 
   .lw-search-icon {
-    position: absolute;
-    left: 0.625rem;
-    width: 1rem;
-    height: 1rem;
-    color: #6b7280;
+    position: static;
+    flex-shrink: 0;
+    width: 18px;
+    height: 18px;
+    color: #64748B;
     pointer-events: none;
   }
 
+  .lw-search-icon path {
+    stroke-width: 1.7px;
+  }
+
   .lw-search-input {
-    border-radius: 9999px;
-    border: 1.5px solid #e5e7eb;
-    padding: 0.375rem 1rem 0.375rem 2.125rem;
-    font-size: 0.875rem;
-    color: #374151;
-    background: #f9fafb;
-    width: 13rem;
+    flex: 1;
+    min-width: 0;
+    width: auto;
+    height: 21px;
+    border: none;
+    border-radius: 0;
+    padding: 0;
+    margin: 0;
+    background: transparent;
     outline: none;
-    transition: border-color 150ms ease, background 150ms ease;
+    font-size: 14px;
+    line-height: 21px;
+    letter-spacing: 0;
+    color: #64748B;
 
     &:focus {
-      border-color: #9ca3af;
-      background: #fff;
+      border: none;
+      background: transparent;
     }
 
     &::placeholder {
-      color: #9ca3af;
+      font-family: inherit;
+      font-weight: 400;
+      font-size: 14px;
+      line-height: 21px;
+      letter-spacing: 0;
+      color: #64748B;
+      opacity: 1;
     }
 
     &::-webkit-search-decoration,