[PB-5785] feature/Redesign Universal Link Success View layout

src/views/Login/UniversalLinkSuccessView.tsx

@@ -1,12 +1,12 @@
 import { UserSettings } from '@internxt/sdk/dist/shared/types/userSettings';
 import { Button } from '@internxt/ui';
-import authService from 'services/auth.service';
-import localStorageService from 'services/local-storage.service';
-import navigationService from 'services/navigation.service';
 import { AppView } from 'app/core/types';
 import { useTranslationContext } from 'app/i18n/provider/TranslationProvider';
 import InternxtLogo from 'assets/icons/big-logo.svg?react';
 import { useEffect, useMemo } from 'react';
+import authService from 'services/auth.service';
+import localStorageService from 'services/local-storage.service';
+import navigationService from 'services/navigation.service';
 
 const DEEPLINK_SUCCESS_REDIRECT_BASE = 'internxt://login-success';
 
@@ -52,51 +52,47 @@ export default function UniversalLinkView(): JSX.Element {
   };
 
   return (
-    <main className="flex h-full w-full flex-col bg-gray-5 dark:bg-surface">
+    <div className="flex h-full w-full flex-col overflow-auto bg-login-gradient">
       <div className="flex shrink-0 flex-row justify-center py-10 sm:justify-start sm:pl-20">
         <InternxtLogo className="h-auto w-28 text-gray-100" />
       </div>
-      <div className="flex flex-1 items-center justify-center bg-gray-5 dark:bg-surface">
-        <div className="w-96 rounded-lg px-8 py-10 shadow-soft dark:bg-gray-5">
-          <div className="mb-6 flex justify-center">
-            <InternxtLogo className="h-auto w-52 text-gray-100" />
-          </div>
-          <h2 className="text-center text-xl font-medium text-gray-100">{translate('auth.universalLink.loginAs')}</h2>
-          <h3
-            title={user.email}
-            className="over mb-6 overflow-x-hidden text-ellipsis text-center text-xl font-medium text-gray-60"
-          >
-            {user.email}
-          </h3>
-          {/* Universal links needs to be clicked in order to work, JS window.open does not work */}
-          <Button onClick={handleGoToUniversalLinkUrl} className="w-full">
-            {translate('auth.universalLink.openApp')}
-          </Button>
-          <div className="separator my-6"></div>
-          <div className="flex flex-row justify-center">
-            <h4 className="text-base font-medium">{translate('auth.universalLink.anotherAccount')}</h4>
-            <button onClick={handleGoToLogin} className="ml-2.5 text-base font-medium no-underline">
+      <div className="flex h-full flex-col items-center justify-center px-6">
+        <div className="w-full max-w-sm rounded-2xl border border-[#CCCCCC80] bg-[#FAFAFA40] px-8 py-10 dark:border-[#FFFFFF1A] dark:bg-[#FFFFFF0D] sm:bg-surface sm:shadow-subtle sm:dark:bg-gray-5">
+          <div className="flex flex-col items-center">
+            <h1 className="text-2xl font-medium">{translate('auth.universalLink.loginAs')}</h1>
+            <p
+              title={user.email}
+              className="overflow-x-hidden text-ellipsis text-center text-xl font-medium text-gray-60 mt-2"
+            >
+              {user.email}
+            </p>
+
+            {/* Universal links needs to be clicked in order to work, JS window.open does not work */}
+            <Button onClick={handleGoToUniversalLinkUrl} className="w-full mt-5">
+              {translate('auth.universalLink.openApp')}
+            </Button>
+
+            <div className="w-full separator my-6" />
+
+            <p className="w-full text-center">{translate('auth.universalLink.anotherAccount')}</p>
+            <Button
+              variant="secondary"
+              onClick={handleGoToLogin}
+              className="w-full mt-3 !border-highlight/10 !bg-white/15 !shadow-sm hover:!bg-white/25 dark:!border-white/10"
+            >
               {translate('auth.universalLink.login')}
-            </button>
+            </Button>
           </div>
         </div>
       </div>
-      <div className="flex shrink-0 flex-row justify-center py-8">
-        <a
-          href="https://internxt.com/legal"
-          target="_blank"
-          className="font-regular mr-4 mt-6 text-base text-gray-80 no-underline hover:text-gray-100"
-        >
+      <div className="flex shrink-0 flex-col items-center justify-center space-x-0 space-y-2 py-8 sm:flex-row sm:space-x-8 sm:space-y-0">
+        <a href="https://internxt.com/legal" target="_blank" rel="noopener noreferrer" className="auth-footer-link">
           {translate('general.terms')}
         </a>
-        <a
-          href="https://help.internxt.com"
-          target="_blank"
-          className="font-regular mr-4 mt-6 text-base text-gray-80 no-underline hover:text-gray-100"
-        >
+        <a href="https://help.internxt.com" target="_blank" rel="noopener noreferrer" className="auth-footer-link">
           {translate('general.help')}
         </a>
       </div>
-    </main>
+    </div>
   );
 }