mobile view for public tag form

ui/publicTags/PublicTagsForm/PublicTagFormAddressInput.tsx

-import { IconButton, Icon } from '@chakra-ui/react';
+import { IconButton, Icon, Flex } from '@chakra-ui/react';
 import React, { useCallback } from 'react';
 import type { ControllerRenderProps, Control, FieldError } from 'react-hook-form';
 import { Controller } from 'react-hook-form';
@@ -17,55 +17,59 @@ interface Props {
   error?: FieldError;
   onAddFieldClick: (e: React.SyntheticEvent) => void;
   onRemoveFieldClick: (index: number) => (e: React.SyntheticEvent) => void;
+  size?: string;
 }
 
 const MAX_INPUTS_NUM = 10;
 
-export default function PublicTagFormAction({ control, index, fieldsLength, error, onAddFieldClick, onRemoveFieldClick }: Props) {
+export default function PublicTagFormAction({ control, index, fieldsLength, error, onAddFieldClick, onRemoveFieldClick, size }: Props) {
   const renderAddressInput = useCallback(({ field }: {field: ControllerRenderProps<Inputs, `addresses.${ number }.address`>}) => {
     return (
       <AddressInput<Inputs, `addresses.${ number }.address`>
         field={ field }
         error={ error }
-        size="lg"
+        size={ size }
         placeholder="Smart contract / Address (0x...)"
       />
     );
-  }, [ error ]);
+  }, [ error, size ]);
 
   return (
-    <>
+    <Flex flexDir="column" rowGap={ 5 } alignItems="flex-end">
       <Controller
         name={ `addresses.${ index }.address` }
         control={ control }
         render={ renderAddressInput }
         rules={{ pattern: ADDRESS_REGEXP }}
       />
-      { index === fieldsLength - 1 && fieldsLength < MAX_INPUTS_NUM && (
-        <IconButton
-          aria-label="add"
-          variant="iconBorder"
-          w="30px"
-          h="30px"
-          onClick={ onAddFieldClick }
-          icon={ <Icon as={ PlusIcon } w="20px" h="20px"/> }
-          position="absolute"
-          right={ index === 0 ? '-50px' : '-100px' }
-          top="25px"
-        />
-      ) }
-      { fieldsLength > 1 && (
-        <IconButton
-          aria-label="delete"
-          variant="iconBorder"
-          w="30px"
-          h="30px"
-          onClick={ onRemoveFieldClick(index) }
-          icon={ <Icon as={ MinusIcon } w="20px" h="20px"/> }
-          position="absolute"
-          right="-50px"
-          top="25px"
-        />
-      ) }</>
+      <Flex
+        columnGap={ 5 }
+        position={{ base: 'static', lg: 'absolute' }}
+        left={{ base: 'auto', lg: 'calc(100% + 20px)' }}
+        h="100%"
+        alignItems="center"
+      >
+        { fieldsLength > 1 && (
+          <IconButton
+            aria-label="delete"
+            variant="iconBorder"
+            w="30px"
+            h="30px"
+            onClick={ onRemoveFieldClick(index) }
+            icon={ <Icon as={ MinusIcon } w="20px" h="20px"/> }
+          />
+        ) }
+        { index === fieldsLength - 1 && fieldsLength < MAX_INPUTS_NUM && (
+          <IconButton
+            aria-label="add"
+            variant="iconBorder"
+            w="30px"
+            h="30px"
+            onClick={ onAddFieldClick }
+            icon={ <Icon as={ PlusIcon } w="20px" h="20px"/> }
+          />
+        ) }
+      </Flex>
+    </Flex>
   );
 }

ui/publicTags/PublicTagsForm/PublicTagFormComment.tsx

@@ -12,23 +12,24 @@ const TEXT_INPUT_MAX_LENGTH = 255;
 interface Props {
   control: Control<Inputs>;
   error?: FieldError;
+  size?: string;
 }
 
