style updates

frontend/src/components/signup/InitialSignupStep.tsx

@@ -16,24 +16,6 @@ export default function InitialSignupStep({
 
     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] text-center rounded-md'>
-            <Button
-                colorSchema="primary"
-                variant="solid"
-                onClick={() => {
-                    setIsSignupWithEmail(true);
-                }}
-                isFullWidth
-                className="h-14 w-full mx-0"
-            >
-                Sign Up with email
-            </Button>
-        </div>
-        <div className='lg:w-1/6 w-1/4 min-w-[20rem] flex flex-row items-center my-4 py-2'>
-            <div className='w-1/2 border-t border-mineshaft-500' />
-            <span className='px-4 text-sm text-bunker-400'>or</span>
-            <div className='w-1/2 border-t border-mineshaft-500' />
-        </div>
         <div className='lg:w-1/6 w-1/4 min-w-[20rem] rounded-md'>
             <Button
                 colorSchema="primary"
@@ -48,6 +30,19 @@ 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'>
+            <Button
+                colorSchema="primary"
+                variant="outline_bg"
+                onClick={() => {
+                    setIsSignupWithEmail(true);
+                }}
+                isFullWidth
+                className="h-14 w-full mx-0"
+            >
+                Sign Up 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" 

frontend/src/views/Login/components/InitialStep/InitialStep.tsx

@@ -33,6 +33,7 @@ export const InitialStep = ({
     const { t } = useTranslation();
     const [isLoading, setIsLoading] = useState(false);
     const [loginError, setLoginError] = useState(false);
+    const [loginEmailChosen, setLoginEmailChosen] = useState(false);
 
     const queryParams = new URLSearchParams(window.location.search);
 
@@ -116,34 +117,49 @@ export const InitialStep = ({
     return (
         <form onSubmit={handleLogin} 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="relative md:px-1.5 flex items-center justify-center lg:w-1/6 w-1/4 min-w-[21.3rem] md:min-w-[22rem] mx-auto rounded-lg max-h-24 md:max-h-28">
+            <div className='lg:w-1/6 w-1/4 min-w-[21.2rem] md:min-w-[20.1rem] text-center rounded-md mt-4'>
-                <div className="flex items-center justify-center w-full md:px-2 md:py-1 rounded-lg max-h-24 md:max-h-28">
+                <Button
-                    <Input
+                    colorSchema="primary" 
-                        value={email}
+                    variant={loginEmailChosen ? "outline_bg" : "solid"}
-                        onChange={(e) => setEmail(e.target.value)}
+                    onClick={() => {
-                        type="email"
+                        const callbackPort = queryParams.get("callback_port");
-                        placeholder="Enter your email..."
+                        
-                        isRequired
+                        window.open(`/api/v1/sso/redirect/google${callbackPort ? `?callback_port=${callbackPort}` : ""}`);
-                        autoComplete="username"
+                        window.close();
-                        className="h-12"
+                    }} 
-                    />
+                    leftIcon={<FontAwesomeIcon icon={faGoogle} className="mr-1" />}
-                </div>
+                    className="h-12 w-full mx-0"
+                > 
+                    {t("login.continue-with-google")}
+                </Button>
             </div>
-            <div className="relative pt-2 md:pt-0 md:px-1.5 flex items-center justify-center w-1/4 lg:w-1/6 min-w-[21.3rem] md:min-w-[22rem] mx-auto rounded-lg max-h-24 md:max-h-28">
+            {loginEmailChosen && <>
-                <div className="flex items-center justify-center w-full md:p-2 rounded-lg max-h-24 md:max-h-28">
+            <div className='lg:w-1/6 w-1/4 min-w-[20rem] flex flex-row items-center my-4 py-2'>
-                    <Input
+                <div className='w-full border-t border-mineshaft-500' />
-                        value={password}
+            </div>
-                        onChange={(e) => setPassword(e.target.value)}
+            <div className='lg:w-1/6 w-1/4 min-w-[21.2rem] md:min-w-[20.1rem] text-center rounded-md'>
-                        type="password"
+                <Input
-                        placeholder="Enter your password..."
+                    value={email}
-                        isRequired
+                    onChange={(e) => setEmail(e.target.value)}
-                        autoComplete="current-password"
+                    type="email"
-                        id="current-password"
+                    placeholder="Enter your email..."
-                        className="h-12 select:-webkit-autofill:focus"
+                    isRequired
-                    />
+                    autoComplete="username"
-                </div>
+                    className="h-12"
+                />
+            </div>
+            <div className='lg:w-1/6 w-1/4 min-w-[21.2rem] md:min-w-[20.1rem] text-center rounded-md mt-4'>
+                <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 select:-webkit-autofill:focus"
+                />
             </div>
-            {!isLoading && loginError && <Error text={t("login.error-login") ?? ""} />}
             <div className='lg:w-1/6 w-1/4 min-w-[21.2rem] md:min-w-[20.1rem] text-center rounded-md mt-4'>
                 <Button
                     type="submit"
@@ -153,30 +169,25 @@ export const InitialStep = ({
                     colorSchema="primary"
                     variant="solid"
                     isLoading={isLoading}
-                > Login </Button>
+                > Continue with Email </Button>
             </div>
-            <div className='lg:w-1/6 w-1/4 min-w-[20rem] flex flex-row items-center my-4 py-2'>
+            {!isLoading && loginError && <Error text={t("login.error-login") ?? ""} />}
-                <div className='w-1/2 border-t border-mineshaft-500' />
+            <div className='lg:w-1/6 w-1/4 min-w-[20rem] flex flex-row items-center mt-4 py-2'>
-                <span className='px-4 text-sm text-bunker-400'>or</span>
+                <div className='w-full border-t border-mineshaft-500' />
-                <div className='w-1/2 border-t border-mineshaft-500' />
+            </div></>}
-            </div>
+            {!loginEmailChosen && <div className='lg:w-1/6 w-1/4 min-w-[21.2rem] md:min-w-[20.1rem] text-center rounded-md mt-4'>
-            <div className='lg:w-1/6 w-1/4 min-w-[20rem] rounded-md'>
                 <Button
-                    colorSchema="primary" 
-                    variant="solid"
                     onClick={() => {
-                        const callbackPort = queryParams.get("callback_port");
+                        setLoginEmailChosen(true);
-                        
+                    }}
-                        window.open(`/api/v1/sso/redirect/google${callbackPort ? `?callback_port=${callbackPort}` : ""}`);
+                    size="sm"
-                        window.close();
+                    isFullWidth
-                    }} 
+                    className='h-12'
-                    leftIcon={<FontAwesomeIcon icon={faGoogle} className="mr-1" />}
+                    colorSchema="primary"
-                    className="h-14 w-full mx-0"
+                    variant="outline_bg"
-                > 
+                > Continue with Email </Button>
-                    {t("login.continue-with-google")}
+            </div>}
-                </Button>
+            <div className='lg:w-1/6 w-1/4 min-w-[21.2rem] md:min-w-[20.1rem] text-center rounded-md mt-4'>
-            </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"
@@ -184,7 +195,7 @@ export const InitialStep = ({
                         setStep(2);
                     }}
                     isFullWidth
-                    className="h-14 w-full mx-0"
+                    className="h-12 w-full mx-0"
                 >
                     Continue with SAML SSO
                 </Button>

frontend/src/views/Settings/PersonalSettingsPage/AuthMethodSection/AuthMethodSection.tsx

@@ -102,7 +102,7 @@ export const AuthMethodSection = () => {
                                 defaultValue={field.value}
                                 {...field}
                                 onValueChange={(e) => onChange(e)}
-                                className="w-full"
+                                className="w-full bg-mineshaft-800 border border-mineshaft-600"
                             >
                                 {authMethods.map((authMethod) => {
                                     return (