update: note kyberAI (#2193)

KyberNetwork · Aug 28, 2023 · 2805d9c · 2805d9c
1 parent 38e2694
commit 2805d9c
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 17 deletions.
diff --git a/src/pages/TrueSightV2/pages/RegisterWhitelist/SubscribeForm.tsx b/src/pages/TrueSightV2/pages/RegisterWhitelist/SubscribeForm.tsx
@@ -1,7 +1,6 @@
 import { Trans, t } from '@lingui/macro'
 import { debounce } from 'lodash'
 import { FormEvent, useCallback, useEffect, useMemo, useRef, useState } from 'react'
-import { useMedia } from 'react-use'
 import { Text } from 'rebass'
 import { useLazyCheckReferralCodeQuery, useRequestWhiteListMutation } from 'services/kyberAISubscription'
 
@@ -13,10 +12,9 @@ import useParsedQueryString from 'hooks/useParsedQueryString'
 import useTheme from 'hooks/useTheme'
 import { getErrorMessage, isReferrerCodeInvalid } from 'pages/TrueSightV2/utils'
 import { useSessionInfo } from 'state/authen/hooks'
-import { MEDIA_WIDTHS } from 'theme'
 import { isEmailValid } from 'utils/string'
 
-import { FormWrapper, Input, Label } from './styled'
+import { FormWrapper, Input } from './styled'
 
 export default function EmailForm({
   showVerify,
@@ -28,7 +26,6 @@ export default function EmailForm({
   const qs = useParsedQueryString<{ referrer: string }>()
   const [referredByCode, setCode] = useState(qs.referrer || '')
   const [errorInput, setErrorInput] = useState({ email: '', referredByCode: '' })
-  const isMobile = useMedia(`(max-width: ${MEDIA_WIDTHS.upToSmall}px)`)
 
   const { userInfo } = useSessionInfo()
   const [requestWaitList] = useRequestWhiteListMutation()
@@ -101,35 +98,33 @@ export default function EmailForm({
   return (
     <>
       <FormWrapper>
-        <Column style={{ width: isMobile ? '100%' : '70%' }} gap="6px">
-          <Label>
-            <Trans>Your Email*</Trans>
-          </Label>
+        <Column width="100%" gap="6px">
           <Tooltip text={errorInput.email} show={!!errorInput.email} placement="top">
             <Input
               disabled={!!userInfo?.email}
               $borderColor={errorInput.email ? theme.red : theme.border}
               value={inputEmail}
-              placeholder="Enter your email address"
+              placeholder={t`Email Address`}
               onChange={onChangeInput}
             />
           </Tooltip>
           <Text fontSize={10} color={theme.subText}>
-            <Trans>We will never share your email with third parties</Trans>
+            <Trans>We will never share your email with third parties.</Trans>
           </Text>
         </Column>
-        <Column gap="6px" style={{ width: isMobile ? '100%' : undefined }}>
-          <Label>
-            <Trans>Referral Code (Optional)</Trans>
-          </Label>
+
+        <Column width="100%" gap="6px">
           <Tooltip text={errorInput.referredByCode} show={!!errorInput.referredByCode} placement="top">
             <Input
               $borderColor={errorInput.referredByCode ? theme.red : theme.border}
               value={referredByCode}
-              placeholder="Enter your Code"
+              placeholder={t`Referral Code (Optional)`}
               onChange={onChangeCode}
             />
           </Tooltip>
+          <Text fontSize={10} color={theme.subText}>
+            <Trans>Use a referral code to get access to KyberAI faster!</Trans>
+          </Text>
         </Column>
       </FormWrapper>
 

diff --git a/src/pages/TrueSightV2/pages/RegisterWhitelist/styled.tsx b/src/pages/TrueSightV2/pages/RegisterWhitelist/styled.tsx
@@ -49,12 +49,12 @@ export const InputWithCopy = (props: InputProps) => {
 }
 
 export const FormWrapper = styled.div`
-  width: 500px;
+  width: 380px;
   display: flex;
   gap: 1rem;
   z-index: 1;
+  flex-direction: column;
   ${({ theme }) => theme.mediaWidth.upToSmall`
     width: 100%;
-    flex-wrap: wrap;
   `}
 `