Merge branch 'main' into fix/undefined-url

frontend/src/pages/dashboard/[id].tsx

@@ -423,9 +423,9 @@ export default function Dashboard() {
               newData!.filter((dataPoint) => dataPoint.id === initDataPoint.id)[0].key !==
                 initDataPoint.key ||
               newData!.filter((dataPoint) => dataPoint.id === initDataPoint.id)[0].comment !==
-                initDataPoint.comment) ||
+                initDataPoint.comment ||
               newData!.filter((dataPoint) => dataPoint.id === initDataPoint.id)[0]?.tags !==
-                initDataPoint?.tags
+                initDataPoint?.tags)
         )
         .map((secret) => secret.id)
         .includes(newDataPoint.id)

frontend/src/pages/home/[id].tsx

@@ -1,5 +1,6 @@
 import { useEffect, useState } from 'react';
 import Head from 'next/head';
+import Image from 'next/image';
 import { useRouter } from 'next/router';
 import { IconProp } from '@fortawesome/fontawesome-svg-core';
 import { faSlack } from '@fortawesome/free-brands-svg-icons';
@@ -16,6 +17,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
 import onboardingCheck from '@app/components/utilities/checks/OnboardingCheck';
 import { getTranslatedServerSideProps } from '@app/components/utilities/withTranslateProps';
+import { TabsObject } from '@app/components/v2/Tabs';
 
 import registerUserAction from '../api/userActions/registerUserAction';
 
@@ -43,7 +45,7 @@ const learningItem = ({
       <a
         target={`${link.includes('https') ? '_blank' : '_self'}`}
         rel="noopener noreferrer"
-        className="w-full"
+        className={`w-full ${complete && 'opacity-30 hover:opacity-100 duration-200'}`}
         href={link}
       >
         <div
@@ -57,13 +59,13 @@ const learningItem = ({
               });
             }
           }}
-          className="relative bg-bunker-700 hover:bg-bunker-500 shadow-xl duration-200 rounded-md border border-dashed border-bunker-400 pl-2 pr-6 py-2 h-[5.5rem] w-full flex items-center justify-between overflow-hidden my-1.5 cursor-pointer"
+          className="relative group bg-bunker-500 hover:bg-mineshaft-700 shadow-xl duration-200 rounded-md border border-mineshaft-600 pl-2 pr-6 py-2 h-[5.5rem] w-full flex items-center justify-between overflow-hidden mb-3 cursor-pointer"
         >
           <div className="flex flex-row items-center mr-4">
             <FontAwesomeIcon icon={icon} className="text-4xl mx-2 w-16" />
             {complete && (
-              <div className="bg-bunker-700 w-7 h-7 rounded-full absolute left-12 top-10 p-2 flex items-center justify-center">
-                <FontAwesomeIcon icon={faCheckCircle} className="text-4xl w-5 h-5 text-green" />
+              <div className="bg-bunker-500 group-hover:bg-mineshaft-700 w-7 h-7 rounded-full absolute left-12 top-10 p-2 flex items-center justify-center">
+                <FontAwesomeIcon icon={faCheckCircle} className="text-4xl w-5 h-5 text-primary" />
               </div>
             )}
             <div className="flex flex-col items-start">
