feat(builder): Apply standard theming for shadCn and centralize provi…

…ders (Significant-Gravitas#7622)

rnd/autogpt_builder/src/app/globals.css

@@ -7,3 +7,60 @@
     text-wrap: balance;
   }
 }
+
+
+
+:root  {
+  --background: 180 100% 95%;
+  --foreground: 180 5% 0%;
+  --card: 180 50% 90%;
+  --card-foreground: 180 5% 10%;
+  --popover: 180 100% 95%;
+  --popover-foreground: 180 100% 0%;
+  --primary: 180 76.5% 30%;
+  --primary-foreground: 0 0% 100%;
+  --secondary: 180 30% 70%;
+  --secondary-foreground: 0 0% 0%;
+  --muted: 142 30% 85%;
+  --muted-foreground: 180 5% 35%;
+  --accent: 142 30% 80%;
+  --accent-foreground: 180 5% 10%;
+  --destructive: 0 100% 30%;
+  --destructive-foreground: 180 5% 90%;
+  --border: 180 30% 50%;
+  --input: 180 30% 18%;
+  --ring: 180 76.5% 30%;
+  --radius: 0.5rem;
+}
+.dark  {
+  --background: 180 50% 5%;
+  --foreground: 180 5% 90%;
+  --card: 180 50% 0%;
+  --card-foreground: 180 5% 90%;
+  --popover: 180 50% 5%;
+  --popover-foreground: 180 5% 90%;
+  --primary: 180 76.5% 30%;
+  --primary-foreground: 0 0% 100%;
+  --secondary: 180 30% 10%;
+  --secondary-foreground: 0 0% 100%;
+  --muted: 142 30% 15%;
+  --muted-foreground: 180 5% 60%;
+  --accent: 142 30% 15%;
+  --accent-foreground: 180 5% 90%;
+  --destructive: 0 100% 30%;
+  --destructive-foreground: 180 5% 90%;
+  --border: 180 30% 18%;
+  --input: 180 30% 18%;
+  --ring: 180 76.5% 30%;
+  --radius: 0.5rem;
+}
+
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}

rnd/autogpt_builder/src/app/layout.tsx

@@ -1,10 +1,8 @@
 import React from 'react';
 import type { Metadata } from "next";
-import { ThemeProvider as NextThemeProvider } from "next-themes";
-import { type ThemeProviderProps } from "next-themes/dist/types";
 import { Inter } from "next/font/google";
 import Link from "next/link";
-import { CubeIcon, Pencil1Icon, ReaderIcon, TimerIcon } from "@radix-ui/react-icons";
+import { Pencil1Icon, TimerIcon } from "@radix-ui/react-icons";
 
 import "./globals.css";
 
@@ -13,6 +11,7 @@ import { Button, buttonVariants } from "@/components/ui/button";
 import {
   DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger
 } from "@/components/ui/dropdown-menu";
+import { Providers } from "@/app/providers";
 
 const inter = Inter({ subsets: ["latin"] });
 
@@ -21,60 +20,57 @@ export const metadata: Metadata = {
   description: "Your one stop shop to creating AI Agents",
 };
 
-function ThemeProvider({ children, ...props }: ThemeProviderProps) {
-  return <NextThemeProvider {...props}>{children}</NextThemeProvider>
-}
-
 const NavBar = () => (
-  <nav className="bg-white dark:bg-slate-800 p-4 flex justify-between items-center shadow">
-    <div className="flex space-x-4">
-      <Link href="/monitor" className={buttonVariants({ variant: "ghost" })}>
-        <TimerIcon className="mr-1" /> Monitor
-      </Link>
-      <Link href="/build" className={buttonVariants({ variant: "ghost" })}>
-        <Pencil1Icon className="mr-1" /> Build
-      </Link>
-    </div>
-    <DropdownMenu>
-      <DropdownMenuTrigger asChild>
-        <Button variant="ghost" className="h-8 w-8 rounded-full">
-          <Avatar>
-            <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
-            <AvatarFallback>CN</AvatarFallback>
-          </Avatar>
-        </Button>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent align="end">
-        <DropdownMenuItem>Profile</DropdownMenuItem>
-        <DropdownMenuItem>Settings</DropdownMenuItem>
-        <DropdownMenuItem>Switch Workspace</DropdownMenuItem>
-        <DropdownMenuItem>Log out</DropdownMenuItem>
-      </DropdownMenuContent>
-    </DropdownMenu>
-  </nav>
+    <nav className="bg-white dark:bg-slate-800 p-4 flex justify-between items-center shadow">
+        <div className="flex space-x-4">
+            <Link href="/monitor" className={buttonVariants({ variant: "ghost" })}>
+                <TimerIcon className="mr-1" /> Monitor
+            </Link>
+            <Link href="/build" className={buttonVariants({ variant: "ghost" })}>
+                <Pencil1Icon className="mr-1" /> Build
+            </Link>
+        </div>
+        <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+                <Button variant="ghost" className="h-8 w-8 rounded-full">
+                    <Avatar>
+                        <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
+                        <AvatarFallback>CN</AvatarFallback>
+                    </Avatar>
+                </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end">
+                <DropdownMenuItem>Profile</DropdownMenuItem>
+                <DropdownMenuItem>Settings</DropdownMenuItem>
+                <DropdownMenuItem>Switch Workspace</DropdownMenuItem>
+                <DropdownMenuItem>Log out</DropdownMenuItem>
+            </DropdownMenuContent>
+        </DropdownMenu>
+    </nav>
 );
