[_] Hide terms link in mobile view

src/views/Login/BlockedAccountView.tsx

@@ -3,6 +3,7 @@ import { useTranslationContext } from 'app/i18n/provider/TranslationProvider';
 import InternxtLogo from 'assets/icons/big-logo.svg?react';
 import { ShieldWarning } from '@phosphor-icons/react';
 import { Button, Loader } from '@internxt/ui';
+import { isMobile } from 'react-device-detect';
 import { AppView } from 'app/core/types';
 import { useCallback, useEffect, useState } from 'react';
 import queryString from 'query-string';
@@ -132,13 +133,15 @@ export default function BlockedAccountView(): JSX.Element {
       </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"
-        >
-          {translate('general.terms')}
-        </a>
+        {!isMobile && (
+          <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"
+          >
+            {translate('general.terms')}
+          </a>
+        )}
         <a
           href="https://help.internxt.com"
           target="_blank"

src/views/Login/OAuthLinkView.tsx

@@ -3,6 +3,7 @@ import { authService, oauthService, navigationService, localStorageService } fro
 import { AppView, LocalStorageItem } from 'app/core/types';
 import { useTranslationContext } from 'app/i18n/provider/TranslationProvider';
 import InternxtLogo from 'assets/icons/big-logo.svg?react';
+import { isMobile } from 'react-device-detect';
 import { useEffect, useMemo } from 'react';
 
 const OAuthLinkView = (): JSX.Element => {
@@ -71,13 +72,15 @@ const OAuthLinkView = (): JSX.Element => {
         </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"
-        >
-          {translate('general.terms')}
-        </a>
+        {!isMobile && (
+          <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"
+          >
+            {translate('general.terms')}
+          </a>
+        )}
         <a
           href="https://help.internxt.com"
           target="_blank"

src/views/Login/RecoverAccountView.tsx

@@ -3,6 +3,7 @@ import { useTranslationContext } from 'app/i18n/provider/TranslationProvider';
 import { Button } from '@internxt/ui';
 import { Question } from '@phosphor-icons/react';
 import InternxtLogo from 'assets/icons/big-logo.svg?react';
+import { isMobile } from 'react-device-detect';
 import { ChangePassword, RestartAccount } from './components';
 
 export default function RecoverAccountView(): JSX.Element {
@@ -49,13 +50,15 @@ export default function RecoverAccountView(): JSX.Element {
         </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"
-          >
-            {translate('general.terms')}
-          </a>
+          {!isMobile && (
+            <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"
+            >
+              {translate('general.terms')}
+            </a>
+          )}
           <a
             href="https://help.internxt.com"
             target="_blank"

src/views/Login/RecoveryLinkView.tsx

@@ -1,5 +1,6 @@
 import { useTranslationContext } from 'app/i18n/provider/TranslationProvider';
 import InternxtLogo from 'assets/icons/big-logo.svg?react';
+import { isMobile } from 'react-device-detect';
 import { RecoveryLink } from './components';
 
 function RecoveryLinkView(): JSX.Element {
@@ -15,9 +16,11 @@ function RecoveryLinkView(): JSX.Element {
       </div>
 
       <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" className="auth-footer-link">
-          {translate('general.terms')}
-        </a>
+        {!isMobile && (
+          <a href="https://internxt.com/legal" target="_blank" className="auth-footer-link">
+            {translate('general.terms')}
+          </a>
+        )}
         <a href="https://help.internxt.com" target="_blank" className="auth-footer-link">
           {translate('general.help')}
         </a>

src/views/Login/SignInView.tsx

@@ -1,5 +1,6 @@
 import { useTranslationContext } from 'app/i18n/provider/TranslationProvider';
 import InternxtLogo from 'assets/icons/big-logo.svg?react';
+import { isMobile } from 'react-device-detect';
 import { LogIn } from './components';
 
 interface SignInProps {
@@ -23,9 +24,11 @@ export default function SignInView(props: Readonly<SignInProps>): JSX.Element {
 
       {!props.displayIframe && (
         <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" className="auth-footer-link">
-            {translate('general.terms')}
-          </a>
+          {!isMobile && (
+            <a href="https://internxt.com/legal" target="_blank" className="auth-footer-link">
+              {translate('general.terms')}
+            </a>
+          )}
           <a href="https://help.internxt.com" target="_blank" className="auth-footer-link">
             {translate('general.help')}
           </a>

src/views/Login/UniversalLinkErrorView.tsx

@@ -1,6 +1,7 @@
 import { useTranslationContext } from 'app/i18n/provider/TranslationProvider';
 import InternxtLogo from 'assets/icons/big-logo.svg?react';
 import WarningIcon from 'assets/icons/universal-link/warning.svg?react';
+import { isMobile } from 'react-device-detect';
 
 export default function UniversalLinkErrorView(): JSX.Element {
   const { translate } = useTranslationContext();
@@ -24,13 +25,15 @@ export default function UniversalLinkErrorView(): JSX.Element {
         </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"
-        >
-          {translate('general.terms')}
-        </a>
+        {!isMobile && (
+          <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"
+          >
+            {translate('general.terms')}
+          </a>
+        )}
         <a
           href="https://help.internxt.com"
           target="_blank"

src/views/Login/UniversalLinkOkView.tsx

@@ -1,6 +1,7 @@
 import { useTranslationContext } from 'app/i18n/provider/TranslationProvider';
 import InternxtLogo from 'assets/icons/big-logo.svg?react';
 import SuccessCheckIcon from 'assets/icons/universal-link/success-check.svg?react';
+import { isMobile } from 'react-device-detect';
 
 export default function UniversalLinkOkView(): JSX.Element {
   const { translate } = useTranslationContext();
@@ -24,13 +25,15 @@ export default function UniversalLinkOkView(): JSX.Element {
         </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"
-        >
-          {translate('general.terms')}
-        </a>
+        {!isMobile && (
+          <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"
+          >
+            {translate('general.terms')}
+          </a>
+        )}
         <a
           href="https://help.internxt.com"
           target="_blank"

src/views/Login/UniversalLinkSuccessView.tsx

@@ -3,6 +3,7 @@ import { Button } from '@internxt/ui';
 import { AppView, LocalStorageItem } from 'app/core/types';
 import { useTranslationContext } from 'app/i18n/provider/TranslationProvider';
 import InternxtLogo from 'assets/icons/big-logo.svg?react';
+import { isMobile } from 'react-device-detect';
 import { useEffect, useMemo } from 'react';
 import authService from 'services/auth.service';
 import localStorageService from 'services/local-storage.service';
@@ -86,9 +87,11 @@ export default function UniversalLinkView(): JSX.Element {
         </div>
       </div>
       <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>
+        {!isMobile && (
+          <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" rel="noopener noreferrer" className="auth-footer-link">
           {translate('general.help')}
         </a>

src/views/Signup/SignupView.tsx

@@ -1,5 +1,6 @@
 import { useTranslationContext } from 'app/i18n/provider/TranslationProvider';
 import InternxtLogo from 'assets/icons/big-logo.svg?react';
+import { isMobile } from 'react-device-detect';
 import SignUpForm from './components/SignupForm';
 import { useMemo } from 'react';
 import authService from 'services/auth.service';
@@ -33,9 +34,11 @@ export default function SignUpView(props: Readonly<SignUpViewProps>): JSX.Elemen
 
       {isRegularSignup && (
         <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" className="auth-footer-link">
-            {translate('general.terms')}
-          </a>
+          {!isMobile && (
+            <a href="https://internxt.com/legal" target="_blank" className="auth-footer-link">
+              {translate('general.terms')}
+            </a>
+          )}
           <a href="https://help.internxt.com" target="_blank" className="auth-footer-link">
             {translate('general.help')}
           </a>

src/views/Signup/components/CreateAccountForm.tsx

@@ -1,6 +1,7 @@
 import TextInput from 'components/TextInput';
 import { Button } from '@internxt/ui';
 import InternxtLogo from '../../../assets/icons/big-logo.svg?react';
+import { isMobile } from 'react-device-detect';
 import PasswordFieldWithInfo from './PasswordFieldWithInfo';
 import { Helmet } from 'react-helmet-async';
 import envService from 'services/env.service';
@@ -91,27 +92,33 @@ const CreateAccountForm: React.FC<CreateAccountFormProps> = ({
               </div>
               <span className="mt-2 w-full text-xs text-gray-50">
                 {translate('auth.terms1')}{' '}
-                <a
-                  href="https://internxt.com/legal"
-                  target="_blank"
-                  className="text-xs text-gray-50 hover:text-gray-60"
-                >
-                  {translate('auth.terms2')}
-                </a>
+                {isMobile ? (
+                  <span className="text-xs text-gray-50">{translate('auth.terms2')}</span>
+                ) : (
+                  <a
+                    href="https://internxt.com/legal"
+                    target="_blank"
+                    className="text-xs text-gray-50 hover:text-gray-60"
+                  >
+                    {translate('auth.terms2')}
+                  </a>
+                )}
               </span>
             </form>
           </div>
         </div>
       </div>
 
       <div className="flex 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"
-        >
-          {translate('general.terms')}
-        </a>
+        {!isMobile && (
+          <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"
+          >
+            {translate('general.terms')}
+          </a>
+        )}
         <a
           href="https://help.internxt.com"
           target="_blank"

src/views/Signup/components/SignupForm.tsx

@@ -4,6 +4,7 @@ import { useEffect, useMemo, useState } from 'react';
 import { Helmet } from 'react-helmet-async';
 import { SubmitHandler, useForm, useWatch } from 'react-hook-form';
 import { Link } from 'react-router-dom';
+import { isMobile } from 'react-device-detect';
 import PasswordFieldWithInfo from './PasswordFieldWithInfo';
 
 import testPasswordStrength from '@internxt/lib/dist/src/auth/testPasswordStrength';
@@ -284,9 +285,13 @@ function SignUpForm(): JSX.Element {
 
         <span className="mt-2 w-full text-xs text-gray-50">
           {translate('auth.terms1')}{' '}
-          <a href="https://internxt.com/legal" target="_blank" className="text-xs text-gray-50 hover:text-gray-60">
-            {translate('auth.terms2')}
-          </a>
+          {isMobile ? (
+            <span className="text-xs text-gray-50">{translate('auth.terms2')}</span>
+          ) : (
+            <a href="https://internxt.com/legal" target="_blank" className="text-xs text-gray-50 hover:text-gray-60">
+              {translate('auth.terms2')}
+            </a>
+          )}
         </span>
 
         <div className="w-full border-b border-gray-10" />