@@ -72,11 +74,11 @@ const learningItem = ({
             </div>
           </div>
           <div
-            className={`pr-4 font-semibold text-sm w-28 text-right ${complete && 'text-green'}`}
+            className={`pr-4 font-semibold text-sm w-28 text-right ${complete && 'text-primary'}`}
           >
             {complete ? 'Complete!' : `About ${time}`}
           </div>
-          {complete && <div className="absolute bottom-0 left-0 h-1 w-full bg-green" />}
+          {complete && <div className="absolute bottom-0 left-0 h-1 w-full bg-primary" />}
         </div>
       </a>
     );
@@ -101,7 +103,7 @@ const learningItem = ({
           <div className="bg-bunker-700 w-7 h-7 rounded-full absolute left-11 top-10">
             <FontAwesomeIcon
               icon={faCheckCircle}
-              className="absolute text-4xl left-12 top-16 w-5 h-5 text-green"
+              className="absolute text-4xl left-12 top-16 w-5 h-5 text-primary"
             />
           </div>
         )}
@@ -110,10 +112,10 @@ const learningItem = ({
           <div className="text-sm font-normal mt-0.5">{subText}</div>
         </div>
       </div>
-      <div className={`pr-4 font-semibold text-sm w-28 text-right ${complete && 'text-green'}`}>
+      <div className={`pr-4 font-semibold text-sm w-28 text-right ${complete && 'text-primary'}`}>
         {complete ? 'Complete!' : `About ${time}`}
       </div>
-      {complete && <div className="absolute bottom-0 left-0 h-1 w-full bg-green" />}
+      {complete && <div className="absolute bottom-0 left-0 h-1 w-full bg-primary" />}
     </div>
   );
 };
@@ -142,16 +144,17 @@ export default function Home() {
   }, []);
 
   return (
-    <div className="mx-6 lg:mx-0 w-full overflow-y-scroll pt-4">
+    <div className="mx-6 lg:mx-0 w-full pt-4">
       <Head>
         <title>Infisical Guide</title>
         <link rel="icon" href="/infisical.ico" />
       </Head>
-      <div className="flex flex-col items-center text-gray-300 text-lg mx-auto max-w-2xl lg:max-w-3xl xl:max-w-4xl py-6">
-        <div className="text-3xl font-bold text-left w-full">Your quick start guide</div>
-        <div className="text-md text-left w-full pt-2 pb-4 text-bunker-300">
+      <div className="flex relative flex-col items-center text-gray-300 text-lg mx-auto px-6 max-w-3xl lg:max-w-4xl xl:max-w-5xl py-6">
+        <div className="text-5xl font-bold text-left w-full mt-12">Your quick start guide</div>
+        <div className="text-lg text-left w-full pt-2 pb-4 mb-14 text-bunker-300">
           Click on the items below and follow the instructions.
         </div>
+        <div className='absolute h-min top-0 right-0 hidden lg:block'><Image src="/images/dragon-book.svg" height={250} width={400} alt="start guise dragon illustration" /></div>
         {learningItem({
           text: 'Get to know Infisical',
           subText: '',
@@ -170,17 +173,32 @@ export default function Home() {
           userAction: 'first_time_secrets_pushed',
           link: `/dashboard/${router.query.id}`
         })}
-        {learningItem({
-          text: 'Inject secrets locally',
-          subText: 'Replace .env files with a more secure and efficient alternative.',
-          complete: false,
-          icon: faNetworkWired,
-          time: '8 min',
-          link: 'https://infisical.com/docs/getting-started/quickstart'
-        })}
+        <div className="relative group bg-bunker-500 shadow-xl duration-200 rounded-md border border-mineshaft-600 pl-2 pr-2 pt-4 pb-2 h-full w-full flex flex-col items-center justify-between overflow-hidden mb-3 cursor-default">
+          <div className='w-full flex flex-row items-center mb-4 pr-4'>
+            <div className="flex flex-row items-center mr-4 w-full">
+              <FontAwesomeIcon icon={faNetworkWired} className="text-4xl mx-2 w-16" />
+              {false && (
+                <div className="bg-bunker-500 group-hover:bg-mineshaft-700 w-7 h-7 rounded-full absolute left-12 top-10 p-2 flex items-center justify-center">
+                  <FontAwesomeIcon icon={faCheckCircle} className="text-4xl w-5 h-5 text-green" />
+                </div>
+              )}
+              <div className="flex pl-0.5 flex-col items-start">
+                <div className="text-xl font-semibold mt-0.5">Inject secrets locally</div>
+                <div className="text-sm font-normal">Replace .env files with a more secure and efficient alternative.</div>
+              </div>
+            </div>
+            <div
+              className={`pr-4 font-semibold text-sm w-28 text-right ${false && 'text-green'}`}
+            >
+              About 2 min
+            </div>
+          </div>
+          <TabsObject/>
+          {false && <div className="absolute bottom-0 left-0 h-1 w-full bg-green" />}
+        </div>
         {learningItem({
           text: 'Integrate Infisical with your infrastructure',
-          subText: 'Only a few integrations are currently available. Many more coming soon!',
+          subText: 'Connect Infisical to various 3rd party services and platforms.',
           complete: false,
           icon: faPlug,
           time: '15 min',

frontend/src/pages/requestnewinvite.tsx

@@ -20,7 +20,7 @@ export default function RequestNewInvite() {
           doesn't work, please reach out to us at support@infisical.com
         </p>
         <div className="">
-          <Image src="/images/invitation-expired.svg" height={500} width={800} alt="google logo" />
+          <Image src="/images/invitation-expired.svg" height={500} width={800} alt="invitation expired illustration" />
         </div>
       </div>
     </div>

frontend/src/pages/settings/billing/[id].tsx

@@ -31,7 +31,7 @@ export default function SettingsBilling() {
     {
       key: 2,
       name: 'Team',
-      price: '$7',
+      price: '$8',
       priceExplanation: t('billing:professional.price-explanation')!,
       text: 'For teams that want to improve their efficiency and security.',
       buttonTextMain: t('billing:upgrade')!,
@@ -41,7 +41,7 @@ export default function SettingsBilling() {
     {
       key: 3,
       name: t('billing:professional.name')!,
-      price: '$14',
+      price: '$18',
       priceExplanation: t('billing:professional.price-explanation')!,
       text: t('billing:enterprise.text')!,
       subtext: t('billing:professional.subtext')!,

frontend/src/pages/settings/org/[id].tsx

@@ -222,7 +222,6 @@ export default function SettingsOrg() {
                 submitModal={submitAddUserModal}
                 email={emailUser}
                 setEmail={setEmailUser}
-                currentPlan={currentPlan}
                 orgName={orgName}
               />
               <UpgradePlanModal