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

feat(autogpt_builder): swapping to white theme for the layout (#7358)

Browse Source 
* reverts dark theme for now

* change "Show/Hide nodes" button to be "Icon"

* swap over to light mode + fix sizing

* fix color for agent name + description text

* update icon
This commit is contained in:
Bently
2024-07-10 17:01:07 +01:00
committed by GitHub
parent d6cbb48609
commit 14ddb915bf
8 changed files with 47 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
rnd/autogpt_builder/package.json
View File

@@ -16,6 +16,7 @@
"class-variance-authority": "^0.7.0",
"clsx": "^2.1.1",
"dotenv": "^16.4.5",
"lucide-react": "^0.407.0",
"next": "14.2.4",
"next-themes": "^0.3.0",
"react": "^18",

4
rnd/autogpt_builder/src/app/build/page.tsx
View File

@@ -7,7 +7,7 @@ export default function Home() {
return (
<div className="flex flex-col items-center px-12">
<div className="z-10 w-full items-center justify-between font-mono text-sm lg:flex">
<p className="fixed left-0 top-0 flex w-full justify-center border-b border-gray-300 bg-gradient-to-b from-zinc-200 pb-6 pt-8 backdrop-blur-2xl dark:border-neutral-800 dark:bg-zinc-800/30 dark:from-inherit lg:static lg:w-auto lg:rounded-xl lg:border lg:bg-gray-200 lg:p-4 lg:dark:bg-zinc-800/30">
<p className="fixed left-0 top-0 flex w-full justify-center border-b border-gray-600 bg-gradient-to-b from-zinc-200 pb-6 pt-8 backdrop-blur-2xl dark:border-neutral-900 dark:bg-zinc-900 dark:from-inherit lg:static lg:w-auto lg:rounded-xl lg:border lg:bg-gray-200 lg:p-4 lg:dark:bg-zinc-800/30">
Get started by adding a&nbsp;
<code className="font-mono font-bold">node</code>
</p>
@@ -22,7 +22,7 @@ export default function Home() {
>
By{" "}
<Image
src="/autogpt_logo_light.png"
src="/autogpt_logo_dark.svg"
alt="AutoGPT Logo"
width={100}
height={24}

7
rnd/autogpt_builder/src/app/layout.tsx
View File

@@ -25,7 +25,7 @@ function ThemeProvider({ children, ...props }: ThemeProviderProps) {
}
const NavBar = () => (
<nav className="bg-background p-4 flex justify-between items-center">
<nav className="bg-gray-200 p-4 flex justify-between items-center shadow">
<div className="flex space-x-4">
<Link href="/monitor" className={buttonVariants({ variant: "ghost" })}>Monitor</Link>
<Link href="/build" className={buttonVariants({ variant: "ghost" })}>Build</Link>
@@ -61,11 +61,10 @@ export default function RootLayout({
<body className={inter.className}>
<ThemeProvider
attribute="class"
defaultTheme="system"
enableSystem
defaultTheme="light"
disableTransitionOnChange
>
<div className="min-h-screen bg-background text-foreground">
<div className="min-h-screen bg-gray-200 text-gray-900">
<NavBar />
<main className="container mx-auto p-4">
{children}

28
rnd/autogpt_builder/src/components/Flow.tsx
View File

@@ -19,6 +19,8 @@ import AutoGPTServerAPI, { Block, Flow } from '@/lib/autogpt_server_api';
import { ObjectSchema } from '@/lib/types';
import { Button } from './ui/button';
import { Input } from './ui/input';
import { ChevronRight, ChevronLeft } from "lucide-react";
type CustomNodeData = {
blockType: string;
@@ -409,18 +411,20 @@ const FlowEditor: React.FC<{ flowID?: string; className?: string }> = ({
return (
<div className={className}>
<Button
onClick={toggleSidebar}
style={{
position: 'absolute',
left: isSidebarOpen ? '260px' : '10px',
top: '10px',
zIndex: 10000,
transition: 'left 0.3s'
}}
>
{isSidebarOpen ? 'Hide Sidebar' : 'Show Sidebar'}
</Button>
<Button
variant="outline"
size="icon"
onClick={toggleSidebar}
style={{
position: 'fixed',
left: isSidebarOpen ? '350px' : '10px',
zIndex: 10000,
backgroundColor: 'black',
color: 'white',
}}
>
{isSidebarOpen ? <ChevronLeft className="h-4 w-4" /> : <ChevronRight className="h-4 w-4" />}
</Button>
<Sidebar isOpen={isSidebarOpen} availableNodes={availableNodes} addNode={addNode} />
<ReactFlow
nodes={nodes}

2
rnd/autogpt_builder/src/components/ModalComponent.tsx
View File

@@ -30,7 +30,7 @@ const ModalComponent: FC<ModalProps> = ({ isOpen, onClose, onSave, value }) => {
return (
<div className="modal-overlay">
<div className="modal dark-theme">
<div className="modal">
<center><h1>Enter input text</h1></center>
<Textarea
className="modal-textarea"

21
rnd/autogpt_builder/src/components/customnode.css
View File

@@ -2,8 +2,8 @@
padding: 15px;
border: 2px solid #fff;
border-radius: 12px;
background: #2c2c2c;
color: #e0e0e0;
background: #ffffff;
color: #000000;
width: 500px;
box-sizing: border-box;
transition: background-color 0.3s ease-in-out;
@@ -25,7 +25,7 @@
background: transparent;
border: none;
cursor: pointer;
color: #e0e0e0;
color: #000000;
}
.node-content {
@@ -42,7 +42,7 @@
}
.handle-label {
color: #e0e0e0;
color: #000000;
margin-left: 10px;
margin-right: 10px;
}
@@ -72,9 +72,8 @@
padding: 5px;
width: 325px;
border-radius: 4px;
border: 1px solid #555;
background: #444;
color: #e0e0e0;
background: #d1d1d1;
color: #000000;
cursor: pointer;
word-break: break-all;
white-space: nowrap;
@@ -154,7 +153,7 @@
.node-properties {
margin-top: 5px;
margin-bottom: 5px;
background: #444;
background: #d1d1d1;
padding: 10px;
border-radius: 10px;
width: 325px;
@@ -168,7 +167,7 @@
.object-input {
margin-left: 10px;
border-left: 1px solid #555;
border-left: 1px solid #d1d1d1;
padding-left: 10px;
}
@@ -221,7 +220,3 @@
.custom-node {
transition: all 0.3s ease-in-out;
}
.dark-theme {
@apply dark:border-gray-800 dark:bg-gray-950;
}

25
rnd/autogpt_builder/src/components/flow.css
View File

@@ -17,8 +17,8 @@ code {
}
button {
background-color: #444;
color: #e0e0e0;
background-color: #ffffff;
color: #000000;
padding: 10px;
border: none;
border-radius: 4px;
@@ -31,8 +31,8 @@ button:hover {
}
input, textarea {
background-color: #333;
color: #e0e0e0;
background-color: #ffffff;
color: #000000;
border: 1px solid #555;
padding: 8px;
border-radius: 4px;
@@ -53,11 +53,11 @@ input::placeholder, textarea::placeholder {
bottom: auto;
margin-right: -50%;
transform: translate(-50%, -50%);
background: #333;
background: #ffffff;
padding: 20px;
border: 1px solid #ccc;
border-radius: 4px;
color: #e0e0e0;
color: #000000;
}
.overlay {
@@ -92,8 +92,8 @@ input::placeholder, textarea::placeholder {
left: -600px;
width: 350px;
height: 100%;
background-color: #333;
color: #fff;
background-color: #ffffff;
color: #000000;
padding: 20px;
transition: left 0.3s ease;
z-index: 1000;
@@ -116,9 +116,10 @@ input::placeholder, textarea::placeholder {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #444;
background-color: #e2e2e2;
padding: 10px;
border-radius: 4px;
margin-bottom: 10px;
border-radius: 10px;
cursor: grab;
}
@@ -152,7 +153,3 @@ input::placeholder, textarea::placeholder {
.flow-controls.open {
transform: translateX(350px);
}
.dark-theme {
@apply dark:border-gray-800 dark:bg-gray-950;
}

12
rnd/autogpt_builder/src/components/modal.css
View File

@@ -4,7 +4,7 @@
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.6);
background: rgba(255, 255, 255, 0.6);
display: flex;
justify-content: center;
align-items: center;
@@ -23,7 +23,9 @@
height: 200px;
padding: 10px;
border-radius: 4px;
border: 1px solid #ccc;
border: 1px solid #dfdfdf;
color: #000000;
background-color: #dfdfdf;
}
.modal-actions {
@@ -31,8 +33,4 @@
justify-content: flex-end;
gap: 10px;
margin-top: 10px;
}
.dark-theme {
@apply dark:border-gray-800 dark:bg-gray-950;
}
}