public tag: review fixes

icons/minus.svg

-<svg width="16" height="2" viewBox="0 0 16 2" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M.5 1a.937.937 0 0 1 .938-.938h13.124a.938.938 0 0 1 0 1.875H1.438A.937.937 0 0 1 .5 1Z" fill="#2B6CB0"/></svg>
+<svg width="16" height="16" viewBox="0 0 16 2" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M.5 1a.937.937 0 0 1 .938-.938h13.124a.938.938 0 0 1 0 1.875H1.438A.937.937 0 0 1 .5 1Z" fill="currentColor"/></svg>
\ No newline at end of file

icons/plus.svg

-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 .5a.937.937 0 0 1 .938.938v5.625h5.624a.937.937 0 0 1 0 1.875H8.939v5.624a.937.937 0 0 1-1.876 0V8.939H1.438a.937.937 0 1 1 0-1.876h5.625V1.438A.937.937 0 0 1 8 .5Z" fill="#2B6CB0"/></svg>
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 .5a.937.937 0 0 1 .938.938v5.625h5.624a.937.937 0 0 1 0 1.875H8.939v5.624a.937.937 0 0 1-1.876 0V8.939H1.438a.937.937 0 1 1 0-1.876h5.625V1.438A.937.937 0 0 1 8 .5Z" fill="currentColor"/></svg>
\ No newline at end of file

theme/components/Button.ts

@@ -18,7 +18,6 @@ const variantPrimary = {
 }
 
 const variantSecondary = {
-  bg: 'white',
   color: 'blue.600',
   fontWeight: 600,
   borderColor: 'blue.600',
@@ -32,7 +31,7 @@ const variantSecondary = {
   },
 }
 
