input / search input styling updates

frontends/mit-learn/src/pages/ChannelPage/ChannelSearch.tsx

@@ -14,36 +14,25 @@ import type {
 } from "@mitodl/course-search-utils"
 import { useSearchParams } from "@mitodl/course-search-utils/react-router"
 import SearchDisplay from "@/page-components/SearchDisplay/SearchDisplay"
-import { SearchInput } from "@/page-components/SearchDisplay/SearchInput"
+import { Container, SearchInput, styled, VisuallyHidden } from "ol-components"
 
 import { getFacetManifest } from "@/pages/SearchPage/SearchPage"
 
 import _ from "lodash"
-import { styled, VisuallyHidden } from "ol-components"
-
-const SearchInputContainer = styled.div`
-  padding-bottom: 40px;
-
-  ${({ theme }) => theme.breakpoints.down("md")} {
-    padding-bottom: 35px;
-  }
-`
-
-const StyledSearchInput = styled(SearchInput)`
-  justify-content: center;
-  ${({ theme }) => theme.breakpoints.up("md")} {
-    .input-field {
-      height: 40px;
-      width: 450px;
-    }
-
-    .button-field {
-      height: 40px;
-      padding: 12px 16px 12px 12px;
-      width: 20px;
-    }
-  }
-`
+
+const SearchInputContainer = styled(Container)(({ theme }) => ({
+  width: "100%",
+  display: "flex",
+  justifyContent: "center",
+  paddingBottom: "40px",
+  [theme.breakpoints.down("md")]: {
+    paddingBottom: "35px",
+  },
+}))
+
+const StyledSearchInput = styled(SearchInput)({
+  width: "624px",
+})
 
 const FACETS_BY_CHANNEL_TYPE: Record<ChannelTypeEnum, string[]> = {
   [ChannelTypeEnum.Topic]: [
@@ -185,16 +174,14 @@ const ChannelSearch: React.FC<ChannelSearchProps> = ({
       <SearchInputContainer>
         <StyledSearchInput
           value={currentText}
+          size="large"
           onChange={(e) => setCurrentText(e.target.value)}
           onSubmit={(e) => {
             setCurrentTextAndQuery(e.target.value)
           }}
           onClear={() => {
             setCurrentTextAndQuery("")
           }}
-          classNameInput="input-field"
-          classNameSearch="button-field"
-          placeholder="Search for courses, programs, and learning materials..."
         />
       </SearchInputContainer>
 

frontends/mit-learn/src/pages/HomePage/HeroSearch.tsx

@@ -1,8 +1,14 @@
 import React, { useState, useCallback } from "react"
 import { useNavigate } from "react-router"
-import { Typography, styled, ChipLink, Link } from "ol-components"
+import {
+  Typography,
+  styled,
+  ChipLink,
+  Link,
+  SearchInput,
+  SearchInputProps,
+} from "ol-components"
 import type { ChipLinkProps } from "ol-components"
-import { SearchInput, SearchInputProps } from "./SearchInput"
 import {
   ABOUT,
   SEARCH_CERTIFICATE,
@@ -231,7 +237,6 @@ const HeroSearch: React.FC = () => {
         </Typography>
         <ControlsContainer>
           <SearchInput
-            placeholder="Search for courses, programs, and learning materials..."
             size="hero"
             fullWidth
             value={searchText}