feat(frontend): search results updates (#9024)

This PR covers all of these issues below related to the search bar
section

- [Marketplace - search results - change margins between chips and
section title
#8980](https://github.com/Significant-Gravitas/AutoGPT/issues/8980)
- [Marketplace - search results - #8981
](https://github.com/Significant-Gravitas/AutoGPT/issues/8981)
- [Marketplace - search results - search box reduce height to 60px
#8977](https://github.com/Significant-Gravitas/AutoGPT/issues/8977)
- [Marketplace - search results - increase margins between filter chips
and search box
#8978](https://github.com/Significant-Gravitas/AutoGPT/issues/8978)
- [Marketplace - search results - change line height
#8979](https://github.com/Significant-Gravitas/AutoGPT/issues/8979)

---------

Co-authored-by: Swifty <craigswift13@gmail.com>
Co-authored-by: Nicholas Tindle <nicholas.tindle@agpt.co>

autogpt_platform/frontend/src/app/store/search/page.tsx

@@ -123,12 +123,12 @@ function SearchResults({
             <h2 className="font-geist text-base font-medium leading-normal text-neutral-800 dark:text-neutral-200">
               Results for:
             </h2>
-            <h1 className="font-poppins text-2xl font-semibold leading-loose text-neutral-800 dark:text-neutral-100">
+            <h1 className="font-poppins text-2xl font-semibold leading-[32px] text-neutral-800 dark:text-neutral-100">
               {searchTerm}
             </h1>
           </div>
           <div className="flex-none">
-            <SearchBar width="w-[439px]" />
+            <SearchBar width="w-[439px]" height="h-[60px]" />
           </div>
         </div>
 
@@ -138,7 +138,7 @@ function SearchResults({
           </div>
         ) : totalCount > 0 ? (
           <>
-            <div className="mt-8 flex items-center justify-between">
+            <div className="mt-[36px] flex items-center justify-between">
               <SearchFilterChips
                 totalCount={totalCount}
                 agentsCount={agentsCount}
@@ -150,8 +150,12 @@ function SearchResults({
             {/* Content section */}
             <div className="min-h-[500px] max-w-[1440px]">
               {showAgents && agentsCount > 0 && (
-                <div className="mt-8">
-                  <AgentsSection agents={agents} sectionTitle="Agents" />
+                <div className="mt-[36px]">
+                  <AgentsSection
+                    agents={agents}
+                    sectionTitle="Agents"
+                    className="font-[Large-Poppins] text-[18px] font-semibold leading-[28px]"
+                  />
                 </div>
               )}
 

autogpt_platform/frontend/src/components/agptui/SearchBar.tsx

@@ -12,6 +12,7 @@ interface SearchBarProps {
   textColor?: string;
   placeholderColor?: string;
   width?: string;
+  height?: string;
 }
 
 /** SearchBar component for user input and search functionality. */
@@ -22,6 +23,7 @@ export const SearchBar: React.FC<SearchBarProps> = ({
   textColor = "text-[#707070] dark:text-neutral-200",
   placeholderColor = "text-[#707070] dark:text-neutral-400",
   width = "w-9/10 lg:w-[56.25rem]",
+  height = "h-[60px]",
 }) => {
   const router = useRouter();
 
@@ -42,7 +44,7 @@ export const SearchBar: React.FC<SearchBarProps> = ({
     <form
       onSubmit={handleSubmit}
       data-testid="store-search-bar"
-      className={`${width} h-12 px-4 py-2 md:h-[4.5rem] md:px-6 md:py-1 ${backgroundColor} flex items-center justify-center gap-2 rounded-full md:gap-5`}
+      className={`${width} ${height} px-4 py-2 md:px-6 md:py-1 ${backgroundColor} flex items-center justify-center gap-2 rounded-full md:gap-5`}
     >
       <MagnifyingGlassIcon className={`h-5 w-5 md:h-7 md:w-7 ${iconColor}`} />
       <input

autogpt_platform/frontend/src/components/agptui/composite/HeroSection.tsx

@@ -37,7 +37,7 @@ export const HeroSection: React.FC = () => {
           Bringing you AI agents designed by thinkers from around the world
         </h3>
         <div className="mb-4 flex justify-center sm:mb-5 md:mb-6">
-          <SearchBar />
+          <SearchBar height="h-[74px]" />
         </div>
         <div>
           <div className="flex justify-center">