Style changes to login

frontend/public/images/gradientLogo.svg

@@ -0,0 +1,9 @@
+<svg width="91" height="43" viewBox="0 0 91 43" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M21.9734 0C24.8526 0 27.4793 0.412021 29.8535 1.23606C32.2528 2.06011 34.4123 3.13386 36.3318 4.45732C38.2766 5.75581 39.9814 7.10424 41.4463 8.50261C42.2545 9.25174 42.987 9.98839 43.6436 10.7125C44.3003 11.4367 44.9317 12.1609 45.5379 12.885C46.0935 12.1609 46.6618 11.4617 47.2427 10.7875C47.8489 10.0883 48.6066 9.32665 49.5158 8.50261C51.7132 6.38008 54.4409 4.43235 57.699 2.65941C60.9824 0.886471 64.7835 0 69.1024 0C73.1435 0 76.8183 0.97387 80.127 2.92161C83.4609 4.84437 86.1002 7.42886 88.045 10.6751C90.015 13.9213 91 17.5171 91 21.4625C91 24.4591 90.4317 27.2683 89.2952 29.8902C88.1586 32.4872 86.5927 34.7721 84.5974 36.7448C82.6021 38.6925 80.2785 40.2282 77.6266 41.3519C74.9746 42.4506 72.1332 43 69.1024 43C66.2231 43 63.5712 42.6005 61.1465 41.8014C58.7472 40.9774 56.5751 39.9286 54.6303 38.6551C52.7108 37.3815 51.0186 36.0706 49.5537 34.7221C48.7202 33.8981 47.9752 33.124 47.3185 32.3998C46.6871 31.6507 46.0935 30.9141 45.5379 30.1899C44.9065 30.9141 44.2624 31.6507 43.6057 32.3998C42.9491 33.149 42.2166 33.9231 41.4084 34.7221C39.9688 36.0706 38.2766 37.3815 36.3318 38.6551C34.4123 39.9036 32.2528 40.9399 29.8535 41.7639C27.4793 42.588 24.8526 43 21.9734 43C17.8818 43 14.1817 42.0386 10.873 40.1159C7.56439 38.1931 4.92506 35.6086 2.95504 32.3624C0.985013 29.0912 0 25.4579 0 21.4625C0 18.491 0.555648 15.7192 1.66694 13.1472C2.8035 10.5502 4.36941 8.26539 6.3647 6.29269C8.38523 4.31998 10.7215 2.78427 13.3734 1.68554C16.0507 0.561848 18.9173 0 21.9734 0ZM10.4563 21.4625C10.4563 23.5351 10.974 25.4204 12.0096 27.1185C13.0451 28.8165 14.4342 30.1649 16.1769 31.1638C17.9197 32.1626 19.8518 32.662 21.9734 32.662C24.3475 32.662 26.5322 32.1376 28.5275 31.0889C30.5228 30.0401 32.3791 28.7166 34.0966 27.1185C35.1826 26.0947 36.1171 25.1083 36.9001 24.1594C37.683 23.2105 38.365 22.3116 38.9459 21.4625C38.3397 20.6635 37.6199 19.777 36.7864 18.8031C35.9782 17.8043 35.0816 16.8554 34.0966 15.9564C32.4802 14.3833 30.649 13.0598 28.6032 11.9861C26.5575 10.8873 24.3475 10.338 21.9734 10.338C19.8518 10.338 17.9197 10.8499 16.1769 11.8737C14.4342 12.8725 13.0451 14.221 12.0096 15.919C10.974 17.592 10.4563 19.4399 10.4563 21.4625ZM80.4679 21.4625C80.4679 19.4399 79.9502 17.592 78.9146 15.919C77.9044 14.221 76.5405 12.8725 74.8231 11.8737C73.1056 10.8499 71.1987 10.338 69.1024 10.338C67.486 10.338 65.9453 10.5877 64.4804 11.0871C63.0155 11.5865 61.639 12.2607 60.351 13.1098C59.0881 13.9588 57.9263 14.9077 56.8655 15.9564C55.729 17.0052 54.7313 18.079 53.8726 19.1777C53.0139 20.2515 52.3951 21.0131 52.0162 21.4625C52.6477 22.3365 53.3549 23.248 54.1378 24.1969C54.9208 25.1208 55.83 26.0947 56.8655 27.1185C58.5577 28.7166 60.4015 30.0401 62.3968 31.0889C64.4173 32.1376 66.6525 32.662 69.1024 32.662C71.1987 32.662 73.1056 32.1626 74.8231 31.1638C76.5405 30.1649 77.9044 28.8165 78.9146 27.1185C79.9502 25.4204 80.4679 23.5351 80.4679 21.4625Z" fill="url(#paint0_linear_491_1466)"/>
+<defs>
+<linearGradient id="paint0_linear_491_1466" x1="46" y1="-1.40259e-06" x2="66" y2="80.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#D9E8FF"/>
+<stop offset="1" stop-color="white" stop-opacity="0.36"/>
+</linearGradient>
+</defs>
+</svg>

frontend/src/components/login/InitialLoginStep.tsx

@@ -1,8 +1,12 @@
 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 { getTranslatedStaticProps } from '@app/components/utilities/withTranslateProps';
 
+import { Button } from '../v2';
+
 export default function InitialLoginStep({
     setIsLoginWithEmail,
 }: {
@@ -12,26 +16,39 @@ export default function InitialLoginStep({
     const { t } = useTranslation();
 
     return <div className='flex flex-col mx-auto w-full justify-center items-center'>
-        <h1 className=' text-white text-center mb-5' >Login to Infisical</h1>
-        <div className='lg:w-1/5 w-1/3  bg-primary text-center p-3 rounded-md'>
-            <button type='button' className='text-black' onClick={() => {
-                window.open('/api/v1/oauth/redirect/google')
-            }}>
+        <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'>
+            <Button
+                colorSchema="primary" 
+                variant="solid"
+                onClick={() => {
+                    window.open('/api/v1/oauth/redirect/google')
+                }} 
+                leftIcon={<FontAwesomeIcon icon={faGoogle} className="mr-1" />}
+                className="h-14 w-full mx-0"
+            > 
                 {t('login:continue-with-google')}
-            </button>
+            </Button>
         </div>
-        <div className='lg:w-1/5 w-1/3 bg-chicago-900 text-center p-3 rounded-md mt-4'>
-            <button type='button' className='text-white' onClick={() => {
-                setIsLoginWithEmail(true);
-            }}>
-                {t('login:continue-with-email')}
-            </button>
+        <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={() => {
+                    setIsLoginWithEmail(true);
+                }} 
+                isFullWidth
+                className="h-14 w-full mx-0"
+            > 
+                {t('login:continue-with-email')} 
+            </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">
+                <span className='hover:underline hover:underline-offset-4 hover:decoration-primary-700 hover:text-bunker-200 duration-200 cursor-pointer'>{t('login:create-account')}</span>
+            </Link>
         </div>
-        <Link href="/signup">
-            <button type="button" className='text-white mt-8 underline'>
-                {t('login:create-account')}
-            </button>
-        </Link>
     </div>
 }
 

frontend/src/components/login/LoginStep.tsx

@@ -5,12 +5,12 @@ import { useTranslation } from 'next-i18next';
 import { faWarning } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
-import Button from '@app/components/basic/buttons/Button';
 import Error from '@app/components/basic/Error';
-import InputField from '@app/components/basic/InputField';
 import attemptLogin from '@app/components/utilities/attemptLogin';
 import { getTranslatedStaticProps } from '@app/components/utilities/withTranslateProps';
 
+import { Button, Input } from '../v2';
+
 /**
  * 1st step of login - user enters their username and password
  * @param {Object} obj
@@ -74,55 +74,54 @@ export default function LoginStep ({
 
     return (
         <form onSubmit={(e) => e.preventDefault()}>
-            <div className="bg-bunker w-full max-w-md mx-auto h-7/12 py-4 pt-8 px-6 rounded-xl drop-shadow-xl">
-            <p className="text-3xl w-max mx-auto flex justify-center font-semibold text-bunker-100 mb-6">
-                {t('login:login')}
-            </p>
-            <div className="flex items-center justify-center w-full md:p-2 rounded-lg mt-4 md:mt-0 max-h-24 md:max-h-28">
-                <InputField
-                label={t('common:email')}
-                onChangeHandler={setEmail}
-                type="email"
-                value={email}
-                placeholder=""
-                isRequired
-                autoComplete="username"
-                />
+            <div className="w-full mx-auto h-full px-6">
+                <p className="text-xl w-max mx-auto flex justify-center text-transparent bg-clip-text bg-gradient-to-b from-white to-bunker-200 mb-6">
+                    Enter your email and password
+                </p>
+                <div className="flex items-center justify-center lg:w-1/6 w-1/4 min-w-[22rem] mx-auto w-full md:p-2 rounded-lg mt-4 md:mt-0 max-h-24 md:max-h-28">
+                    <Input
+                        value={email}
+                        onChange={(e) => setEmail(e.target.value)}
+                        type="email"
+                        placeholder="Enter your email..."
+                        isRequired
+                        autoComplete="username"
+                        className="h-12"
+                    />
+                </div>
+                <div className="relative flex items-center justify-center lg:w-1/6 w-1/4 min-w-[22rem] mx-auto w-full rounded-lg max-h-24 md:max-h-28">
+                    <div className="flex items-center justify-center w-full md:p-2 rounded-lg max-h-24 md:max-h-28">
+                        <Input
+                            value={password}
+                            onChange={(e) => setPassword(e.target.value)}
+                            type="password"
+                            placeholder="Enter your password..."
+                            isRequired
+                            autoComplete="current-password"
+                            id="current-password"
+                            className="h-12"
+                        />
+                    </div>
+                </div>
+                {!isLoading && loginError && <Error text={t('login:error-login') ?? ''} />}
+                <div className="flex flex-col items-center justify-center lg:w-1/6 w-1/4 min-w-[22rem] px-2 mt-4 max-w-xs md:max-w-md mx-auto text-sm text-center md:text-left">
+                    <div className="text-l py-1 text-lg w-full">
+                        <Button
+                            onClick={async () => handleLogin()}
+                            size="sm"
+                            isFullWidth
+                            className='h-14'
+                            colorSchema="primary" 
+                            variant="outline_bg"
+                            isLoading={isLoading}
+                        > {String(t('login:login'))} </Button>
+                    </div>
+                </div>
             </div>
-            <div className="relative flex items-center justify-center w-full md:p-2 rounded-lg md:mt-2 mt-6 max-h-24 md:max-h-28">
-                <InputField
-                label={t('common:password')}
-                onChangeHandler={setPassword}
-                type="password"
-                value={password}
-                placeholder=""
-                isRequired
-                autoComplete="current-password"
-                id="current-password"
-                />
-                <div className="absolute top-2 right-3 text-primary-700 hover:text-primary duration-200 cursor-pointer text-sm">
+            <div className="text-bunker-400 text-sm flex flex-row w-max mx-auto">
                 <Link href="/verify-email">
-                    <button
-                    type="button"
-                    className="text-primary-700 hover:text-primary duration-200 font-normal text-sm underline-offset-4 ml-1.5"
-                    >
-                    {t('login:forgot-password')}
-                    </button>
+                    <span className='hover:underline hover:underline-offset-4 hover:decoration-primary-700 hover:text-bunker-200 duration-200 cursor-pointer'>{t('login:forgot-password')}</span>
                 </Link>
-                </div>
-            </div>
-            {!isLoading && loginError && <Error text={t('login:error-login') ?? ''} />}
-            <div className="flex flex-col items-center justify-center w-full md:p-2 max-h-20 max-w-md mt-4 mx-auto text-sm">
-                <div className="text-l mt-6 m-8 px-8 py-3 text-lg">
-                <Button
-                    type="submit"
-                    text={t('login:login') ?? ''}
-                    onButtonPressed={async () => handleLogin()}
-                    loading={isLoading}
-                    size="lg"
-                />
-                </div>
-            </div>
             </div>
             {false && (
             <div className="w-full p-2 flex flex-row items-center bg-white/10 text-gray-300 rounded-md max-w-md mx-auto mt-4">
@@ -130,19 +129,6 @@ export default function LoginStep ({
                 {t('common:maintenance-alert')}
             </div>
             )}
-            <div className="flex flex-row items-center justify-center md:pb-4 mt-4">
-            <p className="text-sm flex justify-center text-gray-400 w-max">
-                {t('login:need-account')}
-            </p>
-            <Link href="/signup">
-                <button
-                type="button"
-                className="text-primary-700 hover:text-primary duration-200 font-normal text-sm underline-offset-4 ml-1.5"
-                >
-                {t('login:create-account')}
-                </button>
-            </Link>
-            </div>
         </form>
     );
 }

frontend/src/components/signup/CodeInputStep.tsx

@@ -5,8 +5,8 @@ import { useTranslation } from 'next-i18next';
 
 import sendVerificationEmail from '@app/pages/api/auth/SendVerificationEmail';
 
-import Button from '../basic/buttons/Button';
 import Error from '../basic/Error';
+import { Button } from '../v2';
 
 // The style for the verification code input
 const props = {
@@ -83,10 +83,10 @@ export default function CodeInputStep({
   };
 
   return (
-    <div className="bg-bunker w-max mx-auto h-7/12 pt-10 pb-4 px-8 rounded-xl drop-shadow-xl mb-64 md:mb-16">
-      <p className="text-l flex justify-center text-bunker-300">{t('signup:step2-message')}</p>
-      <p className="text-l flex justify-center font-semibold my-2 text-bunker-300">{email} </p>
-      <div className="hidden md:block">
+    <div className="mx-auto h-full w-full pb-4 px-8">
+      <p className="text-md flex justify-center text-bunker-200">{t('signup:step2-message')}</p>
+      <p className="text-md flex justify-center font-semibold my-1 text-bunker-200">{email} </p>
+      <div className="hidden md:block w-max min-w-[20rem] mx-auto">
         <ReactCodeInput
           name=""
           inputMode="tel"
@@ -97,7 +97,7 @@ export default function CodeInputStep({
           className="mt-6 mb-2"
         />
       </div>
-      <div className="block md:hidden">
+      <div className="block md:hidden w-max mt-4 mx-auto">
         <ReactCodeInput
           name=""
           inputMode="tel"
@@ -105,29 +105,34 @@ export default function CodeInputStep({
           fields={6}
           onChange={setCode}
           {...propsPhone}
-          className="mt-2 mb-6"
+          className="mt-2 mb-2"
         />
       </div>
       {codeError && <Error text={t('signup:step2-code-error')} />}
-      <div className="flex max-w-max min-w-28 flex-col items-center justify-center md:p-2 max-h-24 mx-auto text-lg px-4 mt-4 mb-2">
-        <Button text={t('signup:verify') ?? ''} onButtonPressed={incrementStep} size="lg" />
+      <div className="flex flex-col items-center justify-center lg:w-[19%] w-1/4 min-w-[20rem] mt-2 max-w-xs md:max-w-md mx-auto text-sm text-center md:text-left">
+        <div className="text-l py-1 text-lg w-full">
+          <Button
+            onClick={incrementStep}
+            size="sm"
+            isFullWidth
+            className='h-14'
+            colorSchema="primary" 
+            variant="outline_bg"
+          > {String(t('signup:verify'))} </Button>
+        </div>
       </div>
       <div className="flex flex-col items-center justify-center w-full max-h-24 max-w-md mx-auto pt-2">
         <div className="flex flex-row items-baseline gap-1 text-sm">
           <span className="text-bunker-400">{t('signup:step2-resend-alert')}</span>
-          <u
-            className={`font-normal ${
-              isResendingVerificationEmail
-                ? 'text-bunker-400'
-                : 'text-primary-700 hover:text-primary duration-200'
-            }`}
-          >
+          <div className="mt-2 text-bunker-400 text-md flex flex-row">
             <button disabled={isLoading} onClick={resendVerificationEmail} type="button">
-              {isResendingVerificationEmail
+              <span className='hover:underline hover:underline-offset-4 hover:decoration-primary-700 hover:text-bunker-200 duration-200 cursor-pointer'>
+                {isResendingVerificationEmail
                 ? t('signup:step2-resend-progress')
                 : t('signup:step2-resend-submit')}
+              </span>
             </button>
-          </u>
+          </div>
         </div>
         <p className="text-sm text-bunker-400 pb-2">{t('signup:step2-spam-alert')}</p>
       </div>

frontend/src/components/signup/EnterEmailStep.tsx

@@ -1,11 +1,9 @@
 import React, { useState } from 'react';
-import Link from 'next/link';
 import { useTranslation } from 'next-i18next';
 
 import sendVerificationEmail from '@app/pages/api/auth/SendVerificationEmail';
 
-import Button from '../basic/buttons/Button';
-import InputField from '../basic/InputField';
+import { Button, Input } from '../v2';
 
 interface DownloadBackupPDFStepProps {
   incrementStep: () => void;
@@ -27,7 +25,6 @@ export default function EnterEmailStep({
   incrementStep
 }: DownloadBackupPDFStepProps): JSX.Element {
   const [emailError, setEmailError] = useState(false);
-  const [emailErrorMessage, setEmailErrorMessage] = useState('');
   const { t } = useTranslation();
 
   /**
@@ -37,11 +34,9 @@ export default function EnterEmailStep({
     let emailCheckBool = false;
     if (!email) {
       setEmailError(true);
-      setEmailErrorMessage('Please enter your email.');
       emailCheckBool = true;
     } else if (!email.includes('@') || !email.includes('.') || !/[a-z]/.test(email)) {
       setEmailError(true);
-      setEmailErrorMessage('Please enter a valid email.');
       emailCheckBool = true;
     } else {
       setEmailError(false);
@@ -56,44 +51,36 @@ export default function EnterEmailStep({
 
   return (
     <div>
-      <div className="bg-bunker w-full max-w-md h-7/12 py-8 md:px-6 mx-auto rounded-xl drop-shadow-xl">
-        <p className="text-4xl font-semibold flex justify-center text-primary">
-          {t('signup:step1-start')}
+      <div className="w-full md:px-6 mx-auto">
+        <p className="text-xl font-medium flex justify-center text-transparent bg-clip-text bg-gradient-to-b from-white to-bunker-200">
+          {t('signup:initial-title')}
         </p>
-        <div className="flex items-center justify-center w-5/6 md:w-full m-auto md:p-2 rounded-lg max-h-24 mt-4">
-          <InputField
-            label={t('common:email') ?? ''}
-            onChangeHandler={setEmail}
-            type="email"
+        <div className="flex flex-col items-center justify-center lg:w-1/6 w-1/4 min-w-[20rem] m-auto rounded-lg mt-8">
+          <Input
+            placeholder="Enter your email address..."
+            onChange={(e) => setEmail(e.target.value)}
             value={email}
-            placeholder=""
             isRequired
-            error={emailError}
-            errorText={emailErrorMessage}
+            // error={emailError}
+            // errorText={emailErrorMessage}
             autoComplete="username"
+            className="h-12"
           />
+          {emailError && <p className="text-red-600 text-xs text-left w-full ml-1.5 mt-1.5">Please enter a valid email.</p>}
         </div>
-        <div className="flex flex-col items-center justify-center w-5/6 md:w-full md:p-2 max-h-28 max-w-xs md:max-w-md mx-auto mt-4 md:mt-4 text-sm text-center md:text-left">
-          <p className="text-gray-400 mt-2 md:mx-0.5">{t('signup:step1-privacy')}</p>
-          <div className="text-l mt-6 m-2 md:m-8 px-8 py-1 text-lg">
+        <div className="flex flex-col items-center justify-center lg:w-1/6 w-1/4 min-w-[20rem] mt-2 max-w-xs md:max-w-md mx-auto text-sm text-center md:text-left">
+          <div className="text-l py-1 text-lg w-full">
             <Button
-              text={t('signup:step1-submit') ?? ''}
-              type="submit"
-              onButtonPressed={emailCheck}
-              size="lg"
-            />
+              onClick={emailCheck}
+              size="sm"
+              isFullWidth
+              className='h-14'
+              colorSchema="primary" 
+              variant="outline_bg"
+            > {String(t('signup:step1-submit'))} </Button>
           </div>
         </div>
       </div>
-      <div className="flex flex-col items-center justify-center w-full md:pb-2 max-w-md mx-auto pt-2 mb-48 md:mb-16 mt-2">
-        <Link href="/login">
-          <button type="button" className="w-max pb-3 hover:opacity-90 duration-200">
-            <u className="font-normal text-sm text-primary-500">
-              {t('signup:already-have-account')}
-            </u>
-          </button>
-        </Link>
-      </div>
     </div>
   );
 }

frontend/src/components/signup/InitialSignupStep.tsx

@@ -1,8 +1,12 @@
 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 { getTranslatedStaticProps } from '@app/components/utilities/withTranslateProps';
 
+import { Button } from '../v2';
+
 export default function InitialSignupStep({
     setIsSignupWithEmail,
 }: {
@@ -11,27 +15,41 @@ export default function InitialSignupStep({
     const { t } = useTranslation();
 
     return <div className='flex flex-col mx-auto w-full justify-center items-center '>
-        <h1 className=' text-white text-center mb-5' >{t('signup:initial-title')}</h1>
-        <div className='lg:w-1/5 w-1/3 bg-primary text-center p-3 rounded-md'>
-            <button type='button' className='text-black' onClick={() => {
-                window.open('/api/v1/oauth/redirect/google')
-            }}>
+        <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'>
+            <Button
+                colorSchema="primary" 
+                variant="solid"
+                onClick={() => {
+                    window.open('/api/v1/oauth/redirect/google')
+                }} 
+                leftIcon={<FontAwesomeIcon icon={faGoogle} className="mr-1" />}
+                className="h-14 w-full mx-0"
+            > 
                 {t('signup:continue-with-google')}
-            </button>
+            </Button>
         </div>
-        <div className='lg:w-1/5 w-1/3 bg-chicago-900 text-center p-3 rounded-md mt-4'>
-            <button type='button' className='text-white' onClick={() => {
-                setIsSignupWithEmail(true);
-            }}>
+        <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={() => {
+                    setIsSignupWithEmail(true);
+                }} 
+                isFullWidth
+                className="h-14 w-full mx-0"
+            > 
                 {t('signup:continue-with-email')}
-            </button>
+            </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>
+        <div className="mt-2 text-bunker-400 text-xs flex flex-row">
+            <Link href="/login">
+                <span className='hover:underline hover:underline-offset-4 hover:decoration-primary-700 hover:text-bunker-200 duration-200 cursor-pointer'>{t('signup:already-have-account')}</span>
+            </Link>
         </div>
-        <span className='text-white lg:w-1/6 w-1/3 text-xs mt-4 text-center'>{t('signup:create-policy')}</span>
-        <Link href="/login">
-            <button type="button" className='text-white mt-8 underline'>
-                {t('signup:already-have-account')}
-            </button>
-        </Link>
     </div>
 }
 

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

@@ -63,6 +63,11 @@ const buttonVariants = cva(
         variant: 'star',
         className: 'hover:bg-primary hover:text-black'
       },
+      {
+        colorSchema: 'primary',
+        variant: 'solid',
+        className: 'bg-primary-500 bg-opacity-90 hover:bg-primary-500 hover:text-black'
+      },
       {
         colorSchema: 'primary',
         variant: 'selected',
@@ -71,7 +76,7 @@ const buttonVariants = cva(
       {
         colorSchema: 'primary',
         variant: 'outline_bg',
-        className: 'bg-mineshaft-800 border border-mineshaft-600 hover:bg-primary/[0.15] hover:border-primary/60 text-bunker-200'
+        className: 'bg-mineshaft-800 border border-mineshaft-600 hover:bg-primary/[0.1] hover:border-primary/40 text-bunker-200'
       },
       {
         colorSchema: 'secondary',

frontend/src/components/v2/Input/Input.tsx

@@ -13,7 +13,7 @@ type Props = {
 };
 
 const inputVariants = cva(
-  'input w-full py-[0.375rem] text-gray-400 placeholder:text-sm placeholder-gray-500 placeholder-opacity-50 outline-none focus:ring-2',
+  'input w-full py-[0.375rem] text-gray-400 placeholder:text-sm placeholder-gray-500 placeholder-opacity-50 outline-none focus:ring-2 hover:ring-[0.05rem] hover:ring-bunker-400/60 duration-100',
   {
     variants: {
       size: {
@@ -27,13 +27,13 @@ const inputVariants = cva(
         false: ''
       },
       variant: {
-        filled: ['bg-bunker-800', 'text-gray-400'],
+        filled: ['bg-mineshaft-900', 'text-gray-400'],
         outline: ['bg-transparent'],
         plain: 'bg-transparent outline-none'
       },
       isError: {
         true: 'focus:ring-red/50 placeholder-red-300',
-        false: 'focus:ring-primary/50'
+        false: 'focus:ring-primary-400/50 focus:ring-1'
       }
     },
     compoundVariants: []

frontend/src/pages/login.tsx

@@ -1,7 +1,6 @@
 import { useEffect, useState } from 'react';
 import Head from 'next/head';
 import Image from 'next/image';
-import Link from 'next/link';
 import { useRouter } from 'next/router';
 import { useTranslation } from 'next-i18next';
 
@@ -98,7 +97,7 @@ export default function Login() {
   }
 
   return (
-    <div className="bg-bunker-800 h-screen flex flex-col justify-start px-6 ">
+    <div className="bg-gradient-to-tr from-bunker-600 to-bunker-800 h-screen flex flex-col justify-center pb-28 px-6 ">
       <Head>
         <title>{t('common:head-title', { title: t('login:title') })}</title>
         <link rel="icon" href="/infisical.ico" />
@@ -106,11 +105,9 @@ export default function Login() {
         <meta property="og:title" content={t('login:og-title') ?? ''} />
         <meta name="og:description" content={t('login:og-description') ?? ''} />
       </Head>
-      <Link href="/">
-        <div className="flex justify-center mb-8 mt-20 cursor-pointer">
-          <Image src="/images/biglogo.png" height={90} width={120} alt="long logo" />
-        </div>
-      </Link>
+      <div className="flex justify-center mb-4 mt-20">
+        <Image src="/images/gradientLogo.svg" height={90} width={120} alt="Infisical logo" />
+      </div>
       {renderView(step)}
       <div className="absolute right-4 top-0 mt-4 flex items-center justify-center">
         <div className="w-48 mx-auto">

frontend/src/pages/signup.tsx

@@ -2,7 +2,6 @@
 import { useEffect, useState } from 'react';
 import Head from 'next/head';
 import Image from 'next/image';
-import Link from 'next/link';
 import { useRouter } from 'next/router';
 import { useTranslation } from 'next-i18next';
 
@@ -153,7 +152,7 @@ export default function SignUp() {
   }
 
   return (
-    <div className="bg-bunker-800 min-h-screen  flex flex-col justify-start px-6 ">
+    <div className="bg-gradient-to-tr from-bunker-600 to-bunker-800 min-h-screen flex flex-col justify-center pb-28 px-6 ">
       <Head>
         <title>{t('common:head-title', { title: t('signup:title') })}</title>
         <link rel="icon" href="/infisical.ico" />
@@ -161,11 +160,9 @@ export default function SignUp() {
         <meta property="og:title" content={t('signup:og-title') as string} />
         <meta name="og:description" content={t('signup:og-description') as string} />
       </Head>
-      <Link href="/">
-        <div className="flex justify-center mb-8 mt-20 cursor-pointer">
-          <Image src="/images/biglogo.png" height={90} width={120} alt="long logo" />
-        </div>
-      </Link>
+      <div className="flex justify-center mb-8 mt-20">
+        <Image src="/images/gradientLogo.svg" height={90} width={120} alt="Infisical Logo" />
+      </div>
       <form onSubmit={(e) => e.preventDefault()}>
         {renderView(step)}
       </form>