Final style changes to signup

frontend/src/components/login/InitialLoginStep.tsx

@@ -1,8 +1,9 @@
 import { useTranslation } from 'react-i18next';
 import Link from 'next/link';
-import { faGoogle } from '@fortawesome/free-brands-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { useRouter } from 'next/router';
 
+// import { faGoogle } from '@fortawesome/free-brands-svg-icons';
+// import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Button } from '../v2';
 
 export default function InitialLoginStep({
@@ -11,11 +12,12 @@ export default function InitialLoginStep({
     setIsLoginWithEmail: (value: boolean) => void;
 }) {
 
+    const router = useRouter();
     const { t } = useTranslation();
 
     return <div className='flex flex-col mx-auto w-full justify-center items-center'>
         <h1 className='text-xl font-medium text-transparent bg-clip-text bg-gradient-to-b from-white to-bunker-200 text-center mb-8' >Login to Infisical</h1>
-        <div className='lg:w-1/6 w-1/4 min-w-[20rem] rounded-md'>
+        {/* <div className='lg:w-1/6 w-1/4 min-w-[20rem] rounded-md'>
             <Button
                 colorSchema="primary" 
                 variant="solid"
@@ -27,11 +29,11 @@ export default function InitialLoginStep({
             > 
                 {t('login.continue-with-google')}
             </Button>
-        </div>
-        <div className='lg:w-1/6 w-1/4 min-w-[20rem] text-center rounded-md mt-4'>
+        </div> */}
+        <div className='lg:w-1/6 w-1/4 min-w-[20rem] text-center rounded-md'>
             <Button
                 colorSchema="primary" 
-                variant="outline_bg"
+                variant="solid"
                 onClick={() => {
                     setIsLoginWithEmail(true);
                 }} 
@@ -41,6 +43,17 @@ export default function InitialLoginStep({
                 {t('login.continue-with-email')} 
             </Button>
         </div>
+        <div className='lg:w-1/6 w-1/4 min-w-[20rem] text-center rounded-md mt-4'>
+            <Button
+                colorSchema="primary" 
+                variant="outline_bg"
+                onClick={() => router.push("/saml-sso")} 
+                isFullWidth
+                className="h-14 w-full mx-0"
+            > 
+                Continue with SAML SSO
+            </Button>
+        </div>
         <div className="mt-4 text-bunker-400 text-sm flex flex-row">
             <span className="mr-1">Don&apos;t have an acount yet?</span>
             <Link href="/signup">

frontend/src/components/signup/EnterEmailStep.tsx

@@ -83,9 +83,9 @@ export default function EnterEmailStep({
       <div className="mx-auto mb-48 mt-2 flex w-full max-w-md flex-col items-center justify-center pt-2 md:mb-16 md:pb-2">
         <Link href="/login">
           <button type="button" className="w-max pb-3 duration-200 hover:opacity-90">
-            <u className="text-sm font-normal text-primary-500">
+            <span className="text-sm text-mineshaft-400 hover:underline hover:underline-offset-4 hover:decoration-primary-700 hover:text-bunker-200 duration-200 cursor-pointer">
               {t('signup.already-have-account')}
-            </u>
+            </span>
           </button>
         </Link>
       </div>

frontend/src/components/signup/InitialSignupStep.tsx

@@ -1,8 +1,9 @@
 import { useTranslation } from 'react-i18next';
 import Link from 'next/link';
-import { faGoogle } from '@fortawesome/free-brands-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { useRouter } from 'next/router';
 
+// import { faGoogle } from '@fortawesome/free-brands-svg-icons';
+// import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Button } from '../v2';
 
 export default function InitialSignupStep({
@@ -11,10 +12,11 @@ export default function InitialSignupStep({
     setIsSignupWithEmail: (value: boolean) => void
 }) {
     const { t } = useTranslation();
+    const router = useRouter();
 
-    return <div className='flex flex-col mx-auto w-full justify-center items-center '>
+    return <div className='flex flex-col mx-auto w-full justify-center items-center'>
         <h1 className='text-xl font-medium text-transparent bg-clip-text bg-gradient-to-b from-white to-bunker-200 text-center mb-8' >{t('signup.initial-title')}</h1>
-        <div className='lg:w-1/6 w-1/4 min-w-[20rem] rounded-md'>
+        {/* <div className='lg:w-1/6 w-1/4 min-w-[20rem] rounded-md'>
             <Button
                 colorSchema="primary"
                 variant="solid"
@@ -26,11 +28,11 @@ export default function InitialSignupStep({
             >
                 {t('signup.continue-with-google')}
             </Button>
-        </div>
-        <div className='lg:w-1/6 w-1/4 min-w-[20rem] text-center rounded-md mt-4'>
+        </div> */}
+        <div className='lg:w-1/6 w-1/4 min-w-[20rem] text-center rounded-md'>
             <Button
                 colorSchema="primary"
-                variant="outline_bg"
+                variant="solid"
                 onClick={() => {
                     setIsSignupWithEmail(true);
                 }}
@@ -40,6 +42,17 @@ export default function InitialSignupStep({
                 {t('signup.continue-with-email')}
             </Button>
         </div>
+        <div className='lg:w-1/6 w-1/4 min-w-[20rem] text-center rounded-md mt-4'>
+            <Button
+                colorSchema="primary" 
+                variant="outline_bg"
+                onClick={() => router.push("/saml-sso")} 
+                isFullWidth
+                className="h-14 w-full mx-0"
+            > 
+                Continue with SAML SSO
+            </Button>
+        </div>
         <div className='lg:w-1/6 w-1/4 min-w-[20rem] px-8 text-center mt-6 text-xs text-bunker-400'>
             {t('signup.create-policy')}
         </div>

frontend/src/components/signup/TeamInviteStep.tsx

@@ -43,13 +43,13 @@ export default function TeamInviteStep(): JSX.Element {
       <p className="text-center flex justify-center text-bunker-400 md:mx-8 mb-6 mt-4">
         {t('signup.step5-subtitle')}
       </p>
-      <div className="bg-mineshaft-800 border border-mineshaft-600 w-max mx-auto pt-6 pb-4 px-8 rounded-xl drop-shadow-xl mb-6">
+      <div className="bg-mineshaft-800 border border-mineshaft-500 w-max mx-auto pt-6 pb-4 px-8 rounded-xl drop-shadow-xl mb-6">
         <div>
           <div className="text-bunker-300 font-medium pl-1 pb-1 text-sm">
             <span>Emails</span>
           </div>
           <textarea
-            className="bg-mineshaft-900 min-w-[30rem] h-20 w-full placeholder:text-bunker-400 py-1 px-2 rounded-md border border-mineshaft-500 text-sm text-bunker-300 outline-none focus:ring-2 ring-primary-800 ring-opacity-70"
+            className="bg-mineshaft-900/70 min-w-[30rem] h-20 w-full placeholder:text-bunker-400 py-1 px-2 rounded-md border border-mineshaft-500 text-sm text-bunker-300 outline-none focus:ring-2 ring-primary-800 ring-opacity-70"
             value={emails}
             onChange={(e) => setEmails(e.target.value)}
             placeholder="[email protected], [email protected]..."

frontend/src/components/signup/UserInfoStep.tsx

@@ -153,7 +153,7 @@ export default function UserInfoStep({
               const response = await completeAccountInformationSignup({
                 email,
                 firstName: name.split(" ")[0],
-                lastName: name.split(" ")[1],
+                lastName: name.split(" ").slice(1).join(' '),
                 protectedKey,
                 protectedKeyIV,
                 protectedKeyTag,
@@ -165,6 +165,7 @@ export default function UserInfoStep({
                 salt: result.salt,
                 verifier: result.verifier,
                 organizationName,
+                attributionSource,
               });
 
               // unset signup JWT token and set JWT token

frontend/src/components/v2/Button/Button.tsx

@@ -76,7 +76,7 @@ const buttonVariants = cva(
       {
         colorSchema: 'primary',
         variant: 'outline_bg',
-        className: 'bg-mineshaft-800 border border-mineshaft-600 hover:bg-primary/[0.1] hover:border-primary/40 text-bunker-200'
+        className: 'bg-mineshaft-600 border border-mineshaft-500 hover:bg-primary/[0.1] hover:border-primary/40 text-bunker-200'
       },
       {
         colorSchema: 'secondary',