fix hash color in address qr modal and layout of public tag submit form

ui/address/details/AddressQrCode.tsx

@@ -87,7 +87,6 @@ const AddressQrCode = ({ hash, className, isLoading }: Props) => {
               <AddressEntity
                 mb={ 3 }
                 fontWeight={ 500 }
-                color="text"
                 address={{ hash }}
                 noLink
               />

ui/games/CapybaraRunner.tsx

@@ -6,6 +6,7 @@ import React from 'react';
 import config from 'configs/app';
 import useIsMobile from 'lib/hooks/useIsMobile';
 import { Button } from 'toolkit/chakra/button';
+import { Heading } from 'toolkit/chakra/heading';
 import { Link } from 'toolkit/chakra/link';
 const easterEggBadgeFeature = config.features.easterEggBadge;
 
@@ -36,7 +37,7 @@ const CapybaraRunner = () => {
 
   return (
     <>
-      <Box as="h2" mt={ 12 } mb={ 2 } fontWeight={ 600 } fontSize="xl">Score 1000 to win a special prize!</Box>
+      <Heading level="2" mt={ 12 } mb={ 2 }>Score 1000 to win a special prize!</Heading>
       <Box mb={ 4 }>{ isMobile ? 'Tap below to start' : 'Press space to start' }</Box>
       <Script strategy="lazyOnload" src="/static/capibara/index.js"/>
       <Box width={{ base: '100%', lg: '600px' }} height="300px" p="50px 0">

ui/publicTags/submit/PublicTagsSubmitForm.tsx

@@ -14,6 +14,7 @@ import getErrorObj from 'lib/errors/getErrorObj';
 import getErrorObjPayload from 'lib/errors/getErrorObjPayload';
 import useIsMobile from 'lib/hooks/useIsMobile';
 import { Button } from 'toolkit/chakra/button';
+import { Heading } from 'toolkit/chakra/heading';
 import { FormFieldEmail } from 'toolkit/components/forms/fields/FormFieldEmail';
 import { FormFieldText } from 'toolkit/components/forms/fields/FormFieldText';
 import { FormFieldUrl } from 'toolkit/components/forms/fields/FormFieldUrl';
@@ -96,8 +97,10 @@ const PublicTagsSubmitForm = ({ config, userInfo, onSubmitResult }: Props) => {
           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">
+          <GridItem colSpan={{ base: 1, lg: 3 }}>
+            <Heading level="2">
               Company info
+            </Heading>
           </GridItem>
           <FormFieldText<FormFields> name="requesterName" required placeholder="Your name"/>
           <FormFieldEmail<FormFields> name="requesterEmail" required/>
@@ -107,9 +110,11 @@ const PublicTagsSubmitForm = ({ config, userInfo, onSubmitResult }: Props) => {
           <FormFieldUrl<FormFields> name="companyWebsite" placeholder="Company website"/>
           { !isMobile && <div/> }
 
-          <GridItem colSpan={{ base: 1, lg: 3 }} as="h2" textStyle="h4" mt={{ base: 3, lg: 5 }}>
+          <GridItem colSpan={{ base: 1, lg: 3 }} mt={{ base: 3, lg: 5 }}>
+            <Heading level="2" display="flex" alignItems="center" columnGap={ 1 }>
               Public tags/labels
-            <Hint label="Submit a public tag proposal for our moderation team to review" ml={ 1 } color="link.primary"/>
+              <Hint label="Submit a public tag proposal for our moderation team to review"/>
+            </Heading>
           </GridItem>
           <PublicTagsSubmitFieldAddresses/>
           <PublicTagsSubmitFieldTags tagTypes={ config?.tagTypes }/>

ui/publicTags/submit/PublicTagsSubmitResult.tsx

-import { Box, Flex, Grid, GridItem } from '@chakra-ui/react';
+import { Flex, Grid, GridItem } from '@chakra-ui/react';
 import { pickBy } from 'es-toolkit';
 import React from 'react';
 
@@ -8,6 +8,7 @@ import { route } from 'nextjs-routes';
 
 import { Alert } from 'toolkit/chakra/alert';
 import { Button } from 'toolkit/chakra/button';
+import { Heading } from 'toolkit/chakra/heading';
 import { Link } from 'toolkit/chakra/link';
 import { makePrettyLink } from 'toolkit/utils/url';
 
@@ -43,7 +44,7 @@ const PublicTagsSubmitResult = ({ data }: Props) => {
         </Alert>
       ) }
 
-      <Box as="h2" textStyle="h4">Company info</Box>
+      <Heading level="2">Company info</Heading>
       <Grid rowGap={ 3 } columnGap={ 6 } gridTemplateColumns="170px 1fr" mt={ 6 }>
         <GridItem>Your name</GridItem>
         <GridItem>{ groupedData.requesterName }</GridItem>
@@ -65,7 +66,7 @@ const PublicTagsSubmitResult = ({ data }: Props) => {
         ) }
       </Grid>
 
-      <Box as="h2" textStyle="h4" mt={ 8 } mb={ 5 }>Public tags/labels</Box>
+      <Heading level="2" mt={ 8 } mb={ 5 }>Public tags/labels</Heading>
       { hasErrors ? <PublicTagsSubmitResultWithErrors data={ groupedData }/> : <PublicTagsSubmitResultSuccess data={ groupedData }/> }
 
       <Flex flexDir={{ base: 'column', lg: 'row' }} columnGap={ 6 } mt={ 8 } rowGap={ 3 }>