Import shad dialog, CSS in general

src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx

@@ -205,6 +205,7 @@ export default function ParameterComponent({
             />
           </div>
         ) : left === true && type === "float" ? (
+          <div className="mt-2 w-full">
             <FloatComponent
               disabled={disabled}
               disableCopyPaste={true}
@@ -214,6 +215,7 @@ export default function ParameterComponent({
                 save();
               }}
             />
+          </div>
         ) : left === true &&
           type === "str" &&
           data.node.template[name].options ? (
@@ -250,6 +252,7 @@ export default function ParameterComponent({
             }}
           ></InputFileComponent>
         ) : left === true && type === "int" ? (
+          <div className="mt-2 w-full">
             <IntComponent
               disabled={disabled}
               disableCopyPaste={true}
@@ -259,6 +262,7 @@ export default function ParameterComponent({
                 save();
               }}
             />
+          </div>
         ) : left === true && type === "prompt" ? (
           <PromptAreaComponent
             disabled={disabled}

src/frontend/src/components/dropdownComponent/index.tsx

@@ -31,7 +31,7 @@ export default function Dropdown({
                 className={
                   editNode
                     ? "relative pr-9 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"
-                    : "relative w-full cursor-default rounded-md border border-gray-300 bg-white py-2 pl-3 pr-10 text-left shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 sm:text-sm dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md"
+                    : "ring-1 ring-slate-300 dark:ring-slate-600 w-full py-2 pl-3 pr-10 text-left focus:ring-offset-2 focus:ring-offset-slate-400 dark:focus:ring-offset-2 dark:focus:ring-offset-gray-900 dark:focus:ring-1 dark:focus:ring-gray-600 dark:focus-visible:ring-gray-900 dark:focus-visible:ring-offset-2 focus-visible:outline-none 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"
                 }
               >
                 <span className="block truncate w-full">{internalValue}</span>
@@ -68,11 +68,8 @@ export default function Dropdown({
                       key={id}
                       className={({ active }) =>
                         classNames(
-                          active && !editNode
+                          active
-                            ? "text-white bg-indigo-600 dark:bg-indigo-500 dark:text-black"
+                            ? "text-white bg-slate-400 dark:bg-white dark:text-gray-500"
-                            : "text-gray-900",
-                          active && editNode
-                            ? "text-white bg-gray-400 dark:bg-gray-500 dark:text-gray-500"
                             : "",
                           editNode
                             ? "relative cursor-default select-none py-0.5 pl-3 pr-12 dark:text-gray-300 dark:bg-gray-800"
@@ -95,13 +92,16 @@ export default function Dropdown({
                           {selected ? (
                             <span
                               className={classNames(
-                                editNode ? "text-gray-600" : "text-indigo-600",
                                 active ? "text-white dark:text-black" : "",
                                 "absolute inset-y-0 right-0 flex items-center pr-4"
                               )}
                             >
                               <CheckIcon
-                                className="h-5 w-5"
+                                className={
+                                  active
+                                    ? "h-5 w-5 dark:text-black text-black"
+                                    : "h-5 w-5 dark:text-white text-black"
+                                }
                                 aria-hidden="true"
                               />
                             </span>

src/frontend/src/components/floatComponent/index.tsx

@@ -36,7 +36,7 @@ export default function FloatComponent({
         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 focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" +
+            : "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" +
               (disabled ? " bg-gray-200 dark:bg-gray-700" : "")
         }
         placeholder={

src/frontend/src/components/inputComponent/index.tsx

@@ -50,7 +50,7 @@ export default function InputComponent({
           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"
-            : "focus:border-indigo-500 focus:ring-indigo-500",
+            : "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"
         )}
         placeholder={password && editNode ? "Key" : "Type something..."}

src/frontend/src/components/intComponent/index.tsx

@@ -57,7 +57,7 @@ export default function IntComponent({
         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 focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" +
+            : "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" +
               (disabled ? " bg-gray-200 dark:bg-gray-700" : "")
         }
         placeholder={editNode ? "Integer number" : "Type a integer number"}

src/frontend/src/constants.tsx

@@ -37,3 +37,9 @@ export const PROMPT_DIALOG_SUBTITLE = "Edit you prompt.";
  * @constant
  */
 export const TEXT_DIALOG_SUBTITLE = "Edit you text.";
+
+/**
+ * The base text for subtitle of Import Dialog
+ * @constant
+ */
+export const IMPORT_DIALOG_SUBTITLE = "Import your models or pick one example.";

src/frontend/src/modals/importModal/index.tsx

@@ -1,4 +1,3 @@
-import { Dialog, Transition } from "@headlessui/react";
 import {
   XMarkIcon,
   ArrowDownTrayIcon,
@@ -6,6 +5,7 @@ import {
   ComputerDesktopIcon,
   ArrowUpTrayIcon,
   ArrowLeftIcon,
+  CommandLineIcon,
 } from "@heroicons/react/24/outline";
 import { Fragment, useContext, useRef, useState } from "react";
 import { PopUpContext } from "../../contexts/popUpContext";
@@ -17,6 +17,17 @@ import { alertContext } from "../../contexts/alertContext";
 import LoadingComponent from "../../components/loadingComponent";
 import { FlowType } from "../../types/flow";
 import { classNames, snakeToSpaces, toNormalCase } from "../../utils";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "../../components/ui/dialog";
+import { Button } from "../../components/ui/button";
+import { IMPORT_DIALOG_SUBTITLE } from "../../constants";
 
 export default function ImportModal() {
   const [open, setOpen] = useState(true);
@@ -52,88 +63,54 @@ export default function ImportModal() {
   }
 
   return (
-    <Transition.Root show={open} appear={true} as={Fragment}>
+    <Dialog open={true} onOpenChange={setModalOpen}>
-      <Dialog
+      <DialogTrigger></DialogTrigger>
-        as="div"
+      <DialogContent
-        className="relative z-10"
+        className={classNames(
-        onClose={setModalOpen}
+          showExamples
-        initialFocus={ref}
+            ? "lg:max-w-[650px] h-[600px]"
+            : "lg:max-w-[650px] h-[450px]"
+        )}
       >
-        <Transition.Child
+        <DialogHeader>
-          as={Fragment}
+          <DialogTitle className="flex items-center">
-          enter="ease-out duration-300"
-          enterFrom="opacity-0"
-          enterTo="opacity-100"
-          leave="ease-in duration-200"
-          leaveFrom="opacity-100"
-          leaveTo="opacity-0"
-        >
-          <div className="fixed inset-0 bg-gray-500 dark:bg-gray-600 dark:bg-opacity-75 bg-opacity-75 transition-opacity" />
-        </Transition.Child>
-
-        <div className="fixed inset-0 z-10 overflow-y-auto">
-          <div className="flex h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
-            <Transition.Child
-              as={Fragment}
-              enter="ease-out duration-300"
-              enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-              enterTo="opacity-100 translate-y-0 sm:scale-100"
-              leave="ease-in duration-200"
-              leaveFrom="opacity-100 translate-y-0 sm:scale-100"
-              leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-            >
-              <Dialog.Panel className="relative flex flex-col justify-between transform h-[600px] overflow-hidden rounded-lg bg-white dark:bg-gray-800 text-left shadow-xl transition-all sm:my-8 w-[776px]">
-                <div className=" z-50 absolute top-0 right-0 hidden pt-4 pr-4 sm:block">
-                  <button
-                    type="button"
-                    className="rounded-md text-gray-400 hover:text-gray-500"
-                    onClick={() => {
-                      setModalOpen(false);
-                    }}
-                  >
-                    <span className="sr-only">Close</span>
-                    <XMarkIcon className="h-6 w-6" aria-hidden="true" />
-                  </button>
-                </div>
             {showExamples && (
               <>
                 <div className="z-50 absolute top-2 left-0 hidden pt-4 pl-4 sm:block">
                   <button
                     type="button"
-                        className="rounded-md text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
+                    className="rounded-md text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2"
                     onClick={() => {
                       setShowExamples(false);
                     }}
                   >
                     <span className="sr-only">Close</span>
-                        <ArrowLeftIcon className="h-6 w-6" aria-hidden="true" />
+                    <ArrowLeftIcon
+                      className="h-6 w-6 text-gray-800 ml-1"
+                      aria-hidden="true"
+                    />
                   </button>
                 </div>
               </>
             )}
-                <div className="h-full w-full flex flex-col justify-center items-center">
+
-                  <div className="flex w-full pb-4 z-10 justify-center shadow-sm">
+            <span className={classNames(showExamples ? "pl-8 pr-2" : "pr-2")}>
-                    <div className="mx-auto mt-4 flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-blue-100 dark:bg-gray-900 sm:mx-0 sm:h-10 sm:w-10">
+              {showExamples ? "Select an example" : "Import"}
+            </span>
             <ArrowUpTrayIcon
-                        className="h-6 w-6 text-blue-600"
+              className="h-6 w-6 text-gray-800 ml-1 dark:text-white"
               aria-hidden="true"
             />
-                    </div>
+          </DialogTitle>
-                    <div className="mt-4 text-center sm:ml-4 sm:text-left">
+          <DialogDescription>{IMPORT_DIALOG_SUBTITLE}</DialogDescription>
-                      <Dialog.Title
+        </DialogHeader>
-                        as="h3"
+
-                        className="text-lg font-medium dark:text-white leading-10 text-gray-900"
-                      >
-                        {showExamples ? "Select an example" : "Import"}
-                      </Dialog.Title>
-                    </div>
-                  </div>
         <div
           className={classNames(
-                      "h-full w-full bg-gray-200 dark:bg-gray-900 gap-4 overflow-y-auto scrollbar-hide",
+            "h-full w-full dark:bg-gray-900 overflow-y-auto scrollbar-hide",
             showExamples && !loadingExamples
-                        ? "flex flex-row start justify-start items-start p-9 flex-wrap overflow-auto"
+              ? "flex flex-row start justify-center items-start flex-wrap overflow-auto mx-auto"
-                        : "flex flex-row justify-center items-center p-4"
+              : "flex flex-row justify-center items-center"
           )}
         >
           {!showExamples && (
@@ -177,14 +154,12 @@ export default function ImportModal() {
             !loadingExamples &&
             examples.map((example, index) => {
               return (
-                          <div key={index}>
+                <div key={example.name} className="m-2">
                   {" "}
                   <ButtonBox
                     size="small"
                     bgColor="bg-emerald-500 dark:bg-emerald-500/75"
-                              description={
+                    description={example.description ?? "Prebuilt Examples"}
-                                example.description ?? "Prebuilt Examples"
-                              }
                     icon={
                       <DocumentDuplicateIcon className="h-6 w-6 flex-shrink-0" />
                     }
@@ -199,7 +174,9 @@ export default function ImportModal() {
               );
             })}
         </div>
-                  <div className="bg-white dark:bg-gray-800 w-full h-20 flex items-center justify-center">
+
+        <DialogFooter>
+          <div className="bg-white dark:bg-gray-800 w-full flex items-center justify-center">
             <a
               href="https://github.com/logspace-ai/langflow_examples"
               target="_blank"
@@ -221,12 +198,8 @@ export default function ImportModal() {
               <span className="ml-2 ">LangFlow Examples</span>
             </a>
           </div>
-                </div>
+        </DialogFooter>
-              </Dialog.Panel>
+      </DialogContent>
-            </Transition.Child>
-          </div>
-        </div>
     </Dialog>
-    </Transition.Root>
   );
 }

src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx

@@ -56,7 +56,7 @@ export default function ExtraSidebar() {
           name="search"
           id="search"
           placeholder="Search nodes"
-          className="dark:text-white focus:outline-none block w-full rounded-md py-1.5 ps-3 pr-9 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 sm:text-sm sm:leading-6 dark:ring-0 dark:bg-[#2d3747] dark:focus:outline-none"
+          className="border-1 dark:border-slate-600 dark:border-0.5 dark:ring-0 focus-visible:dark:ring-0 focus-visible:dark:ring-offset-1 rounded-md border border-input bg-transparent px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium 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"
           onChange={(e) => {
             handleSearchInput(e.target.value);
             setSearch(e.target.value);