From 9ccd7e4fb3b15f1a13bfa59907b7be04fc690fa1 Mon Sep 17 00:00:00 2001
From: Cristhian Zanforlin Lousa <cristhian.lousa@gmail.com>
Date: Tue, 13 Jun 2023 21:03:25 -0300
Subject: [PATCH] adding background muted and subtitle texts changes

---
 .../components/codeAreaComponent/index.tsx    |  2 +-
 .../src/components/floatComponent/index.tsx   | 19 +++++++++++++++++--
 .../src/components/inputComponent/index.tsx   | 16 ++++++++++++----
 .../components/inputListComponent/index.tsx   |  3 ++-
 .../src/components/intComponent/index.tsx     | 12 ++++++++++--
 .../components/textAreaComponent/index.tsx    |  2 +-
 src/frontend/src/constants.tsx                | 17 ++++++++++-------
 src/frontend/src/modals/ApiModal/index.tsx    |  2 +-
 .../src/modals/EditNodeModal/index.tsx        |  6 +++---
 .../src/modals/codeAreaModal/index.tsx        |  2 +-
 src/frontend/src/modals/exportModal/index.tsx |  2 +-
 .../src/modals/genericModal/index.tsx         |  2 +-
 src/frontend/src/modals/importModal/index.tsx |  8 ++++----
 .../extraSidebarComponent/index.tsx           |  2 +-
 src/frontend/src/utils.ts                     |  2 +-
 15 files changed, 66 insertions(+), 31 deletions(-)

