Skip to content

Commit 4cc8616

Browse files
Abhi1992002Swiftyos
Abhi1992002
and
Swiftyos
authored
feat(store) : Small UI changes on marketplace (Significant-Gravitas#9094)
Add small ui changes on marketplace Fix - Significant-Gravitas#9035 - Significant-Gravitas#9034 - Significant-Gravitas#9033 - Significant-Gravitas#9031 - Significant-Gravitas#9029 - Significant-Gravitas#9028 - Significant-Gravitas#9027 - Significant-Gravitas#9026 - Significant-Gravitas#9025 - Significant-Gravitas#9021 - Significant-Gravitas#9020 - Significant-Gravitas#9004 - Significant-Gravitas#9003 - Significant-Gravitas#9002 - Significant-Gravitas#9001 - Significant-Gravitas#8999 - Significant-Gravitas#8998 - Significant-Gravitas#8997 - Significant-Gravitas#8996 - Significant-Gravitas#8995 - Significant-Gravitas#8994 - Significant-Gravitas#8993 - Significant-Gravitas#8991 - Significant-Gravitas#8990 - Significant-Gravitas#8989 --------- Co-authored-by: Swifty <craigswift13@gmail.com>
1 parent 44722c4 commit 4cc8616

File tree

13 files changed

+54
-37
lines changed

13 files changed

+54
-37
lines changed

‎autogpt_platform/frontend/src/app/layout.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -91,7 +91,7 @@ export default async function RootLayout({
9191
},
9292
]}
9393
/>
94-
<main className="flex-1 p-4">{children}</main>
94+
<main className="flex-1">{children}</main>
9595
<TallyPopupSimple />
9696
</div>
9797
<Toaster />

