login/signup styling fixes

frontend/src/pages/login.tsx

@@ -7,7 +7,6 @@ import { useRouter } from 'next/router';
 
 // import ListBox from '@app/components/basic/Listbox';
 import InitialLoginStep from '@app/components/login/InitialLoginStep';
-import LoginStep from '@app/components/login/LoginStep';
 import MFAStep from '@app/components/login/MFAStep';
 import PasswordInputStep from '@app/components/login/PasswordInputStep';
 import { useProviderAuth } from '@app/hooks/useProviderAuth';
@@ -22,7 +21,6 @@ export default function Login() {
   const [step, setStep] = useState(1);
   const { t } = useTranslation();
   // const lang = router.locale ?? 'en';
-  const [isLoginWithEmail, setIsLoginWithEmail] = useState(false);
   const {
     providerAuthToken,
     email: providerEmail,
@@ -70,20 +68,14 @@ export default function Login() {
       );
     }
 
-    if (isLoginWithEmail && loginStep === 1) {
-      return (
-        <LoginStep
-          email={email}
-          setEmail={setEmail}
-          password={password}
-          setPassword={setPassword}
-          setStep={setStep}
-        />
-      );
-    }
-
-    if (!isLoginWithEmail && loginStep === 1) {
-      return <InitialLoginStep setIsLoginWithEmail={setIsLoginWithEmail} />;
+    if (loginStep === 1) {
+      return <InitialLoginStep 
+        setStep={setStep}
+        email={email}
+        setEmail={setEmail}
+        password={password}
+        setPassword={setPassword}
+      />;
     }
 
     if (step === 2) {

frontend/src/pages/saml-sso.tsx

@@ -46,16 +46,16 @@ export default function Login() {
           <Image src="/images/gradientLogo.svg" height={90} width={120} alt="Infisical logo" />
         </div>
       </Link>
-      <div className="mx-auto w-full max-w-md px-6">
+      <div className="mx-auto w-full max-w-md md:px-6">
         <p className="mx-auto mb-6 flex w-max justify-center text-xl font-medium text-transparent bg-clip-text bg-gradient-to-b from-white to-bunker-200 text-center mb-8">
           What’s your email?
         </p>
-        <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="relative flex items-center justify-center lg:w-1/6 w-1/4 min-w-[20rem] md: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 rounded-lg max-h-24 md:max-h-28">
             <Input
               value={password}
               onChange={(e) => setPassword(e.target.value)}
-              type="password"
+              type="email"
               placeholder="Enter your email..."
               isRequired
               autoComplete="email"
@@ -64,7 +64,7 @@ export default function Login() {
             />
           </div>
         </div>
-        <div className='lg:w-1/6 w-1/4 w-full mx-auto flex items-center justify-center min-w-[22rem] text-center rounded-md mt-4'>
+        <div className='lg:w-1/6 w-1/4 w-full mx-auto flex items-center justify-center min-w-[20rem] md:min-w-[22rem] text-center rounded-md mt-4'>
           <Button
               colorSchema="primary" 
               variant="outline_bg"