Merge pull request #48 from blockscout/heading-theming

heading theming

theme/components/Heading.ts

+import type { ComponentStyleConfig } from '@chakra-ui/theme';
+
+const baseStyle = {
+  fontWeight: '500',
+  letterSpacing: '-0.5px',
+}
+
+// WIP
+// designer promised to sync theme and page mock-ups
+// so that's not the final point yet
+const sizes = {
+  lg: {
+    fontSize: '32px',
+    lineHeight: '40px',
+  },
+}
+
+const Heading: ComponentStyleConfig = {
+  sizes,
+  baseStyle,
+}
+
+export default Heading;

theme/components/index.ts

 import Button from './Button';
 import Form from './Form';
+import Heading from './Heading';
 import Input from './Input';
 import Link from './Link';
 import Modal from './Modal';
@@ -10,6 +11,7 @@ import Tooltip from './Tooltip';
 
 const components = {
   Button,
+  Heading,
   Input,
   Form,
   Link,

ui/pages/ApiKeys.tsx

 import React, { useCallback, useState } from 'react';
 
-import { Box, Button, HStack, Link, Text, useColorModeValue, useDisclosure } from '@chakra-ui/react';
+import { Box, Button, Heading, HStack, Link, Text, useColorModeValue, useDisclosure } from '@chakra-ui/react';
 
 import Page from '../Page/Page';
 
@@ -49,7 +49,7 @@ const ApiKeys: React.FC = () => {
   return (
     <Page>
       <Box h="100%">
-        <Box as="h1" textStyle="h2" marginBottom={ 8 }>API keys</Box>
+        <Heading as="h1" size="lg" marginBottom={ 8 }>API keys</Heading>
         <Text marginBottom={ 12 }>
           Create API keys to use for your RPC and EthRPC API requests. For more information, see { space }
           <Link href="#">“How to use a Blockscout API key”</Link>.

ui/pages/PrivateTags.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 
 import {
   Box,
+  Heading,
   Tab,
   Tabs,
   TabList,
@@ -17,7 +18,7 @@ const PrivateTags: React.FC = () => {
   return (
     <Page>
       <Box h="100%">
-        <Box as="h1" textStyle="h2" marginBottom={ 8 }>Private tags</Box>
+        <Heading as="h1" size="lg" marginBottom={ 8 }>Private tags</Heading>
         <Tabs variant="soft-rounded" colorScheme="blue">
           <TabList marginBottom={ 8 }>
             <Tab>Address</Tab>

ui/pages/Watchlist.tsx

 import React, { useCallback, useState } from 'react';
 
-import { Box, Button, Text, useDisclosure } from '@chakra-ui/react';
+import { Box, Button, Text, useDisclosure, Heading } from '@chakra-ui/react';
 
 import Page from '../Page/Page';
 
@@ -41,7 +41,7 @@ const WatchList: React.FC = () => {
   return (
     <Page>
       <Box h="100%">
-        <Box as="h1" textStyle="h2" marginBottom={ 8 }>Watch list</Box>
+        <Heading as="h1" size="lg" marginBottom={ 8 }>Watch list</Heading>
         <Text marginBottom={ 12 }>An email notification can be sent to you when an address on your watch list sends or receives any transactions.</Text>
         { Boolean(watchlist.length) && (
           <WatchlistTable