design fixes

ui/publicTags/submit/PublicTagsSubmitForm.tsx

@@ -84,8 +84,8 @@ const PublicTagsSubmitForm = ({ config, userInfo, onSubmitResult }: Props) => {
         onSubmit={ formApi.handleSubmit(onFormSubmit) }
       >
         <Grid
-          columnGap={ 5 }
-          rowGap={{ base: 5, lg: 4 }}
+          columnGap={ 3 }
+          rowGap={ 3 }
           templateColumns={{ base: '1fr', lg: '1fr 1fr minmax(0, 200px)', xl: '1fr 1fr minmax(0, 250px)' }}
         >
           <GridItem colSpan={{ base: 1, lg: 3 }} as="h2" textStyle="h4">
@@ -98,7 +98,7 @@ const PublicTagsSubmitForm = ({ config, userInfo, onSubmitResult }: Props) => {
           <PublicTagsSubmitFieldCompanyWebsite/>
           { !isMobile && <div/> }
 
-          <GridItem colSpan={{ base: 1, lg: 3 }} as="h2" textStyle="h4" mt={ 3 }>
+          <GridItem colSpan={{ base: 1, lg: 3 }} as="h2" textStyle="h4" mt={{ base: 3, lg: 5 }}>
             Public tags/labels
             <Hint label="Submit a public tag proposal for our moderation team to review" ml={ 1 } color="link"/>
           </GridItem>

ui/publicTags/submit/fields/PublicTagsSubmitFieldTag.tsx

@@ -43,8 +43,8 @@ const PublicTagsSubmitFieldTag = ({ index, isDisabled, register, errors, onAddCl
     <>
       <GridItem colSpan={{ base: 1, lg: 2 }} p="10px" borderRadius="base" bgColor={ errors ? bgColorError : bgColorDefault }>
         <Grid
-          rowGap={ 2 }
-          columnGap={ 2 }
+          rowGap={ 3 }
+          columnGap={ 3 }
           templateColumns={{ base: '1fr', lg: 'repeat(4, 1fr)' }}
         >
           <GridItem colSpan={{ base: 1, lg: 2 }}>
@@ -75,7 +75,7 @@ const PublicTagsSubmitFieldTag = ({ index, isDisabled, register, errors, onAddCl
           <PublicTagsSubmitFieldTagColor
             fieldType="bgColor"
             fieldName={ `tags.${ index }.bgColor` }
-            placeholder="Background color"
+            placeholder="Background (Hex)"
             index={ index }
             register={ register }
             error={ errors?.bgColor }
@@ -84,7 +84,7 @@ const PublicTagsSubmitFieldTag = ({ index, isDisabled, register, errors, onAddCl
           <PublicTagsSubmitFieldTagColor
             fieldType="textColor"
             fieldName={ `tags.${ index }.textColor` }
-            placeholder="Text color"
+            placeholder="Text (Hex)"
             index={ index }
             register={ register }
             error={ errors?.textColor }
@@ -100,7 +100,7 @@ const PublicTagsSubmitFieldTag = ({ index, isDisabled, register, errors, onAddCl
                 maxH="160px"
               />
               <InputPlaceholder
-                text="Label description - any text to be shown on label hover (max 80 characters)"
+                text="Description on label hover (max 80 characters)"
                 error={ errors?.tooltipDescription }
               />
             </FormControl>
@@ -138,7 +138,7 @@ const PublicTagsSubmitFieldTag = ({ index, isDisabled, register, errors, onAddCl
           ) }
         </Flex>
         { !isMobile && (
-          <Flex flexDir="column" alignItems="flex-start" mt="10px" rowGap={ 2 }>
+          <Flex flexDir="column" alignItems="flex-start" mt={ 10 } rowGap={ 2 }>
             <EntityTag data={{
               name: field.name || 'Tag name',
               tagType: field.type.value,

ui/publicTags/submit/fields/PublicTagsSubmitFieldTagColor.tsx

@@ -42,7 +42,7 @@ const PublicTagsSubmitFieldTagColor = <Type extends ColorFieldTypes>({ isDisable
           maxLength={ 6 }
         />
         <InputPlaceholder text={ placeholder } error={ error }/>
-        <InputRightElement w="30px" right={ 4 } zIndex={ 10 }>
+        <InputRightElement w="30px" h="auto" right={ 4 } top="50%" transform="translateY(-50%)" zIndex={ 10 }>
           <Circle
             size="30px"
             bgColor={ value && colorValidator(value) === true ? `#${ value }` : circleBgColorDefault[fieldType] }