Admin Theme Redesign (#666)

* feat: update admin ui theming Signed-off-by: Ryan Hopper-Lowe <[email protected]> * feat: theme touch ups to buttons/links * fix: make auth prompt CTAs more apparent in chat --------- Signed-off-by: Ryan Hopper-Lowe <[email protected]>
otto8-ai · Nov 22, 2024 · 043d1c8 · 043d1c8
1 parent 5246e3b
commit 043d1c8
Show file tree

Hide file tree

Showing 31 changed files with 225 additions and 170 deletions.
diff --git a/ui/admin/app/components/Typography.tsx b/ui/admin/app/components/Typography.tsx
@@ -99,7 +99,7 @@ export function TypographyPAccent({
     ...props
 }: TypographyProps<"p">) {
     return (
-        <TypographyP className={cn(`text-info-muted`, className)} {...props}>
+        <TypographyP className={cn(`text-secondary`, className)} {...props}>
             {children}
         </TypographyP>
     );

diff --git a/ui/admin/app/components/agent/Agent.tsx b/ui/admin/app/components/agent/Agent.tsx
@@ -12,7 +12,7 @@ import { PastThreads } from "~/components/agent/PastThreads";
 import { ToolForm } from "~/components/agent/ToolForm";
 import { AgentKnowledgePanel } from "~/components/knowledge";
 import { Button } from "~/components/ui/button";
-import { Card } from "~/components/ui/card";
+import { CardDescription } from "~/components/ui/card";
 import { ScrollArea } from "~/components/ui/scroll-area";
 import { useDebounce } from "~/hooks/useDebounce";
 
@@ -55,69 +55,72 @@ export function Agent({ className, onRefresh }: AgentProps) {
                     onChange={partialSetAgent}
                 />
 
-                <Card className="p-4 m-4 lg:mx-6 xl:mx-8">
+                <div className="p-4 m-4 lg:mx-6 xl:mx-8">
                     <AgentForm
                         agent={agentUpdates}
                         onChange={debouncedSetAgentInfo}
                     />
-                </Card>
+                </div>
 
-                <Card className="p-4 m-4 space-y-4 lg:mx-6 xl:mx-8">
+                <div className="p-4 m-4 space-y-4 lg:mx-6 xl:mx-8">
                     <TypographyH4 className="flex items-center gap-2 border-b pb-2">
                         <WrenchIcon className="w-5 h-5" />
                         Tools
                     </TypographyH4>
 
-                    <TypographyP className="text-muted-foreground flex items-center gap-2">
+                    <CardDescription>
                         Add tools the allow the agent to perform useful actions
                         such as searching the web, reading files, or interacting
                         with other systems.
-                    </TypographyP>
+                    </CardDescription>
 
                     <ToolForm
                         agent={agentUpdates}
                         onChange={({ tools }) =>
                             debouncedSetAgentInfo(convertTools(tools))
                         }
                     />
-                </Card>
+                </div>
 
-                <Card className="p-4 m-4 space-y-4 lg:mx-6 xl:mx-8">
+                <div className="p-4 m-4 space-y-4 lg:mx-6 xl:mx-8">
                     <TypographyH4 className="flex items-center gap-2 border-b pb-2">
                         <LibraryIcon className="w-6 h-6" />
                         Knowledge
                     </TypographyH4>
-                    <TypographyP className="text-muted-foreground flex items-center gap-2">
+                    <CardDescription>
                         Provide knowledge to the agent in the form of files,
                         website, or external links in order to give it context
                         about various topics.
-                    </TypographyP>
+                    </CardDescription>
                     <AgentKnowledgePanel
                         agentId={agent.id}
                         agent={agent}
                         updateAgent={debouncedSetAgentInfo}
                     />
-                </Card>
+                </div>
             </ScrollArea>
 
-            <footer className="flex justify-between items-center px-8 py-4 gap-4 text-muted-foreground shadow-inner">
-                {error ? (
-                    <TypographyP>Error saving agent</TypographyP>
-                ) : isUpdating ? (
-                    <TypographyP>Saving...</TypographyP>
-                ) : lastUpdated ? (
-                    <TypographyP>Saved</TypographyP>
-                ) : (
-                    <div />
-                )}
+            <footer className="flex justify-between items-center px-8 py-4 gap-4 shadow-inner">
+                <div className="text-muted-foreground">
+                    {error ? (
+                        <TypographyP>Error saving agent</TypographyP>
+                    ) : isUpdating ? (
+                        <TypographyP>Saving...</TypographyP>
+                    ) : lastUpdated ? (
+                        <TypographyP>Saved</TypographyP>
+                    ) : (
+                        <div />
+                    )}
+                </div>
 
                 <div className="flex gap-2">
                     <PastThreads
                         agentId={agent.id}
                         onThreadSelect={handleThreadSelect}
                     />
+
                     <Button
-                        variant="secondary"
+                        variant="outline"
                         className="flex gap-2"
                         onClick={() => {
                             onRefresh?.(null);

diff --git a/ui/admin/app/components/agent/PastThreads.tsx b/ui/admin/app/components/agent/PastThreads.tsx
@@ -60,15 +60,17 @@ export const PastThreads: React.FC<PastThreadsProps> = ({
 
     return (
         <Tooltip>
+            <TooltipContent>Switch threads</TooltipContent>
+
             <Popover open={open} onOpenChange={handleOpenChange}>
                 <PopoverTrigger asChild>
                     <TooltipTrigger asChild>
-                        <Button variant="secondary" size="icon">
+                        <Button variant="ghost" size="icon">
                             <ChevronUpIcon className="w-4 h-4" />
                         </Button>
                     </TooltipTrigger>
                 </PopoverTrigger>
-                <TooltipContent>Switch threads</TooltipContent>
+
                 <PopoverContent className="w-80 p-0">
                     <Command className="flex-col-reverse">
                         <CommandInput placeholder="Search threads..." />

diff --git a/ui/admin/app/components/agent/ToolEntry.tsx b/ui/admin/app/components/agent/ToolEntry.tsx
@@ -26,7 +26,7 @@ export function ToolEntry({
 
     return (
         <div className="flex items-center space-x-2 justify-between mt-1">
-            <div className="border text-sm px-3 shadow-sm rounded-md p-2 w-full flex items-center justify-between gap-2">
+            <div className="text-sm px-3 shadow-sm rounded-md p-2 w-full flex items-center justify-between gap-2">
                 <div className="flex items-center gap-2">
                     {isLoading ? (
                         <LoadingSpinner className="w-5 h-5" />
@@ -46,7 +46,7 @@ export function ToolEntry({
 
                     <Button
                         type="button"
-                        variant="secondary"
+                        variant="ghost"
                         size="icon"
                         onClick={() => onDelete()}
                     >

diff --git a/ui/admin/app/components/chat/Chatbar.tsx b/ui/admin/app/components/chat/Chatbar.tsx
@@ -1,4 +1,4 @@
-import { CircleArrowUpIcon } from "lucide-react";
+import { ArrowUpIcon } from "lucide-react";
 import { useState } from "react";
 
 import { cn } from "~/lib/utils";
@@ -34,7 +34,7 @@ export function Chatbar({ className }: ChatbarProps) {
         >
             <div className="relative flex-grow">
                 <AutosizeTextarea
-                    className="resize-none rounded-xl h-[2.5rem] line-height-[1.25rem] min-h-[2.5rem]"
+                    className="resize-none rounded-xl h-[2.5rem] line-height-[1.25rem] min-h-[2.5rem] bg-background"
                     value={input}
                     onKeyDown={(e) => {
                         if (e.key === "Enter" && !e.shiftKey) {
@@ -51,12 +51,11 @@ export function Chatbar({ className }: ChatbarProps) {
 
             <Button
                 size="icon"
-                variant="secondary"
                 className="rounded-full"
                 type="submit"
                 disabled={!input || isRunning || isInvoking}
             >
-                {isInvoking ? <LoadingSpinner /> : <CircleArrowUpIcon />}
+                {isInvoking ? <LoadingSpinner /> : <ArrowUpIcon />}
             </Button>
         </form>
     );

diff --git a/ui/admin/app/components/chat/Message.tsx b/ui/admin/app/components/chat/Message.tsx
@@ -18,7 +18,6 @@ import { ControlledInput } from "~/components/form/controlledInputs";
 import { CustomMarkdownComponents } from "~/components/react-markdown";
 import { ToolIcon } from "~/components/tools/ToolIcon";
 import { Button } from "~/components/ui/button";
-import { Card } from "~/components/ui/card";
 import {
     Dialog,
     DialogContent,
@@ -67,13 +66,13 @@ export const Message = React.memo(({ message }: MessageProps) => {
             <div
                 className={cn("flex", isUser ? "justify-end" : "justify-start")}
             >
-                <Card
-                    className={cn(
-                        message.error &&
-                            "border border-error bg-error-foreground",
-                        "break-words overflow-hidden",
-                        isUser ? "max-w-[80%] bg-blue-500" : "w-full max-w-full"
-                    )}
+                <div
+                    className={cn({
+                        "border border-error bg-error-foreground rounded-xl":
+                            message.error,
+                        "rounded-2xl max-w-[80%] bg-accent": isUser,
+                        "w-full max-w-full": !isUser,
+                    })}
                 >
                     <div className="max-w-full overflow-hidden p-4 flex gap-2 items-center pl-[20px]">
                         {toolCall?.metadata?.icon && (
@@ -92,7 +91,8 @@ export const Message = React.memo(({ message }: MessageProps) => {
                                 className={cn(
                                     "flex-auto max-w-full prose overflow-x-auto dark:prose-invert prose-pre:whitespace-pre-wrap prose-pre:break-words prose-thead:text-left prose-img:rounded-xl prose-img:shadow-lg break-words",
                                     {
-                                        "text-white prose-invert": isUser,
+                                        "text-accent-foreground prose-invert":
+                                            isUser,
                                     }
                                 )}
                                 remarkPlugins={[remarkGfm]}
@@ -131,7 +131,7 @@ export const Message = React.memo(({ message }: MessageProps) => {
                             </div>
                         )}
                     </div>
-                </Card>
+                </div>
             </div>
         </div>
     );
@@ -158,12 +158,10 @@ function PromptMessage({ prompt }: { prompt: AuthPrompt }) {
 
             {prompt.metadata.authType === "oauth" && (
                 <Link
-                    buttonVariant="secondary"
                     as="button"
                     rel="noreferrer"
                     target="_blank"
                     to={prompt.metadata.authURL}
-                    className="w-fit"
                 >
                     <ToolIcon
                         icon={prompt.metadata.icon}
@@ -179,7 +177,6 @@ function PromptMessage({ prompt }: { prompt: AuthPrompt }) {
                 <Dialog open={open} onOpenChange={setOpen}>
                     <DialogTrigger asChild>
                         <Button
-                            variant="secondary"
                             startContent={
                                 <ToolIcon
                                     icon={prompt.metadata.icon}

diff --git a/ui/admin/app/components/chat/NoMessages.tsx b/ui/admin/app/components/chat/NoMessages.tsx
@@ -18,7 +18,8 @@ export function NoMessages() {
             </p>
             <div className="flex flex-wrap justify-center gap-2">
                 <Button
-                    variant="secondary"
+                    variant="outline"
+                    shape="pill"
                     disabled={isInvoking}
                     onClick={() =>
                         handleAddMessage(
@@ -30,7 +31,8 @@ export function NoMessages() {
                     Objectives
                 </Button>
                 <Button
-                    variant="secondary"
+                    variant="outline"
+                    shape="pill"
                     disabled={isInvoking}
                     onClick={() =>
                         handleAddMessage(
@@ -42,7 +44,8 @@ export function NoMessages() {
                     Tools
                 </Button>
                 <Button
-                    variant="secondary"
+                    variant="outline"
+                    shape="pill"
                     disabled={isInvoking}
                     onClick={() =>
                         handleAddMessage(

diff --git a/ui/admin/app/components/composed/CopyText.tsx b/ui/admin/app/components/composed/CopyText.tsx
@@ -38,7 +38,7 @@ export function CopyText({
     return (
         <div
             className={cn(
-                "flex items-center gap-2 bg-secondary rounded-md w-fit overflow-hidden",
+                "flex items-center gap-2 bg-accent rounded-md w-fit overflow-hidden",
                 className
             )}
         >

diff --git a/ui/admin/app/components/composed/DataTable.tsx b/ui/admin/app/components/composed/DataTable.tsx
@@ -50,9 +50,9 @@ export function DataTable<TData, TValue>({
     });
 
     return (
-        <div className="rounded-md border max-h-full overflow-auto">
+        <div className="rounded-md max-h-full overflow-auto">
             <Table className="h-full">
-                <TableHeader className="sticky top-0 bg-secondary">
+                <TableHeader className="sticky top-0">
                     {table.getHeaderGroups().map((headerGroup) => (
                         <TableRow key={headerGroup.id} className="p-4">
                             {headerGroup.headers.map((header) => {

diff --git a/ui/admin/app/components/header/HeaderNav.tsx b/ui/admin/app/components/header/HeaderNav.tsx
@@ -32,7 +32,7 @@ export function HeaderNav() {
             )}
         >
             <div className="h-full flex-auto flex">
-                <div className="flex flex-grow border-b">
+                <div className="flex flex-grow z-20">
                     <div className="flex-grow flex justify-start items-center p-4">
                         <SidebarTrigger className="h-4 w-4" />
                         <div className="border-r h-4 mx-4" />

diff --git a/ui/admin/app/components/knowledge/AgentKnowledgePanel.tsx b/ui/admin/app/components/knowledge/AgentKnowledgePanel.tsx
@@ -433,7 +433,7 @@ export default function AgentKnowledgePanel({
                     <DropdownMenu>
                         <DropdownMenuTrigger asChild>
                             <Button
-                                variant="secondary"
+                                variant="ghost"
                                 className="flex items-center gap-2"
                             >
                                 <PlusIcon className="h-5 w-5 text-foreground" />

diff --git a/ui/admin/app/components/oauth-apps/OAuthAppTile.tsx b/ui/admin/app/components/oauth-apps/OAuthAppTile.tsx
@@ -37,7 +37,7 @@ export function OAuthAppTile({
     return (
         <Card
             className={cn("w-full flex flex-col", {
-                "border-2 border-primary": info.appOverride,
+                "border-2 border-accent-bold": info.appOverride,
             })}
         >
             <CardHeader className="flex flex-row justify-between items-start pb-2 space-y-0">
@@ -49,7 +49,7 @@ export function OAuthAppTile({
                     {info.appOverride ? (
                         <Tooltip>
                             <TooltipTrigger>
-                                <Badge>Custom</Badge>
+                                <Badge variant="bold">Custom</Badge>
                             </TooltipTrigger>
 
                             <TooltipContent>

diff --git a/ui/admin/app/components/oauth-apps/custom/CustomOAuthAppForm.tsx b/ui/admin/app/components/oauth-apps/custom/CustomOAuthAppForm.tsx
@@ -235,7 +235,7 @@ export function CustomOAuthAppForm({
                     <Button
                         className="flex-1 w-full"
                         type="button"
-                        variant="outline"
+                        variant="secondary"
                         onClick={onBack}
                     >
                         {prevLabel}

diff --git a/ui/admin/app/components/sidebar/Sidebar.tsx b/ui/admin/app/components/sidebar/Sidebar.tsx
@@ -85,10 +85,7 @@ export function AppSidebar() {
         <Sidebar collapsible="icon">
             <SidebarRail />
             <SidebarHeader
-                className={cn(
-                    "border-b h-[60px]",
-                    state === "collapsed" ? "" : "px-4"
-                )}
+                className={cn("h-[60px]", state === "collapsed" ? "" : "px-4")}
             >
                 <div className={cn("flex items-center justify-center h-full")}>
                     <OttoLogo hideText={state === "collapsed"} />

diff --git a/ui/admin/app/components/thread/ThreadMeta.tsx b/ui/admin/app/components/thread/ThreadMeta.tsx
@@ -40,7 +40,7 @@ export function ThreadMeta({
     return (
         <Card className={cn("h-full bg-0", className)}>
             <CardContent className="space-y-4 pt-6">
-                <div className="border dark:bg-secondary/25 rounded-md p-4 overflow-hidden">
+                <div className="bg-muted rounded-md p-4 overflow-hidden">
                     <table className="w-full">
                         <tbody>
                             <tr className="border-foreground/25">

diff --git a/ui/admin/app/components/tools/CreateTool.tsx b/ui/admin/app/components/tools/CreateTool.tsx
@@ -22,10 +22,6 @@ export function CreateTool({ onSuccess }: CreateToolProps) {
             });
             reset();
             onSuccess();
-        },
-        {
-            onError: (error) =>
-                console.error("Failed to create tool reference:", error),
         }
     );
 
@@ -41,7 +37,7 @@ export function CreateTool({ onSuccess }: CreateToolProps) {
                 />
             </div>
             <div className="flex justify-end">
-                <Button type="submit" variant="secondary" disabled={isLoading}>
+                <Button type="submit" disabled={isLoading}>
                     <PlusCircle className="w-4 h-4 mr-2" />
                     {isLoading ? "Creating..." : "Register Tool"}
                 </Button>

diff --git a/ui/admin/app/components/tools/ToolCatalog.tsx b/ui/admin/app/components/tools/ToolCatalog.tsx
@@ -148,7 +148,7 @@ export function ToolCatalogDialog(props: ToolCatalogProps) {
             </DialogContent>
 
             <DialogTrigger asChild>
-                <Button variant="secondary">
+                <Button variant="ghost">
                     <PlusIcon className="w-4 h-4 mr-2" /> Add Tool
                 </Button>
             </DialogTrigger>