-const variantIconBlue: SystemStyleFunction = (props) => {
+const variantIcon: SystemStyleFunction = (props) => {
   return {
     color: mode('blue.600', 'blue.300')(props),
     _hover: {
@@ -41,26 +40,24 @@ const variantIconBlue: SystemStyleFunction = (props) => {
   }
 }
 
-const variantIconBorderBlue: SystemStyleFunction = (props) => {
-  return {
-    color: mode('blue.600', 'blue.300')(props),
-    borderColor: mode('blue.600', 'blue.300')(props),
+const variantIconBorder = {
+  color: 'blue.600',
+  borderColor: 'blue.600',
   border: '2px solid',
   _hover: {
-      color: mode('blue.400', 'blue.200')(props),
-      borderColor: mode('blue.400', 'blue.200')(props),
+    color: 'blue.400',
+    borderColor: 'blue.400',
   },
   _disabled: {
     opacity: 0.2,
   },
-  }
 }
 
 const variants = {
   primary: variantPrimary,
   secondary: variantSecondary,
-  iconBlue: variantIconBlue,
-  iconBorderBlue: variantIconBorderBlue,
+  icon: variantIcon,
+  iconBorder: variantIconBorder,
 }
 
 const Button: ComponentStyleConfig = {

theme/components/Checkbox.ts

+import type { ComponentStyleConfig } from '@chakra-ui/theme';
+import type { SystemStyleObject } from '@chakra-ui/theme-tools';
+
+const baseStyleLabel: SystemStyleObject = {
+  _disabled: { opacity: 0.2 },
+}
+
+const Checkbox: ComponentStyleConfig = {
+  baseStyle: {
+    label: baseStyleLabel,
+  },
+}
+
+export default Checkbox;

theme/components/Form.ts

@@ -5,23 +5,21 @@ import type { StyleFunctionProps, PartsStyleFunction } from '@chakra-ui/theme-to
 import type { Dict } from '@chakra-ui/utils';
 import getDefaultFormColors from '../utils/getDefaultFormColors';
 
+const activeInputStyles = {
+  paddingTop: '30px',
+  paddingBottom: '10px',
+}
+
 const getActiveLabelStyles = (theme: Dict, fc: string) => ({
   color: getColor(theme, fc),
   transform: 'scale(0.75) translateY(-10px)',
-})
-
-const getActiveInputStyles = (theme: Dict, fc: string) => ({
-  paddingTop: '30px',
-  paddingBottom: '10px',
-  borderColor: getColor(theme, fc),
-})
+});
 
 const variantFloating: PartsStyleFunction<typeof parts> = (props: StyleFunctionProps) => {
   const { theme } = props;
   const { focusColor: fc, errorColor: ec } = getDefaultFormColors(props);
 
   const activeLabelStyles = getActiveLabelStyles(theme, fc);
-  const activeInputStyles = getActiveInputStyles(theme, fc);
 
   return {
     container: {
@@ -29,10 +27,7 @@ const variantFloating: PartsStyleFunction<typeof parts> = (props: StyleFunctionP
         label: {
           ...activeLabelStyles,
         },
-        input: {
-          ...activeInputStyles,
-        },
-        textarea: {
+        'input, textarea': {
           ...activeInputStyles,
         },
         'label .chakra-form__required-indicator': {
@@ -41,7 +36,6 @@ const variantFloating: PartsStyleFunction<typeof parts> = (props: StyleFunctionP
       },
       // label's styles
       label: {
-        top: '20px',
         left: '22px',
         zIndex: 2,
         position: 'absolute',
@@ -53,48 +47,30 @@ const variantFloating: PartsStyleFunction<typeof parts> = (props: StyleFunctionP
         fontSize: 'md',
         lineHeight: '20px',
       },
-      'input:not(:placeholder-shown) + label': {
-        ...activeLabelStyles,
+      'input + label': {
+        top: 'calc(50% - 10px);',
       },
-      'textarea:not(:placeholder-shown) + label': {
-        ...activeLabelStyles,
+      'textarea + label': {
+        top: '20px',
       },
-      'input[aria-invalid=true] + label': {
-        color: getColor(theme, ec),
+      'input:not(:placeholder-shown) + label, textarea:not(:placeholder-shown) + label': {
+        ...activeLabelStyles,
       },
-      'textarea[aria-invalid=true] + label': {
+      'input[aria-invalid=true] + label, textarea[aria-invalid=true] + label': {
         color: getColor(theme, ec),
       },
       // input's styles
-      input: {
-        padding: '20px',
-      },
-      textarea: {
+      'input, textarea': {
         padding: '20px',
       },
-      'input:not(:placeholder-shown)': {
-        ...activeInputStyles,
-      },
-      'textarea:not(:placeholder-shown)': {
+      'input:not(:placeholder-shown), textarea:not(:placeholder-shown)': {
         ...activeInputStyles,
       },
-      'input[aria-invalid=true]': {
-        borderColor: getColor(theme, ec),
-      },
-      'textarea[aria-invalid=true]': {
-        borderColor: getColor(theme, ec),
-      },
       // indicator's styles
-      'input:not(:placeholder-shown) + label .chakra-form__required-indicator': {
-        color: getColor(theme, fc),
-      },
-      'textarea:not(:placeholder-shown) + label .chakra-form__required-indicator': {
+      'input:not(:placeholder-shown) + label .chakra-form__required-indicator, textarea:not(:placeholder-shown) + label .chakra-form__required-indicator': {
         color: getColor(theme, fc),
       },
-      'input[aria-invalid=true] + label .chakra-form__required-indicator': {
-        color: getColor(theme, ec),
-      },
-      'textarea[aria-invalid=true] + label .chakra-form__required-indicator': {
+      'input[aria-invalid=true] + label .chakra-form__required-indicator, textarea[aria-invalid=true] + label .chakra-form__required-indicator': {
         color: getColor(theme, ec),
       },
     },

theme/components/Input.ts

@@ -5,6 +5,8 @@ import { mode } from '@chakra-ui/theme-tools';
 import getDefaultTransitionProps from '../utils/getDefaultTransitionProps';
 import getOutlinedFieldStyles from '../utils/getOutlinedFieldStyles';
 
+import { Input as InputComponent } from '@chakra-ui/react';
+
 const sizes: Record<string, SystemStyleObject> = {
   md: {
     fontSize: 'md',
@@ -57,4 +59,9 @@ const Input: ComponentStyleConfig = {
   },
 }
 
+InputComponent.defaultProps = {
+  ...InputComponent.defaultProps,
+  placeholder: ' ',
+}
+
 export default Input;

theme/components/Radio.ts

+import type { ComponentStyleConfig } from '@chakra-ui/theme';
+import type { SystemStyleObject } from '@chakra-ui/theme-tools';
+
+const baseStyleLabel: SystemStyleObject = {
+  _disabled: { opacity: 0.2 },
+}
+
+const Radio: ComponentStyleConfig = {
+  baseStyle: {
+    label: baseStyleLabel,
+  },
+}
+
+export default Radio;

theme/components/Table.ts

@@ -33,7 +33,7 @@ const Table: ComponentMultiStyleConfig = {
     th: {
       textTransform: 'none',
       fontFamily: 'body',
-      fontWeight: 'normal',
+      fontWeight: '500',
       overflow: 'hidden',
       color: 'gray.500',
       letterSpacing: 'none',

theme/components/Text.ts

+import type { SystemStyleFunction } from '@chakra-ui/theme-tools';
+import type { ComponentStyleConfig } from '@chakra-ui/theme';
+import { mode } from '@chakra-ui/theme-tools';
+
+const variantSecondary: SystemStyleFunction = (props) => ({
+  color: mode('gray.500', 'gray.400')(props),
+});
+
+const Text: ComponentStyleConfig = {
+  variants: {
+    secondary: variantSecondary,
+  },
+}
+
+export default Text;

theme/components/Textarea.ts

@@ -5,6 +5,8 @@ import type {
 import type { ComponentStyleConfig } from '@chakra-ui/theme';
 import getOutlinedFieldStyles from '../utils/getOutlinedFieldStyles';
 
+import { Textarea as TextareaComponent } from '@chakra-ui/react';
+
 const sizes: Record<string, SystemStyleObject> = {
   lg: {
     fontSize: 'md',
@@ -27,4 +29,9 @@ const Textarea: ComponentStyleConfig = {
   },
 }
 
+TextareaComponent.defaultProps = {
+  ...TextareaComponent.defaultProps,
+  placeholder: ' ',
+}
+
 export default Textarea;

theme/components/index.ts

 import Button from './Button';
+import Checkbox from './Checkbox';
 import Form from './Form';
 import Heading from './Heading';
 import Input from './Input';
 import Link from './Link';
 import Modal from './Modal';
+import Radio from './Radio';
 import Table from './Table';
 import Tabs from './Tabs';
 import Tag from './Tag';
+import Text from './Text';
 import Textarea from './Textarea';
 import Tooltip from './Tooltip';
 
 const components = {
   Button,
+  Checkbox,
   Heading,
   Input,
   Form,
   Link,
   Modal,
+  Radio,
   Tabs,
   Table,
   Tag,
+  Text,
   Textarea,
   Tooltip,
 }

theme/utils/getDefaultFormColors.ts

@@ -2,9 +2,10 @@ import type { StyleFunctionProps } from '@chakra-ui/theme-tools';
 import { mode } from '@chakra-ui/theme-tools';
 
 export default function getDefaultFormColors(props: StyleFunctionProps) {
-  const { focusBorderColor: fc, errorBorderColor: ec } = props
+  const { focusBorderColor: fc, errorBorderColor: ec, filledBorderColor: flc } = props
   return {
     focusColor: fc || mode('brand.700', 'brand.300')(props),
     errorColor: ec || mode('red.400', 'red.300')(props),
+    filledColor: flc || mode('gray.300', 'gray.600')(props),
   }
 }

theme/utils/getOutlinedFieldStyles.ts

@@ -5,16 +5,16 @@ import getDefaultTransitionProps from './getDefaultTransitionProps';
 
 export default function getOutlinedFieldStyles(props: StyleFunctionProps) {
   const { theme } = props
-  const { focusColor: fc, errorColor: ec } = getDefaultFormColors(props);
+  const { focusColor: fc, errorColor: ec, filledColor: flc } = getDefaultFormColors(props);
   const transitionProps = getDefaultTransitionProps();
 
   return {
     border: '2px solid',
     bg: 'inherit',
-    borderColor: mode('gray.100', 'whiteAlpha.200')(props),
+    borderColor: getColor(theme, flc),
     ...transitionProps,
     _hover: {
-      borderColor: mode('gray.300', 'whiteAlpha.400')(props),
+      borderColor: mode('gray.200', 'whiteAlpha.400')(props),
     },
     _readOnly: {
       boxShadow: 'none !important',
@@ -35,6 +35,7 @@ export default function getOutlinedFieldStyles(props: StyleFunctionProps) {
       borderColor: getColor(theme, fc),
       boxShadow: '0px 4px 6px -1px rgba(0, 0, 0, 0.1), 0px 2px 4px -1px rgba(0, 0, 0, 0.06)',
     },
+    ':placeholder-shown:not(:focus-visible):not(:hover)': { borderColor: mode('gray.100', 'whiteAlpha.200')(props) },
     ':-webkit-autofill': { transition: 'background-color 5000s ease-in-out 0s' },
     ':-webkit-autofill:hover': { transition: 'background-color 5000s ease-in-out 0s' },
     ':-webkit-autofill:focus': { transition: 'background-color 5000s ease-in-out 0s' },

ui/apiKey/ApiKeyModal/ApiKeyForm.tsx

@@ -40,7 +40,6 @@ const ApiKeyForm: React.FC<Props> = ({ data }) => {
       <FormControl variant="floating" id="address" isRequired>
         <Input
           { ...field }
-          placeholder=" "
           disabled={ true }
         />
         <FormLabel>Auto-generated API key token</FormLabel>
@@ -53,7 +52,6 @@ const ApiKeyForm: React.FC<Props> = ({ data }) => {
       <FormControl variant="floating" id="name" isRequired>
         <Input
           { ...field }
-          placeholder=" "
           isInvalid={ Boolean(errors.name) }
           maxLength={ NAME_MAX_LENGTH }
         />

ui/apiKey/ApiKeyTable/ApiKeyTableItem.tsx

@@ -5,7 +5,6 @@ import {
   Td,
   HStack,
   Text,
-  useColorModeValue,
 } from '@chakra-ui/react'
 
 import EditButton from 'ui/shared/EditButton';
@@ -30,7 +29,6 @@ const WatchlistTableItem = ({ item, onEditClick, onDeleteClick }: Props) => {
     return onDeleteClick(item);
   }, [ item, onDeleteClick ]);
 
-  const secondaryColor = useColorModeValue('gray.500', 'gray.400');
   return (
     <Tr alignItems="top" key={ item.token }>
       <Td>
@@ -38,7 +36,7 @@ const WatchlistTableItem = ({ item, onEditClick, onDeleteClick }: Props) => {
           <Text fontSize="md" fontWeight={ 600 }>{ item.token }</Text>
           <CopyToClipboard text={ item.token }/>
         </HStack>
-        <Text fontSize="sm" marginTop={ 0.5 } color={ secondaryColor }>{ item.name }</Text>
+        <Text fontSize="sm" marginTop={ 0.5 } variant="secondary">{ item.name }</Text>
       </Td>
       <Td>
         <HStack spacing={ 6 }>

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, HStack, Link, Text, useDisclosure } from '@chakra-ui/react';
 
 import Page from 'ui/shared/Page/Page';
 import AccountPageHeader from 'ui/shared/AccountPageHeader';
@@ -42,14 +42,12 @@ const ApiKeys: React.FC = () => {
     deleteModalProps.onClose();
   }, [ deleteModalProps ]);
 
-  const captionColor = useColorModeValue('gray.500', 'gray.400');
-
   const canAdd = apiKey.length < DATA_LIMIT
 
   return (
     <Page>
       <Box h="100%">
-        <AccountPageHeader header="API keys"/>
+        <AccountPageHeader text="API keys"/>
         <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>.
@@ -72,7 +70,7 @@ const ApiKeys: React.FC = () => {
             Add API key
           </Button>
           { !canAdd && (
-            <Text fontSize="sm" color={ captionColor }>
+            <Text fontSize="sm" variant="secondary">
               { `You have added the maximum number of API keys (${ DATA_LIMIT }). Contact us to request additional keys.` }
             </Text>
           ) }

ui/pages/PrivateTags.tsx

@@ -22,7 +22,7 @@ const PrivateTags: React.FC = () => {
   return (
     <Page>
       <Box h="100%">
-        <AccountPageHeader header="Private tags"/>
+        <AccountPageHeader text="Private tags"/>
         <Tabs variant="soft-rounded" colorScheme="blue" isLazy>
           <TabList marginBottom={ 8 }>
             <Tab>Address</Tab>

ui/pages/PublicTags.tsx

@@ -75,7 +75,7 @@ const PublicTags: React.FC = () => {
   return (
     <Page>
       <Box h="100%">
-        <AccountPageHeader header={ header }/>
+        <AccountPageHeader text={ header }/>
         { content }
       </Box>
     </Page>

ui/pages/Watchlist.tsx

@@ -41,7 +41,7 @@ const WatchList: React.FC = () => {
   return (
     <Page>
       <Box h="100%">
-        <AccountPageHeader header="Watch list"/>
+        <AccountPageHeader text="Watch list"/>
         <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

ui/publicTags/DeletePublicTagModal.tsx

@@ -65,7 +65,6 @@ const DeletePublicTagModal: React.FC<Props> = ({ isOpen, onClose, tags = [], onD
         </Flex>
         <FormControl variant="floating" id="tag-delete">
           <Textarea
-            placeholder=" "
             size="lg"
             value={ reason }
             onChange={ onFieldChange }

ui/publicTags/PublicTagsForm/PublicTagFormAction.tsx

@@ -5,7 +5,7 @@ import { Controller } from 'react-hook-form';
 import type { Inputs } from './PublicTagsForm';
 
 interface Props {
-  control: Control<Inputs, object>;
+  control: Control<Inputs>;
   canReport: boolean;
 }
 

ui/publicTags/PublicTagsForm/PublicTagFormAddressInput.tsx

@@ -9,7 +9,7 @@ import PlusIcon from 'icons/plus.svg';
 import MinusIcon from 'icons/minus.svg';
 
 interface Props {
-  control: Control<Inputs, object>;
+  control: Control<Inputs>;
   index: number;
   fieldsLength: number;
   hasError: boolean;
@@ -41,7 +41,7 @@ export default function PublicTagFormAction({ control, index, fieldsLength, hasE
       { index === fieldsLength - 1 && fieldsLength < MAX_INPUTS_NUM && (
         <IconButton
           aria-label="add"
-          variant="iconBorderBlue"
+          variant="iconBorder"
           w="30px"
           h="30px"
           onClick={ onAddFieldClick }
@@ -54,7 +54,7 @@ export default function PublicTagFormAction({ control, index, fieldsLength, hasE
       { fieldsLength > 1 && (
         <IconButton
           aria-label="delete"
-          variant="iconBorderBlue"
+          variant="iconBorder"
           w="30px"
           h="30px"
           onClick={ onRemoveFieldClick(index) }

ui/publicTags/PublicTagsForm/PublicTagFormComment.tsx

@@ -5,7 +5,7 @@ import { Controller } from 'react-hook-form';
 import type { Inputs } from './PublicTagsForm';
 
 interface Props {
-  control: Control<Inputs, object>;
+  control: Control<Inputs>;
 }
 
 export default function PublicTagFormComment({ control }: Props) {
@@ -14,7 +14,6 @@ export default function PublicTagFormComment({ control }: Props) {
       <FormControl variant="floating" id={ field.name }>
         <Textarea
           { ...field }
-          placeholder=" "
           size="lg"
         />
         <FormLabel>Specify the reason for adding tags and color preference(s).</FormLabel>

ui/publicTags/PublicTagsForm/PublicTagsForm.tsx

@@ -76,7 +76,7 @@ const PublicTagsForm = ({ changeToDataScreen, data }: Props) => {
 
   return (
     <Box width={ `calc(100% - ${ ADDRESS_INPUT_BUTTONS_WIDTH }px)` } maxWidth="844px">
-      <Text size="sm" color="gray.500" paddingBottom={ 5 }>Company info</Text>
+      <Text size="sm" variant="secondary" paddingBottom={ 5 }>Company info</Text>
       <Grid templateColumns="1fr 1fr" rowGap={ 4 } columnGap={ 5 }>
         <GridItem>
           <PublicTagsFormInput<Inputs> fieldName="userName" control={ control } label={ placeholders.userName } required/>
@@ -94,7 +94,7 @@ const PublicTagsForm = ({ changeToDataScreen, data }: Props) => {
       <Box marginTop={ 4 } marginBottom={ 8 }>
         <PublicTagFormAction canReport={ Boolean(data) } control={ control }/>
       </Box>
-      <Text size="sm" color="gray.500" marginBottom={ 5 }>Public tags (2 tags maximum, please use &quot;;&quot; as a divider)</Text>
+      <Text size="sm" variant="secondary" marginBottom={ 5 }>Public tags (2 tags maximum, please use &quot;;&quot; as a divider)</Text>
       <Box marginBottom={ 4 }>
         <PublicTagsFormInput<Inputs> fieldName="tag" control={ control } label={ placeholders.tag } required/>
       </Box>

ui/publicTags/PublicTagsForm/PublicTagsFormInput.tsx

@@ -10,13 +10,12 @@ interface Props<TInputs extends FieldValues> {
   control: Control<TInputs, object>;
 }
 
-export default function PublicTagsFormInput<I extends FieldValues>({ label, control, required, fieldName }: Props<I>) {
-  const renderInput = useCallback(({ field }: {field: ControllerRenderProps<I, typeof fieldName>}) => {
+export default function PublicTagsFormInput<Inputs extends FieldValues>({ label, control, required, fieldName }: Props<Inputs>) {
+  const renderInput = useCallback(({ field }: {field: ControllerRenderProps<Inputs, typeof fieldName>}) => {
     return (
       <FormControl variant="floating" id={ field.name } isRequired={ required }>
         <Input
           { ...field }
-          placeholder=" "
           size="lg"
           required={ required }
         />

ui/shared/AccountPageHeader.tsx

@@ -2,9 +2,9 @@ import React from 'react';
 
 import { Heading } from '@chakra-ui/react';
 
-const PageHeader = ({ header }: {header: string}) => {
+const PageHeader = ({ text }: {text: string}) => {
   return (
-    <Heading as="h1" size="lg" marginBottom={ 8 }>{ header }</Heading>
+    <Heading as="h1" size="lg" marginBottom={ 8 }>{ text }</Heading>
   )
 }
 

ui/shared/AddressInput.tsx

@@ -16,18 +16,17 @@ type Props<TInputs extends FieldValues, TInputName extends Path<TInputs>> = {
   placeholder?: string;
 }
 
-export default function AddressInput<I extends FieldValues, N extends Path<I>>(
+export default function AddressInput<Inputs extends FieldValues, Name extends Path<Inputs>>(
   {
     field,
     isInvalid,
     size,
     placeholder = 'Address (0x...)',
-  }: Props<I, N>) {
+  }: Props<Inputs, Name>) {
   return (
     <FormControl variant="floating" id="address" isRequired>
       <Input
         { ...field }
-        placeholder=" "
         isInvalid={ isInvalid }
         maxLength={ ADDRESS_LENGTH }
         size={ size }

ui/shared/CopyToClipboard.tsx

@@ -22,7 +22,7 @@ const CopyToClipboard = ({ text }: {text: string}) => {
         icon={ <CopyIcon/> }
         w="20px"
         h="20px"
-        variant="iconBlue"
+        variant="icon"
         onClick={ onCopy }
       />
     </Tooltip>

ui/shared/DeleteButton.tsx

@@ -14,7 +14,7 @@ const DeleteButton = ({ onClick }: Props) => {
     <Tooltip label="Delete">
       <IconButton
         aria-label="delete"
-        variant="iconBlue"
+        variant="icon"
         w="30px"
         h="30px"
         onClick={ onClick }

ui/shared/EditButton.tsx

@@ -14,7 +14,7 @@ const EditButton = ({ onClick }: Props) => {
     <Tooltip label="Edit">
       <IconButton
         aria-label="edit"
-        variant="iconBlue"
+        variant="icon"
         w="30px"
         h="30px"
         onClick={ onClick }

ui/shared/TagInput.tsx

@@ -20,7 +20,6 @@ const TagInput: React.FC<Props> = ({ field, isInvalid }) => {
     <FormControl variant="floating" id="tag" isRequired>
       <Input
         { ...field }
-        placeholder=" "
         isInvalid={ isInvalid }
         maxLength={ TAG_MAX_LENGTH }
       />

ui/shared/TransactionInput.tsx

@@ -19,7 +19,6 @@ const AddressInput: React.FC<Props> = ({ field, isInvalid }) => {
     <FormControl variant="floating" id="transaction" isRequired>
       <Input
         { ...field }
-        placeholder=" "
         isInvalid={ isInvalid }
         maxLength={ HASH_LENGTH }
       />

ui/watchlist/AddressModal/AddressForm.tsx

@@ -85,7 +85,7 @@ const AddressForm: React.FC<Props> = ({ data }) => {
           render={ renderTagInput }
         />
       </Box>
-      <Text color="gray.500" fontSize="sm" marginBottom={ 5 }>
+      <Text variant="secondary" fontSize="sm" marginBottom={ 5 }>
         Please select what types of notifications you will receive
       </Text>
       <Box marginBottom={ 8 }>
@@ -102,7 +102,7 @@ const AddressForm: React.FC<Props> = ({ data }) => {
           }) }
         </Grid>
       </Box>
-      <Text color="gray.500" fontSize="sm" marginBottom={ 5 }>Notification methods</Text>
+      <Text variant="secondary" fontSize="sm" marginBottom={ 5 }>Notification methods</Text>
       <Controller
         name="notification"
         control={ control }

ui/watchlist/WatchlistTable/WatchListAddressItem.tsx

@@ -11,7 +11,6 @@ import WalletIcon from 'icons/wallet.svg';
 
 const WatchListAddressItem = ({ item }: {item: TWatchlistItem}) => {
   const mainTextColor = useColorModeValue('gray.700', 'gray.50');
-  const secondaryTextColor = useColorModeValue('gray.500', 'gray.400');
 
   return (
     <HStack spacing={ 3 } align="top">
@@ -22,14 +21,14 @@ const WatchListAddressItem = ({ item }: {item: TWatchlistItem}) => {
           <HStack spacing={ 0 } fontSize="sm" h={ 6 }>
             <Image src="./xdai.png" alt="chain-logo" marginRight="10px" w="16px" h="16px"/>
             <Text color={ mainTextColor }>{ `xDAI balance:${ nbsp }` + item.tokenBalance }</Text>
-            <Text color={ secondaryTextColor }>{ `${ nbsp }($${ item.tokenBalanceUSD } USD)` }</Text>
+            <Text variant="secondary">{ `${ nbsp }($${ item.tokenBalanceUSD } USD)` }</Text>
           </HStack>
         ) }
         { item.tokensAmount && (
           <HStack spacing={ 0 } fontSize="sm" h={ 6 }>
             <Icon as={ TokensIcon } marginRight="10px" w="17px" h="16px"/>
             <Text color={ mainTextColor }>{ `Tokens:${ nbsp }` + item.tokensAmount }</Text>
-            <Text color={ secondaryTextColor }>{ `${ nbsp }($${ item.tokensUSD } USD)` }</Text>
+            <Text variant="secondary">{ `${ nbsp }($${ item.tokensUSD } USD)` }</Text>
           </HStack>
         ) }
         { item.totalUSD && (