From ab0209d3994d843b4664e8d106113716a5df8910 Mon Sep 17 00:00:00 2001
From: Cristhian Zanforlin Lousa <cristhian.lousa@gmail.com>
Date: Tue, 13 Jun 2023 11:22:43 -0300
Subject: [PATCH] Import shad dialog, CSS in general

---
 .../components/parameterComponent/index.tsx   |  40 +--
 .../components/dropdownComponent/index.tsx    |  16 +-
 .../src/components/floatComponent/index.tsx   |   2 +-
 .../src/components/inputComponent/index.tsx   |   4 +-
 .../src/components/intComponent/index.tsx     |   2 +-
 src/frontend/src/constants.tsx                |   6 +
 src/frontend/src/modals/importModal/index.tsx | 305 ++++++++----------
 .../extraSidebarComponent/index.tsx           |   2 +-
 8 files changed, 180 insertions(+), 197 deletions(-)

diff --git a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
index 84d806075..6e3a76415 100644
--- a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
@@ -205,15 +205,17 @@ export default function ParameterComponent({
             />
           </div>
         ) : left === true && type === "float" ? (
-          <FloatComponent
-            disabled={disabled}
-            disableCopyPaste={true}
-            value={data.node.template[name].value ?? ""}
-            onChange={(t) => {
-              data.node.template[name].value = t;
-              save();
-            }}
-          />
+          <div className="mt-2 w-full">
+            <FloatComponent
+              disabled={disabled}
+              disableCopyPaste={true}
+              value={data.node.template[name].value ?? ""}
+              onChange={(t) => {
+                data.node.template[name].value = t;
+                save();
+              }}
+            />
+          </div>
         ) : left === true &&
           type === "str" &&
           data.node.template[name].options ? (
@@ -250,15 +252,17 @@ export default function ParameterComponent({
             }}
           ></InputFileComponent>
         ) : left === true && type === "int" ? (
-          <IntComponent
-            disabled={disabled}
-            disableCopyPaste={true}
-            value={data.node.template[name].value ?? ""}
-            onChange={(t) => {
-              data.node.template[name].value = t;
-              save();
-            }}
-          />
+          <div className="mt-2 w-full">
+            <IntComponent
+              disabled={disabled}
+              disableCopyPaste={true}
+              value={data.node.template[name].value ?? ""}
+              onChange={(t) => {
+                data.node.template[name].value = t;
+                save();
+              }}
+            />
+          </div>
         ) : left === true && type === "prompt" ? (
           <PromptAreaComponent
             disabled={disabled}
diff --git a/src/frontend/src/components/dropdownComponent/index.tsx b/src/frontend/src/components/dropdownComponent/index.tsx
index 8a5feb5cb..753b3ce24 100644
--- a/src/frontend/src/components/dropdownComponent/index.tsx
+++ b/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
-                            ? "text-white bg-indigo-600 dark:bg-indigo-500 dark:text-black"
-                            : "text-gray-900",
-                          active && editNode
-                            ? "text-white bg-gray-400 dark:bg-gray-500 dark:text-gray-500"
+                          active
+                            ? "text-white bg-slate-400 dark:bg-white 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>
diff --git a/src/frontend/src/components/floatComponent/index.tsx b/src/frontend/src/components/floatComponent/index.tsx
index a7cf9b2e4..b27317022 100644
--- a/src/frontend/src/components/floatComponent/index.tsx
+++ b/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={
diff --git a/src/frontend/src/components/inputComponent/index.tsx b/src/frontend/src/components/inputComponent/index.tsx
index b7b245c75..4db9cc1bd 100644
--- a/src/frontend/src/components/inputComponent/index.tsx
+++ b/src/frontend/src/components/inputComponent/index.tsx
@@ -45,12 +45,12 @@ 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",
           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"
-            : "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..."}
diff --git a/src/frontend/src/components/intComponent/index.tsx b/src/frontend/src/components/intComponent/index.tsx
index e643eb5e9..38bf317b9 100644
--- a/src/frontend/src/components/intComponent/index.tsx
+++ b/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"}
diff --git a/src/frontend/src/constants.tsx b/src/frontend/src/constants.tsx
index 49b6ea194..93d9090b3 100644
--- a/src/frontend/src/constants.tsx
+++ b/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.";
diff --git a/src/frontend/src/modals/importModal/index.tsx b/src/frontend/src/modals/importModal/index.tsx
index d0808c541..f6d82e852 100644
--- a/src/frontend/src/modals/importModal/index.tsx
+++ b/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,181 +63,143 @@ export default function ImportModal() {
   }
 
   return (
-    <Transition.Root show={open} appear={true} as={Fragment}>
-      <Dialog
-        as="div"
-        className="relative z-10"
-        onClose={setModalOpen}
-        initialFocus={ref}
+    <Dialog open={true} onOpenChange={setModalOpen}>
+      <DialogTrigger></DialogTrigger>
+      <DialogContent
+        className={classNames(
+          showExamples
+            ? "lg:max-w-[650px] h-[600px]"
+            : "lg:max-w-[650px] h-[450px]"
+        )}
       >
-        <Transition.Child
-          as={Fragment}
-          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">
+        <DialogHeader>
+          <DialogTitle className="flex items-center">
+            {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"
+                    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={() => {
-                      setModalOpen(false);
+                      setShowExamples(false);
                     }}
                   >
                     <span className="sr-only">Close</span>
-                    <XMarkIcon className="h-6 w-6" aria-hidden="true" />
+                    <ArrowLeftIcon
+                      className="h-6 w-6 text-gray-800 ml-1"
+                      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"
-                        onClick={() => {
-                          setShowExamples(false);
-                        }}
-                      >
-                        <span className="sr-only">Close</span>
-                        <ArrowLeftIcon className="h-6 w-6" 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">
-                    <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">
-                      <ArrowUpTrayIcon
-                        className="h-6 w-6 text-blue-600"
-                        aria-hidden="true"
-                      />
-                    </div>
-                    <div className="mt-4 text-center sm:ml-4 sm:text-left">
-                      <Dialog.Title
-                        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",
-                      showExamples && !loadingExamples
-                        ? "flex flex-row start justify-start items-start p-9 flex-wrap overflow-auto"
-                        : "flex flex-row justify-center items-center p-4"
-                    )}
-                  >
-                    {!showExamples && (
-                      <div className="flex h-full w-full justify-evenly items-center">
-                        <ButtonBox
-                          size="big"
-                          bgColor="bg-emerald-500 dark:bg-emerald-500/75"
-                          description="Prebuilt Examples"
-                          icon={
-                            <DocumentDuplicateIcon className="h-10 w-10 flex-shrink-0" />
-                          }
-                          onClick={() => {
-                            setShowExamples(true);
-                            handleExamples();
-                          }}
-                          textColor="text-emerald-500 dark:text-emerald-500/75"
-                          title="Examples"
-                        ></ButtonBox>
-                        <ButtonBox
-                          size="big"
-                          bgColor="bg-blue-500 dark:bg-blue-500/75"
-                          description="Import from Local"
-                          icon={
-                            <ComputerDesktopIcon className="h-10 w-10 flex-shrink-0" />
-                          }
-                          onClick={() => {
-                            uploadFlow();
-                            setModalOpen(false);
-                          }}
-                          textColor="text-blue-500 dark:text-blue-500/75"
-                          title="Local File"
-                        ></ButtonBox>
-                      </div>
-                    )}
-                    {showExamples && loadingExamples && (
-                      <div className="flex align-middle justify-center items-center">
-                        <LoadingComponent remSize={30} />
-                      </div>
-                    )}
-                    {showExamples &&
-                      !loadingExamples &&
-                      examples.map((example, index) => {
-                        return (
-                          <div key={index}>
-                            {" "}
-                            <ButtonBox
-                              size="small"
-                              bgColor="bg-emerald-500 dark:bg-emerald-500/75"
-                              description={
-                                example.description ?? "Prebuilt Examples"
-                              }
-                              icon={
-                                <DocumentDuplicateIcon className="h-6 w-6 flex-shrink-0" />
-                              }
-                              onClick={() => {
-                                addFlow(example);
-                                setModalOpen(false);
-                              }}
-                              textColor="text-emerald-500 dark:text-emerald-500/75"
-                              title={example.name}
-                            ></ButtonBox>
-                          </div>
-                        );
-                      })}
-                  </div>
-                  <div className="bg-white dark:bg-gray-800 w-full h-20 flex items-center justify-center">
-                    <a
-                      href="https://github.com/logspace-ai/langflow_examples"
-                      target="_blank"
-                      className="flex items-center justify-center text-gray-600 dark:text-gray-300"
-                      rel="noreferrer"
-                    >
-                      <svg
-                        width="24"
-                        viewBox="0 0 98 96"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          fill-rule="evenodd"
-                          clip-rule="evenodd"
-                          d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z"
-                          fill="currentColor"
-                        />
-                      </svg>
-                      <span className="ml-2 ">LangFlow Examples</span>
-                    </a>
-                  </div>
+              </>
+            )}
+
+            <span className={classNames(showExamples ? "pl-8 pr-2" : "pr-2")}>
+              {showExamples ? "Select an example" : "Import"}
+            </span>
+            <ArrowUpTrayIcon
+              className="h-6 w-6 text-gray-800 ml-1 dark:text-white"
+              aria-hidden="true"
+            />
+          </DialogTitle>
+          <DialogDescription>{IMPORT_DIALOG_SUBTITLE}</DialogDescription>
+        </DialogHeader>
+
+        <div
+          className={classNames(
+            "h-full w-full dark:bg-gray-900 overflow-y-auto scrollbar-hide",
+            showExamples && !loadingExamples
+              ? "flex flex-row start justify-center items-start flex-wrap overflow-auto mx-auto"
+              : "flex flex-row justify-center items-center"
+          )}
+        >
+          {!showExamples && (
+            <div className="flex h-full w-full justify-evenly items-center">
+              <ButtonBox
+                size="big"
+                bgColor="bg-emerald-500 dark:bg-emerald-500/75"
+                description="Prebuilt Examples"
+                icon={
+                  <DocumentDuplicateIcon className="h-10 w-10 flex-shrink-0" />
+                }
+                onClick={() => {
+                  setShowExamples(true);
+                  handleExamples();
+                }}
+                textColor="text-emerald-500 dark:text-emerald-500/75"
+                title="Examples"
+              ></ButtonBox>
+              <ButtonBox
+                size="big"
+                bgColor="bg-blue-500 dark:bg-blue-500/75"
+                description="Import from Local"
+                icon={
+                  <ComputerDesktopIcon className="h-10 w-10 flex-shrink-0" />
+                }
+                onClick={() => {
+                  uploadFlow();
+                  setModalOpen(false);
+                }}
+                textColor="text-blue-500 dark:text-blue-500/75"
+                title="Local File"
+              ></ButtonBox>
+            </div>
+          )}
+          {showExamples && loadingExamples && (
+            <div className="flex align-middle justify-center items-center">
+              <LoadingComponent remSize={30} />
+            </div>
+          )}
+          {showExamples &&
+            !loadingExamples &&
+            examples.map((example, index) => {
+              return (
+                <div key={example.name} className="m-2">
+                  {" "}
+                  <ButtonBox
+                    size="small"
+                    bgColor="bg-emerald-500 dark:bg-emerald-500/75"
+                    description={example.description ?? "Prebuilt Examples"}
+                    icon={
+                      <DocumentDuplicateIcon className="h-6 w-6 flex-shrink-0" />
+                    }
+                    onClick={() => {
+                      addFlow(example);
+                      setModalOpen(false);
+                    }}
+                    textColor="text-emerald-500 dark:text-emerald-500/75"
+                    title={example.name}
+                  ></ButtonBox>
                 </div>
-              </Dialog.Panel>
-            </Transition.Child>
-          </div>
+              );
+            })}
         </div>
-      </Dialog>
-    </Transition.Root>
+
+        <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"
+              className="flex items-center justify-center text-gray-600 dark:text-gray-300"
+              rel="noreferrer"
+            >
+              <svg
+                width="24"
+                viewBox="0 0 98 96"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  fill-rule="evenodd"
+                  clip-rule="evenodd"
+                  d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z"
+                  fill="currentColor"
+                />
+              </svg>
+              <span className="ml-2 ">LangFlow Examples</span>
+            </a>
+          </div>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
   );
 }
diff --git a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
index f0fe333d5..17eae19f2 100644
--- a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
+++ b/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);