[ODP-400] Homepage search bar improvements

deployment/frontend/src/components/Search.tsx

@@ -101,19 +101,19 @@ export default function Search({
                         Search datasets
                     </h1>
                 </div>
-                <div className="relative flex w-full max-w-[819px] items-start justify-start gap-x-6 xxl:pl-8 2xl:px-0">
+                <div className="relative flex w-full max-w-[819px] items-start justify-start gap-x-6 xxl:pl-8 2xl:px-0 h-[54.393px] ">
                     <input
                         placeholder="Search data"
                         aria-label="search"
-                        className="h-14 rounded-sm block w-full border-0 px-5 py-2 text-gray-900 shadow-wri-small ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 border-b-2 border-blue-800 focus:bg-slate-100 focus:ring-0 focus:ring-offset-0 sm:text-sm sm:leading-6"
+                        className="h-full  block w-full border-0 px-5 py-2 text-gray-900 shadow-wri-small ring-1 ring-inset ring-gray-300 placeholder:text-[#000000] placeholder:font-light focus:bg-slate-100 focus:ring-0 focus:ring-offset-0 sm:text-sm sm:leading-6 rounded-tl-[3px] rounded-bl-[3px] "
                         {...register('search')}
                     />
-                    <div className="absolute right-8 top-[1rem]">
+                    <div className="absolute flex h-[54.393px] px-8  right-0  leading-[29.25px] text-white bg-wri-gold rounded-tr-[3px] rounded-br-[3px]">
                         {!isSearch ||
                         watch('search') !=
                             filters?.find((f) => f.key == 'search')?.value ? (
-                            <button type="submit" aria-label="submit query">
-                                <MagnifyingGlassIcon className="h-5 w-5 text-wri-black" />
+                            <button type="submit" aria-label="submit query" className='text-[21px] font-semibold  font-acumin '>
+                                Search
                             </button>
                         ) : (
                             <button

deployment/frontend/src/components/home/Hero.tsx

@@ -248,14 +248,18 @@ export function Hero() {
                                 })
                             })}
                         >
-                            <div className="mt-10 flex relative items-start justify-start gap-x-6 w-full max-w-[932px]">
+                            <div className="mt-10 flex relative items-start justify-start  w-full max-w-[876px]">
                                 <input
-                                    placeholder="Search data"
+                                    placeholder="Search datasets - try “energy”, “Global Forest Watch”, or “food”"
                                     aria-label="search"
-                                    className="placeholder:text-white text-white text-xl font-normal font-acumin w-full px-6 h-[66px] bg-white bg-opacity-25 rounded-[3px] border-b-2 border-amber-400"
+                                    className="placeholder:text-white flex-shrink flex-grow  placeholder:italic placeholder:font-light placeholder:leading-tight placeholder:sm:font-normal placeholder:sm:leading-normal text-white text-xs md:text-xl font-normal font-acumin w-full px-6 h-[66px] bg-white bg-opacity-[0.24]  rounded-tl-[3px] rounded-bl-[3px] "
                                     {...register('search')}
                                 />
-                                <MagnifyingGlassIcon className="w-7 h-7 text-white absolute top-[18px] right-4" />
+
+                                <button
+                                    type="submit"
+                                    className="px-8 py-4 text-[26px] font-semibold  font-acumin leading-[29.25px] text-white bg-wri-gold rounded-tr-[3px] rounded-br-[3px] h-[66px] w-full max-w-[149px]"
+                                >Search</button>
                             </div>
                         </form>
                     </div>

deployment/frontend/src/components/topics/TopicsSearch.tsx

