From 760f9d487cfa06ae25904fb6eef09d90914964c5 Mon Sep 17 00:00:00 2001
From: Meet <meetcshah19@gmail.com>
Date: Thu, 19 Sep 2024 01:23:24 +0530
Subject: [PATCH] chore: UI improvements

---
 .../AzureEntraIdSetup.tsx                     |  4 ++-
 .../callback/AzureEntraIdCallbackPage.tsx     | 29 +++++++++++--------
 2 files changed, 20 insertions(+), 13 deletions(-)

diff --git a/frontend/src/views/SecretMainPage/components/ActionBar/CreateDynamicSecretForm/AzureEntraIdSetup.tsx b/frontend/src/views/SecretMainPage/components/ActionBar/CreateDynamicSecretForm/AzureEntraIdSetup.tsx
index c1fbe123d..eb2521017 100644
--- a/frontend/src/views/SecretMainPage/components/ActionBar/CreateDynamicSecretForm/AzureEntraIdSetup.tsx
+++ b/frontend/src/views/SecretMainPage/components/ActionBar/CreateDynamicSecretForm/AzureEntraIdSetup.tsx
@@ -7,6 +7,8 @@ type Props = {
     onCancel: () => void;
 };
 
+const MSFT_ENTRA_ID_APPLICATION_ID = "9805c35f-88d4-4625-9daf-66f741e4129c"
+
 export const AzureEntraIdSetup = ({
     onCompleted,
     onCancel,
@@ -52,7 +54,7 @@ export const AzureEntraIdSetup = ({
                 </div>
             </div>
             <div className="mt-4 flex items-center space-x-4">
-                <a href={`https://login.microsoftonline.com/common/adminconsent?client_id=9805c35f-88d4-4625-9daf-66f741e4129c&redirect_uri=${window.location.origin}/integrations/azure-entra-id/callback`} target="_blank" rel="noreferrer">
+                <a href={`https://login.microsoftonline.com/common/adminconsent?client_id=${MSFT_ENTRA_ID_APPLICATION_ID}&redirect_uri=${window.location.origin}/integrations/azure-entra-id/callback`} target="_blank" rel="noreferrer">
                     <Button type="submit">
                         Install App
                     </Button>
diff --git a/frontend/src/views/callback/AzureEntraIdCallbackPage.tsx b/frontend/src/views/callback/AzureEntraIdCallbackPage.tsx
index 0692c8ecf..5950bfa79 100644
--- a/frontend/src/views/callback/AzureEntraIdCallbackPage.tsx
+++ b/frontend/src/views/callback/AzureEntraIdCallbackPage.tsx
@@ -25,29 +25,34 @@ export const AzureEntraIdCallbackPage = () => {
                             />
                         </Link>
                     </div>
-                    <h1 className="bg-gradient-to-b from-white to-bunker-200 bg-clip-text text-center text-4xl font-medium text-transparent">
-                        Installed Entra Id App successfully
-                    </h1>
-
                 </div>
-                <div className="m-auto my-8 flex w-full">
-                    <div className="w-full border-t border-mineshaft-600" />
-                </div>
-                <div className="m-auto flex w-full flex-col rounded-md border border-primary-500/30 bg-primary/5 p-6 pt-5">
+                <div className="m-auto my-8 flex w-full" />
+                <div className="m-auto mb-2 flex w-full flex-col rounded-md border bg-white/[0.05] border-white-500/30 p-6 pt-5">
                     <div className="flex flex-col items-start sm:flex-row sm:items-center">
-                        <p className="md:text-md text-md mr-4">
+                        <p className="md:text-md text-md mr-4 w-full">
+                            <p
+                                className="text-bold text-white bg-clip-text text-transparent"
+                            >
+                                Copy Tenant ID add and paste it in the dynamic secret configuration.
+                            </p>{" "}
+                        </p>
+                    </div>
+                </div>
+                    <div className="m-auto flex w-full flex-col rounded-md border border-primary-500/30 bg-primary/5 p-6 pt-5">
+                    <div className="flex flex-col items-start sm:flex-row sm:items-center">
+                        <p className="md:text-md text-md mr-4 w-full">
                             <p
                                 className="text-bold bg-gradient-to-tr from-yellow-500 to-primary-500 bg-clip-text text-transparent"
                             >
                                 Tenant ID
                             </p>{" "}
                             <br />
-                            <div className="mr-2 flex items-center justify-end rounded-md bg-white/[0.05] p-2 text-base text-gray-400">
-                                <p className="mr-4 break-all">{router.query.tenant}</p>
+                            <div className="w-full mr-2 flex items-center rounded-md bg-white/[0.05] p-2 text-base text-gray-400">
+                                <p className="mr-4 break-all text-left">{router.query.tenant}</p>
                                 <IconButton
                                     ariaLabel="copy icon"
                                     colorSchema="secondary"
-                                    className="group relative ml-2"
+                                    className="group relative ml-auto"
                                     onClick={() => {
                                         if (typeof router.query.tenant === "string") {
                                             navigator.clipboard.writeText(router.query.tenant);