Updated UI for Vercel, GCP, GitLab, Checkly, Vault integrations

frontend/src/pages/integrations/hashicorp-vault/authorize.tsx

@@ -1,5 +1,6 @@
 import { useState } from "react";
 import Head from "next/head";
+import Image from "next/image";
 import Link from "next/link";
 import { useRouter } from "next/router";
 import { faArrowUpRightFromSquare, faBookOpen } from "@fortawesome/free-solid-svg-icons";
@@ -91,18 +92,28 @@ export default function HashiCorpVaultAuthorizeIntegrationPage() {
       <Card className="max-w-lg rounded-md border border-mineshaft-600 mb-12">
         <CardTitle 
           className="text-left px-6 text-xl" 
-          subTitle="After adding connecting to Vault, you will be prompted to set up an integration for a particular Infisical project and environment."
+          subTitle="After connecting to Vault, you will be prompted to set up an integration for a particular Infisical project and environment."
         >
-          HashiCorp Vault Integration 
-          <Link href="https://infisical.com/docs/integrations/cloud/hashicorp-vault" passHref>
-            <a target="_blank" rel="noopener noreferrer">
-              <div className="ml-2 mb-1 rounded-md text-yellow text-sm inline-block bg-yellow/20 px-1.5 pb-[0.03rem] pt-[0.04rem] opacity-80 hover:opacity-100 cursor-default">
-                <FontAwesomeIcon icon={faBookOpen} className="mr-1.5"/> 
-                Docs
-                <FontAwesomeIcon icon={faArrowUpRightFromSquare} className="ml-1.5 text-xxs mb-[0.07rem]"/> 
-              </div>
-            </a>
-          </Link>
+          <div className="flex flex-row items-center">
+            <div className="inline flex items-center">
+              <Image
+                src="/images/integrations/Vault.png"
+                height={30}
+                width={30}
+                alt="HCP Vault logo"
+              />
+            </div>
+            <span className="ml-2.5">HashiCorp Vault Integration</span>
+            <Link href="https://infisical.com/docs/integrations/cloud/hashicorp-vault" passHref>
+              <a target="_blank" rel="noopener noreferrer">
+                <div className="ml-2 mb-1 rounded-md text-yellow text-sm inline-block bg-yellow/20 px-1.5 pb-[0.03rem] pt-[0.04rem] opacity-80 hover:opacity-100 cursor-default">
+                  <FontAwesomeIcon icon={faBookOpen} className="mr-1.5"/> 
+                  Docs
+                  <FontAwesomeIcon icon={faArrowUpRightFromSquare} className="ml-1.5 text-xxs mb-[0.07rem]"/> 
+                </div>
+              </a>
+            </Link>
+          </div>
         </CardTitle>
         <FormControl
           label="Vault Cluster URL"

frontend/src/pages/integrations/hashicorp-vault/create.tsx

@@ -1,8 +1,9 @@
 import { useState } from "react";
 import Head from "next/head";
+import Image from "next/image";
 import Link from "next/link";
 import { useRouter } from "next/router";
-import { faArrowUpRightFromSquare, faBookOpen, faBugs } from "@fortawesome/free-solid-svg-icons";
+import { faArrowUpRightFromSquare, faBookOpen, faBugs, faCircleInfo } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import queryString from "query-string";
 
@@ -83,26 +84,36 @@ export default function HashiCorpVaultCreateIntegrationPage() {
   };
 
   return integrationAuth && workspace ? (
-    <div className="flex h-full w-full items-center justify-center">
+    <div className="flex flex-col h-full w-full items-center justify-center">
       <Head>
         <title>Set Up Vault Integration</title>
         <link rel='icon' href='/infisical.ico' />
       </Head>
-      <Card className="max-w-lg rounded-md border border-mineshaft-600 mb-12">
+      <Card className="max-w-lg rounded-md border border-mineshaft-600">
         <CardTitle 
           className="text-left px-6 text-xl" 
-          subTitle="After creating an integration, your secrets will automatically start syncing from Infisical to Vault."
+          subTitle="Select which environment or folder in Infisical you want to sync to which path in HashiCorp Vault."
         >
-          HashiCorp Vault Integration 
-          <Link href="https://infisical.com/docs/integrations/cloud/hashicorp-vault" passHref>
-            <a target="_blank" rel="noopener noreferrer">
-              <div className="ml-2 mb-1 rounded-md text-yellow text-sm inline-block bg-yellow/20 px-1.5 pb-[0.03rem] pt-[0.04rem] opacity-80 hover:opacity-100 cursor-default">
-                <FontAwesomeIcon icon={faBookOpen} className="mr-1.5"/> 
-                Docs
-                <FontAwesomeIcon icon={faArrowUpRightFromSquare} className="ml-1.5 text-xxs mb-[0.07rem]"/> 
-              </div>
-            </a>
-          </Link>
+          <div className="flex flex-row items-center">
+            <div className="inline flex items-center">
+              <Image
+                src="/images/integrations/Vault.png"
+                height={30}
+                width={30}
+                alt="HCP Vault logo"
+              />
+            </div>
+            <span className="ml-2.5">HashiCorp Vault Integration</span>
+            <Link href="https://infisical.com/docs/integrations/cloud/hashicorp-vault" passHref>
+              <a target="_blank" rel="noopener noreferrer">
+                <div className="ml-2 mb-1 rounded-md text-yellow text-sm inline-block bg-yellow/20 px-1.5 pb-[0.03rem] pt-[0.04rem] opacity-80 hover:opacity-100 cursor-default">
+                  <FontAwesomeIcon icon={faBookOpen} className="mr-1.5"/> 
+                  Docs
+                  <FontAwesomeIcon icon={faArrowUpRightFromSquare} className="ml-1.5 text-xxs mb-[0.07rem]"/> 
+                </div>
+              </a>
+            </Link>
+          </div>
         </CardTitle>
         <FormControl label="Project Environment" className="px-6">
           <Select
@@ -162,11 +173,16 @@ export default function HashiCorpVaultCreateIntegrationPage() {
           Create Integration
         </Button>
       </Card>
+      <div className="border-t border-mineshaft-800 w-full max-w-md mt-6"/>
+      <div className="flex flex-col bg-mineshaft-800 border border-mineshaft-600 w-full p-4 max-w-lg mt-6 rounded-md">
+        <div className="flex flex-row items-center"><FontAwesomeIcon icon={faCircleInfo} className="text-mineshaft-200 text-xl"/> <span className="ml-3 text-md text-mineshaft-100">Pro Tips</span></div>
+        <span className="text-mineshaft-300 text-sm mt-4">After creating an integration, your secrets will start syncing immediately. This might cause an unexpected override of current secrets in Vault with secrets from Infisical.</span>
+      </div>
     </div>
   ) : (
     <div className="flex justify-center items-center w-full h-full">
       <Head>
-        <title>Set Up GCP Secret Manager Integration</title>
+        <title>Set Up Vault Integration</title>
         <link rel='icon' href='/infisical.ico' />
       </Head>
       {isintegrationAuthLoading ? <img src="/images/loading/loading.gif" height={70} width={120} alt="infisical loading indicator" /> : <div className="max-w-md h-max p-6 border border-mineshaft-600 rounded-md bg-mineshaft-800 text-mineshaft-200 flex flex-col text-center">