@@ -7,10 +7,12 @@ export default function TopicsSearch({
     setQuery,
     query,
     isLoading,
+    groupType
 }: {
     setQuery: React.Dispatch<React.SetStateAction<string>>
     query: string
     isLoading: boolean
+    groupType: string
 }) {
     return (
         <section
@@ -26,29 +28,32 @@ export default function TopicsSearch({
             >
                 <div className="w-full max-w-[819px] xxl:pl-8 2xl:px-0 ">
                     <h1 className="text-[40px]  leading-[48px] font-['Acumin Pro SemiCondensed'] font-semibold text-white mb-[31px]">
-                        Topics
+                        {groupType}
                     </h1>
                 </div>
-                <div className="relative flex w-full max-w-[819px] items-start justify-start gap-x-6 xxl:pl-8 2xl:px-0">
+                <div className="relative flex w-full max-w-[819px] items-start justify-start gap-x-6 xxl:pl-8 2xl:px-0 h-[54.393px] ">
                     <input
                         onChange={(e) => setQuery(e.target.value)}
                         value={query}
                         name="search"
-                        placeholder="Search topics"
+                        placeholder={`Search ${groupType === "Teams" ? "teams" : "topics"}`}
                         aria-label="search"
-                        className="h-14 rounded-sm block w-full border-0 px-5 py-2 text-gray-900 shadow-wri-small ring-1 ring-inset ring-gray-300 placeholder:text-gray-900 placeholder:text-base border-b-2 border-blue-800 focus:bg-slate-100 focus:ring-0 focus:ring-offset-0 sm:text-sm sm:leading-6"
+                        className="h-full  block w-full border-0 px-5 py-2 text-gray-900 shadow-wri-small ring-1 ring-inset ring-gray-300 placeholder:text-[#000000] placeholder:font-light focus:bg-slate-100 focus:ring-0 focus:ring-offset-0 sm:text-sm sm:leading-6 rounded-tl-[3px] rounded-bl-[3px] "
                     />
-                    {isLoading ? (
-                        <Spinner className="absolute right-8 top-[1rem] h-5 w-5 text-wri-black" />
-                    ) : (
-                        <button
-                            type="submit"
-                            aria-label="submit"
-                            className=" my-auto"
-                        >
-                            <MagnifyingGlassIcon className="absolute right-8 top-[1rem] h-5 w-5 text-wri-black" />
-                        </button>
-                    )}
+                    <div className="absolute flex h-[54.393px] px-8  right-0  leading-[29.25px] text-white bg-wri-gold rounded-tr-[3px] rounded-br-[3px]">
+                        {isLoading ? (
+                            <Spinner className="h-5 w-5 text-wri-black" />
+                        ) : (
+                            <button
+                                type="submit"
+                                aria-label="submit"
+                                className='text-[21px] font-semibold  font-acumin '
+                            >
+                                Search
+                            </button>
+                        )}
+                    </div>
+
                 </div>
             </form>
         </section>

deployment/frontend/src/pages/teams/index.tsx

@@ -20,6 +20,7 @@ import dynamic from 'next/dynamic'
 import { Index } from 'flexsearch'
 import { Organization as CkanOrg } from '@portaljs/ckan'
 import { Breadcrumbs } from '@/components/_shared/Breadcrumbsv2'
+import TopicsSearch from '@/components/topics/TopicsSearch'
 
 const TeamsSearchResults = dynamic(
     () => import('@/components/team/TeamsSearchResults')
@@ -115,10 +116,11 @@ export default function TeamsPage(
             />
             <Header />
             <Breadcrumbs links={links} />
-            <TeamsSearch
+            <TopicsSearch
                 isLoading={isLoading}
                 setQuery={setQuery}
                 query={query}
+                groupType="Teams"
             />
 
             <section className=" px-8 xxl:px-0  max-w-8xl mx-auto flex flex-col font-acumin text-xl font-light leading-loose text-neutral-700 gap-y-6 mt-16">

deployment/frontend/src/pages/topics/index.tsx

@@ -117,6 +117,7 @@ export default function TopicsPage(
                 isLoading={isLoading}
                 setQuery={setQuery}
                 query={query}
+                groupType='Topics'
             />
             <section className=" px-8 xxl:px-0  max-w-8xl mx-auto flex flex-col font-acumin text-xl font-light leading-loose text-neutral-700 gap-y-6 mt-16">
                 <div className="max-w-[705px] ml-2 2xl:ml-2">