From 97015a91ad12f669b19df4645f0d93b24848a04d Mon Sep 17 00:00:00 2001
From: Reinier van der Leer <pwuts@agpt.co>
Date: Tue, 15 Oct 2024 15:18:19 +0200
Subject: [PATCH] fix(frontend): Fix styling inconsistencies in input elements
 (#8337)

- Apply consistent border styling to `Input`, `Select`, and `Textarea`
   - Remove `rounded-xl` from node input elements

- Add `whitespace-nowrap` to `CustomNode` header category tags

---------

Co-authored-by: Zamil Majdy <zamil.majdy@agpt.co>
---
 autogpt_platform/frontend/src/app/globals.css          | 10 +++++++++-
 .../frontend/src/components/CustomNode.tsx             |  2 +-
 .../frontend/src/components/node-input-components.tsx  |  8 ++++----
 autogpt_platform/frontend/src/components/ui/input.tsx  |  2 +-
 autogpt_platform/frontend/src/components/ui/select.tsx |  2 +-
 .../frontend/src/components/ui/textarea.tsx            |  2 +-
 6 files changed, 17 insertions(+), 9 deletions(-)

diff --git a/autogpt_platform/frontend/src/app/globals.css b/autogpt_platform/frontend/src/app/globals.css
index 130a1e630bb8..7930a00b3c88 100644
--- a/autogpt_platform/frontend/src/app/globals.css
+++ b/autogpt_platform/frontend/src/app/globals.css
@@ -27,7 +27,7 @@
     --destructive: 0 84.2% 60.2%;
     --destructive-foreground: 0 0% 98%;
     --border: 240 5.9% 90%;
-    --input: 240 5.9% 90%;
+    --input: 240 5.9% 85%;
     --ring: 240 5.9% 10%;
     --radius: 0.5rem;
     --chart-1: 12 76% 61%;
@@ -72,4 +72,12 @@
   body {
     @apply bg-background text-foreground;
   }
+
+  .agpt-border-input {
+    @apply border-input focus-visible:border-gray-400 focus-visible:outline-none;
+  }
+
+  .agpt-shadow-input {
+    @apply shadow-sm focus-visible:shadow-md;
+  }
 }
diff --git a/autogpt_platform/frontend/src/components/CustomNode.tsx b/autogpt_platform/frontend/src/components/CustomNode.tsx
index c08e4a2e9715..975bc87ab721 100644
--- a/autogpt_platform/frontend/src/components/CustomNode.tsx
+++ b/autogpt_platform/frontend/src/components/CustomNode.tsx
@@ -646,7 +646,7 @@ export function CustomNode({
           <Badge
             key={category.category}
             variant="outline"
-            className={`mr-5 ${getPrimaryCategoryColor([category])} rounded-xl border border-gray-300 opacity-50`}
+            className={`mr-5 ${getPrimaryCategoryColor([category])} whitespace-nowrap rounded-xl border border-gray-300 opacity-50`}
           >
             {beautifyString(category.category.toLowerCase())}
           </Badge>
diff --git a/autogpt_platform/frontend/src/components/node-input-components.tsx b/autogpt_platform/frontend/src/components/node-input-components.tsx
index a55fa0902cd1..f2243375962b 100644
--- a/autogpt_platform/frontend/src/components/node-input-components.tsx
+++ b/autogpt_platform/frontend/src/components/node-input-components.tsx
@@ -459,7 +459,7 @@ const NodeKeyValueInput: FC<{
           </div>
         ))}
         <Button
-          className="rounded-xl bg-gray-200 font-normal text-black hover:text-white"
+          className="bg-gray-200 font-normal text-black hover:text-white"
           disabled={
             keyValuePairs.length > 0 &&
             !keyValuePairs[keyValuePairs.length - 1].key
@@ -567,7 +567,7 @@ const NodeArrayInput: FC<{
         );
       })}
       <Button