diff --git a/src/frontend/src/components/codeAreaComponent/index.tsx b/src/frontend/src/components/codeAreaComponent/index.tsx
index b1c907998..6f4af1635 100644
--- a/src/frontend/src/components/codeAreaComponent/index.tsx
+++ b/src/frontend/src/components/codeAreaComponent/index.tsx
@@ -45,7 +45,7 @@ export default function CodeAreaComponent({
                 (disabled ? " bg-gray-200" : "")
           }
         >
-          {myValue !== "" ? myValue : "Text empty"}
+          {myValue !== "" ? myValue : "Type something..."}
         </span>
         <button
           onClick={() => {
diff --git a/src/frontend/src/components/floatComponent/index.tsx b/src/frontend/src/components/floatComponent/index.tsx
index b27317022..30441443e 100644
--- a/src/frontend/src/components/floatComponent/index.tsx
+++ b/src/frontend/src/components/floatComponent/index.tsx
@@ -12,6 +12,10 @@ export default function FloatComponent({
   const [myValue, setMyValue] = useState(value ?? "");
   const { setDisableCopyPaste } = useContext(TabsContext);
 
+  const step = 0.1;
+  const min = 0;
+  const max = 1;
+
   useEffect(() => {
     if (disabled) {
       setMyValue("");
@@ -32,11 +36,22 @@ export default function FloatComponent({
           if (disableCopyPaste) setDisableCopyPaste(false);
         }}
         type="number"
+        step={step}
+        min={min}
+        onInput={(e: React.ChangeEvent<HTMLInputElement>) => {
+          if (e.target.value < min.toString()) {
+            e.target.value = min.toString();
+          }
+          if (e.target.value > max.toString()) {
+            e.target.value = max.toString();
+          }
+        }}
+        max={max}
         value={myValue}
         className={
           editNode
-            ? "text-center arrow-hide placeholder:text-center border-0 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200"
-            : "block w-full form-input dark:bg-gray-900 arrow-hide dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 sm:text-sm" +
+            ? "focus:placeholder-transparent text-center placeholder:text-center border-0 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200"
+            : "focus:placeholder-transparent block w-full form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 sm:text-sm" +
               (disabled ? " bg-gray-200 dark:bg-gray-700" : "")
         }
         placeholder={
diff --git a/src/frontend/src/components/inputComponent/index.tsx b/src/frontend/src/components/inputComponent/index.tsx
index 4db9cc1bd..8c3263ead 100644
--- a/src/frontend/src/components/inputComponent/index.tsx
+++ b/src/frontend/src/components/inputComponent/index.tsx
@@ -45,11 +45,11 @@ export default function InputComponent({
           if (disableCopyPaste) setDisableCopyPaste(false);
         }}
         className={classNames(
-          "block w-full pr-12 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm",
+          "block w-full pr-12 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm focus:placeholder-transparent",
           disabled ? " bg-gray-200 dark:bg-gray-700" : "",
           password && !pwdVisible && myValue !== "" ? "password" : "",
           editNode
-            ? "placeholder:text-center border-0 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200 text-center"
+            ? "border-0 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200 text-center"
             : "ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
           password && editNode ? "pr-8" : "pr-3"
         )}
@@ -78,7 +78,11 @@ export default function InputComponent({
                 viewBox="0 0 24 24"
                 strokeWidth={1.5}
                 stroke="currentColor"
-                className="w-5 h-5"
+                className={classNames(
+                  editNode
+                    ? "w-5 h-5 absolute bottom-0.5 right-2"
+                    : "w-5 h-5 absolute bottom-2 right-3"
+                )}
               >
                 <path
                   strokeLinecap="round"
@@ -93,7 +97,11 @@ export default function InputComponent({
                 viewBox="0 0 24 24"
                 strokeWidth={1.5}
                 stroke="currentColor"
-                className="w-5 h-5"
+                className={classNames(
+                  editNode
+                    ? "w-5 h-5 absolute bottom-0.5 right-2"
+                    : "w-5 h-5 absolute bottom-2 right-3"
+                )}
               >
                 <path
                   strokeLinecap="round"
diff --git a/src/frontend/src/components/inputListComponent/index.tsx b/src/frontend/src/components/inputListComponent/index.tsx
index 5f5e1f04e..0eadcd78d 100644
--- a/src/frontend/src/components/inputListComponent/index.tsx
+++ b/src/frontend/src/components/inputListComponent/index.tsx
@@ -34,7 +34,8 @@ export default function InputListComponent({
               editNode
                 ? "h-7 truncate cursor-pointer text-center placeholder:text-center text-gray-500 border-0 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200"
                 : "block w-full form-input rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" +
-                  (disabled ? " bg-gray-200" : "")
+                  (disabled ? " bg-gray-200" : "") +
+                  "focus:placeholder-transparent"
             }
             placeholder="Type something..."
             onChange={(e) => {
diff --git a/src/frontend/src/components/intComponent/index.tsx b/src/frontend/src/components/intComponent/index.tsx
index 38bf317b9..dd2ad5e70 100644
--- a/src/frontend/src/components/intComponent/index.tsx
+++ b/src/frontend/src/components/intComponent/index.tsx
@@ -12,6 +12,7 @@ export default function IntComponent({
 }: FloatComponentType) {
   const [myValue, setMyValue] = useState(value ?? "");
   const { setDisableCopyPaste } = useContext(TabsContext);
+  const min = 0;
 
   useEffect(() => {
     if (disabled) {
@@ -53,11 +54,18 @@ export default function IntComponent({
           }
         }}
         type="number"
+        step="1"
+        min={min}
+        onInput={(e: React.ChangeEvent<HTMLInputElement>) => {
+          if (e.target.value < min.toString()) {
+            e.target.value = min.toString();
+          }
+        }}
         value={myValue}
         className={
           editNode
-            ? "text-center arrow-hide placeholder:text-center border-0 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200"
-            : "block w-full form-input dark:bg-gray-900 arrow-hide dark:border-gray-600 dark:text-gray-300 rounded-md border-gray-300 shadow-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 sm:text-sm" +
+            ? "focus:placeholder-transparent text-center placeholder:text-center border-0 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200"
+            : "focus:placeholder-transparent block w-full form-input dark:bg-gray-900 dark:border-gray-600 dark:text-gray-300 rounded-md border-gray-300 shadow-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 sm:text-sm" +
               (disabled ? " bg-gray-200 dark:bg-gray-700" : "")
         }
         placeholder={editNode ? "Integer number" : "Type a integer number"}
diff --git a/src/frontend/src/components/textAreaComponent/index.tsx b/src/frontend/src/components/textAreaComponent/index.tsx
index 726431880..0b090d294 100644
--- a/src/frontend/src/components/textAreaComponent/index.tsx
+++ b/src/frontend/src/components/textAreaComponent/index.tsx
@@ -50,7 +50,7 @@ export default function TextAreaComponent({
                 (disabled ? " bg-gray-200" : "")
           }
         >
-          {myValue !== "" ? myValue : "Text empty"}
+          {myValue !== "" ? myValue : "Type something..."}
         </span>
         <button
           onClick={() => {
diff --git a/src/frontend/src/constants.tsx b/src/frontend/src/constants.tsx
index 93d9090b3..d3cd3464f 100644
--- a/src/frontend/src/constants.tsx
+++ b/src/frontend/src/constants.tsx
@@ -4,42 +4,45 @@
  * The base text for subtitle of Export Dialog (Toolbar)
  * @constant
  */
-export const EXPORT_DIALOG_SUBTITLE = "Export your models.";
+export const EXPORT_DIALOG_SUBTITLE = "Export flow as JSON file.";
 
 /**
  * The base text for subtitle of Code Dialog (Toolbar)
  * @constant
  */
 export const CODE_DIALOG_SUBTITLE =
-  "Export your flow to use it with this code.";
+  "Generate the code to integrate your flow into an external application.";
 
 /**
  * The base text for subtitle of Edit Node Dialog
  * @constant
  */
 export const EDIT_DIALOG_SUBTITLE =
-  "Make configurations changes to your nodes. Click save when you're done.";
+  "Adjust the configurations of your component. Define parameter visibility for the canvas view. Remember to save once you’re finished.";
 
 /**
  * The base text for subtitle of Code Dialog
  * @constant
  */
-export const CODE_PROMPT_DIALOG_SUBTITLE = "Edit you python code.";
+export const CODE_PROMPT_DIALOG_SUBTITLE =
+  "Edit your Python code. This code snippet accepts module import and a single function definition. Make sure that your function returns a string.";
 
 /**
  * The base text for subtitle of Prompt Dialog
  * @constant
  */
-export const PROMPT_DIALOG_SUBTITLE = "Edit you prompt.";
+export const PROMPT_DIALOG_SUBTITLE =
+  "Create your prompt. Prompts can help guide the behavior of a Language Model.";
 
 /**
  * The base text for subtitle of Text Dialog
  * @constant
  */
-export const TEXT_DIALOG_SUBTITLE = "Edit you text.";
+export const TEXT_DIALOG_SUBTITLE = "Edit your text.";
 
 /**
  * The base text for subtitle of Import Dialog
  * @constant
  */
-export const IMPORT_DIALOG_SUBTITLE = "Import your models or pick one example.";
+export const IMPORT_DIALOG_SUBTITLE =
+  "Upload a JSON file or select from the available community examples.";
diff --git a/src/frontend/src/modals/ApiModal/index.tsx b/src/frontend/src/modals/ApiModal/index.tsx
index 00cec143c..6198c2b33 100644
--- a/src/frontend/src/modals/ApiModal/index.tsx
+++ b/src/frontend/src/modals/ApiModal/index.tsx
@@ -90,7 +90,7 @@ flow("Hey, have you heard of LangFlow?")`;
   return (
     <Dialog open={true} onOpenChange={setModalOpen}>
       <DialogTrigger></DialogTrigger>
-      <DialogContent className="lg:max-w-[800px] sm:max-w-[600px] h-[550px]">
+      <DialogContent className="lg:max-w-[800px] sm:max-w-[600px] h-[550px] bg-muted">
         <DialogHeader>
           <DialogTitle className="flex items-center">
             <span className="pr-2">Code</span>
diff --git a/src/frontend/src/modals/EditNodeModal/index.tsx b/src/frontend/src/modals/EditNodeModal/index.tsx
index ba12f6432..c236571f8 100644
--- a/src/frontend/src/modals/EditNodeModal/index.tsx
+++ b/src/frontend/src/modals/EditNodeModal/index.tsx
@@ -92,7 +92,7 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
   return (
     <Dialog open={true} onOpenChange={setModalOpen}>
       <DialogTrigger></DialogTrigger>
-      <DialogContent className="lg:max-w-[700px]">
+      <DialogContent className="lg:max-w-[700px] bg-muted ">
         <DialogHeader>
           <DialogTitle className="flex items-center">
             <span className="pr-2">Edit Node</span>
@@ -114,7 +114,7 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
           </DialogDescription>
         </DialogHeader>
 
-        <div className="flex w-full h-fit max-h-[415px]">
+        <div className="flex w-full max-h-[350px] h-fit">
           <div
             className={classNames(
               "w-full rounded-lg bg-white dark:bg-gray-800 shadow",
@@ -151,7 +151,7 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
                       )
                       .map((n, i) => (
                         <TableRow key={i} className="h-8">
-                          <TableCell className="p-0 text-center text-gray-900 text-xs dark:text-gray-300">
+                          <TableCell className="p-0 text-center text-gray-900 text-xs dark:text-gray-300 text-sm">
                             {data.node.template[n].name
                               ? data.node.template[n].name
                               : data.node.template[n].display_name}
diff --git a/src/frontend/src/modals/codeAreaModal/index.tsx b/src/frontend/src/modals/codeAreaModal/index.tsx
index 405187647..4b1d32b1b 100644
--- a/src/frontend/src/modals/codeAreaModal/index.tsx
+++ b/src/frontend/src/modals/codeAreaModal/index.tsx
@@ -47,7 +47,7 @@ export default function CodeAreaModal({
   return (
     <Dialog open={true} onOpenChange={setModalOpen}>
       <DialogTrigger></DialogTrigger>
-      <DialogContent className="lg:max-w-[700px] h-[500px]">
+      <DialogContent className="lg:max-w-[700px] h-[500px] bg-muted">
         <DialogHeader>
           <DialogTitle className="flex items-center">
             <span className="pr-2">Edit Code</span>
diff --git a/src/frontend/src/modals/exportModal/index.tsx b/src/frontend/src/modals/exportModal/index.tsx
index 4532afe33..c1c334560 100644
--- a/src/frontend/src/modals/exportModal/index.tsx
+++ b/src/frontend/src/modals/exportModal/index.tsx
@@ -44,7 +44,7 @@ export default function ExportModal() {
   return (
     <Dialog open={true} onOpenChange={setModalOpen}>
       <DialogTrigger asChild></DialogTrigger>
-      <DialogContent className="lg:max-w-[600px] h-[420px]">
+      <DialogContent className="lg:max-w-[600px] h-[420px] bg-muted">
         <DialogHeader>
           <DialogTitle className="flex items-center">
             <span className="pr-2">Export</span>
diff --git a/src/frontend/src/modals/genericModal/index.tsx b/src/frontend/src/modals/genericModal/index.tsx
index 2b1b4c7d6..feeac1460 100644
--- a/src/frontend/src/modals/genericModal/index.tsx
+++ b/src/frontend/src/modals/genericModal/index.tsx
@@ -50,7 +50,7 @@ export default function GenericModal({
   return (
     <Dialog open={true} onOpenChange={setModalOpen}>
       <DialogTrigger></DialogTrigger>
-      <DialogContent className="lg:max-w-[700px]">
+      <DialogContent className="lg:max-w-[700px] bg-muted">
         <DialogHeader>
           <DialogTitle className="flex items-center">
             <span className="pr-2">{myModalTitle}</span>
diff --git a/src/frontend/src/modals/importModal/index.tsx b/src/frontend/src/modals/importModal/index.tsx
index f6d82e852..36da96f0a 100644
--- a/src/frontend/src/modals/importModal/index.tsx
+++ b/src/frontend/src/modals/importModal/index.tsx
@@ -68,8 +68,8 @@ export default function ImportModal() {
       <DialogContent
         className={classNames(
           showExamples
-            ? "lg:max-w-[650px] h-[600px]"
-            : "lg:max-w-[650px] h-[450px]"
+            ? "lg:max-w-[650px] h-[600px] bg-muted"
+            : "lg:max-w-[650px] h-[450px] bg-muted"
         )}
       >
         <DialogHeader>
@@ -86,7 +86,7 @@ export default function ImportModal() {
                   >
                     <span className="sr-only">Close</span>
                     <ArrowLeftIcon
-                      className="h-6 w-6 text-gray-800 ml-1"
+                      className="h-6 w-6 text-gray-800 ml-1 dark:text-white"
                       aria-hidden="true"
                     />
                   </button>
@@ -176,7 +176,7 @@ export default function ImportModal() {
         </div>
 
         <DialogFooter>
-          <div className="bg-white dark:bg-gray-800 w-full flex items-center justify-center">
+          <div className="bg-muted w-full flex items-center justify-center mt-2">
             <a
               href="https://github.com/logspace-ai/langflow_examples"
               target="_blank"
diff --git a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
index 17eae19f2..218489454 100644
--- a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
@@ -50,7 +50,7 @@ export default function ExtraSidebar() {
 
   return (
     <>
-      <div className="relative mt-2 flex items-center mb-2 mx-2">
+      <div className="relative mt-2 flex items-center mb-2 mx-auto">
         <input
           type="text"
           name="search"
diff --git a/src/frontend/src/utils.ts b/src/frontend/src/utils.ts
index 920c1b296..3391a65cd 100644
--- a/src/frontend/src/utils.ts
+++ b/src/frontend/src/utils.ts
@@ -59,7 +59,7 @@ export function classNames(...classes: Array<string>) {
   return classes.filter(Boolean).join(" ");
 }
 
-export const limitScrollFieldsModal = 7;
+export const limitScrollFieldsModal = 10;
 
 export enum TypeModal {
   TEXT = 1,