From 6df7590051bf32ce101ed5363239ed46b1bac3a2 Mon Sep 17 00:00:00 2001
From: Vladyslav Matsiiako <matsiiako@gmail.com>
Date: Sat, 7 Oct 2023 17:13:44 -0700
Subject: [PATCH] fix styling issues

---
 .../v2/ContentLoader/ContentLoader.tsx        |  8 ++-
 frontend/src/layouts/AppLayout/AppLayout.tsx  |  4 +-
 .../views/SecretMainPage/SecretMainPage.tsx   |  6 +--
 .../BillingCloudTab/PreviewSection.tsx        | 50 ++++++++++++-------
 4 files changed, 41 insertions(+), 27 deletions(-)

diff --git a/frontend/src/components/v2/ContentLoader/ContentLoader.tsx b/frontend/src/components/v2/ContentLoader/ContentLoader.tsx
index 343d8adeb..af83ac81c 100644
--- a/frontend/src/components/v2/ContentLoader/ContentLoader.tsx
+++ b/frontend/src/components/v2/ContentLoader/ContentLoader.tsx
@@ -23,10 +23,8 @@ export const ContentLoader = ({ text, frequency = 2000 }: Props) => {
   }, []);
 
   return (
-    <div className="container mx-auto flex relative flex-col h-1/2 w-full items-center justify-center px-8 text-mineshaft-50 dark:[color-scheme:dark] space-y-8">
-      <div>
-        <img src="/images/loading/loading.gif" height={210} width={240} alt="loading animation" />
-      </div>
+    <div className="container mx-auto flex relative flex-col h-screen w-full items-center justify-center px-8 text-mineshaft-50 dark:[color-scheme:dark] space-y-8">
+      <img src="/images/loading/loading.gif" height={70} width={120} alt="loading animation" />
       {text && isTextArray && (
         <AnimatePresence exitBeforeEnter>
           <motion.div
@@ -40,7 +38,7 @@ export const ContentLoader = ({ text, frequency = 2000 }: Props) => {
           </motion.div>
         </AnimatePresence>
       )}
-      {text && !isTextArray && <div className="text-primary text-sm">{text}</div>}
+      {text && !isTextArray && <div className="text-primary text-xs">{text}</div>}
     </div>
   );
 };
diff --git a/frontend/src/layouts/AppLayout/AppLayout.tsx b/frontend/src/layouts/AppLayout/AppLayout.tsx
index 8c1391687..a3541471a 100644
--- a/frontend/src/layouts/AppLayout/AppLayout.tsx
+++ b/frontend/src/layouts/AppLayout/AppLayout.tsx
@@ -488,9 +488,9 @@ export const AppLayout = ({ children }: LayoutProps) => {
                             }
                             icon="system-outline-189-domain-verification"
                           >
-                            Secret approval
+                            Secret approvals
                             {Boolean(secretApprovalReqCount?.open) && (
-                              <span className="text-xs p-0.5 rounded ml-2 bg-primary text-black">
+                              <span className="text-xs font-semibold py-0.5 px-1 rounded ml-2 bg-primary-600 border border-primary-400 text-black">
                                 {secretApprovalReqCount?.open}
                               </span>
                             )}
