From a13067d53d5820a88ecb2fca6aceb5f3f13f51e3 Mon Sep 17 00:00:00 2001
From: betimshahini <betimshahini@users.noreply.github.com>
Date: Thu, 31 Aug 2023 16:21:37 -0400
Subject: [PATCH] fix(console): Onboarding copy fix and OTP code local fix
 (#2656)

---
 apps/console/app/routes/onboarding/index.tsx | 35 +++++++++-----------
 platform/email/emailTemplate.ts              |  2 +-
 2 files changed, 17 insertions(+), 20 deletions(-)

diff --git a/apps/console/app/routes/onboarding/index.tsx b/apps/console/app/routes/onboarding/index.tsx
index 6301eadb53..616b73bbfa 100644
--- a/apps/console/app/routes/onboarding/index.tsx
+++ b/apps/console/app/routes/onboarding/index.tsx
@@ -82,9 +82,8 @@ const Option = ({
   return (
     <div
       className={`w-full flex p-4 flex-row items-center justify-start border rounded-lg gap-4
-    ${selected ? 'border-indigo-500' : ''} ${
-        disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'
-      }`}
+    ${selected ? 'border-indigo-500' : ''} ${disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'
+        }`}
       onClick={() => {
         if (disabled) return
         setSelectedType(type)
@@ -122,9 +121,8 @@ const SelectOrgType = ({
   return (
     <div
       className={`w-full h-full flex flex-col gap-2
-    transition-opacity ease-in-out delay-150 ${
-      page === 0 ? 'opacity-100' : 'hide'
-    }`}
+    transition-opacity ease-in-out delay-150 ${page === 0 ? 'opacity-100' : 'hide'
+        }`}
     >
       <Text size="lg" className="text-gray-400">
         1/4
@@ -200,9 +198,8 @@ const ConnectEmail = ({
   return (
     <div
       className={`w-full h-full flex flex-col gap-2
-       transition-opacity ease-in-out delay-150 ${
-         page === 1 ? 'opacity-100' : 'hide'
-       }`}
+       transition-opacity ease-in-out delay-150 ${page === 1 ? 'opacity-100' : 'hide'
+        }`}
     >
       <div className="flex flex-row items-center gap-2">
         <HiOutlineArrowLeft
@@ -545,38 +542,38 @@ const CongratsPage = ({
 
   return (
     <div
-      className={`w-full h-full flex flex-col gap-2
+      className={`w-full h-full flex flex-col
     transition-opacity  ease-in-out delay-150
     ${page === 3 ? 'opacity-100' : 'hide'}`}
     >
-      <Text size="2xl" weight="medium">
+      <Text size="2xl" weight="medium" className="mb-2">
         🎉 You are ready to go!
       </Text>
-      <Text size="lg" className="text-gray-400 mb-2">
+      <Text size="lg" className="text-gray-500 mb-4">
         Here is what you can do next
       </Text>
-      <ul className="list-disc w-full flex flex-col gap-2">
+      <ul className="list-disc w-full flex flex-col text-gray-500 space-y-4 mb-8 pl-8">
         <li className="w-full">
           <div className="flex flex-row gap-2 items-center">
-            <Text>Configure OAuth settings</Text>
+            <Text>Configure your application</Text>
             <DocumentationBadge
-              url={'https://docs.rollup.id/platform/console/oauth'}
+              url={'https://docs.rollup.id/getting-started/create-an-application'}
             />
           </div>
         </li>
         <li className="w-full">
           <div className="flex flex-row gap-2 items-center">
-            <Text>Configure account abstractions</Text>
+            <Text>Learn about OIDC / OAuth 2.0</Text>
             <DocumentationBadge
-              url={'https://docs.rollup.id/platform/console/blockchain'}
+              url={'https://docs.rollup.id/an-introduction-to-openid-connect-oidc'}
             />
           </div>
         </li>
         <li className="w-full">
           <div className="flex flex-row gap-2 items-center">
-            <Text>Configure custom design</Text>
+            <Text>Using Scopes</Text>
             <DocumentationBadge
-              url={'https://docs.rollup.id/platform/console/designer'}
+              url={'https://docs.rollup.id/guides/using-scopes'}
             />
           </div>
         </li>
diff --git a/platform/email/emailTemplate.ts b/platform/email/emailTemplate.ts
index 69002c1ccf..89e85440fa 100644
--- a/platform/email/emailTemplate.ts
+++ b/platform/email/emailTemplate.ts
@@ -240,7 +240,7 @@ export const EmailTemplateOTP = (
   const content = `
     <div class="heading" style="font-size: 36px; font-weight: bold; line-height: 44px; margin-bottom: 16px;">Confirm Your Email Address</div>
     <p style="font-size: 16px; font-weight: normal; line-height: 24px; margin-bottom: 16px;">Please copy the code below into the email verification screen.</p>
-    <div id="passcode" style="width: 100%; text-align: center; font-size: 46px; font-weight: bold; border-radius: 8px; margin-top: 20px; margin-bottom: 20px; padding: 15px 0; background-color: #f3f4f6;">${passcode}</div>
+    <div style="width: 100%; text-align: center; font-size: 46px; font-weight: bold; border-radius: 8px; margin-top: 20px; margin-bottom: 20px; padding: 15px 0; background-color: #f3f4f6;" id="passcode">${passcode}</div>
     <p style="font-size: 16px; font-weight: normal; line-height: 24px; margin-bottom: 16px;">Please note: the code will be valid for the next 10 minutes.</p>
     <p style="font-size: 16px; font-weight: normal; line-height: 24px; margin-bottom: 16px;">
       If you didn&apos;t request this email, there&apos;s nothing to worry about - you can safely ignore it.