Style changes to login

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>