-export default function PublicTagFormComment({ control, error }: Props) {
+export default function PublicTagFormComment({ control, error, size }: Props) {
   const renderComment = useCallback(({ field }: {field: ControllerRenderProps<Inputs, 'comment'>}) => {
     return (
-      <FormControl variant="floating" id={ field.name } size="lg" isRequired>
+      <FormControl variant="floating" id={ field.name } size={ size } isRequired>
         <Textarea
           { ...field }
           isInvalid={ Boolean(error) }
-          size="lg"
+          size={ size }
         />
         <FormLabel>
           { getPlaceholderWithError('Specify the reason for adding tags and color preference(s)', error?.message) }
         </FormLabel>
       </FormControl>
     );
-  }, [ error ]);
+  }, [ error, size ]);
 
   return (
     <Controller

ui/publicTags/PublicTagsForm/PublicTagsForm.tsx

@@ -16,6 +16,7 @@ import type { PublicTags, PublicTag, PublicTagNew, PublicTagErrors } from 'types
 import type { ErrorType } from 'lib/client/fetch';
 import fetch from 'lib/client/fetch';
 import getErrorMessage from 'lib/getErrorMessage';
+import useIsMobile from 'lib/hooks/useIsMobile';
 import { EMAIL_REGEXP } from 'lib/validations/email';
 import FormSubmitAlert from 'ui/shared/FormSubmitAlert';
 
@@ -56,6 +57,8 @@ const ADDRESS_INPUT_BUTTONS_WIDTH = 100;
 
 const PublicTagsForm = ({ changeToDataScreen, data }: Props) => {
   const queryClient = useQueryClient();
+  const isMobile = useIsMobile();
+  const inputSize = isMobile ? 'md' : 'lg';
 
   const { control, handleSubmit, formState: { errors, isValid }, setError } = useForm<Inputs>({
     defaultValues: {
@@ -149,7 +152,7 @@ const PublicTagsForm = ({ changeToDataScreen, data }: Props) => {
   }, [ changeToDataScreen ]);
 
   return (
-    <Box width={ `calc(100% - ${ ADDRESS_INPUT_BUTTONS_WIDTH }px)` } maxWidth="844px">
+    <Box width={{ base: 'auto', lg: `calc(100% - ${ ADDRESS_INPUT_BUTTONS_WIDTH }px)` }} maxWidth="844px">
       { isAlertVisible && <Box mb={ 4 }><FormSubmitAlert/></Box> }
       <Text size="sm" variant="secondary" paddingBottom={ 5 }>Company info</Text>
       <Grid templateColumns={{ base: '1fr', lg: '1fr 1fr' }} rowGap={ 4 } columnGap={ 5 }>
@@ -160,6 +163,7 @@ const PublicTagsForm = ({ changeToDataScreen, data }: Props) => {
             label={ placeholders.fullName }
             error={ errors.fullName }
             required
+            size={ inputSize }
           />
         </GridItem>
         <GridItem>
@@ -168,6 +172,7 @@ const PublicTagsForm = ({ changeToDataScreen, data }: Props) => {
             control={ control }
             label={ placeholders.companyName }
             error={ errors.companyName }
+            size={ inputSize }
           />
         </GridItem>
         <GridItem>
@@ -178,6 +183,7 @@ const PublicTagsForm = ({ changeToDataScreen, data }: Props) => {
             pattern={ EMAIL_REGEXP }
             error={ errors.email }
             required
+            size={ inputSize }
           />
         </GridItem>
         <GridItem>
@@ -186,10 +192,11 @@ const PublicTagsForm = ({ changeToDataScreen, data }: Props) => {
             control={ control }
             label={ placeholders.companyUrl }
             error={ errors?.companyUrl }
+            size={ inputSize }
           />
         </GridItem>
       </Grid>
-      <Box marginTop={ 4 } marginBottom={ 8 }>
+      <Box marginTop={{ base: 5, lg: 8 }} marginBottom={{ base: 5, lg: 8 }}>
         <PublicTagFormAction control={ control }/>
       </Box>
       <Text size="sm" variant="secondary" marginBottom={ 5 }>Public tags (2 tags maximum, please use &quot;;&quot; as a divider)</Text>
@@ -199,7 +206,9 @@ const PublicTagsForm = ({ changeToDataScreen, data }: Props) => {
           control={ control }
           label={ placeholders.tags }
           error={ errors.tags }
-          required/>
+          required
+          size={ inputSize }
+        />
       </Box>
       { fields.map((field, index) => {
         return (
@@ -211,12 +220,13 @@ const PublicTagsForm = ({ changeToDataScreen, data }: Props) => {
               fieldsLength={ fields.length }
               onAddFieldClick={ onAddFieldClick }
               onRemoveFieldClick={ onRemoveFieldClick }
+              size={ inputSize }
             />
           </Box>
         );
       }) }
       <Box marginBottom={ 8 }>
-        <PublicTagFormComment control={ control } error={ errors.comment }/>
+        <PublicTagFormComment control={ control } error={ errors.comment } size={ inputSize }/>
       </Box>
       <HStack spacing={ 6 }>
         <Button

ui/publicTags/PublicTagsForm/PublicTagsFormInput.tsx

@@ -14,6 +14,7 @@ interface Props<TInputs extends FieldValues> {
   control: Control<TInputs, object>;
   pattern?: RegExp;
   error?: FieldError;
+  size?: string;
 }
 
 export default function PublicTagsFormInput<Inputs extends FieldValues>({
@@ -23,13 +24,14 @@ export default function PublicTagsFormInput<Inputs extends FieldValues>({
   fieldName,
   pattern,
   error,
+  size,
 }: Props<Inputs>) {
   const renderInput = useCallback(({ field }: {field: ControllerRenderProps<Inputs, typeof fieldName>}) => {
     return (
-      <FormControl variant="floating" id={ field.name } isRequired={ required } size="lg">
+      <FormControl variant="floating" id={ field.name } isRequired={ required } size={ size }>
         <Input
           { ...field }
-          size="lg"
+          size={ size }
           required={ required }
           isInvalid={ Boolean(error) }
           maxLength={ TEXT_INPUT_MAX_LENGTH }
@@ -37,7 +39,7 @@ export default function PublicTagsFormInput<Inputs extends FieldValues>({
         <FormLabel>{ getPlaceholderWithError(label, error?.message) }</FormLabel>
       </FormControl>
     );
-  }, [ label, required, error ]);
+  }, [ label, required, error, size ]);
   return (
     <Controller
       name={ fieldName }