design updates

ui/publicTags/submit/PublicTagsSubmitForm.tsx

@@ -92,9 +92,9 @@ const PublicTagsSubmitForm = ({ config, userInfo, onSubmitResult }: Props) => {
             Company info
           </GridItem>
           <PublicTagsSubmitFieldRequesterName/>
-          <PublicTagsSubmitFieldCompanyName/>
-          { !isMobile && <div/> }
           <PublicTagsSubmitFieldRequesterEmail/>
+          { !isMobile && <div/> }
+          <PublicTagsSubmitFieldCompanyName/>
           <PublicTagsSubmitFieldCompanyWebsite/>
           { !isMobile && <div/> }
 

ui/publicTags/submit/PublicTagsSubmitResult.tsx

-import { Alert, Box, Button, Grid, GridItem } from '@chakra-ui/react';
+import { Alert, Box, Button, Flex, Grid, GridItem } from '@chakra-ui/react';
 import _pickBy from 'lodash/pickBy';
 import React from 'react';
 
@@ -66,12 +66,14 @@ const PublicTagsSubmitResult = ({ data }: Props) => {
       <Box as="h2" textStyle="h4" mt={ 8 } mb={ 5 }>Public tags/labels</Box>
       { hasErrors ? <PublicTagsSubmitResultWithErrors data={ groupedData }/> : <PublicTagsSubmitResultSuccess data={ groupedData }/> }
 
-      { hasErrors && (
-        <Button size="lg" variant="outline" mt={ 8 } mr={ 6 } as="a" href={ route({ pathname: '/public-tags/submit', query: startOverButtonQuery }) }>
-          Start over
-        </Button>
-      ) }
-      <Button size="lg" mt={ 8 } as="a" href={ route({ pathname: '/public-tags/submit' }) }>Add new tag</Button>
+      <Flex flexDir={{ base: 'column', lg: 'row' }} columnGap={ 6 } mt={ 8 } rowGap={ 3 }>
+        { hasErrors && (
+          <Button size="lg" variant="outline" as="a" href={ route({ pathname: '/public-tags/submit', query: startOverButtonQuery }) }>
+            Start over
+          </Button>
+        ) }
+        <Button size="lg" as="a" href={ route({ pathname: '/public-tags/submit' }) }>Add new tag</Button>
+      </Flex>
     </div>
   );
 };

ui/publicTags/submit/fields/PublicTagsSubmitFieldTagType.tsx

 import { chakra, Flex, FormControl, useColorModeValue } from '@chakra-ui/react';
 import type { GroupBase, SelectComponentsConfig, SingleValueProps } from 'chakra-react-select';
 import { chakraComponents } from 'chakra-react-select';
+import _capitalize from 'lodash/capitalize';
 import React from 'react';
 import type { ControllerRenderProps } from 'react-hook-form';
 import { Controller, useFormContext } from 'react-hook-form';
@@ -28,7 +29,7 @@ const PublicTagsSubmitFieldTagType = ({ index, tagTypes, isDisabled }: Props) =>
 
   const typeOptions = React.useMemo(() => tagTypes?.map((type) => ({
     value: type.type,
-    label: type.type,
+    label: _capitalize(type.type),
   })), [ tagTypes ]);
 
   const fieldValue = watch(`tags.${ index }.type`).value;
