From 4cc8616c02584105d5c4b032bc9a4ccb29e7198a Mon Sep 17 00:00:00 2001
From: Abhimanyu Yadav <122007096+Abhi1992002@users.noreply.github.com>
Date: Fri, 20 Dec 2024 17:31:15 +0530
Subject: [PATCH] feat(store) : Small UI changes on marketplace (#9094)

Add small ui changes on marketplace

Fix
- #9035
- #9034
- #9033
- #9031
- #9029
- #9028
- #9027
- #9026
- #9025
- #9021
- #9020
- #9004
- #9003
- #9002
- #9001
- #8999
- #8998
- #8997
- #8996
- #8995
- #8994
- #8993
- #8991
- #8990
- #8989

---------

Co-authored-by: Swifty <craigswift13@gmail.com>
---
 autogpt_platform/frontend/src/app/layout.tsx  |  2 +-
 .../app/store/agent/[creator]/[slug]/page.tsx | 14 ++++++---
 .../src/app/store/creator/[creator]/page.tsx  |  7 +++--
 .../src/components/agptui/AgentImageItem.tsx  |  2 +-
 .../src/components/agptui/AgentImages.tsx     |  2 +-
 .../src/components/agptui/AgentInfo.tsx       | 30 +++++++++++--------
 .../src/components/agptui/BecomeACreator.tsx  |  6 ++--
 .../src/components/agptui/BreadCrumbs.tsx     |  4 +--
 .../src/components/agptui/CreatorInfoCard.tsx | 10 +++----
 .../frontend/src/components/agptui/Navbar.tsx |  2 +-
 .../src/components/agptui/StoreCard.tsx       |  2 +-
 .../agptui/composite/AgentsSection.tsx        |  2 +-
 .../frontend/src/components/ui/icons.tsx      |  8 +++--
 13 files changed, 54 insertions(+), 37 deletions(-)

diff --git a/autogpt_platform/frontend/src/app/layout.tsx b/autogpt_platform/frontend/src/app/layout.tsx
index 596707003fdb..944e2301d395 100644
--- a/autogpt_platform/frontend/src/app/layout.tsx
+++ b/autogpt_platform/frontend/src/app/layout.tsx
@@ -91,7 +91,7 @@ export default async function RootLayout({
                 },
               ]}
             />
-            <main className="flex-1 p-4">{children}</main>
+            <main className="flex-1">{children}</main>
             <TallyPopupSimple />
           </div>
           <Toaster />
