From e123b753e709fd3ad047b78e994b5ee6761e88f8 Mon Sep 17 00:00:00 2001
From: anovazzi1 <otavio2204@gmail.com>
Date: Fri, 10 Nov 2023 18:32:54 -0300
Subject: [PATCH] fix(StoreApiKeyModal): remove unnecessary description about
 signing up for an API key fix(StoreApiKeyModal): remove the "Sign up" button
 and replace it with a text link to langflow.store fix(StoreApiKeyModal):
 change the position and styling of the text link to langflow.store
 fix(StoreApiKeyModal): change the "Cancel" button to be aligned with the
 "Save" button fix(StoreApiKeyModal): wrap the "Save" button in a Form.Submit
 component for better form handling

---
 .../src/modals/StoreApiKeyModal/index.tsx     | 56 ++++++++++---------
 1 file changed, 30 insertions(+), 26 deletions(-)

diff --git a/src/frontend/src/modals/StoreApiKeyModal/index.tsx b/src/frontend/src/modals/StoreApiKeyModal/index.tsx
index 544e5391c..4a080ade3 100644
--- a/src/frontend/src/modals/StoreApiKeyModal/index.tsx
+++ b/src/frontend/src/modals/StoreApiKeyModal/index.tsx
@@ -67,11 +67,7 @@ export default function StoreApiKeyModal({
   return (
     <BaseModal size="small-h-full" open={open} setOpen={setOpen}>
       <BaseModal.Trigger>{children}</BaseModal.Trigger>
-      <BaseModal.Header
-        description={
-          "Insert your Langflow API key. If you don't have it, please sign up."
-        }
-      >
+      <BaseModal.Header description={"Insert your Langflow API key."}>
         <span className="pr-2">API Key</span>
         <IconComponent
           name="Key"
@@ -88,13 +84,9 @@ export default function StoreApiKeyModal({
           <div className="grid gap-5">
             <Form.Field name="username">
               <div className="flex items-center justify-between gap-2">
-                <a href="https://langflow.store/" target="_blank">
-                  <Button type="button" className="w-24" variant="secondary">
-                    Sign up
-                  </Button>
-                </a>
                 <Form.Control asChild>
                   <Input
+                    type="password"
                     onChange={({ target: { value } }) => {
                       handleInput({ target: { name: "apikey", value } });
                     }}
@@ -104,27 +96,39 @@ export default function StoreApiKeyModal({
               </div>
             </Form.Field>
           </div>
-          <div className="float-right">
-            <Button
-              className="mr-3"
-              variant="outline"
-              onClick={() => {
-                setOpen(false);
-              }}
-            >
-              Cancel
-            </Button>
-
-            <Form.Submit asChild>
+          <div className="flex items-end justify-between">
+            <span className="pr-1 text-xs text-muted-foreground">
+              Don’t have an API key? Sign up at{" "}
+              <a
+                className="text-high-indigo underline"
+                href="https://langflow.store/"
+                target="_blank"
+              >
+                langflow.store
+              </a>
+            </span>
+            <div className="">
               <Button
-                className="mt-8"
+                className="mr-3"
+                variant="outline"
                 onClick={() => {
-                  handleSaveKey();
+                  setOpen(false);
                 }}
               >
-                Save
+                Cancel
               </Button>
-            </Form.Submit>
+
+              <Form.Submit asChild>
+                <Button
+                  className="mt-8"
+                  onClick={() => {
+                    handleSaveKey();
+                  }}
+                >
+                  Save
+                </Button>
+              </Form.Submit>
+            </div>
           </div>
         </Form.Root>
       </BaseModal.Content>