@@ -49,7 +50,11 @@ const PublicTagsSubmitFieldTagType = ({ index, tagTypes, isDisabled }: Props) =>
         }
         case 'protocol':
         case 'generic': {
-          return (<chakraComponents.SingleValue { ...props }><chakra.span color="gray.400">#</chakra.span> { children }</chakraComponents.SingleValue>);
+          return (
+            <chakraComponents.SingleValue { ...props }>
+              <chakra.span color="gray.400">#</chakra.span> { children }
+            </chakraComponents.SingleValue>
+          );
         }
 
         default: {

ui/publicTags/submit/fields/PublicTagsSubmitFieldTags.tsx

@@ -24,7 +24,7 @@ const PublicTagsSubmitFieldTags = ({ tagTypes }: Props) => {
   const handleAddFieldClick = React.useCallback((index: number) => {
     insert(index + 1, {
       name: '',
-      type: { label: 'name', value: 'name' },
+      type: { label: 'Name', value: 'name' },
       url: undefined,
       bgColor: undefined,
       textColor: undefined,

ui/publicTags/submit/result/PublicTagsSubmitResultSuccess.tsx

@@ -3,7 +3,6 @@ import React from 'react';
 
 import type { FormSubmitResultGrouped } from '../types';
 
-import useIsMobile from 'lib/hooks/useIsMobile';
 import AddressEntity from 'ui/shared/entities/address/AddressEntity';
 import EntityTag from 'ui/shared/EntityTags/EntityTag';
 
@@ -12,11 +11,9 @@ interface Props {
 }
 
 const PublicTagsSubmitResultSuccess = ({ data }: Props) => {
-  const isMobile = useIsMobile();
-
   return (
     <Grid gridTemplateColumns={{ base: '1fr', lg: '1fr 1fr' }} rowGap={ 3 } columnGap={ 3 }>
-      <GridItem>
+      <GridItem overflow="hidden">
         <Box fontSize="sm" color="text_secondary" fontWeight={ 500 }>Smart contract / Address (0x...)</Box>
         <Flex flexDir="column" rowGap={ 2 } mt={ 2 }>
           { data.items
@@ -27,7 +24,6 @@ const PublicTagsSubmitResultSuccess = ({ data }: Props) => {
                 key={ hash }
                 address={{ hash }}
                 noIcon
-                truncation={ isMobile ? 'constant' : 'dynamic' }
               />
             )) }
         </Flex>

ui/publicTags/submit/result/PublicTagsSubmitResultWithErrors.tsx

@@ -40,7 +40,7 @@ const PublicTagsSubmitResultWithErrors = ({ data }: Props) => {
                 borderRadius="base"
                 rowGap={ 3 }
               >
-                <GridItem px={ 6 } pt={ 4 } pb={{ base: 0, lg: 4 }}>
+                <GridItem px={{ base: 4, lg: 6 }} pt={{ base: 2, lg: 4 }} pb={{ base: 0, lg: 4 }} overflow="hidden">
                   <Box fontSize="sm" color="text_secondary" fontWeight={ 500 }>Smart contract / Address (0x...)</Box>
                   <Flex flexDir="column" rowGap={ 2 } mt={ 2 }>
                     { item.addresses.map((hash) => (
@@ -48,12 +48,11 @@ const PublicTagsSubmitResultWithErrors = ({ data }: Props) => {
                         key={ hash }
                         address={{ hash }}
                         noIcon
-                        truncation={ isMobile ? 'constant' : 'dynamic' }
                       />
                     )) }
                   </Flex>
                 </GridItem>
-                <GridItem px={ 6 } pb={ 4 } pt={{ base: 0, lg: 4 }}>
+                <GridItem px={{ base: 4, lg: 6 }} pb={{ base: 2, lg: 4 }} pt={{ base: 0, lg: 4 }}>
                   <Box fontSize="sm" color="text_secondary" fontWeight={ 500 }>Tag</Box>
                   <Flex rowGap={ 2 } columnGap={ 2 } mt={ 2 } justifyContent="flex-start" flexWrap="wrap">
                     { item.tags.map((tag) => (

ui/publicTags/submit/utils.ts

@@ -105,7 +105,7 @@ export function getFormDefaultValues(query: Route['query'], userInfo: UserInfo |
     requesterEmail: getQueryParamString(query?.requesterEmail) || userInfo?.email || undefined,
     companyName: getQueryParamString(query?.companyName),
     companyWebsite: getQueryParamString(query?.companyWebsite),
-    tags: [ { name: '', type: { label: 'name', value: 'name' as const } } ],
+    tags: [ { name: '', type: { label: 'Name', value: 'name' as const } } ],
   };
 }