-
 export default function RootLayout({
-  children,
+ children,
 }: Readonly<{
   children: React.ReactNode;
 }>) {
   return (
-    <html lang="en">
+      <html lang="en">
       <body className={inter.className}>
-        <ThemeProvider
+      <Providers
           attribute="class"
           defaultTheme="light"
+          // Feel free to remove this line if you want to use the system theme by default
+          // enableSystem
           disableTransitionOnChange
-        >
-          <div className="min-h-screen bg-gray-200 text-gray-900">
-            <NavBar />
-            <main className="mx-auto p-4">
-              {children}
-            </main>
-          </div>
-        </ThemeProvider>
+      >
+        <div className="min-h-screen bg-gray-200 text-gray-900">
+          <NavBar />
+          <main className="mx-auto p-4">
+            {children}
+          </main>
+        </div>
+      </Providers>
       </body>
-    </html>
+      </html>
   );
 }

rnd/autogpt_builder/src/app/providers.tsx

@@ -0,0 +1,14 @@
+'use client'
+
+import * as React from 'react'
+import { ThemeProvider as NextThemesProvider } from 'next-themes'
+import { ThemeProviderProps } from 'next-themes/dist/types'
+import { TooltipProvider } from '@/components/ui/tooltip'
+
+export function Providers({ children, ...props }: ThemeProviderProps) {
+    return (
+        <NextThemesProvider {...props}>
+            <TooltipProvider>{children}</TooltipProvider>
+        </NextThemesProvider>
+    )
+}

rnd/autogpt_builder/tailwind.config.ts

@@ -15,21 +15,65 @@ const config = {
       },
     },
     extend: {
-      keyframes: {
-        "accordion-down": {
-          from: { height: "0" },
-          to: { height: "var(--radix-accordion-content-height)" },
+      fontFamily: {
+        sans: ['var(--font-geist-sans)'],
+        mono: ['var(--font-geist-mono)']
+      },
+      colors: {
+        border: 'hsl(var(--border))',
+        input: 'hsl(var(--input))',
+        ring: 'hsl(var(--ring))',
+        background: 'hsl(var(--background))',
+        foreground: 'hsl(var(--foreground))',
+        primary: {
+          DEFAULT: 'hsl(var(--primary))',
+          foreground: 'hsl(var(--primary-foreground))'
+        },
+        secondary: {
+          DEFAULT: 'hsl(var(--secondary))',
+          foreground: 'hsl(var(--secondary-foreground))'
+        },
+        destructive: {
+          DEFAULT: 'hsl(var(--destructive))',
+          foreground: 'hsl(var(--destructive-foreground))'
+        },
+        muted: {
+          DEFAULT: 'hsl(var(--muted))',
+          foreground: 'hsl(var(--muted-foreground))'
+        },
+        accent: {
+          DEFAULT: 'hsl(var(--accent))',
+          foreground: 'hsl(var(--accent-foreground))'
         },
-        "accordion-up": {
-          from: { height: "var(--radix-accordion-content-height)" },
-          to: { height: "0" },
+        popover: {
+          DEFAULT: 'hsl(var(--popover))',
+          foreground: 'hsl(var(--popover-foreground))'
         },
+        card: {
+          DEFAULT: 'hsl(var(--card))',
+          foreground: 'hsl(var(--card-foreground))'
+        }
       },
-      animation: {
-        "accordion-down": "accordion-down 0.2s ease-out",
-        "accordion-up": "accordion-up 0.2s ease-out",
+      borderRadius: {
+        lg: 'var(--radius)',
+        md: 'calc(var(--radius) - 2px)',
+        sm: 'calc(var(--radius) - 4px)'
       },
-    },
+      keyframes: {
+        'accordion-down': {
+          from: { height: '0' },
+          to: { height: 'var(--radix-accordion-content-height)' }
+        },
+        'accordion-up': {
+          from: { height: 'var(--radix-accordion-content-height)' },
+          to: { height: '0' }
+        }
+      },
+      animation: {
+        'accordion-down': 'accordion-down 0.2s ease-out',
+        'accordion-up': 'accordion-up 0.2s ease-out'
+      }
+    }
   },
   plugins: [require("tailwindcss-animate")],
 } satisfies Config;