diff --git a/frontend/src/views/SecretMainPage/SecretMainPage.tsx b/frontend/src/views/SecretMainPage/SecretMainPage.tsx
index 4ffa27c86..cf56bbc93 100644
--- a/frontend/src/views/SecretMainPage/SecretMainPage.tsx
+++ b/frontend/src/views/SecretMainPage/SecretMainPage.tsx
@@ -39,9 +39,9 @@ import { StoreProvider } from "./SecretMainPage.store";
 import { Filter, GroupBy, SortDir } from "./SecretMainPage.types";
 
 const LOADER_TEXT = [
-  "Retriving your encrypted secrets",
-  "Fetching folders",
-  "Getting secret import links"
+  "Retrieving your encrypted secrets...",
+  "Fetching folders...",
+  "Getting secret import links..."
 ];
 
 export const SecretMainPage = () => {
diff --git a/frontend/src/views/Settings/BillingSettingsPage/components/BillingCloudTab/PreviewSection.tsx b/frontend/src/views/Settings/BillingSettingsPage/components/BillingCloudTab/PreviewSection.tsx
index ee1ffe989..04d878b67 100644
--- a/frontend/src/views/Settings/BillingSettingsPage/components/BillingCloudTab/PreviewSection.tsx
+++ b/frontend/src/views/Settings/BillingSettingsPage/components/BillingCloudTab/PreviewSection.tsx
@@ -1,3 +1,7 @@
+import Link from "next/link";
+import { faArrowUpRightFromSquare } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
 import { OrgPermissionCan } from "@app/components/permissions";
 import { Button } from "@app/components/v2";
 import {
@@ -74,24 +78,36 @@ export const PreviewSection = () => {
         subscription?.slug !== "enterprise" &&
         subscription?.slug !== "pro" &&
         subscription?.slug !== "pro-annual" && (
-          <div className="p-4 rounded-lg flex-1 border border-mineshaft-600 mb-6 flex items-center bg-mineshaft-600">
-            <div className="flex-1">
-              <h2 className="text-xl font-semibold text-mineshaft-50">Become Infisical</h2>
-              <p className="text-gray-400 mt-4">
-                Unlimited members, projects, RBAC, smart alerts, and so much more
-              </p>
+          <div className="flex flex-row space-x-6">
+            <div className="p-4 rounded-lg flex-1 border border-primary/40 mb-6 flex items-center bg-primary/10">
+              <div className="flex-1">
+                <h2 className="text-xl font-medium text-mineshaft-100">Unleash the full power of <span className="text-transparent font-semibold bg-clip-text bg-gradient-to-r from-primary-500 to-yellow">Infisical</span></h2>
+                <p className="text-gray-400 mt-4">
+                  Get unlimited members, projects, RBAC, smart alerts, and so much more.
+                </p>
+              </div>
+              <OrgPermissionCan I={OrgPermissionActions.Create} a={OrgPermissionSubjects.Billing}>
+                {(isAllowed) => (
+                  <Button
+                    onClick={() => handleUpgradeBtnClick()}
+                    color="mineshaft"
+                    isDisabled={!isAllowed}
+                  >
+                    {!subscription.has_used_trial ? "Start Pro Free Trial" : "Upgrade Plan"}
+                  </Button>
+                )}
+              </OrgPermissionCan>
+            </div>
+            <div className="flex flex-col max-w-[12rem] w-full items-start border border-mineshaft-600 mb-6 flex items-center bg-mineshaft-800 p-4 rounded-lg">
+              <div className="mb-4 flex justify-center w-full font-semibold text-mineshaft-200">Want to learn more? </div>
+              <div className="flex justify-center w-full">
+                <Link href="https://infisical.com/schedule-demo">
+                  <span className="rounded-full px-4 py-2 bg-mineshaft-600 border border-mineshaft-500 hover:bg-primary/10 hover:border-primary/40 duration-200 cursor-pointer">
+                    Book a demo <FontAwesomeIcon icon={faArrowUpRightFromSquare} className="text-xs mb-[0.06rem] ml-1"/>
+                  </span>
+                </Link> 
+              </div>
             </div>
-            <OrgPermissionCan I={OrgPermissionActions.Create} a={OrgPermissionSubjects.Billing}>
-              {(isAllowed) => (
-                <Button
-                  onClick={() => handleUpgradeBtnClick()}
-                  color="mineshaft"
-                  isDisabled={!isAllowed}
-                >
-                  {!subscription.has_used_trial ? "Start Pro Free Trial" : "Upgrade Plan"}
-                </Button>
-              )}
-            </OrgPermissionCan>
           </div>
         )}
       {!isLoading && subscription && data && (