From 46809b3a91de7ef9c64ab96aaed192ebc6a3a24b Mon Sep 17 00:00:00 2001
From: pillowboy <33105890+poolsar42@users.noreply.github.com>
Date: Thu, 24 Aug 2023 12:05:02 -0400
Subject: [PATCH] fix(repo): UI issues (#2638)

---
 .../app/routes/__layout/billing/index.tsx     | 50 +++++++++----------
 apps/passport/app/root.tsx                    | 16 ++++--
 .../email-otp-validator/EmailOTPValidator.tsx |  2 +-
 .../src/molecules/modal/Modal.tsx             |  2 +-
 4 files changed, 38 insertions(+), 32 deletions(-)

diff --git a/apps/console/app/routes/__layout/billing/index.tsx b/apps/console/app/routes/__layout/billing/index.tsx
index 51bc16797b..4be33d1946 100644
--- a/apps/console/app/routes/__layout/billing/index.tsx
+++ b/apps/console/app/routes/__layout/billing/index.tsx
@@ -404,18 +404,7 @@ const PurchaseProModal = ({
   return (
     <Modal isOpen={isOpen} handleClose={() => setIsOpen(false)}>
       <div className="max-sm:w-screen sm:min-w-[640px] lg:min-w-[764px] w-fit">
-        {!paymentData?.paymentMethodID ? (
-          <section className="mx-5 mt-5">
-            <ToastWithLink
-              message="Update your Payment Information to enable purchasing"
-              linkHref={`/billing/payment`}
-              type={'warning'}
-              linkText="Update payment information"
-            />
-          </section>
-        ) : null}
-
-        <div className="flex flex-row justify-between w-full pb-2 pt-5 px-5 items-center">
+        <div className="flex flex-row justify-between w-full pt-5 pb-3 px-5 items-center">
           <Text
             size="lg"
             weight="semibold"
@@ -434,6 +423,17 @@ const PurchaseProModal = ({
           </div>
         </div>
 
+        {!paymentData?.paymentMethodID ? (
+          <section className="mx-5 mb-3">
+            <ToastWithLink
+              message="Update your Payment Information to enable purchasing"
+              linkHref={`/billing/payment`}
+              type={'warning'}
+              linkText="Update payment information"
+            />
+          </section>
+        ) : null}
+
         <section className="mx-5 mb-5 border rounded-lg overflow-auto thin-scrollbar">
           <div className="p-6">
             <Text
@@ -583,16 +583,6 @@ const AssignEntitlementModal = ({
   return (
     <Modal isOpen={isOpen} handleClose={() => setIsOpen(false)}>
       <div className="max-sm:w-screen sm:min-w-[640px] lg:min-w-[764px] w-fit">
-        {!paymentData?.paymentMethodID ? (
-          <section className="mx-5 mt-5">
-            <ToastWithLink
-              message="Update your Payment Information to enable purchasing"
-              linkHref={`/billing/payment`}
-              type={'warning'}
-              linkText="Update payment information"
-            />
-          </section>
-        ) : null}
         <div
           className="pb-2 pt-5 px-5
       flex flex-row items-start justify-between w-full"
@@ -619,6 +609,16 @@ const AssignEntitlementModal = ({
             <HiOutlineX />
           </div>
         </div>
+        {!paymentData?.paymentMethodID ? (
+          <section className="mx-5 mb-3">
+            <ToastWithLink
+              message="Update your Payment Information to enable purchasing"
+              linkHref={`/billing/payment`}
+              type={'warning'}
+              linkText="Update payment information"
+            />
+          </section>
+        ) : null}
         <div className="mb-5 w-full">
           <section className="border-t thin-scrollbar w-full my-4">
             <ul>
@@ -838,11 +838,11 @@ const RemoveEntitelmentModal = ({
                           >
                             <Listbox.Options
                               className="absolute no-scrollbar w-full bg-white
-                        rounded-lg border max-h-[200px] max-w-[66.1833px] overflow-auto"
+                        rounded-lg border max-h-[150px] max-w-[66.1833px] overflow-auto"
                             >
                               {Array.apply(null, Array(entitlements + 1)).map(
                                 (_, i) => {
-                                  return (
+                                  return i >= entitlementUsage ? (
                                     <Listbox.Option
                                       key={i}
                                       value={i}
@@ -865,7 +865,7 @@ const RemoveEntitelmentModal = ({
                                         )
                                       }}
                                     </Listbox.Option>
-                                  )
+                                  ) : null
                                 }
                               )}
                             </Listbox.Options>
diff --git a/apps/passport/app/root.tsx b/apps/passport/app/root.tsx
index dc66d3afd9..001b285348 100644
--- a/apps/passport/app/root.tsx
+++ b/apps/passport/app/root.tsx
@@ -69,14 +69,15 @@ export const links: LinksFunction = () => [
 
 export const loader: LoaderFunction = getRollupReqFunctionErrorWrapper(
   async ({ request, context, params }) => {
+    const clientId = new URL(request.url).searchParams.get('client_id')
     if (
       request.cf.botManagement.score <= 30 &&
       !['localhost', '127.0.0.1'].includes(new URL(request.url).hostname)
     ) {
       let ogTheme = {}
       if (
-        params.clientId &&
-        !['console', 'passport'].includes(params.clientId)
+        (params.clientId || clientId) &&
+        !['console', 'passport'].includes(params.clientId!)
       ) {
         const coreClient = getCoreClient({ context })
         ogTheme = await coreClient.starbase.getOgTheme.query({
@@ -90,7 +91,7 @@ export const loader: LoaderFunction = getRollupReqFunctionErrorWrapper(
     if (context.appProps) {
       appProps = context.appProps
     } else {
-      if (!params.clientId) {
+      if (!params.clientId && !clientId) {
         const name = 'Passport'
         appProps = {
           name: `Rollup - ${name}`,
@@ -103,7 +104,7 @@ export const loader: LoaderFunction = getRollupReqFunctionErrorWrapper(
       } else {
         if (['console', 'passport'].includes(params.clientId!)) {
           const name =
-            params.clientId.charAt(0).toUpperCase() + params.clientId.slice(1)
+            params.clientId!.charAt(0).toUpperCase() + params.clientId!.slice(1)
           appProps = {
             name: `Rollup - ${name}`,
             iconURL: LogoIndigo,
@@ -115,7 +116,7 @@ export const loader: LoaderFunction = getRollupReqFunctionErrorWrapper(
         } else {
           const coreClient = getCoreClient({ context })
           appProps = await coreClient.starbase.getAppPublicProps.query({
-            clientId: params.clientId!,
+            clientId: (params.clientId || clientId) as string,
           })
         }
       }
@@ -269,6 +270,11 @@ export default function App() {
 
         {browserEnv?.appProps?.iconURL ? (
           <>
+            <link
+              rel="apple-touch-icon"
+              href={browserEnv?.appProps.iconURL}
+              sizes="180x180"
+            />
             <link rel="icon" type="image" href={browserEnv?.appProps.iconURL} />
             <link
               rel="shortcut icon"
diff --git a/packages/design-system/src/molecules/email-otp-validator/EmailOTPValidator.tsx b/packages/design-system/src/molecules/email-otp-validator/EmailOTPValidator.tsx
index 6b4c839034..dfe0ba4b8a 100644
--- a/packages/design-system/src/molecules/email-otp-validator/EmailOTPValidator.tsx
+++ b/packages/design-system/src/molecules/email-otp-validator/EmailOTPValidator.tsx
@@ -121,7 +121,7 @@ export default function EmailOTPValidator({
       </section>
 
       <section className="flex-1">
-        <div className="flex flex-col items-center mt-4 mb-8">
+        <div className="flex flex-col items-center mt-4 mb-8 text-center">
           <Text className="text-gray-500 dark:text-gray-400">
             We&apos;ve sent a code to
           </Text>
diff --git a/packages/design-system/src/molecules/modal/Modal.tsx b/packages/design-system/src/molecules/modal/Modal.tsx
index 29628c5a81..5cf757d6d2 100644
--- a/packages/design-system/src/molecules/modal/Modal.tsx
+++ b/packages/design-system/src/molecules/modal/Modal.tsx
@@ -52,7 +52,7 @@ export const Modal = ({
               <Dialog.Panel className={`${fixed ? 'pb-10' : ''}`}>
                 <div
                   className={classNames(
-                    'border bg-white rounded-lg shadow-xl thin-scrollbar',
+                    'border bg-white rounded-lg shadow-xl thin-scrollbar overflow-y-auto ',
                     {
                       'h-max min-w-fit w-max min-[480px]:w-[96vw] lg:w-[62vw] h-[96vh] lg:h-[76vh]':
                         fixed,