mobile view

ui/tokenInfo/TokenInfoForm.tsx

@@ -73,11 +73,11 @@ const TokenInfoForm = ({ address }: Props) => {
   const fieldProps = { control };
 
   return (
-    <form noValidate onSubmit={ onSubmit }>
+    <form noValidate onSubmit={ onSubmit } autoComplete="off">
       <div>Requests are sent to a moderator for review and approval. This process can take several days.</div>
-      <Grid mt={ 8 } gridTemplateColumns="1fr 1fr" columnGap={ 5 } rowGap={ 5 }>
+      <Grid mt={ 8 } gridTemplateColumns={{ base: '1fr', lg: '1fr 1fr' }} columnGap={ 5 } rowGap={ 5 }>
 
-        <GridItem colSpan={ 2 }>
+        <GridItem colSpan={{ base: 1, lg: 2 }}>
           <TokenInfoFieldAddress { ...fieldProps }/>
         </GridItem>
         <TokenInfoFieldRequesterName { ...fieldProps }/>
@@ -90,10 +90,10 @@ const TokenInfoForm = ({ address }: Props) => {
         <TokenInfoFieldProjectWebsite { ...fieldProps }/>
         <TokenInfoFieldDocs { ...fieldProps }/>
         <TokenInfoFieldSupport { ...fieldProps }/>
-        <GridItem colSpan={ 2 }>
+        <GridItem colSpan={{ base: 1, lg: 2 }}>
           <TokenInfoFieldIconUrl { ...fieldProps } trigger={ trigger }/>
         </GridItem>
-        <GridItem colSpan={ 2 }>
+        <GridItem colSpan={{ base: 1, lg: 2 }}>
           <TokenInfoFieldProjectDescription { ...fieldProps }/>
         </GridItem>
 
@@ -112,7 +112,7 @@ const TokenInfoForm = ({ address }: Props) => {
         <TokenInfoFormSectionHeader>Price data</TokenInfoFormSectionHeader>
         <TokenInfoFieldPriceTicker { ...fieldProps } name="ticker_coin_market_cap" label="CoinMarketCap URL"/>
         <TokenInfoFieldPriceTicker { ...fieldProps } name="ticker_coin_gecko" label="CoinGecko URL"/>
-        <GridItem colSpan={ 2 }>
+        <GridItem colSpan={{ base: 1, lg: 2 }}>
           <TokenInfoFieldPriceTicker { ...fieldProps } name="ticker_defi_llama" label="DefiLlama URL "/>
         </GridItem>
       </Grid>

ui/tokenInfo/TokenInfoFormSectionHeader.tsx

@@ -7,7 +7,7 @@ interface Props {
 
 const TokenInfoFormSectionHeader = ({ children }: Props) => {
   return (
-    <GridItem colSpan={ 2 } fontFamily="heading" fontSize="lg" fontWeight={ 500 } mt={ 3 }>
+    <GridItem colSpan={{ base: 1, lg: 2 }} fontFamily="heading" fontSize="lg" fontWeight={ 500 } mt={ 3 }>
       { children }
     </GridItem>
   );

ui/tokenInfo/TokenInfoIconPreview.tsx

@@ -18,7 +18,7 @@ const TokenInfoIconPreview = ({ url, onError, onLoad, isInvalid }: Props) => {
 
   return (
     <Center
-      boxSize="80px"
+      boxSize={{ base: '60px', lg: '80px' }}
       flexShrink={ 0 }
       borderWidth="2px"
       borderColor={ url ? borderColorActive : borderColor }
@@ -28,9 +28,9 @@ const TokenInfoIconPreview = ({ url, onError, onLoad, isInvalid }: Props) => {
         borderRadius="base"
         src={ url }
         alt="Token logo preview"
-        boxSize={ 12 }
+        boxSize={{ base: 10, lg: 12 }}
         objectFit="cover"
-        fallback={ url && !isInvalid ? <Skeleton boxSize={ 12 }/> : <TokenLogoPlaceholder boxSize={ 12 }/> }
+        fallback={ url && !isInvalid ? <Skeleton boxSize={{ base: 10, lg: 12 }}/> : <TokenLogoPlaceholder boxSize={{ base: 10, lg: 12 }}/> }
         onError={ onError }
         onLoad={ onLoad }
       />

ui/tokenInfo/fields/TokenInfoFieldAddress.tsx

@@ -14,7 +14,7 @@ interface Props {
 const TokenInfoFieldAddress = ({ control }: Props) => {
   const renderControl = React.useCallback(({ field }: {field: ControllerRenderProps<Fields, 'address'>}) => {
     return (
-      <FormControl variant="floating" id={ field.name } isRequired size="lg">
+      <FormControl variant="floating" id={ field.name } isRequired size={{ base: 'md', lg: 'lg' }}>
         <Input
           { ...field }
           required

ui/tokenInfo/fields/TokenInfoFieldDocs.tsx

@@ -16,7 +16,7 @@ interface Props {
 const TokenInfoFieldDocs = ({ control, isReadOnly }: Props) => {
   const renderControl: ControllerProps<Fields, 'docs'>['render'] = React.useCallback(({ field, fieldState, formState }) => {
     return (
-      <FormControl variant="floating" id={ field.name } size="lg">
+      <FormControl variant="floating" id={ field.name } size={{ base: 'md', lg: 'lg' }}>
         <Input
           { ...field }
           isInvalid={ Boolean(fieldState.error) }

ui/tokenInfo/fields/TokenInfoFieldIconUrl.tsx

@@ -54,7 +54,7 @@ const TokenInfoFieldIconUrl = ({ control, isReadOnly, trigger }: Props) => {
 
   return (
     <Flex columnGap={ 5 }>
-      <FormControl variant="floating" id={ field.name } size="lg" isRequired>
+      <FormControl variant="floating" id={ field.name } size={{ base: 'md', lg: 'lg' }} isRequired>
         <Input
           { ...field }
           onBlur={ handleBlur }

ui/tokenInfo/fields/TokenInfoFieldPriceTicker.tsx

@@ -18,7 +18,7 @@ interface Props {
 const TokenInfoFieldPriceTicker = ({ control, isReadOnly, name, label }: Props) => {
   const renderControl: ControllerProps<Fields, typeof name>['render'] = React.useCallback(({ field, fieldState, formState }) => {
     return (
-      <FormControl variant="floating" id={ field.name } size="lg">
+      <FormControl variant="floating" id={ field.name } size={{ base: 'md', lg: 'lg' }}>
         <Input
           { ...field }
           isInvalid={ Boolean(fieldState.error) }

ui/tokenInfo/fields/TokenInfoFieldProjectDescription.tsx

@@ -15,7 +15,7 @@ interface Props {
 const TokenInfoFieldProjectDescription = ({ control, isReadOnly }: Props) => {
   const renderControl: ControllerProps<Fields, 'project_description'>['render'] = React.useCallback(({ field, fieldState, formState }) => {
     return (
-      <FormControl variant="floating" id={ field.name } size="lg" isRequired>
+      <FormControl variant="floating" id={ field.name } size={{ base: 'md', lg: 'lg' }} isRequired>
         <Textarea
           { ...field }
           required

ui/tokenInfo/fields/TokenInfoFieldProjectEmail.tsx

@@ -16,7 +16,7 @@ interface Props {
 const TokenInfoFieldProjectEmail = ({ control, isReadOnly }: Props) => {
   const renderControl: ControllerProps<Fields, 'project_email'>['render'] = React.useCallback(({ field, fieldState, formState }) => {
     return (
-      <FormControl variant="floating" id={ field.name } isRequired size="lg">
+      <FormControl variant="floating" id={ field.name } isRequired size={{ base: 'md', lg: 'lg' }}>
         <Input
           { ...field }
           required

ui/tokenInfo/fields/TokenInfoFieldProjectName.tsx

@@ -16,7 +16,7 @@ const TokenInfoFieldProjectName = ({ control, isReadOnly }: Props) => {
   const renderControl: ControllerProps<Fields, 'project_name'>['render'] = React.useCallback(({ field, fieldState, formState }) => {
 
     return (
-      <FormControl variant="floating" id={ field.name } size="lg">
+      <FormControl variant="floating" id={ field.name } size={{ base: 'md', lg: 'lg' }}>
         <Input
           { ...field }
           isInvalid={ Boolean(fieldState.error) }

ui/tokenInfo/fields/TokenInfoFieldProjectSector.tsx

@@ -5,6 +5,7 @@ import { Controller } from 'react-hook-form';
 import type { Fields } from '../types';
 import type { TokenInfoApplicationConfig } from 'types/api/account';
 
+import useIsMobile from 'lib/hooks/useIsMobile';
 import FancySelect from 'ui/shared/FancySelect/FancySelect';
 
 interface Props {
@@ -14,6 +15,8 @@ interface Props {
 }
 
 const TokenInfoFieldProjectSector = ({ control, isReadOnly, config }: Props) => {
+  const isMobile = useIsMobile();
+
   const options = React.useMemo(() => {
     return config.map((option) => ({ label: option, value: option }));
   }, [ config ]);
@@ -24,13 +27,13 @@ const TokenInfoFieldProjectSector = ({ control, isReadOnly, config }: Props) =>
       <FancySelect
         { ...field }
         options={ options }
-        size="lg"
+        size={ isMobile ? 'md' : 'lg' }
         placeholder="Project industry"
         isDisabled={ formState.isSubmitting || isReadOnly }
         error={ fieldState.error }
       />
     );
-  }, [ isReadOnly, options ]);
+  }, [ isReadOnly, options, isMobile ]);
 
   return (
     <Controller

ui/tokenInfo/fields/TokenInfoFieldProjectWebsite.tsx

@@ -16,7 +16,7 @@ interface Props {
 const TokenInfoFieldProjectWebsite = ({ control, isReadOnly }: Props) => {
   const renderControl: ControllerProps<Fields, 'project_website'>['render'] = React.useCallback(({ field, fieldState, formState }) => {
     return (
-      <FormControl variant="floating" id={ field.name } size="lg" isRequired>
+      <FormControl variant="floating" id={ field.name } size={{ base: 'md', lg: 'lg' }} isRequired>
         <Input
           { ...field }
           isInvalid={ Boolean(fieldState.error) }

ui/tokenInfo/fields/TokenInfoFieldRequesterEmail.tsx

@@ -16,7 +16,7 @@ interface Props {
 const TokenInfoFieldRequesterEmail = ({ control, isReadOnly }: Props) => {
   const renderControl: ControllerProps<Fields, 'requester_email'>['render'] = React.useCallback(({ field, fieldState, formState }) => {
     return (
-      <FormControl variant="floating" id={ field.name } isRequired size="lg">
+      <FormControl variant="floating" id={ field.name } isRequired size={{ base: 'md', lg: 'lg' }}>
         <Input
           { ...field }
           required

ui/tokenInfo/fields/TokenInfoFieldRequesterName.tsx

@@ -15,7 +15,7 @@ interface Props {
 const TokenInfoFieldRequesterName = ({ control, isReadOnly }: Props) => {
   const renderControl: ControllerProps<Fields, 'requester_name'>['render'] = React.useCallback(({ field, fieldState, formState }) => {
     return (
-      <FormControl variant="floating" id={ field.name } isRequired size="lg">
+      <FormControl variant="floating" id={ field.name } isRequired size={{ base: 'md', lg: 'lg' }}>
         <Input
           { ...field }
           required

ui/tokenInfo/fields/TokenInfoFieldSocialLink.tsx

@@ -45,7 +45,7 @@ interface Props {
 const TokenInfoFieldSocialLink = ({ control, isReadOnly, name }: Props) => {
   const renderControl: ControllerProps<Fields, typeof name>['render'] = React.useCallback(({ field, fieldState, formState }) => {
     return (
-      <FormControl variant="floating" id={ field.name } size="lg" sx={{ '.chakra-input__group input': { pr: '60px' } }}>
+      <FormControl variant="floating" id={ field.name } size={{ base: 'md', lg: 'lg' }} sx={{ '.chakra-input__group input': { pr: '60px' } }}>
         <InputGroup>
           <Input
             { ...field }

ui/tokenInfo/fields/TokenInfoFieldSupport.tsx

@@ -18,7 +18,7 @@ const TokenInfoFieldSupport = ({ control, isReadOnly }: Props) => {
   const renderControl: ControllerProps<Fields, 'support'>['render'] = React.useCallback(({ field, fieldState, formState }) => {
 
     return (
-      <FormControl variant="floating" id={ field.name } size="lg">
+      <FormControl variant="floating" id={ field.name } size={{ base: 'md', lg: 'lg' }}>
         <Input
           { ...field }
           isInvalid={ Boolean(fieldState.error) }