From 23beac273f3e104d8ebbf43ce62aabfc9d842093 Mon Sep 17 00:00:00 2001
From: Universe <woojoo@softmarshmallow.com>
Date: Tue, 28 Feb 2023 14:50:37 +0900
Subject: [PATCH] update activation page layout

---
 .../scaffolds/join-the-waitlist-card.tsx      |  2 +-
 .../scaffolds/register-with-code-card.tsx     | 54 +++++++++++--------
 2 files changed, 33 insertions(+), 23 deletions(-)

diff --git a/packages/_firstparty-early-access/scaffolds/join-the-waitlist-card.tsx b/packages/_firstparty-early-access/scaffolds/join-the-waitlist-card.tsx
index f5984cea..f74fdc71 100644
--- a/packages/_firstparty-early-access/scaffolds/join-the-waitlist-card.tsx
+++ b/packages/_firstparty-early-access/scaffolds/join-the-waitlist-card.tsx
@@ -51,7 +51,7 @@ const Description = styled.span`
   font-weight: 500;
   line-height: 96%;
   text-align: center;
-  width: 279px;
+  max-width: 260px;
 `;
 
 const ActionAsButton = styled.button`
diff --git a/packages/_firstparty-early-access/scaffolds/register-with-code-card.tsx b/packages/_firstparty-early-access/scaffolds/register-with-code-card.tsx
index 9dccb6dd..2ab0f7f6 100644
--- a/packages/_firstparty-early-access/scaffolds/register-with-code-card.tsx
+++ b/packages/_firstparty-early-access/scaffolds/register-with-code-card.tsx
@@ -34,6 +34,7 @@ export function RegisterWithCodeCard() {
     verify(code).then((verified) => {
       if (verified) {
         PluginSdk.setItem(__key, code);
+        setVerified(true);
         alert("Congrats🎉 Early access program activated.");
       } else {
         alert("Hmm🤔 That's not a valid access key");
@@ -44,27 +45,35 @@ export function RegisterWithCodeCard() {
   return (
     <>
       <RootWrapperEnterAccessKeyCard>
-        <Heading>Enter your Access Key</Heading>
-        <Paragraph>
-          Please enter your early bird access key. It can be found at
-        </Paragraph>
-        <Field
-          onSubmit={(e) => {
-            e.preventDefault();
-            const totp = e.target["topt"].value;
-            activate(totp);
-          }}
-        >
-          <KeyAsInput
-            id="topt"
-            type="text"
-            // the length is 39 (prefix 6) value 32
-            maxLength={50}
-            minLength={24}
-            placeholder="xxxxxx-xxxxxxxxxxxxx"
-          />
-          <EnterAsButton>Enter</EnterAsButton>
-        </Field>
+        {verified ? (
+          <>
+            <Heading>Activated</Heading>
+          </>
+        ) : (
+          <>
+            <Heading>Enter your Access Key</Heading>
+            <Paragraph>
+              Please enter your early bird access key. It can be found at
+            </Paragraph>
+            <Field
+              onSubmit={(e) => {
+                e.preventDefault();
+                const totp = e.target["topt"].value;
+                activate(totp);
+              }}
+            >
+              <KeyAsInput
+                id="topt"
+                type="text"
+                // the length is 39 (prefix 6) value 32
+                maxLength={50}
+                minLength={24}
+                placeholder="xxxxxx-xxxxxxxxxxxxx"
+              />
+              <EnterAsButton>Enter</EnterAsButton>
+            </Field>
+          </>
+        )}
       </RootWrapperEnterAccessKeyCard>
     </>
   );
@@ -102,7 +111,7 @@ const Paragraph = styled.span`
   line-height: 96%;
   text-align: center;
   color: rgba(0, 0, 0, 0.5);
-  width: 279px;
+  max-width: 260px;
 `;
 
 const Field = styled.form`
@@ -116,6 +125,7 @@ const Field = styled.form`
 `;
 
 const KeyAsInput = styled.input`
+  width: 100%;
   background-color: rgba(0, 0, 0, 0.02);
   border: solid 1px rgba(0, 0, 0, 0.04);
   border-radius: 4px;