Merge remote-tracking branch 'origin' into delete-org

frontend/src/views/IntegrationsPage/components/IntegrationsSection/IntegrationsSection.tsx

@@ -139,7 +139,7 @@ export const IntegrationsSection = ({
                     </div>
                   </div>
                 )}
-                {(integration.integration === "checkly") && (
+                {((integration.integration === "checkly") || (integration.integration === "github")) && (
                   <div className="ml-2 flex flex-col">
                     <FormLabel label="Secret Suffix" />
                     <div className="rounded-md border border-mineshaft-700 bg-mineshaft-900 px-3 py-2 font-inter text-sm text-bunker-200">

frontend/src/views/Login/components/InitialStep/InitialStep.tsx

@@ -113,7 +113,7 @@ export const InitialStep = ({ setStep, email, setEmail, password, setPassword }:
       <h1 className="mb-8 bg-gradient-to-b from-white to-bunker-200 bg-clip-text text-center text-xl font-medium text-transparent">
         Login to Infisical
       </h1>
-      <div className="mt-4 w-1/4 min-w-[21.2rem] rounded-md text-center md:min-w-[20.1rem] lg:w-1/6">
+      <div className="mt-2 w-1/4 min-w-[21.2rem] rounded-md text-center md:min-w-[20.1rem] lg:w-1/6">
         <Button
           colorSchema="primary"
           variant="outline_bg"
@@ -126,12 +126,12 @@ export const InitialStep = ({ setStep, email, setEmail, password, setPassword }:
             window.close();
           }}
           leftIcon={<FontAwesomeIcon icon={faGoogle} className="mr-2" />}
-          className="mx-0 h-11 w-full"
+          className="mx-0 h-10 w-full"
         >
           {t("login.continue-with-google")}
         </Button>
       </div>
-      <div className="mt-4 w-1/4 min-w-[21.2rem] rounded-md text-center md:min-w-[20.1rem] lg:w-1/6">
+      <div className="mt-2 w-1/4 min-w-[21.2rem] rounded-md text-center md:min-w-[20.1rem] lg:w-1/6">
         <Button
           colorSchema="primary"
           variant="outline_bg"
@@ -145,12 +145,12 @@ export const InitialStep = ({ setStep, email, setEmail, password, setPassword }:
             window.close();
           }}
           leftIcon={<FontAwesomeIcon icon={faGithub} className="mr-2" />}
-          className="mx-0 h-11 w-full"
+          className="mx-0 h-10 w-full"
         >
           Continue with GitHub
         </Button>
       </div>
-      <div className="mt-4 w-1/4 min-w-[21.2rem] rounded-md text-center md:min-w-[20.1rem] lg:w-1/6">
+      <div className="mt-2 w-1/4 min-w-[21.2rem] rounded-md text-center md:min-w-[20.1rem] lg:w-1/6">
         <Button
           colorSchema="primary"
           variant="outline_bg"
@@ -164,12 +164,12 @@ export const InitialStep = ({ setStep, email, setEmail, password, setPassword }:
             window.close();
           }}
           leftIcon={<FontAwesomeIcon icon={faGitlab} className="mr-2" />}
-          className="mx-0 h-11 w-full"
+          className="mx-0 h-10 w-full"
         >
           Continue with GitLab
         </Button>
       </div>
-      <div className="mt-4 w-1/4 min-w-[21.2rem] rounded-md text-center md:min-w-[20.1rem] lg:w-1/6">
+      <div className="mt-2 w-1/4 min-w-[21.2rem] rounded-md text-center md:min-w-[20.1rem] lg:w-1/6">
         <Button
           colorSchema="primary"
           variant="outline_bg"
@@ -177,7 +177,7 @@ export const InitialStep = ({ setStep, email, setEmail, password, setPassword }:
             setStep(2);
           }}
           leftIcon={<FontAwesomeIcon icon={faLock} className="mr-2" />}
-          className="mx-0 h-11 w-full"
+          className="mx-0 h-10 w-full"
         >
           Continue with SSO
         </Button>
@@ -195,10 +195,10 @@ export const InitialStep = ({ setStep, email, setEmail, password, setPassword }:
           placeholder="Enter your email..."
           isRequired
           autoComplete="username"
-          className="h-11"
+          className="h-10"
         />
       </div>
-      <div className="mt-4 w-1/4 min-w-[21.2rem] rounded-md text-center md:min-w-[20.1rem] lg:w-1/6">
+      <div className="mt-2 w-1/4 min-w-[21.2rem] rounded-md text-center md:min-w-[20.1rem] lg:w-1/6">
         <Input
           value={password}
           onChange={(e) => setPassword(e.target.value)}
@@ -207,15 +207,15 @@ export const InitialStep = ({ setStep, email, setEmail, password, setPassword }:
           isRequired
           autoComplete="current-password"
           id="current-password"
-          className="select:-webkit-autofill:focus h-11"
+          className="select:-webkit-autofill:focus h-10"
         />
       </div>
-      <div className="mt-5 w-1/4 min-w-[21.2rem] rounded-md text-center md:min-w-[20.1rem] lg:w-1/6">
+      <div className="mt-3 w-1/4 min-w-[21.2rem] rounded-md text-center md:min-w-[20.1rem] lg:w-1/6">
         <Button
           type="submit"
           size="sm"
           isFullWidth
-          className="h-11"
+          className="h-10"
           colorSchema="primary"
           variant="solid"
           isLoading={isLoading}
@@ -227,10 +227,9 @@ export const InitialStep = ({ setStep, email, setEmail, password, setPassword }:
       {!isLoading && loginError && <Error text={t("login.error-login") ?? ""} />}
       {!serverDetails?.inviteOnlySignup ? (
         <div className="mt-6 flex flex-row text-sm text-bunker-400">
-          <span className="mr-1">Don&apos;t have an acount yet?</span>
           <Link href="/signup">
             <span className="cursor-pointer duration-200 hover:text-bunker-200 hover:underline hover:decoration-primary-700 hover:underline-offset-4">
-              {t("login.create-account")}
+              Don&apos;t have an acount yet? {t("login.create-account")}
             </span>
           </Link>
         </div>
@@ -238,10 +237,9 @@ export const InitialStep = ({ setStep, email, setEmail, password, setPassword }:
         <div />
       )}
       <div className="flex flex-row text-sm text-bunker-400">
-        <span className="mr-1">Forgot password?</span>
         <Link href="/verify-email">
           <span className="cursor-pointer duration-200 hover:text-bunker-200 hover:underline hover:decoration-primary-700 hover:underline-offset-4">
-            Recover your account
+            Forgot password? Recover your account
           </span>
         </Link>
       </div>

frontend/src/views/SecretApprovalPage/SecretApprovalPage.tsx

@@ -14,7 +14,7 @@ export const SecretApprovalPage = () => {
   const workspaceId = currentWorkspace?._id || "";
 
   return (
-    <div className="container mx-auto bg-bunker-800 text-white w-full h-full max-w-7xl">
+    <div className="container mx-auto bg-bunker-800 text-white w-full h-full max-w-7xl px-6">
       <div className="my-6">
         <p className="text-3xl font-semibold text-gray-200">Secret Approvals</p>
       </div>

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 = () => {

frontend/src/views/SecretOverviewPage/SecretOverviewPage.tsx

@@ -325,7 +325,7 @@ export const SecretOverviewPage = () => {
                   className="bg-mineshaft-700"
                 />
               )}
-              {isTableEmpty && (
+              {isTableEmpty && !isTableLoading && (
                 <Tr>
                   <Td colSpan={userAvailableEnvs.length + 1}>
                     <EmptyState title="Let's add some secrets" icon={faFolderBlank} iconSize="3x">
@@ -335,7 +335,7 @@ export const SecretOverviewPage = () => {
                           query: { id: workspaceId, env: userAvailableEnvs?.[0]?.slug }
                         }}
                       >
-                        <Button className="mt-2 p-1">Go to {userAvailableEnvs?.[0]?.name}</Button>
+                        <Button className="mt-4" variant="outline_bg" colorSchema="primary" size="md">Go to {userAvailableEnvs?.[0]?.name}</Button>
                       </Link>
                     </EmptyState>
                   </Td>

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 && (