From be4ed204fd7b8b9cc0dcd4b5a7c824ad5c01b8ad Mon Sep 17 00:00:00 2001
From: Danh <nguyenhoaidanh2096@gmail.com>
Date: Tue, 31 Oct 2023 09:45:05 +0700
Subject: [PATCH] sort login method

---
 .../pages/RegisterWhitelist/SignInForm.tsx    | 59 +++++++++++--------
 1 file changed, 34 insertions(+), 25 deletions(-)

diff --git a/src/pages/TrueSightV2/pages/RegisterWhitelist/SignInForm.tsx b/src/pages/TrueSightV2/pages/RegisterWhitelist/SignInForm.tsx
index ec5fd06aff..c68b91355c 100644
--- a/src/pages/TrueSightV2/pages/RegisterWhitelist/SignInForm.tsx
+++ b/src/pages/TrueSightV2/pages/RegisterWhitelist/SignInForm.tsx
@@ -6,6 +6,7 @@ import styled from 'styled-components'
 import { ButtonLight, ButtonPrimary } from 'components/Button'
 import Column from 'components/Column'
 import DownloadWalletModal from 'components/DownloadWalletModal'
+import { useActiveWeb3React } from 'hooks'
 import useLogin from 'hooks/useLogin'
 import useTheme from 'hooks/useTheme'
 import { useValidateEmail } from 'pages/NotificationCenter/NotificationPreference'
@@ -18,40 +19,48 @@ const Wrapper = styled(Column)`
   width: 340px;
   gap: 16px;
   align-items: center;
+  ${({ theme }) => theme.mediaWidth.upToSmall`
+   width: 100%;
+  `};
 `
 
 export default function SignInForm() {
   const { signIn } = useLogin()
+  const { account } = useActiveWeb3React()
   const theme = useTheme()
   const openDownloadWalletModal = useOpenModal(ApplicationModal.DOWNLOAD_WALLET)
   const { inputEmail, errorInput, onChangeEmail } = useValidateEmail('')
   return (
-    <Wrapper>
-      <InputEmail
-        value={inputEmail}
-        hasError={!!errorInput}
-        onChange={onChangeEmail}
-        style={{ height: 36, width: '100%' }}
-        isVerifiedEmail
-      />
-      <ButtonPrimary
-        onClick={() => inputEmail && !errorInput && signIn({ loginMethod: LoginMethod.EMAIL, account: inputEmail })}
-        height={'36px'}
-      >
-        <Trans>Sign-In</Trans>
-      </ButtonPrimary>
+    <Wrapper style={{ flexDirection: account ? 'column-reverse' : 'column' }}>
+      <Column gap="16px" width={'100%'}>
+        <InputEmail
+          value={inputEmail}
+          hasError={!!errorInput}
+          onChange={onChangeEmail}
+          style={{ height: 36, width: '100%' }}
+          isVerifiedEmail
+        />
+        <ButtonPrimary
+          onClick={() => inputEmail && !errorInput && signIn({ loginMethod: LoginMethod.EMAIL, account: inputEmail })}
+          height={'36px'}
+        >
+          <Trans>Sign-In with Email</Trans>
+        </ButtonPrimary>
+      </Column>
       <OrDivider />
-      <ButtonLight onClick={() => signIn()} height={'36px'}>
-        <Trans>Sign-In with Wallet</Trans>
-      </ButtonLight>
-      <Text color={theme.subText} fontSize={'12px'}>
-        <Trans>
-          Don&apos;t have a wallet?{' '}
-          <Text as="span" sx={{ cursor: 'pointer' }} color={theme.primary} onClick={openDownloadWalletModal}>
-            Get started here
-          </Text>
-        </Trans>
-      </Text>
+      <Column gap="16px" width={'100%'} alignItems={'center'}>
+        <ButtonLight onClick={() => signIn()} height={'36px'}>
+          <Trans>Sign-In with Wallet</Trans>
+        </ButtonLight>
+        <Text color={theme.subText} fontSize={'12px'}>
+          <Trans>
+            Don&apos;t have a wallet?{' '}
+            <Text as="span" sx={{ cursor: 'pointer' }} color={theme.primary} onClick={openDownloadWalletModal}>
+              Get started here
+            </Text>
+          </Trans>
+        </Text>
+      </Column>
       <DownloadWalletModal />
     </Wrapper>
   )