diff --git a/autogpt_platform/frontend/src/app/store/agent/[creator]/[slug]/page.tsx b/autogpt_platform/frontend/src/app/store/agent/[creator]/[slug]/page.tsx
index 1e03605b4834..dca9fdd82547 100644
--- a/autogpt_platform/frontend/src/app/store/agent/[creator]/[slug]/page.tsx
+++ b/autogpt_platform/frontend/src/app/store/agent/[creator]/[slug]/page.tsx
@@ -51,7 +51,7 @@ export default async function Page({
 
   return (
     <div className="mx-auto w-screen max-w-[1360px]">
-      <main className="px-4 md:mt-4 lg:mt-8">
+      <main className="mt-5 px-4">
         <BreadCrumbs items={breadcrumbs} />
 
         <div className="mt-4 flex flex-col items-start gap-4 sm:mt-6 sm:gap-6 md:mt-8 md:flex-row md:gap-8">
@@ -69,14 +69,20 @@ export default async function Page({
               storeListingVersionId={agent.store_listing_version_id}
             />
           </div>
-          <AgentImages images={[agent.agent_video, ...agent.agent_image]} />
+          <AgentImages
+            images={
+              agent.agent_video
+                ? [agent.agent_video, ...agent.agent_image]
+                : agent.agent_image
+            }
+          />
         </div>
-        <Separator className="my-6" />
+        <Separator className="mb-[25px] mt-6" />
         <AgentsSection
           agents={otherAgents.agents}
           sectionTitle={`Other agents by ${agent.creator}`}
         />
-        <Separator className="my-6" />
+        <Separator className="mb-[25px] mt-6" />
         <AgentsSection
           agents={similarAgents.agents}
           sectionTitle="Similar agents"
diff --git a/autogpt_platform/frontend/src/app/store/creator/[creator]/page.tsx b/autogpt_platform/frontend/src/app/store/creator/[creator]/page.tsx
index a1d4e3d14986..7870517c5063 100644
--- a/autogpt_platform/frontend/src/app/store/creator/[creator]/page.tsx
+++ b/autogpt_platform/frontend/src/app/store/creator/[creator]/page.tsx
@@ -44,7 +44,7 @@ export default async function Page({
 
     return (
       <div className="mx-auto w-screen max-w-[1360px]">
-        <main className="px-4 md:mt-4 lg:mt-8">
+        <main className="mt-5 px-4">
           <BreadCrumbs
             items={[
               { name: "Store", link: "/store" },
@@ -64,7 +64,10 @@ export default async function Page({
               />
             </div>
             <div className="flex min-w-0 flex-1 flex-col gap-4 sm:gap-6 md:gap-8">
-              <div className="font-neue text-2xl font-normal leading-normal text-neutral-900 sm:text-3xl md:text-[35px] md:leading-[45px]">
+              <p className="font-geist text-underline-position-from-font text-decoration-skip-none text-left text-base font-medium leading-6">
+                About
+              </p>
+              <div className="font-poppins text-[48px] font-normal leading-[59px] text-neutral-900 dark:text-zinc-50">
                 {creator.description}
               </div>
               <CreatorLinks links={creator.links} />
diff --git a/autogpt_platform/frontend/src/components/agptui/AgentImageItem.tsx b/autogpt_platform/frontend/src/components/agptui/AgentImageItem.tsx
index 08f78a7d1ffe..935b34144359 100644
--- a/autogpt_platform/frontend/src/components/agptui/AgentImageItem.tsx
+++ b/autogpt_platform/frontend/src/components/agptui/AgentImageItem.tsx
@@ -47,7 +47,7 @@ export const AgentImageItem: React.FC<AgentImageItemProps> = React.memo(
 
     return (
       <div className="relative">
-        <div className="h-[15rem] overflow-hidden rounded-xl bg-[#a8a8a8] dark:bg-neutral-700 sm:h-[20rem] sm:w-full md:h-[25rem] lg:h-[30rem]">
+        <div className="h-[15rem] overflow-hidden rounded-[26px] bg-[#a8a8a8] dark:bg-neutral-700 sm:h-[20rem] sm:w-full md:h-[25rem] lg:h-[30rem]">
           {isValidVideoUrl(image) ? (
             getYouTubeVideoId(image) ? (
               <iframe
diff --git a/autogpt_platform/frontend/src/components/agptui/AgentImages.tsx b/autogpt_platform/frontend/src/components/agptui/AgentImages.tsx
index eaa1f55e1355..3f8d37d78095 100644
--- a/autogpt_platform/frontend/src/components/agptui/AgentImages.tsx
+++ b/autogpt_platform/frontend/src/components/agptui/AgentImages.tsx
@@ -26,7 +26,7 @@ export const AgentImages: React.FC<AgentImagesProps> = ({ images }) => {
   );
 
   return (
-    <div className="w-full overflow-y-auto bg-white px-2 dark:bg-gray-800 lg:w-[56.25rem]">
+    <div className="w-full overflow-y-auto bg-white px-2 dark:bg-transparent lg:w-[56.25rem]">
       <div className="space-y-4 sm:space-y-6 md:space-y-[1.875rem]">
         {images.map((image, index) => (
           <AgentImageItem
diff --git a/autogpt_platform/frontend/src/components/agptui/AgentInfo.tsx b/autogpt_platform/frontend/src/components/agptui/AgentInfo.tsx
index 72f6272bf597..18f0b4e7d09b 100644
--- a/autogpt_platform/frontend/src/components/agptui/AgentInfo.tsx
+++ b/autogpt_platform/frontend/src/components/agptui/AgentInfo.tsx
@@ -5,6 +5,7 @@ import { IconPlay, StarRatingIcons } from "@/components/ui/icons";
 import { Separator } from "@/components/ui/separator";
 import BackendAPI from "@/lib/autogpt-server-api";
 import { useRouter } from "next/navigation";
+import Link from "next/link";
 interface AgentInfoProps {
   name: string;
   creator: string;
@@ -56,9 +57,12 @@ export const AgentInfo: React.FC<AgentInfoProps> = ({
         <div className="font-geist text-base font-normal text-neutral-800 dark:text-neutral-200 sm:text-lg lg:text-xl">
           by
         </div>
-        <div className="font-geist text-base font-medium text-neutral-800 dark:text-neutral-200 sm:text-lg lg:text-xl">
+        <Link
+          href={`/store/creator/${creator}`}
+          className="font-geist text-base font-medium text-neutral-800 hover:underline dark:text-neutral-200 sm:text-lg lg:text-xl"
+        >
           {creator}
-        </div>
+        </Link>
       </div>
 
       {/* Short Description */}
@@ -67,7 +71,7 @@ export const AgentInfo: React.FC<AgentInfoProps> = ({
       </div>
 
       {/* Run Agent Button */}
-      <div className="mb-4 w-full lg:mb-6">
+      <div className="mb-4 w-full lg:mb-[60px]">
         <button
           onClick={handleAddToLibrary}
           className="inline-flex w-full items-center justify-center gap-2 rounded-[38px] bg-violet-600 px-4 py-3 transition-colors hover:bg-violet-700 sm:w-auto sm:gap-2.5 sm:px-5 sm:py-3.5 lg:px-6 lg:py-4"
@@ -80,7 +84,7 @@ export const AgentInfo: React.FC<AgentInfoProps> = ({
       </div>
 
       {/* Rating and Runs */}
-      <div className="mb-4 flex w-full items-center justify-between lg:mb-6">
+      <div className="mb-4 flex w-full items-center justify-between lg:mb-[44px]">
         <div className="flex items-center gap-1.5 sm:gap-2">
           <span className="font-geist whitespace-nowrap text-base font-semibold text-neutral-800 dark:text-neutral-200 sm:text-lg">
             {rating.toFixed(1)}
@@ -93,28 +97,28 @@ export const AgentInfo: React.FC<AgentInfoProps> = ({
       </div>
 
       {/* Separator */}
-      <Separator className="mb-4 lg:mb-6" />
+      <Separator className="mb-4 lg:mb-[44px]" />
 
       {/* Description Section */}
-      <div className="mb-4 w-full lg:mb-6">
-        <div className="mb-1.5 text-xs font-medium text-neutral-800 dark:text-neutral-200 sm:mb-2 sm:text-sm">
+      <div className="mb-4 w-full lg:mb-[36px]">
+        <div className="font-geist decoration-skip-ink-none mb-1.5 text-base font-medium leading-6 text-neutral-800 dark:text-neutral-200 sm:mb-2">
           Description
         </div>
-        <div className="font-geist w-full whitespace-pre-line text-sm font-normal text-neutral-600 dark:text-neutral-300 sm:text-base">
+        <div className="font-geist decoration-skip-ink-none text-base font-normal leading-6 text-neutral-600 underline-offset-[from-font] dark:text-neutral-400">
           {longDescription}
         </div>
       </div>
 
       {/* Categories */}
-      <div className="mb-4 flex w-full flex-col gap-1.5 sm:gap-2 lg:mb-6">
-        <div className="text-xs font-medium text-neutral-800 dark:text-neutral-200 sm:text-sm">
+      <div className="mb-4 flex w-full flex-col gap-1.5 sm:gap-2 lg:mb-[36px]">
+        <div className="font-geist decoration-skip-ink-none mb-1.5 text-base font-medium leading-6 text-neutral-800 dark:text-neutral-200 sm:mb-2">
           Categories
         </div>
         <div className="flex flex-wrap gap-1.5 sm:gap-2">
           {categories.map((category, index) => (
             <div
               key={index}
-              className="whitespace-nowrap rounded-full border border-neutral-200 bg-white px-2 py-0.5 text-xs text-neutral-800 dark:border-neutral-700 dark:bg-neutral-800 dark:text-neutral-200 sm:px-3 sm:py-1 sm:text-sm"
+              className="font-geist decoration-skip-ink-none whitespace-nowrap rounded-full border border-neutral-600 bg-white px-2 py-0.5 text-base font-normal leading-6 text-neutral-800 underline-offset-[from-font] dark:border-neutral-700 dark:bg-neutral-800 dark:text-neutral-200 sm:px-[16px] sm:py-[10px]"
             >
               {category}
             </div>
@@ -124,10 +128,10 @@ export const AgentInfo: React.FC<AgentInfoProps> = ({
 
       {/* Version History */}
       <div className="flex w-full flex-col gap-0.5 sm:gap-1">
-        <div className="text-xs font-medium text-neutral-800 dark:text-neutral-200 sm:text-sm">
+        <div className="font-geist decoration-skip-ink-none mb-1.5 text-base font-medium leading-6 text-neutral-800 dark:text-neutral-200 sm:mb-2">
           Version history
         </div>
-        <div className="text-xs text-neutral-600 dark:text-neutral-400 sm:text-sm">
+        <div className="font-geist decoration-skip-ink-none text-base font-normal leading-6 text-neutral-600 underline-offset-[from-font] dark:text-neutral-400">
           Last updated {lastUpdated}
         </div>
         <div className="text-xs text-neutral-600 dark:text-neutral-400 sm:text-sm">
diff --git a/autogpt_platform/frontend/src/components/agptui/BecomeACreator.tsx b/autogpt_platform/frontend/src/components/agptui/BecomeACreator.tsx
index d41073cc1e36..16ebf3cecef2 100644
--- a/autogpt_platform/frontend/src/components/agptui/BecomeACreator.tsx
+++ b/autogpt_platform/frontend/src/components/agptui/BecomeACreator.tsx
@@ -26,13 +26,13 @@ export const BecomeACreator: React.FC<BecomeACreatorProps> = ({
       <div className="left-0 top-0 h-px w-full bg-gray-200 dark:bg-gray-700" />
 
       {/* Title */}
-      <h2 className="mb-8 mt-6 text-2xl leading-7 text-neutral-800 dark:text-neutral-200">
+      <h2 className="font-poppins underline-from-font decoration-skip-ink-none mb-[77px] mt-[25px] text-left text-[18px] font-semibold leading-[28px] text-neutral-800 dark:text-neutral-200">
         {title}
       </h2>
 
       {/* Content Container */}
-      <div className="absolute left-1/2 top-1/2 w-full max-w-[900px] -translate-x-1/2 -translate-y-1/2 px-4 pt-16 text-center md:px-6 md:pt-10 lg:px-0">
-        <h2 className="font-poppins mb-6 text-3xl font-semibold leading-tight text-neutral-950 dark:text-neutral-50 md:mb-8 md:text-4xl md:leading-[1.2] lg:mb-12 lg:text-5xl lg:leading-[54px]">
+      <div className="absolute left-1/2 top-1/2 mt-[60px] w-full max-w-[900px] -translate-x-1/2 -translate-y-1/2 px-4 pt-16 text-center sm:mt-0 md:px-6 lg:px-0">
+        <h2 className="font-poppins underline-from-font decoration-skip-ink-none mb-6 text-center text-[48px] font-semibold leading-[54px] tracking-[-0.012em] text-neutral-950 dark:text-neutral-50 md:mb-8 lg:mb-12">
           Build AI agents and share
           <br />
           <span className="text-violet-600 dark:text-violet-400">
diff --git a/autogpt_platform/frontend/src/components/agptui/BreadCrumbs.tsx b/autogpt_platform/frontend/src/components/agptui/BreadCrumbs.tsx
index 5fadd00f52a9..fff57dd7a6bf 100644
--- a/autogpt_platform/frontend/src/components/agptui/BreadCrumbs.tsx
+++ b/autogpt_platform/frontend/src/components/agptui/BreadCrumbs.tsx
@@ -14,7 +14,7 @@ interface BreadCrumbsProps {
 export const BreadCrumbs: React.FC<BreadCrumbsProps> = ({ items }) => {
   return (
     <div className="flex items-center gap-4">
-      {/* 
+      {/*
       Commented out for now, but keeping until we have approval to remove
       <button className="flex h-12 w-12 items-center justify-center rounded-full border border-neutral-200 transition-colors hover:bg-neutral-50 dark:border-neutral-700 dark:hover:bg-neutral-800">
         <IconLeftArrow className="h-5 w-5 text-neutral-900 dark:text-neutral-100" />
@@ -22,7 +22,7 @@ export const BreadCrumbs: React.FC<BreadCrumbsProps> = ({ items }) => {
       <button className="flex h-12 w-12 items-center justify-center rounded-full border border-neutral-200 transition-colors hover:bg-neutral-50 dark:border-neutral-700 dark:hover:bg-neutral-800">
         <IconRightArrow className="h-5 w-5 text-neutral-900 dark:text-neutral-100" />
       </button> */}
-      <div className="flex h-auto min-h-[4.375rem] flex-wrap items-center justify-start gap-4 rounded-[5rem] bg-white dark:bg-neutral-900">
+      <div className="flex h-auto flex-wrap items-center justify-start gap-4 rounded-[5rem] bg-white dark:bg-transparent">
         {items.map((item, index) => (
           <React.Fragment key={index}>
             <Link href={item.link}>
diff --git a/autogpt_platform/frontend/src/components/agptui/CreatorInfoCard.tsx b/autogpt_platform/frontend/src/components/agptui/CreatorInfoCard.tsx
index 33cdfba29c7f..c53470faa3cc 100644
--- a/autogpt_platform/frontend/src/components/agptui/CreatorInfoCard.tsx
+++ b/autogpt_platform/frontend/src/components/agptui/CreatorInfoCard.tsx
@@ -33,10 +33,10 @@ export const CreatorInfoCard: React.FC<CreatorInfoCardProps> = ({
           </AvatarFallback>
         </Avatar>
         <div className="flex w-full flex-col items-start justify-start gap-1.5">
-          <div className="font-poppins w-full text-2xl font-medium leading-8 text-neutral-900 dark:text-neutral-100 sm:text-[35px] sm:leading-10">
+          <div className="font-poppins w-full text-[35px] font-medium leading-10 text-neutral-900 dark:text-neutral-100 sm:text-[35px] sm:leading-10">
             {username}
           </div>
-          <div className="w-full font-neue text-lg font-normal leading-6 text-neutral-800 dark:text-neutral-200 sm:text-xl sm:leading-7">
+          <div className="font-geist w-full text-lg font-normal leading-6 text-neutral-800 dark:text-neutral-200 sm:text-xl sm:leading-7">
             @{handle}
           </div>
         </div>
@@ -57,7 +57,7 @@ export const CreatorInfoCard: React.FC<CreatorInfoCardProps> = ({
               {categories.map((category, index) => (
                 <div
                   key={index}
-                  className="flex items-center justify-center gap-2.5 rounded-[34px] border border-neutral-600 px-5 py-3 dark:border-neutral-400"
+                  className="flex items-center justify-center gap-2.5 rounded-[34px] border border-neutral-600 px-4 py-3 dark:border-neutral-400"
                   role="listitem"
                 >
                   <div className="font-neue text-base font-normal leading-normal text-neutral-800 dark:text-neutral-200">
@@ -77,7 +77,7 @@ export const CreatorInfoCard: React.FC<CreatorInfoCardProps> = ({
                 Average rating
               </div>
               <div className="inline-flex items-center gap-2">
-                <div className="font-neue text-lg font-semibold leading-7 text-neutral-800 dark:text-neutral-200">
+                <div className="font-geist text-[18px] font-semibold leading-[28px] text-neutral-800 dark:text-neutral-200">
                   {averageRating.toFixed(1)}
                 </div>
                 <div
@@ -93,7 +93,7 @@ export const CreatorInfoCard: React.FC<CreatorInfoCardProps> = ({
               <div className="w-full font-neue text-base font-medium leading-normal text-neutral-800 dark:text-neutral-200">
                 Number of runs
               </div>
-              <div className="font-neue text-lg font-semibold leading-7 text-neutral-800 dark:text-neutral-200">
+              <div className="font-geist text-[18px] font-semibold leading-[28px] text-neutral-800 dark:text-neutral-200">
                 {new Intl.NumberFormat().format(totalRuns)} runs
               </div>
             </div>
diff --git a/autogpt_platform/frontend/src/components/agptui/Navbar.tsx b/autogpt_platform/frontend/src/components/agptui/Navbar.tsx
index 45a17dec304e..33d3fbf42acd 100644
--- a/autogpt_platform/frontend/src/components/agptui/Navbar.tsx
+++ b/autogpt_platform/frontend/src/components/agptui/Navbar.tsx
@@ -57,7 +57,7 @@ export const Navbar = async ({ links, menuItemGroups }: NavbarProps) => {
 
   return (
     <>
-      <nav className="sticky top-0 z-50 hidden h-16 w-[1408px] items-center justify-between rounded-bl-2xl rounded-br-2xl border border-white/50 bg-white/5 py-3 pl-6 pr-3 backdrop-blur-[26px] dark:border-gray-700 dark:bg-gray-900 md:inline-flex">
+      <nav className="sticky top-0 z-50 mx-[16px] hidden h-16 w-full max-w-[1600px] items-center justify-between rounded-bl-2xl rounded-br-2xl border border-white/50 bg-white/5 py-3 pl-6 pr-3 backdrop-blur-[26px] dark:border-gray-700 dark:bg-gray-900 md:inline-flex">
         <div className="flex items-center gap-11">
           <div className="relative h-10 w-[88.87px]">
             <IconAutoGPTLogo className="h-full w-full" />
diff --git a/autogpt_platform/frontend/src/components/agptui/StoreCard.tsx b/autogpt_platform/frontend/src/components/agptui/StoreCard.tsx
index 33d744d3882e..d8e892561b80 100644
--- a/autogpt_platform/frontend/src/components/agptui/StoreCard.tsx
+++ b/autogpt_platform/frontend/src/components/agptui/StoreCard.tsx
@@ -32,7 +32,7 @@ export const StoreCard: React.FC<StoreCardProps> = ({
 
   return (
     <div
-      className="inline-flex w-full max-w-[434px] cursor-pointer flex-col items-start justify-start gap-2.5 rounded-[26px] bg-white transition-all duration-300 hover:shadow-lg dark:bg-gray-800 dark:hover:shadow-gray-700"
+      className="inline-flex w-full max-w-[434px] cursor-pointer flex-col items-start justify-start gap-2.5 rounded-[26px] bg-white transition-all duration-300 hover:shadow-lg dark:bg-transparent dark:hover:shadow-gray-700"
       onClick={handleClick}
       data-testid="store-card"
       role="button"
diff --git a/autogpt_platform/frontend/src/components/agptui/composite/AgentsSection.tsx b/autogpt_platform/frontend/src/components/agptui/composite/AgentsSection.tsx
index c0ffa8342eb7..fc52455da604 100644
--- a/autogpt_platform/frontend/src/components/agptui/composite/AgentsSection.tsx
+++ b/autogpt_platform/frontend/src/components/agptui/composite/AgentsSection.tsx
@@ -44,7 +44,7 @@ export const AgentsSection: React.FC<AgentsSectionProps> = ({
   return (
     <div className="flex flex-col items-center justify-center py-4 lg:py-8">
       <div className="w-full max-w-[1360px]">
-        <div className="mb-6 font-neue text-[23px] font-bold leading-9 tracking-tight text-[#282828] dark:text-neutral-200">
+        <div className="font-poppins decoration-skip-ink-none mb-8 text-left text-[18px] font-[600] leading-7 text-[#282828] underline-offset-[from-font] dark:text-neutral-200">
           {sectionTitle}
         </div>
         {!displayedAgents || displayedAgents.length === 0 ? (
diff --git a/autogpt_platform/frontend/src/components/ui/icons.tsx b/autogpt_platform/frontend/src/components/ui/icons.tsx
index cd6c06cbf0a9..7764c5fcc870 100644
--- a/autogpt_platform/frontend/src/components/ui/icons.tsx
+++ b/autogpt_platform/frontend/src/components/ui/icons.tsx
@@ -1098,9 +1098,13 @@ export function StarRatingIcons(avgRating: number): JSX.Element[] {
   const rating = Math.max(0, Math.min(5, avgRating));
   for (let i = 1; i <= 5; i++) {
     if (i <= rating) {
-      stars.push(<IconStarFilled key={i} className="text-black" />);
+      stars.push(
+        <IconStarFilled key={i} className="text-black dark:text-yellow-500" />,
+      );
     } else {
-      stars.push(<IconStar key={i} className="text-black" />);
+      stars.push(
+        <IconStar key={i} className="text-black dark:text-yellow-500" />,
+      );
     }
   }
   return stars;