finalized login and signup ui

frontend/public/locales/en/login.json

@@ -8,5 +8,6 @@
   "forgot-password": "Forgot your password?",
   "error-login": "Wrong credentials.",
   "continue-with-google": "Continue with Google",
-  "continue-with-email": "Continue with Email"
+  "continue-with-email": "Continue with Email",
+  "other-option": "Log in with other option"
 }

frontend/src/components/login/InitialLoginStep.tsx

@@ -13,14 +13,14 @@ export default function InitialLoginStep({
 
     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='w-1/5 bg-green text-center p-3 rounded-md'>
+        <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')
             }}>
                 {t('login:continue-with-google')}
             </button>
         </div>
-        <div className='w-1/5 bg-black text-center p-3 rounded-md mt-4'>
+        <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);
             }}>
@@ -28,7 +28,9 @@ export default function InitialLoginStep({
             </button>
         </div>
         <Link href="/signup">
-            <h2 className='text-white mt-8 underline'>{t('login:create-account')}</h2>
+            <button type="button" className='text-white mt-8 underline'>
+                {t('login:create-account')}
+            </button>
         </Link>
     </div>
 }

frontend/src/components/login/PasswordInputStep.tsx

@@ -121,7 +121,7 @@ export default function PasswordInputStep({
           type="button"
           className="ml-1.5 text-sm font-normal text-primary-700 underline-offset-4 duration-200 hover:text-primary"
         >
-          Login with other option
+          {t('login:other-option')}
         </button>
       </div>
     </form>

frontend/src/components/signup/InitialSignupStep.tsx

@@ -12,23 +12,25 @@ export default function InitialSignupStep({
 
     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=' w-1/5 bg-green text-center p-3 rounded-md'>
+        <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')
             }}>
                 {t('signup:continue-with-google')}
             </button>
         </div>
-        <div className='w-1/5 bg-black text-center p-3 rounded-md mt-4'>
+        <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);
             }}>
                 {t('signup:continue-with-email')}
             </button>
         </div>
-        <span className='text-white w-1/6 text-xs mt-4 text-center'>{t('signup:create-policy')}</span>
+        <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">
-            <h2 className='text-white mt-8 underline'>{t('signup:already-have-account')}</h2>
+            <button type="button" className='text-white mt-8 underline'>
+                {t('signup:already-have-account')}
+            </button>
         </Link>
     </div>
 }

frontend/src/components/utilities/SecurityClient.ts

@@ -11,7 +11,7 @@ export const PROVIDER_AUTH_TOKEN_KEY = 'infisical__provider-auth-token';
 export default class SecurityClient {
 
   static setProviderAuthToken(tokenStr: string) {
-    localStorage.setItem(PROVIDER_AUTH_TOKEN_KEY, tokenStr)
+    localStorage.setItem(PROVIDER_AUTH_TOKEN_KEY, tokenStr || '')
   }
 
   static getProviderAuthToken() {