-        className="w-[183p] rounded-xl bg-gray-200 font-normal text-black hover:text-white"
+        className="w-[183p] bg-gray-200 font-normal text-black hover:text-white"
         onClick={() =>
           handleInputChange(selfKey, [...entries, isItemObject ? {} : ""])
         }
@@ -633,7 +633,7 @@ const NodeStringInput: FC<{
               schema?.placeholder || `Enter ${beautifyString(displayName)}`
             }
             onBlur={(e) => handleInputChange(selfKey, e.target.value)}
-            className="rounded-xl pr-8 read-only:cursor-pointer read-only:text-gray-500"
+            className="pr-8 read-only:cursor-pointer read-only:text-gray-500"
           />
           <Button
             variant="ghost"
@@ -685,7 +685,7 @@ export const NodeTextBoxInput: FC<{
             schema?.placeholder || `Enter ${beautifyString(displayName)}`
           }
           onChange={(e) => handleInputChange(selfKey, e.target.value)}
-          className="h-full w-full resize-none overflow-hidden rounded-xl border-none bg-transparent text-lg text-black outline-none"
+          className="h-full w-full resize-none overflow-hidden border-none bg-transparent text-lg text-black outline-none"
           style={{
             fontSize: "min(1em, 16px)",
             lineHeight: "1.2",
diff --git a/autogpt_platform/frontend/src/components/ui/input.tsx b/autogpt_platform/frontend/src/components/ui/input.tsx
index 0bdd83b99144..a7a7e50c4ead 100644
--- a/autogpt_platform/frontend/src/components/ui/input.tsx
+++ b/autogpt_platform/frontend/src/components/ui/input.tsx
@@ -11,7 +11,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
       <input
         type={type}
         className={cn(
-          "flex h-9 w-full rounded-md border border-gray-300 bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-gray-500 focus-visible:border-gray-400 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50",
+          "agpt-border-input agpt-shadow-input flex h-9 w-full rounded-md border bg-transparent px-3 py-1 text-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-gray-500 disabled:cursor-not-allowed disabled:opacity-50 dark:placeholder:text-gray-400",
           type == "file" ? "pb-0.5 pt-1.5" : "", // fix alignment
           className,
         )}
diff --git a/autogpt_platform/frontend/src/components/ui/select.tsx b/autogpt_platform/frontend/src/components/ui/select.tsx
index 5438548e0492..30b6da2084da 100644
--- a/autogpt_platform/frontend/src/components/ui/select.tsx
+++ b/autogpt_platform/frontend/src/components/ui/select.tsx
@@ -24,7 +24,7 @@ const SelectTrigger = React.forwardRef<
   <SelectPrimitive.Trigger
     ref={ref}
     className={cn(
-      "flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-neutral-200 bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-white placeholder:text-neutral-500 focus:outline-none focus:ring-1 focus:ring-neutral-950 disabled:cursor-not-allowed disabled:opacity-50 dark:border-neutral-800 dark:ring-offset-neutral-950 dark:placeholder:text-neutral-400 dark:focus:ring-neutral-300 [&>span]:line-clamp-1",
+      "agpt-border-input agpt-shadow-input flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border bg-transparent px-3 py-2 text-sm ring-offset-white placeholder:text-neutral-500 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 data-[state=open]:border-gray-400 dark:placeholder:text-neutral-400 [&>span]:line-clamp-1",
       className,
     )}
     {...props}
diff --git a/autogpt_platform/frontend/src/components/ui/textarea.tsx b/autogpt_platform/frontend/src/components/ui/textarea.tsx
index 9f0057345238..221f6a243ce0 100644
--- a/autogpt_platform/frontend/src/components/ui/textarea.tsx
+++ b/autogpt_platform/frontend/src/components/ui/textarea.tsx
@@ -10,7 +10,7 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
     return (
       <textarea
         className={cn(
-          "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+          "agpt-border-input flex min-h-[80px] w-full rounded-md border bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
           className,
         )}
         ref={ref}