From a4aeb9fdf369b1837338aa094270cbaa5830c1d2 Mon Sep 17 00:00:00 2001
From: sabaimran <narmiabas@gmail.com>
Date: Thu, 19 Dec 2024 14:02:49 -0800
Subject: [PATCH] Simplify the home page color scheme and overall design

---
 src/interface/web/app/automations/page.tsx    | 48 ++++---------------
 .../app/components/agentCard/agentCard.tsx    | 27 ++++++-----
 .../components/suggestions/suggestionCard.tsx |  3 +-
 src/interface/web/app/settings/page.tsx       |  8 ++--
 4 files changed, 28 insertions(+), 58 deletions(-)

diff --git a/src/interface/web/app/automations/page.tsx b/src/interface/web/app/automations/page.tsx
index 65f2121e..d71d96af 100644
--- a/src/interface/web/app/automations/page.tsx
+++ b/src/interface/web/app/automations/page.tsx
@@ -320,9 +320,7 @@ function AutomationsCard(props: AutomationsCardProps) {
     }
 
     return (
-        <Card
-            className={`bg-secondary h-full shadow-sm rounded-lg bg-gradient-to-b from-background to-slate-50 dark:to-gray-950 border ${styles.automationCard}`}
-        >
+        <Card className={`h-full shadow-md rounded-lg dark:bg-muted ${styles.automationCard}`}>
             <CardHeader>
                 <CardTitle className="line-clamp-2 leading-normal flex justify-between">
                     {updatedAutomationData?.subject || automation.subject}
@@ -884,13 +882,13 @@ function metadataMap(ipLocationData: LocationData, authenticatedData: UserProfil
     return (
         <div className="flex flex-wrap gap-2 items-center justify-start">
             {authenticatedData ? (
-                <span className="rounded-lg text-sm border-secondary border p-1 flex items-center shadow-sm">
+                <span className="rounded-lg text-sm border-secondary border p-1 flex items-center shadow-sm dark:bg-muted">
                     <Envelope className="h-4 w-4 mr-2 inline text-orange-500 shadow-sm" />
                     {authenticatedData.email}
                 </span>
             ) : null}
             {ipLocationData && (
-                <span className="rounded-lg text-sm border-secondary border p-1 flex items-center shadow-sm">
+                <span className="rounded-lg text-sm border-secondary border p-1 flex items-center shadow-sm dark:bg-muted">
                     <MapPinSimple className="h-4 w-4 mr-2 inline text-purple-500" />
                     {ipLocationData
                         ? `${ipLocationData.city}, ${ipLocationData.country}`
@@ -898,7 +896,7 @@ function metadataMap(ipLocationData: LocationData, authenticatedData: UserProfil
                 </span>
             )}
             {ipLocationData && (
-                <span className="rounded-lg text-sm border-secondary border p-1 flex items-center shadow-sm">
+                <span className="rounded-lg text-sm border-secondary border p-1 flex items-center shadow-sm dark:bg-muted">
                     <Clock className="h-4 w-4 mr-2 inline text-green-500" />
                     {ipLocationData ? `${ipLocationData.timezone}` : "Unknown"}
                 </span>
@@ -1039,13 +1037,13 @@ export default function Automations() {
                         <h1 className="text-3xl flex items-center">Automations</h1>
                         <div className="flex flex-wrap gap-2 items-center justify-start">
                             {authenticatedData ? (
-                                <span className="rounded-lg text-sm border-secondary border p-1 flex items-center shadow-sm">
+                                <span className="rounded-lg text-sm border-secondary border p-1 flex items-center shadow-sm dark:bg-muted">
                                     <Envelope className="h-4 w-4 mr-2 inline text-orange-500 shadow-sm" />
                                     {authenticatedData.email}
                                 </span>
                             ) : null}
                             {locationData && (
-                                <span className="rounded-lg text-sm border-secondary border p-1 flex items-center shadow-sm">
+                                <span className="rounded-lg text-sm border-secondary border p-1 flex items-center shadow-sm dark:bg-muted">
                                     <MapPinSimple className="h-4 w-4 mr-2 inline text-purple-500" />
                                     {locationData
                                         ? `${locationData.city}, ${locationData.country}`
@@ -1053,7 +1051,7 @@ export default function Automations() {
                                 </span>
                             )}
                             {locationData && (
-                                <span className="rounded-lg text-sm border-secondary border p-1 flex items-center shadow-sm">
+                                <span className="rounded-lg text-sm border-secondary border p-1 flex items-center shadow-sm dark:bg-muted">
                                     <Clock className="h-4 w-4 mr-2 inline text-green-500" />
                                     {locationData ? `${locationData.timezone}` : "Unknown"}
                                 </span>
@@ -1076,7 +1074,6 @@ export default function Automations() {
                         </AlertDescription>
                     </Alert>
                     <div className="flex justify-between items-center py-4">
-                        <h3 className="text-xl">Your Creations</h3>
                         {authenticatedData ? (
                             <AutomationComponentWrapper
                                 isMobileWidth={isMobileWidth}
@@ -1110,35 +1107,6 @@ export default function Automations() {
                             setNewAutomationData={setNewAutomationData}
                         />
                     </Suspense>
-                    {(!personalAutomations || personalAutomations.length === 0) &&
-                        allNewAutomations.length == 0 &&
-                        !isLoading && (
-                            <div className="px-4">
-                                So empty! Create your own automation to get started.
-                                <div className="mt-4">
-                                    {authenticatedData ? (
-                                        <AutomationComponentWrapper
-                                            isMobileWidth={isMobileWidth}
-                                            callToAction="Design Automation"
-                                            createNew={true}
-                                            setIsCreating={setIsCreating}
-                                            setShowLoginPrompt={setShowLoginPrompt}
-                                            setNewAutomationData={setNewAutomationData}
-                                            authenticatedData={authenticatedData}
-                                            isCreating={isCreating}
-                                            ipLocationData={locationData}
-                                        />
-                                    ) : (
-                                        <Button
-                                            onClick={() => setShowLoginPrompt(true)}
-                                            variant={"default"}
-                                        >
-                                            Design
-                                        </Button>
-                                    )}
-                                </div>
-                            </div>
-                        )}
                     {isLoading && <InlineLoading message="booting up your automations" />}
                     <div className={`${styles.automationsLayout}`}>
                         {personalAutomations &&
@@ -1165,7 +1133,7 @@ export default function Automations() {
                             />
                         ))}
                     </div>
-                    <h3 className="text-xl py-4">Try these out</h3>
+                    <h3 className="text-xl py-4">Explore</h3>
                     <div className={`${styles.automationsLayout}`}>
                         {suggestedAutomations.map((automation) => (
                             <AutomationsCard
diff --git a/src/interface/web/app/components/agentCard/agentCard.tsx b/src/interface/web/app/components/agentCard/agentCard.tsx
index 90888b27..b0371b6f 100644
--- a/src/interface/web/app/components/agentCard/agentCard.tsx
+++ b/src/interface/web/app/components/agentCard/agentCard.tsx
@@ -321,9 +321,7 @@ export function AgentCard(props: AgentCardProps) {
     }
 
     return (
-        <Card
-            className={`shadow-sm bg-gradient-to-b from-white 20% to-${props.data.color ? props.data.color : "gray"}-100/50 dark:from-[hsl(var(--background))] dark:to-${props.data.color ? props.data.color : "gray"}-950/50 rounded-xl hover:shadow-md`}
-        >
+        <Card className={`shadow-md rounded-xl hover:shadow-lg dark:bg-muted`}>
             {showLoginPrompt && (
                 <LoginPrompt
                     loginRedirectMessage={`Sign in to start chatting with ${props.data.name}`}
@@ -404,7 +402,7 @@ export function AgentCard(props: AgentCardProps) {
                                 </div>
                             )}
                             {(props.showChatButton ?? true) && (
-                                <div className="float-right">
+                                <div className="float-right ml-2">
                                     {props.userProfile ? (
                                         <Button
                                             className={`bg-[hsl(var(--background))] w-10 h-10 p-0 rounded-xl border dark:border-neutral-700 shadow-sm hover:bg-stone-100 dark:hover:bg-neutral-900`}
@@ -733,7 +731,11 @@ export function AgentModificationForm(props: AgentModificationFormProps) {
                                     memorable.
                                 </FormDescription>
                                 <FormControl>
-                                    <Input placeholder="Biologist" {...field} />
+                                    <Input
+                                        className="dark:bg-muted"
+                                        placeholder="Biologist"
+                                        {...field}
+                                    />
                                 </FormControl>
                                 <FormMessage />
                             </FormItem>
@@ -765,7 +767,7 @@ export function AgentModificationForm(props: AgentModificationFormProps) {
                                     disabled={!props.isSubscribed}
                                 >
                                     <FormControl>
-                                        <SelectTrigger className="text-left">
+                                        <SelectTrigger className="text-left dark:bg-muted">
                                             <SelectValue />
                                         </SelectTrigger>
                                     </FormControl>
@@ -825,7 +827,7 @@ export function AgentModificationForm(props: AgentModificationFormProps) {
                                 </FormDescription>
                                 <Select onValueChange={field.onChange} defaultValue={field.value}>
                                     <FormControl>
-                                        <SelectTrigger className="w-[200px]">
+                                        <SelectTrigger className="w-[200px] dark:bg-muted">
                                             <SelectValue placeholder="private" />
                                         </SelectTrigger>
                                     </FormControl>
@@ -855,7 +857,7 @@ export function AgentModificationForm(props: AgentModificationFormProps) {
                                 <FormLabel>Color</FormLabel>
                                 <Select onValueChange={field.onChange} defaultValue={field.value}>
                                     <FormControl>
-                                        <SelectTrigger className="w-[200px]">
+                                        <SelectTrigger className="w-[200px] dark:bg-muted">
                                             <SelectValue placeholder="Color" />
                                         </SelectTrigger>
                                     </FormControl>
@@ -889,7 +891,7 @@ export function AgentModificationForm(props: AgentModificationFormProps) {
                                 <FormLabel>Icon</FormLabel>
                                 <Select onValueChange={field.onChange} defaultValue={field.value}>
                                     <FormControl>
-                                        <SelectTrigger className="w-[200px]">
+                                        <SelectTrigger className="w-[200px] dark:bg-muted">
                                             <SelectValue placeholder="Icon" />
                                         </SelectTrigger>
                                     </FormControl>
@@ -930,6 +932,7 @@ export function AgentModificationForm(props: AgentModificationFormProps) {
                                 </FormDescription>
                                 <FormControl>
                                     <Textarea
+                                        className="dark:bg-muted"
                                         placeholder="You are an excellent biologist, at the top of your field in marine biology."
                                         {...field}
                                     />
@@ -953,7 +956,7 @@ export function AgentModificationForm(props: AgentModificationFormProps) {
                                     <a href="/settings">Manage data</a>.
                                 </FormDescription>
                                 <Collapsible>
-                                    <CollapsibleTrigger className="flex items-center justify-between text-sm gap-2">
+                                    <CollapsibleTrigger className="flex items-center justify-between text-sm gap-2 bg-muted p-2 rounded-lg">
                                         <CaretUpDown />
                                         {field.value && field.value.length > 0
                                             ? `${field.value.length} files selected`
@@ -1085,7 +1088,7 @@ export function AgentModificationForm(props: AgentModificationFormProps) {
                                     <b>Default:</b> No limitations.
                                 </FormDescription>
                                 <Collapsible>
-                                    <CollapsibleTrigger className="flex items-center justify-between text-sm gap-2">
+                                    <CollapsibleTrigger className="flex items-center justify-between text-sm gap-2 bg-muted p-2 rounded-lg">
                                         <CaretUpDown />
                                         {field.value && field.value.length > 0
                                             ? `${field.value.length} tools selected`
@@ -1171,7 +1174,7 @@ export function AgentModificationForm(props: AgentModificationFormProps) {
                                     <b>Default:</b> No limitations.
                                 </FormDescription>
                                 <Collapsible>
-                                    <CollapsibleTrigger className="flex items-center justify-between text-sm gap-2">
+                                    <CollapsibleTrigger className="flex items-center justify-between text-sm gap-2 bg-muted p-2 rounded-lg">
                                         <CaretUpDown />
                                         {field.value && field.value.length > 0
                                             ? `${field.value.length} modes selected`
diff --git a/src/interface/web/app/components/suggestions/suggestionCard.tsx b/src/interface/web/app/components/suggestions/suggestionCard.tsx
index 87c674d4..5f22de1f 100644
--- a/src/interface/web/app/components/suggestions/suggestionCard.tsx
+++ b/src/interface/web/app/components/suggestions/suggestionCard.tsx
@@ -13,8 +13,7 @@ interface SuggestionCardProps {
 }
 
 export default function SuggestionCard(data: SuggestionCardProps) {
-    const bgColors = converColorToBgGradient(data.color);
-    const cardClassName = `${styles.card} ${bgColors} md:w-full md:h-fit sm:w-full h-fit md:w-[200px] md:h-[180px] cursor-pointer md:p-2`;
+    const cardClassName = `${styles.card} md:w-full md:h-fit sm:w-full h-fit md:w-[200px] md:h-[180px] cursor-pointer md:p-2`;
     const descriptionClassName = `${styles.text} dark:text-white`;
 
     const cardContent = (
diff --git a/src/interface/web/app/settings/page.tsx b/src/interface/web/app/settings/page.tsx
index 98c0179a..d4785bb1 100644
--- a/src/interface/web/app/settings/page.tsx
+++ b/src/interface/web/app/settings/page.tsx
@@ -512,7 +512,7 @@ export default function SettingsView() {
     const isMobileWidth = useIsMobileWidth();
 
     const cardClassName =
-        "w-full lg:w-1/3 grid grid-flow-column border border-gray-300 shadow-md rounded-lg bg-gradient-to-b from-background to-gray-50 dark:to-gray-950 border border-opacity-50";
+        "w-full lg:w-1/3 grid grid-flow-column border border-gray-300 shadow-md rounded-lg border dark:border-none dark:bg-muted border-opacity-50";
 
     useEffect(() => {
         setUserConfig(initialUserConfig);
@@ -1293,9 +1293,9 @@ export default function SettingsView() {
                                 <div id="clients" className="text-2xl">
                                     Clients
                                 </div>
-                                <div className="cards flex flex-wrap gap-8">
+                                <div className="cards flex flex-col flex-wrap gap-8">
                                     {!userConfig.anonymous_mode && (
-                                        <Card className="grid grid-flow-column border border-gray-300 shadow-md rounded-lg bg-gradient-to-b from-background to-gray-50 dark:to-gray-950">
+                                        <Card className="grid grid-flow-column border border-gray-300 shadow-md rounded-lg dark:bg-muted dark:border-none border-opacity-50 lg:w-2/3">
                                             <CardHeader className="text-xl grid grid-flow-col grid-cols-[1fr_auto] pb-0">
                                                 <span className="flex flex-wrap">
                                                     <Key className="h-7 w-7 mr-2" />
@@ -1377,7 +1377,7 @@ export default function SettingsView() {
                                             <CardFooter className="flex flex-wrap gap-4"></CardFooter>
                                         </Card>
                                     )}
-                                    <Card className={cardClassName}>
+                                    <Card className={`${cardClassName} lg:w-2/3`}>
                                         <CardHeader className="text-xl flex flex-row">
                                             <WhatsappLogo className="h-7 w-7 mr-2" />
                                             Chat on Whatsapp