‎autogpt_platform/frontend/src/app/store/agent/[creator]/[slug]/page.tsx‎

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@ export default async function Page({
5151

5252
return (
5353
<div className="mx-auto w-screen max-w-[1360px]">
54-
<main className="px-4 md:mt-4 lg:mt-8">
54+
<main className="mt-5 px-4">
5555
<BreadCrumbs items={breadcrumbs} />
5656

5757
<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({
6969
storeListingVersionId={agent.store_listing_version_id}
7070
/>
7171
</div>
72-
<AgentImages images={[agent.agent_video, ...agent.agent_image]} />
72+
<AgentImages
73+
images={
74+
agent.agent_video
75+
? [agent.agent_video, ...agent.agent_image]
76+
: agent.agent_image
77+
}
78+
/>
7379
</div>
74-
<Separator className="my-6" />
80+
<Separator className="mb-[25px] mt-6" />
7581
<AgentsSection
7682
agents={otherAgents.agents}
7783
sectionTitle={`Other agents by ${agent.creator}`}
7884
/>
79-
<Separator className="my-6" />
85+
<Separator className="mb-[25px] mt-6" />
8086
<AgentsSection
8187
agents={similarAgents.agents}
8288
sectionTitle="Similar agents"

‎autogpt_platform/frontend/src/app/store/creator/[creator]/page.tsx‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@ export default async function Page({
4444

4545
return (
4646
<div className="mx-auto w-screen max-w-[1360px]">
47-
<main className="px-4 md:mt-4 lg:mt-8">
47+
<main className="mt-5 px-4">
4848
<BreadCrumbs
4949
items={[
5050
{ name: "Store", link: "/store" },
@@ -64,7 +64,10 @@ export default async function Page({
6464
/>
6565
</div>
6666
<div className="flex min-w-0 flex-1 flex-col gap-4 sm:gap-6 md:gap-8">
67-
<div className="font-neue text-2xl font-normal leading-normal text-neutral-900 sm:text-3xl md:text-[35px] md:leading-[45px]">
67+
<p className="font-geist text-underline-position-from-font text-decoration-skip-none text-left text-base font-medium leading-6">
68+
About
69+
</p>
70+
<div className="font-poppins text-[48px] font-normal leading-[59px] text-neutral-900 dark:text-zinc-50">
6871
{creator.description}
6972
</div>
7073
<CreatorLinks links={creator.links} />

‎autogpt_platform/frontend/src/components/agptui/AgentImageItem.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@ export const AgentImageItem: React.FC<AgentImageItemProps> = React.memo(
4747

4848
return (
4949
<div className="relative">
50-
<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]">
50+
<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]">
5151
{isValidVideoUrl(image) ? (
5252
getYouTubeVideoId(image) ? (
5353
<iframe

‎autogpt_platform/frontend/src/components/agptui/AgentImages.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ export const AgentImages: React.FC<AgentImagesProps> = ({ images }) => {
2626
);
2727

2828
return (
29-
<div className="w-full overflow-y-auto bg-white px-2 dark:bg-gray-800 lg:w-[56.25rem]">
29+
<div className="w-full overflow-y-auto bg-white px-2 dark:bg-transparent lg:w-[56.25rem]">
3030
<div className="space-y-4 sm:space-y-6 md:space-y-[1.875rem]">
3131
{images.map((image, index) => (
3232
<AgentImageItem

‎autogpt_platform/frontend/src/components/agptui/AgentInfo.tsx‎

Lines changed: 17 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { IconPlay, StarRatingIcons } from "@/components/ui/icons";
55
import { Separator } from "@/components/ui/separator";
66
import BackendAPI from "@/lib/autogpt-server-api";
77
import { useRouter } from "next/navigation";
8+
import Link from "next/link";
89
interface AgentInfoProps {
910
name: string;
1011
creator: string;
@@ -56,9 +57,12 @@ export const AgentInfo: React.FC<AgentInfoProps> = ({
5657
<div className="font-geist text-base font-normal text-neutral-800 dark:text-neutral-200 sm:text-lg lg:text-xl">
5758
by
5859
</div>
59-
<div className="font-geist text-base font-medium text-neutral-800 dark:text-neutral-200 sm:text-lg lg:text-xl">
60+
<Link
61+
href={`/store/creator/${creator}`}
62+
className="font-geist text-base font-medium text-neutral-800 hover:underline dark:text-neutral-200 sm:text-lg lg:text-xl"
63+
>
6064
{creator}
61-
</div>
65+
</Link>
6266
</div>
6367

6468
{/* Short Description */}
@@ -67,7 +71,7 @@ export const AgentInfo: React.FC<AgentInfoProps> = ({
6771
</div>
6872

6973
{/* Run Agent Button */}
70-
<div className="mb-4 w-full lg:mb-6">
74+
<div className="mb-4 w-full lg:mb-[60px]">
7175
<button
7276
onClick={handleAddToLibrary}
7377
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> = ({
8084
</div>
8185

8286
{/* Rating and Runs */}
83-
<div className="mb-4 flex w-full items-center justify-between lg:mb-6">
87+
<div className="mb-4 flex w-full items-center justify-between lg:mb-[44px]">
8488
<div className="flex items-center gap-1.5 sm:gap-2">
8589
<span className="font-geist whitespace-nowrap text-base font-semibold text-neutral-800 dark:text-neutral-200 sm:text-lg">
8690
{rating.toFixed(1)}
@@ -93,28 +97,28 @@ export const AgentInfo: React.FC<AgentInfoProps> = ({
9397
</div>
9498

9599
{/* Separator */}
96-
<Separator className="mb-4 lg:mb-6" />
100+
<Separator className="mb-4 lg:mb-[44px]" />
97101

98102
{/* Description Section */}
99-
<div className="mb-4 w-full lg:mb-6">
100-
<div className="mb-1.5 text-xs font-medium text-neutral-800 dark:text-neutral-200 sm:mb-2 sm:text-sm">
103+
<div className="mb-4 w-full lg:mb-[36px]">
104+
<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">
101105
Description
102106
</div>
103-
<div className="font-geist w-full whitespace-pre-line text-sm font-normal text-neutral-600 dark:text-neutral-300 sm:text-base">
107+
<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">
104108
{longDescription}
105109
</div>
106110
</div>
107111

108112
{/* Categories */}
109-
<div className="mb-4 flex w-full flex-col gap-1.5 sm:gap-2 lg:mb-6">
110-
<div className="text-xs font-medium text-neutral-800 dark:text-neutral-200 sm:text-sm">
113+
<div className="mb-4 flex w-full flex-col gap-1.5 sm:gap-2 lg:mb-[36px]">
114+
<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">
111115
Categories
112116
</div>
113117
<div className="flex flex-wrap gap-1.5 sm:gap-2">
114118
{categories.map((category, index) => (
115119
<div
116120
key={index}
117-
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"
121+
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]"
118122
>
119123
{category}
120124
</div>
@@ -124,10 +128,10 @@ export const AgentInfo: React.FC<AgentInfoProps> = ({
124128

125129
{/* Version History */}
126130
<div className="flex w-full flex-col gap-0.5 sm:gap-1">
127-
<div className="text-xs font-medium text-neutral-800 dark:text-neutral-200 sm:text-sm">
131+
<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">
128132
Version history
129133
</div>
130-
<div className="text-xs text-neutral-600 dark:text-neutral-400 sm:text-sm">
134+
<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">
131135
Last updated {lastUpdated}
132136
</div>
133137
<div className="text-xs text-neutral-600 dark:text-neutral-400 sm:text-sm">

‎autogpt_platform/frontend/src/components/agptui/BecomeACreator.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -26,13 +26,13 @@ export const BecomeACreator: React.FC<BecomeACreatorProps> = ({
2626
<div className="left-0 top-0 h-px w-full bg-gray-200 dark:bg-gray-700" />
2727

2828
{/* Title */}
29-
<h2 className="mb-8 mt-6 text-2xl leading-7 text-neutral-800 dark:text-neutral-200">
29+
<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">
3030
{title}
3131
</h2>
3232

3333
{/* Content Container */}
34-
<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">
35-
<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]">
34+
<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">
35+
<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">
3636
Build AI agents and share
3737
<br />
3838
<span className="text-violet-600 dark:text-violet-400">

‎autogpt_platform/frontend/src/components/agptui/BreadCrumbs.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,15 +14,15 @@ interface BreadCrumbsProps {
1414
export const BreadCrumbs: React.FC<BreadCrumbsProps> = ({ items }) => {
1515
return (
1616
<div className="flex items-center gap-4">
17-
{/*
17+
{/*
1818
Commented out for now, but keeping until we have approval to remove
1919
<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">
2020
<IconLeftArrow className="h-5 w-5 text-neutral-900 dark:text-neutral-100" />
2121
</button>
2222
<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">
2323
<IconRightArrow className="h-5 w-5 text-neutral-900 dark:text-neutral-100" />
2424
</button> */}
25-
<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">
25+
<div className="flex h-auto flex-wrap items-center justify-start gap-4 rounded-[5rem] bg-white dark:bg-transparent">
2626
{items.map((item, index) => (
2727
<React.Fragment key={index}>
2828
<Link href={item.link}>

‎autogpt_platform/frontend/src/components/agptui/CreatorInfoCard.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -33,10 +33,10 @@ export const CreatorInfoCard: React.FC<CreatorInfoCardProps> = ({
3333
</AvatarFallback>
3434
</Avatar>
3535
<div className="flex w-full flex-col items-start justify-start gap-1.5">
36-
<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">
36+
<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">
3737
{username}
3838
</div>
39-
<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">
39+
<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">
4040
@{handle}
4141
</div>
4242
</div>
@@ -57,7 +57,7 @@ export const CreatorInfoCard: React.FC<CreatorInfoCardProps> = ({
5757
{categories.map((category, index) => (
5858
<div
5959
key={index}
60-
className="flex items-center justify-center gap-2.5 rounded-[34px] border border-neutral-600 px-5 py-3 dark:border-neutral-400"
60+
className="flex items-center justify-center gap-2.5 rounded-[34px] border border-neutral-600 px-4 py-3 dark:border-neutral-400"
6161
role="listitem"
6262
>
6363
<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> = ({
7777
Average rating
7878
</div>
7979
<div className="inline-flex items-center gap-2">
80-
<div className="font-neue text-lg font-semibold leading-7 text-neutral-800 dark:text-neutral-200">
80+
<div className="font-geist text-[18px] font-semibold leading-[28px] text-neutral-800 dark:text-neutral-200">
8181
{averageRating.toFixed(1)}
8282
</div>
8383
<div
@@ -93,7 +93,7 @@ export const CreatorInfoCard: React.FC<CreatorInfoCardProps> = ({
9393
<div className="w-full font-neue text-base font-medium leading-normal text-neutral-800 dark:text-neutral-200">
9494
Number of runs
9595
</div>
96-
<div className="font-neue text-lg font-semibold leading-7 text-neutral-800 dark:text-neutral-200">
96+
<div className="font-geist text-[18px] font-semibold leading-[28px] text-neutral-800 dark:text-neutral-200">
9797
{new Intl.NumberFormat().format(totalRuns)} runs
9898
</div>
9999
</div>

‎autogpt_platform/frontend/src/components/agptui/Navbar.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,7 @@ export const Navbar = async ({ links, menuItemGroups }: NavbarProps) => {
5757

5858
return (
5959
<>
60-
<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">
60+
<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">
6161
<div className="flex items-center gap-11">
6262
<div className="relative h-10 w-[88.87px]">
6363
<IconAutoGPTLogo className="h-full w-full" />

0 commit comments

Comments
 (0)