aljaz/AgentGPT
1
0
Fork 0
mirror of https://github.com/aljazceru/AgentGPT.git synced 2025-12-17 14:04:25 +01:00
Code Issues Packages Projects Releases Wiki Activity

🔥 Styling updates

Browse Source
This commit is contained in:
Asim Shrestha
2023-04-08 09:51:17 -07:00
parent 64679f24f4
commit b1fc5bc1bb
5 changed files with 46 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/components/Badge.tsx
View File

@@ -1,4 +1,5 @@
import React from "react"; import React from "react";
import clsx from "clsx";
interface BadgeProps { interface BadgeProps {
children: React.ReactNode; children: React.ReactNode;
@@ -6,7 +7,13 @@ interface BadgeProps {
const Badge = ({ children }: BadgeProps) => { const Badge = ({ children }: BadgeProps) => {
return ( return (
<div className="rounded-full bg-[#1E88E5] px-3 py-1 text-sm font-semibold text-gray-100 transition-all hover:scale-110"> <div
className={clsx(
"mt-2 rounded-full bg-[#1E88E5] font-semibold text-gray-100 transition-all hover:scale-110",
"px-1 py-1 text-xs",
"sm:px-3 sm:py-1 sm:text-sm"
)}
>
{children} {children}
</div> </div>
); );

2
src/components/ChatWindow.tsx
View File

@@ -58,7 +58,7 @@ const MacWindowHeader = () => {
const ChatMessage = ({ message }: { message: Message }) => { const ChatMessage = ({ message }: { message: Message }) => {
return ( return (
<div className="mx-4 my-1 rounded-lg border-[2px] border-white/10 bg-white/20 p-3 font-mono hover:border-[#1E88E5]"> <div className="mx-4 my-1 rounded-lg border-[2px] border-white/10 bg-white/20 p-3 font-mono hover:border-[#1E88E5]/40">
<div className="mr-2 inline-block h-[0.9em]"> <div className="mr-2 inline-block h-[0.9em]">
{getMessageIcon(message)} {getMessageIcon(message)}
</div> </div>

4
src/components/Input.tsx
View File

@@ -17,7 +17,7 @@ const Input = ({
disabled, disabled,
}: InputProps) => { }: InputProps) => {
return ( return (
<div className="flex w-full items-center rounded-xl bg-[#3a3a3a] font-mono text-lg text-white/75 shadow-2xl"> <div className="z-10 flex w-full items-center rounded-xl bg-[#3a3a3a] font-mono text-lg text-white/75 shadow-2xl">
{left && ( {left && (
<div className="center flex items-center rounded-xl rounded-r-none border-[2px] border-r-0 border-white/10 px-5 py-3 text-lg font-semibold tracking-wider transition-all"> <div className="center flex items-center rounded-xl rounded-r-none border-[2px] border-r-0 border-white/10 px-5 py-3 text-lg font-semibold tracking-wider transition-all">
{left} {left}
@@ -25,7 +25,7 @@ const Input = ({
)} )}
<input <input
className={clsx( className={clsx(
"border:black delay-50 w-full rounded-xl border-[2px] border-white/10 bg-transparent px-2 py-3 tracking-wider outline-0 transition-all placeholder:text-white/20 hover:border-[#1E88E5]/25 focus:border-[#1E88E5]", "border:black delay-50 w-full rounded-xl border-[2px] border-white/10 bg-transparent px-2 py-3 tracking-wider outline-0 transition-all placeholder:text-white/20 hover:border-[#1E88E5]/40 focus:border-[#1E88E5]",
disabled && " cursor-not-allowed hover:border-white/10", disabled && " cursor-not-allowed hover:border-white/10",
left && "rounded-l-none" left && "rounded-l-none"
)} )}

2
src/layout/default.tsx
View File

@@ -13,7 +13,7 @@ const DefaultLayout = (props: LayoutProps) => {
return ( return (
<div className="flex min-h-screen min-h-screen flex-col bg-gradient-to-b from-[#2B2B2B] to-[#1F1F1F]"> <div className="flex min-h-screen min-h-screen flex-col bg-gradient-to-b from-[#2B2B2B] to-[#1F1F1F]">
<Head> <Head>
<title>Agent-GPT</title> <title>AgentGPT</title>
<meta name="description" content={description} /> <meta name="description" content={description} />
<link rel="icon" href="/favicon.ico" /> <link rel="icon" href="/favicon.ico" />
<meta property="og:url" content="https://agentgpt.reworkd.ai/" /> <meta property="og:url" content="https://agentgpt.reworkd.ai/" />

68
src/pages/index.tsx
View File

@@ -37,26 +37,24 @@ const Home: NextPage = () => {
<Drawer /> <Drawer />
<div <div
id="content" id="content"
className="flex h-screen w-full items-center justify-center p-2" className="flex h-screen w-full items-center justify-center p-2 px-4"
> >
<div <div
id="layout" id="layout"
className="flex h-full w-full max-w-screen-lg flex-col items-center gap-3 py-10 md:justify-center" className="flex h-full w-full max-w-screen-lg flex-col items-center justify-between gap-3 py-5 md:justify-center"
> >
<div <div
id="title" id="title"
className="relative flex flex-col items-center font-mono" className="relative flex flex-col items-center font-mono"
> >
<div className="flex flex-row items-center shadow-2xl"> <div className="flex flex-row items-start shadow-2xl">
<span className="text-6xl font-bold text-[#C0C0C0]">Agent</span> <span className="text-6xl font-bold text-[#C0C0C0]">Agent</span>
<span className="mr-5 text-6xl font-bold text-white">GPT</span> <span className="text-6xl font-bold text-white">GPT</span>
<span className="absolute right-10 top-0 block hidden md:flex"> <PopIn delay={0.5}>
<PopIn delay={0.5}> <Badge>Beta 🚀</Badge>
<Badge>Beta 🚀</Badge> </PopIn>
</PopIn>
</span>
</div> </div>
<div className="mt-1 font-mono text-[0.8em] font-bold text-white"> <div className="mt-1 text-center font-mono text-[0.7em] font-bold text-white">
Assemble, configure, and deploy autonomous AI Agents in your Assemble, configure, and deploy autonomous AI Agents in your
browser. browser.
</div> </div>
@@ -66,31 +64,33 @@ const Home: NextPage = () => {
<ChatWindow className="mt-4" messages={messages} /> <ChatWindow className="mt-4" messages={messages} />
</Expand> </Expand>
<Input <div className="mt-10 flex w-full flex-col gap-2">
left={ <Input
<> left={
<FaRobot /> <>
<span className="ml-2">Name:</span> <FaRobot />
</> <span className="ml-2">Name:</span>
} </>
value={name} }
disabled={agent != null} value={name}
onChange={(e) => setName(e.target.value)} disabled={agent != null}
placeholder="AgentGPT (Note: this field doesn't do anything right now)" onChange={(e) => setName(e.target.value)}
/> placeholder="AgentGPT (Note: this field doesn't do anything right now)"
/>
<Input <Input
left={ left={
<> <>
<FaStar /> <FaStar />
<span className="ml-2">Goal:</span> <span className="ml-2">Goal:</span>
</> </>
} }
disabled={agent != null} disabled={agent != null}
value={goalInput} value={goalInput}
onChange={(e) => setGoalInput(e.target.value)} onChange={(e) => setGoalInput(e.target.value)}
placeholder="Make the world a better place." placeholder="Make the world a better place."
/> />
</div>
<Button <Button
disabled={agent != null || name === "" || goalInput === ""} disabled={agent != null || name === "" || goalInput === ""}