github/AutoGPT
1
1
Fork 0
mirror of https://github.com/Significant-Gravitas/AutoGPT.git synced 2026-04-08 03:00:28 -04:00
Code Issues Packages Projects Releases Wiki Activity

fix(frontend): Remove invalid font class names (#9499)

Browse Source 
There are many occurrences in the UI code that we are defining the font
through class but it refers to the invalid font-family names. This
causes the component to end up rendering the text using Times New Roman.

### Changes 🏗️

Remove manual font definition through string font-family name.

### Checklist 📋

#### For code changes:
- [ ] I have clearly listed my changes in the PR description
- [ ] I have made a test plan
- [ ] I have tested my changes according to the test plan:
  <!-- Put your test plan here: -->
  - [ ] ...

<details>
  <summary>Example test plan</summary>
  
  - [ ] Create from scratch and execute an agent with at least 3 blocks
- [ ] Import an agent from file upload, and confirm it executes
correctly
  - [ ] Upload agent to marketplace
- [ ] Import an agent from marketplace and confirm it executes correctly
  - [ ] Edit an agent from monitor, and confirm it executes correctly
</details>

#### For configuration changes:
- [ ] `.env.example` is updated or already compatible with my changes
- [ ] `docker-compose.yml` is updated or already compatible with my
changes
- [ ] I have included a list of my configuration changes in the PR
description (under **Changes**)

<details>
  <summary>Examples of configuration changes</summary>

  - Changing ports
  - Adding new services that need to communicate with each other
  - Secrets or environment variable changes
  - New or infrastructure changes such as databases
</details>
This commit is contained in:
Zamil Majdy
2025-02-20 16:18:46 +07:00
committed by GitHub
parent 296eee0b4f
commit 63005631f0
12 changed files with 31 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
autogpt_platform/frontend/src/app/layout.tsx
View File

@@ -34,7 +34,7 @@ export default async function RootLayout({
return (
<html
lang="en"
className={`${GeistSans.variable} ${GeistMono.variable} ${poppins.variable} ${inter.variable}`}
className={`${poppins.variable} ${GeistSans.variable} ${GeistMono.variable} ${inter.variable}`}
>
<body className={cn("antialiased transition-colors", inter.className)}>
<Providers

2
autogpt_platform/frontend/src/components/agptui/AgentTable.tsx
View File

@@ -109,7 +109,7 @@ export const AgentTable: React.FC<AgentTableProps> = ({
))}
</div>
) : (
<div className="py-4 text-center font-['Geist'] text-base text-neutral-600 dark:text-neutral-400">
<div className="py-4 text-center font-sans text-base text-neutral-600 dark:text-neutral-400">
No agents available. Create your first agent to get started!
</div>
)}

2
autogpt_platform/frontend/src/components/agptui/BreadCrumbs.tsx
View File

@@ -31,7 +31,7 @@ export const BreadCrumbs: React.FC<BreadCrumbsProps> = ({ items }) => {
</span>
</Link>
{index < items.length - 1 && (
<span className="font-['SF Pro'] text-center text-2xl font-normal text-black dark:text-neutral-100">
<span className="text-center text-2xl font-normal text-black dark:text-neutral-100">
/
</span>
)}

10
autogpt_platform/frontend/src/components/agptui/MobileNavBar.tsx
View File

@@ -87,7 +87,7 @@ const PopoutMenuItem: React.FC<{
{getIcon(icon)}
<div className="relative">
<div
className={`font-['Inter'] text-base font-normal leading-7 text-[#474747] dark:text-[#cfcfcf] ${isActive ? "font-semibold text-[#272727] dark:text-[#ffffff]" : "text-[#474747] dark:text-[#cfcfcf]"}`}
className={`font-inter text-base font-normal leading-7 text-[#474747] dark:text-[#cfcfcf] ${isActive ? "font-semibold text-[#272727] dark:text-[#ffffff]" : "text-[#474747] dark:text-[#cfcfcf]"}`}
>
{text}
</div>
@@ -150,7 +150,7 @@ export const MobileNavBar: React.FC<MobileNavBarProps> = ({
exit={{ opacity: 0, y: -32, transition: { duration: 0.2 } }}
className="w-screen rounded-b-2xl bg-white dark:bg-neutral-900"
>
<div className="mb-4 inline-flex items-end justify-start gap-4">
<div className="mb-4 inline-flex w-full items-end justify-start gap-4">
<Avatar className="h-14 w-14 border border-[#474747] dark:border-[#cfcfcf]">
<AvatarImage
src={avatarSrc}
@@ -160,11 +160,11 @@ export const MobileNavBar: React.FC<MobileNavBarProps> = ({
{userName?.charAt(0) || "U"}
</AvatarFallback>
</Avatar>
<div className="relative h-14 w-[153px]">
<div className="absolute left-0 top-0 font-['Inter'] text-lg font-semibold leading-7 text-[#474747] dark:text-[#cfcfcf]">
<div className="relative h-14 w-full">
<div className="absolute left-0 top-0 text-lg font-semibold leading-7 text-[#474747] dark:text-[#cfcfcf]">
{userName || "Unknown User"}
</div>
<div className="absolute left-0 top-6 font-['Inter'] text-base font-normal leading-7 text-[#474747] dark:text-[#cfcfcf]">
<div className="absolute left-0 top-6 font-inter text-base font-normal leading-7 text-[#474747] dark:text-[#cfcfcf]">
{userEmail || "No Email Set"}
</div>
</div>

2
autogpt_platform/frontend/src/components/agptui/Navbar.tsx
View File

@@ -48,7 +48,7 @@ export const Navbar = async ({ links, menuItemGroups }: NavbarProps) => {
return (
<>
<nav className="sticky top-0 z-50 mx-[16px] hidden h-16 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">
<nav className="sticky top-0 z-50 mx-[16px] hidden h-16 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" />

10
autogpt_platform/frontend/src/components/agptui/ProfilePopoutMenu.tsx
View File

@@ -102,10 +102,10 @@ export const ProfilePopoutMenu: React.FC<ProfilePopoutMenuProps> = ({
</AvatarFallback>
</Avatar>
<div className="relative h-[47px] w-[173px]">
<div className="absolute left-0 top-0 font-['Geist'] text-base font-semibold leading-7 text-white dark:text-neutral-200">
<div className="absolute left-0 top-0 font-sans text-base font-semibold leading-7 text-white dark:text-neutral-200">
{userName}
</div>
<div className="absolute left-0 top-[23px] font-['Geist'] text-base font-normal leading-normal text-white dark:text-neutral-400">
<div className="absolute left-0 top-[23px] font-sans text-base font-normal leading-normal text-white dark:text-neutral-400">
{userEmail}
</div>
</div>
@@ -129,7 +129,7 @@ export const ProfilePopoutMenu: React.FC<ProfilePopoutMenuProps> = ({
<div className="relative h-6 w-6">
{getIcon(item.icon)}
</div>
<div className="font-['Geist'] text-base font-medium leading-normal text-neutral-800 dark:text-neutral-200">
<div className="font-sans text-base font-medium leading-normal text-neutral-800 dark:text-neutral-200">
{item.text}
</div>
</Link>
@@ -145,7 +145,7 @@ export const ProfilePopoutMenu: React.FC<ProfilePopoutMenuProps> = ({
<div className="relative h-6 w-6">
{getIcon(item.icon)}
</div>
<div className="font-['Geist'] text-base font-medium leading-normal text-neutral-800 dark:text-neutral-200">
<div className="font-sans text-base font-medium leading-normal text-neutral-800 dark:text-neutral-200">
{item.text}
</div>
</div>
@@ -167,7 +167,7 @@ export const ProfilePopoutMenu: React.FC<ProfilePopoutMenuProps> = ({
<div className="relative h-6 w-6">
{getIcon(item.icon)}
</div>
<div className="font-['Geist'] text-base font-medium leading-normal text-neutral-800 dark:text-neutral-200">
<div className="font-sans text-base font-medium leading-normal text-neutral-800 dark:text-neutral-200">
{item.text}
</div>
</div>

2
autogpt_platform/frontend/src/components/agptui/ProfilePopoutMenuLogoutButton.tsx
View File

@@ -14,7 +14,7 @@ export const ProfilePopoutMenuLogoutButton = () => {
<div className="relative h-6 w-6">
<IconLogOut className="h-6 w-6" />
</div>
<div className="font-['Geist'] text-base font-medium leading-normal text-neutral-800 dark:text-neutral-200">
<div className="font-sans text-base font-medium leading-normal text-neutral-800 dark:text-neutral-200">
Log out
</div>
</div>

10
autogpt_platform/frontend/src/components/agptui/PublishAgentAwaitingReview.tsx
View File

@@ -36,11 +36,11 @@ export const PublishAgentAwaitingReview: React.FC<
<div className="absolute left-0 top-[40px] flex w-full flex-col items-center justify-start px-6 sm:top-[40px]">
<div
id="modal-title"
className="mb-4 text-center font-['Poppins'] text-xl font-semibold leading-relaxed text-neutral-900 dark:text-neutral-100 sm:mb-2 sm:text-2xl"
className="mb-4 text-center font-poppins text-xl font-semibold leading-relaxed text-neutral-900 dark:text-neutral-100 sm:mb-2 sm:text-2xl"
>
Agent is awaiting review
</div>
<div className="max-w-[280px] text-center font-['Inter'] text-sm font-normal leading-relaxed text-slate-500 dark:text-slate-400 sm:max-w-none">
<div className="max-w-[280px] text-center font-inter text-sm font-normal leading-relaxed text-slate-500 dark:text-slate-400 sm:max-w-none">
In the meantime you can check your progress on your Creator
Dashboard page
</div>
@@ -60,10 +60,10 @@ export const PublishAgentAwaitingReview: React.FC<
<div className="flex flex-1 flex-col items-center gap-8 px-6 py-6 sm:gap-6">
<div className="mt-4 flex w-full flex-col items-center gap-6 sm:mt-0 sm:gap-4">
<div className="flex flex-col items-center gap-3 sm:gap-2">
<div className="text-center font-['Geist'] text-lg font-semibold leading-7 text-neutral-800 dark:text-neutral-200">
<div className="text-center font-sans text-lg font-semibold leading-7 text-neutral-800 dark:text-neutral-200">
{agentName}
</div>
<div className="max-w-[280px] text-center font-['Geist'] text-base font-normal leading-normal text-neutral-600 dark:text-neutral-400 sm:max-w-none">
<div className="max-w-[280px] text-center font-sans text-base font-normal leading-normal text-neutral-600 dark:text-neutral-400 sm:max-w-none">
{subheader}
</div>
</div>
@@ -87,7 +87,7 @@ export const PublishAgentAwaitingReview: React.FC<
</div>
<div
className="h-[150px] w-full overflow-y-auto font-['Geist'] text-base font-normal leading-normal text-neutral-600 dark:text-neutral-400 sm:h-[180px]"
className="h-[150px] w-full overflow-y-auto font-sans text-base font-normal leading-normal text-neutral-600 dark:text-neutral-400 sm:h-[180px]"
tabIndex={0}
role="region"
aria-label="Agent description"

2
autogpt_platform/frontend/src/components/agptui/PublishAgentSelect.tsx
View File

@@ -76,7 +76,7 @@ export const PublishAgentSelect: React.FC<PublishAgentSelectProps> = ({
{agents.length === 0 ? (
<div className="inline-flex h-[370px] flex-col items-center justify-center gap-[29px] px-4 py-5 sm:px-6">
<div className="w-full text-center font-['Geist'] text-lg font-normal leading-7 text-neutral-600 dark:text-neutral-400 sm:w-[573px] sm:text-xl">
<div className="w-full text-center font-sans text-lg font-normal leading-7 text-neutral-600 dark:text-neutral-400 sm:w-[573px] sm:text-xl">
Uh-oh.. It seems like you don&apos;t have any agents in your
library.
<br />

16
autogpt_platform/frontend/src/components/agptui/PublishAgentSelectInfo.tsx
View File

@@ -220,7 +220,7 @@ export const PublishAgentInfo: React.FC<PublishAgentInfoProps> = ({
placeholder="A tagline for your agent"
value={subheader}
onChange={(e) => setSubheader(e.target.value)}
className="w-full rounded-[55px] border border-slate-200 py-2.5 pl-4 pr-14 font-['Geist'] text-base font-normal leading-normal text-slate-500 dark:border-slate-700 dark:bg-gray-700 dark:text-slate-300"
className="w-full rounded-[55px] border border-slate-200 py-2.5 pl-4 pr-14 font-sans text-base font-normal leading-normal text-slate-500 dark:border-slate-700 dark:bg-gray-700 dark:text-slate-300"
/>
</div>
@@ -237,7 +237,7 @@ export const PublishAgentInfo: React.FC<PublishAgentInfoProps> = ({
placeholder="URL-friendly name for your agent"
value={slug}
onChange={(e) => setSlug(e.target.value)}
className="w-full rounded-[55px] border border-slate-200 py-2.5 pl-4 pr-14 font-['Geist'] text-base font-normal leading-normal text-slate-500 dark:border-slate-700 dark:bg-gray-700 dark:text-slate-300"
className="w-full rounded-[55px] border border-slate-200 py-2.5 pl-4 pr-14 font-sans text-base font-normal leading-normal text-slate-500 dark:border-slate-700 dark:bg-gray-700 dark:text-slate-300"
/>
</div>
@@ -256,7 +256,7 @@ export const PublishAgentInfo: React.FC<PublishAgentInfoProps> = ({
className="rounded-md"
/>
) : (
<p className="font-['Geist'] text-sm font-normal text-neutral-600 dark:text-neutral-400">
<p className="font-sans text-sm font-normal text-neutral-600 dark:text-neutral-400">
No images yet
</p>
)}
@@ -284,7 +284,7 @@ export const PublishAgentInfo: React.FC<PublishAgentInfoProps> = ({
size="lg"
className="text-neutral-600 dark:text-neutral-300"
/>
<span className="mt-1 font-['Geist'] text-xs font-normal text-neutral-600 dark:text-neutral-300">
<span className="mt-1 font-sans text-xs font-normal text-neutral-600 dark:text-neutral-300">
Add image
</span>
</label>
@@ -325,7 +325,7 @@ export const PublishAgentInfo: React.FC<PublishAgentInfoProps> = ({
size="lg"
className="text-neutral-600 dark:text-neutral-300"
/>
<span className="mt-1 font-['Geist'] text-xs font-normal text-neutral-600 dark:text-neutral-300">
<span className="mt-1 font-sans text-xs font-normal text-neutral-600 dark:text-neutral-300">
Add image
</span>
</Button>
@@ -372,7 +372,7 @@ export const PublishAgentInfo: React.FC<PublishAgentInfoProps> = ({
placeholder="Paste a video link here"
value={youtubeLink}
onChange={(e) => setYoutubeLink(e.target.value)}
className="w-full rounded-[55px] border border-slate-200 py-2.5 pl-4 pr-14 font-['Geist'] text-base font-normal leading-normal text-slate-500 dark:border-slate-700 dark:bg-gray-700 dark:text-slate-300"
className="w-full rounded-[55px] border border-slate-200 py-2.5 pl-4 pr-14 font-sans text-base font-normal leading-normal text-slate-500 dark:border-slate-700 dark:bg-gray-700 dark:text-slate-300"
/>
</div>
@@ -387,7 +387,7 @@ export const PublishAgentInfo: React.FC<PublishAgentInfoProps> = ({
id="category"
value={category}
onChange={(e) => setCategory(e.target.value)}
className="w-full appearance-none rounded-[55px] border border-slate-200 py-2.5 pl-4 pr-5 font-['Geist'] text-base font-normal leading-normal text-slate-500 dark:border-slate-700 dark:bg-gray-700 dark:text-slate-300"
className="w-full appearance-none rounded-[55px] border border-slate-200 py-2.5 pl-4 pr-5 font-sans text-base font-normal leading-normal text-slate-500 dark:border-slate-700 dark:bg-gray-700 dark:text-slate-300"
>
<option value="">Select a category for your agent</option>
<option value="productivity">Productivity</option>
@@ -416,7 +416,7 @@ export const PublishAgentInfo: React.FC<PublishAgentInfoProps> = ({
placeholder="Describe your agent and what it does"
value={description}
onChange={(e) => setDescription(e.target.value)}
className="h-[100px] w-full resize-none rounded-2xl border border-slate-200 bg-white py-2.5 pl-4 pr-14 font-['Geist'] text-base font-normal leading-normal text-slate-900 dark:border-slate-700 dark:bg-gray-700 dark:text-slate-300"
className="h-[100px] w-full resize-none rounded-2xl border border-slate-200 bg-white py-2.5 pl-4 pr-14 font-sans text-base font-normal leading-normal text-slate-900 dark:border-slate-700 dark:bg-gray-700 dark:text-slate-300"
></textarea>
</div>
</div>

2
autogpt_platform/frontend/src/components/agptui/SearchBar.tsx
View File

@@ -52,7 +52,7 @@ export const SearchBar: React.FC<SearchBarProps> = ({
value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)}
placeholder={placeholder}
className={`flex-grow border-none bg-transparent ${textColor} font-['Geist'] text-lg font-normal leading-[2.25rem] tracking-tight md:text-xl placeholder:${placeholderColor} focus:outline-none`}
className={`flex-grow border-none bg-transparent ${textColor} font-sans text-lg font-normal leading-[2.25rem] tracking-tight md:text-xl placeholder:${placeholderColor} focus:outline-none`}
data-testid="store-search-input"
/>
</form>

2
autogpt_platform/frontend/src/components/agptui/Status.tsx
View File

@@ -67,7 +67,7 @@ export const Status: React.FC<StatusProps> = ({ status }) => {
<div
className={`h-3 w-3 ${config.dotColor} ${config.darkDotColor} rounded-full`}
/>
<div className="font-['Geist'] text-sm font-normal leading-tight text-neutral-600 dark:text-neutral-300">
<div className="font-sans text-sm font-normal leading-tight text-neutral-600 dark:text-neutral-300">
{config.text}
</div>
</div>