Fix colors, title on create agent card

src/interface/web/app/agents/page.tsx

@@ -33,6 +33,7 @@ import { SidebarInset, SidebarProvider, SidebarTrigger } from "@/components/ui/s
 import { AppSidebar } from "../components/appSidebar/appSidebar";
 import { Separator } from "@/components/ui/separator";
 import { KhojLogoType } from "../components/logo/khojLogo";
+import { DialogTitle } from "@radix-ui/react-dialog";
 
 export interface AgentData {
     slug: string;
@@ -145,7 +146,9 @@ function CreateAgentCard(props: CreateAgentCardProps) {
                     "lg:max-w-screen-lg py-4 overflow-y-scroll h-full md:h-4/6 rounded-lg flex flex-col"
                 }
             >
-                <DialogHeader>Create Agent</DialogHeader>
+                <DialogHeader>
+                    <DialogTitle>Create Agent</DialogTitle>
+                </DialogHeader>
                 {!props.userProfile && showLoginPrompt && (
                     <LoginPrompt
                         onOpenChange={setShowLoginPrompt}

src/interface/web/app/components/agentCard/agentCard.tsx

@@ -454,7 +454,9 @@ export function AgentCard(props: AgentCardProps) {
                                 <DialogHeader>
                                     <div className="flex items-center">
                                         {getIconFromIconName(props.data.icon, props.data.color)}
-                                        <p className="font-bold text-lg">{props.data.name}</p>
+                                        <p className="font-bold text-lg">
+                                            <DialogTitle>{props.data.name}</DialogTitle>
+                                        </p>
                                     </div>
                                 </DialogHeader>
                                 <div className="max-h-[60vh] overflow-y-scroll text-neutral-500 dark:text-white">
@@ -938,7 +940,7 @@ export function AgentModificationForm(props: AgentModificationFormProps) {
                                 </FormDescription>
                                 <FormControl>
                                     <Textarea
-                                        className="dark:bg-muted"
+                                        className="dark:bg-muted focus:outline-none focus-visible:border-orange-500 focus-visible:border-2"
                                         placeholder="You are an excellent biologist, at the top of your field in marine biology."
                                         {...field}
                                     />
@@ -1262,7 +1264,7 @@ export function AgentModificationForm(props: AgentModificationFormProps) {
             <ScrollArea className="h-full">
                 <form
                     onSubmit={props.form.handleSubmit(handleSubmit)}
-                    className="space-y-6 pb-4 h-full flex flex-col justify-between"
+                    className="space-y-6 pb-4 px-4 h-full flex flex-col justify-between"
                 >
                     <Tabs defaultValue="basic" value={formGroups[currentStep].tabName}>
                         <TabsList className="grid grid-cols-2 md:grid-cols-4 gap-2 h-fit">
@@ -1304,7 +1306,7 @@ export function AgentModificationForm(props: AgentModificationFormProps) {
                     )}
                 </form>
             </ScrollArea>
-            <div className="flex justify-between mt-1 left-0 right-0 bg-white p-1">
+            <div className="flex justify-between mt-1 left-0 right-0 bg-background p-1">
                 <Button
                     type="button"
                     variant={"outline"}

src/interface/web/app/components/navMenu/navMenu.tsx

@@ -104,7 +104,7 @@ export default function FooterMenu({ sideBarIsOpen }: NavMenuProps) {
                                     <Avatar
                                         className={`${sideBarIsOpen ? "h-8 w-8" : "h-6 w-6"} border-2 ${userData.is_active ? "border-yellow-500" : "border-stone-700 dark:border-stone-300"}`}
                                     >
-                                        <AvatarImage src={userData?.photo} alt="user profile" />
+                                        <AvatarImage src={userData.photo} alt="user profile" />
                                         <AvatarFallback className="bg-transparent hover:bg-muted">
                                             {userData.username[0].toUpperCase()}
                                         </AvatarFallback>

src/interface/web/app/components/suggestions/suggestionCard.tsx

@@ -3,7 +3,7 @@ import { Card, CardContent, CardDescription } from "@/components/ui/card";
 
 import styles from "./suggestions.module.css";
 import { convertSuggestionTitleToIconClass } from "./suggestionsData";
-import { ArrowLeft, ArrowRight, MagicWand, XCircle } from "@phosphor-icons/react";
+import { MagicWand, XCircle } from "@phosphor-icons/react";
 
 interface StepOneSuggestionCardProps {
     title: string;