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](#8980) - [Marketplace - search results - #8981 ](#8981) - [Marketplace - search results - search box reduce height to 60px #8977](#8977) - [Marketplace - search results - increase margins between filter chips and search box #8978](#8978) - [Marketplace - search results - change line height #8979](#8979) --------- Co-authored-by: Swifty <[email protected]> Co-authored-by: Nicholas Tindle <[email protected]>
Significant-Gravitas · Dec 18, 2024 · 95bd268 · 95bd268
1 parent 0e10e62
commit 95bd268
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 7 deletions.
diff --git a/autogpt_platform/frontend/src/app/store/search/page.tsx b/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>
               )}
 

diff --git a/autogpt_platform/frontend/src/components/agptui/SearchBar.tsx b/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

diff --git a/autogpt_platform/frontend/src/components/agptui/composite/HeroSection.tsx b/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">