Merge pull request #701 from Infisical/main

Update branch

frontend/src/components/v2/DeleteActionModal/DeleteActionModal.tsx

@@ -13,6 +13,7 @@ type Props = {
   onChange?: (isOpen: boolean) => void;
   deleteKey: string;
   title: string;
+  subTitle?: string;
   onDeleteApproved: () => Promise<void>;
 };
 
@@ -22,7 +23,8 @@ export const DeleteActionModal = ({
   onChange,
   deleteKey,
   onDeleteApproved,
-  title
+  title,
+  subTitle = "This action is irreversible!"
 }: Props): JSX.Element => {
   const [inputData, setInputData] = useState("");
   const [isLoading, setIsLoading] = useToggle();
@@ -52,7 +54,7 @@ export const DeleteActionModal = ({
     >
       <ModalContent
         title={title}
-        subTitle="This action is irreversible!"
+        subTitle={subTitle}
         footerContent={
           <div className="flex items-center">
             <Button

frontend/src/components/v2/FormControl/FormControl.tsx

@@ -11,7 +11,7 @@ export type FormLabelProps = {
 };
 
 export const FormLabel = ({ id, label, isRequired }: FormLabelProps) => (
-  <Label.Root className="mb-1 ml-0.5 block text-sm font-medium text-mineshaft-300" htmlFor={id}>
+  <Label.Root className="mb-0.5 ml-1 block text-sm font-normal text-mineshaft-400" htmlFor={id}>
     {label}
     {isRequired && <span className="ml-1 text-red">*</span>}
   </Label.Root>

frontend/src/components/v2/UpgradePlanModal/UpgradePlanModal.tsx

@@ -1,5 +1,7 @@
 import Link from "next/link";
 
+import { useSubscription } from "@app/context";
+
 import { Button } from "../Button";
 import { Modal, ModalClose, ModalContent } from "../Modal";
 
@@ -9,28 +11,35 @@ type Props = {
   text: string;
 };
 
-export const UpgradePlanModal = ({ text, isOpen, onOpenChange }: Props): JSX.Element => (
-  <Modal isOpen={isOpen} onOpenChange={onOpenChange}>
-    <ModalContent
-      title="Unleash Infisical's Full Power"
-      footerContent={[
-        <Link
-          href={`/settings/billing/${localStorage.getItem("projectData.id") as string}`}
-          key="upgrade-plan"
-        >
-          <Button className="mr-4 ml-2 mb-2">Upgrade Plan</Button>
-        </Link>,
-        <ModalClose asChild key="upgrade-plan-cancel">
-          <Button colorSchema="secondary" variant="plain">
-            Cancel
-          </Button>
-        </ModalClose>
-      ]}
-    >
-      <p className="mb-2 text-bunker-300">{text}</p>
-      <p className="text-bunker-300">
-        Upgrade and get access to this, as well as to other powerful enhancements.
-      </p>
-    </ModalContent>
-  </Modal>
-);
+export const UpgradePlanModal = ({ text, isOpen, onOpenChange }: Props): JSX.Element => {
+  const { subscription } = useSubscription();
+  const link = (subscription && subscription.slug !== null) 
+    ? `/settings/billing/${localStorage.getItem("projectData.id") as string}` 
+    : "https://infisical.com/scheduledemo";
+  
+  return (
+    <Modal isOpen={isOpen} onOpenChange={onOpenChange}>
+      <ModalContent
+        title="Unleash Infisical's Full Power"
+        footerContent={[
+          <Link
+            href={link}
+            key="upgrade-plan"
+          >
+            <Button className="mr-4 ml-2 mb-2">Upgrade Plan</Button>
+          </Link>,
+          <ModalClose asChild key="upgrade-plan-cancel">
+            <Button colorSchema="secondary" variant="plain">
+              Cancel
+            </Button>
+          </ModalClose>
+        ]}
+      >
+        <p className="mb-2 text-bunker-300">{text}</p>
+        <p className="text-bunker-300">
+          Upgrade and get access to this, as well as to other powerful enhancements.
+        </p>
+      </ModalContent>
+    </Modal>
+  )
+}