fixes

theme/components/Modal.ts

@@ -39,6 +39,9 @@ const baseStyleCloseButton: SystemStyleFunction = (props) => {
     _active: { bg: 'none' },
   }
 }
+const baseStyleOverlay = {
+  bg: 'blackAlpha.800',
+}
 
 const baseStyle: PartsStyleFunction<typeof parts> = (props) => ({
   dialog: baseStyleDialog(props),
@@ -46,6 +49,7 @@ const baseStyle: PartsStyleFunction<typeof parts> = (props) => ({
   body: baseStyleBody,
   footer: baseStyleFooter,
   closeButton: baseStyleCloseButton(props),
+  overlay: baseStyleOverlay,
 })
 
 const sizes = {
@@ -62,4 +66,6 @@ const Modal: ComponentMultiStyleConfig = {
   baseStyle,
 }
 
+Modal.defaultProps = { isCentered: true };
+
 export default Modal;

theme/components/Table.ts

@@ -30,6 +30,7 @@ const Table: ComponentMultiStyleConfig = {
       fontWeight: 'normal',
       overflow: 'hidden',
       color: 'gray.500',
+      letterSpacing: 'none',
     },
     td: {
       fontSize: 'md',

ui/apiKey/ApiKeyTable/ApiKeyTableItem.tsx

@@ -42,7 +42,6 @@ const WatchlistTableItem = ({ item, onEditClick, onDeleteClick }: Props) => {
       </Td>
       <Td>
         <HStack spacing={ 6 }>
-          icons
           <EditButton onClick={ onItemEditClick }/>
           <DeleteButton onClick={ onItemDeleteClick }/>
         </HStack>

ui/apiKey/DeleteApiKeyModal.tsx

 import React, { useCallback } from 'react';
-
+import { Text } from '@chakra-ui/react';
 import DeleteModal from '../shared/DeleteModal'
 
 type Props = {
@@ -13,13 +13,19 @@ const DeleteAddressModal: React.FC<Props> = ({ isOpen, onClose, name }) => {
     // eslint-disable-next-line no-console
     console.log('delete', name);
   }, [ name ]);
+
+  const renderText = useCallback(() => {
+    return (
+      <Text display="flex">API key for<Text fontWeight="600" whiteSpace="pre">{ ` "${ name || 'name' }" ` }</Text>will be deleted</Text>
+    )
+  }, [ name ]);
   return (
     <DeleteModal
       isOpen={ isOpen }
       onClose={ onClose }
       onDelete={ onDelete }
       title="Remove API key"
-      text={ `API key for  "${ name || 'name' }" will be deleted` }
+      renderText={ renderText }
     />
   )
 }

ui/header/Header.module.css

 .identicon {
-    max-width: 40px;
-    max-height: 40px;
+    max-width: 48px;
+    max-height: 48px;
 }
\ No newline at end of file

ui/header/Header.tsx

@@ -23,12 +23,12 @@ const Header = () => {
         <InputLeftElement w={ 6 } ml="132px" mr={ 2.5 }>
           <SearchIcon w={ 5 } h={ 5 } color="gray.500"/>
         </InputLeftElement>
-        <Input paddingInlineStart="50px" placeholder="Search by addresses / transactions /block/ token ... "/>
+        <Input paddingInlineStart="50px" placeholder="Search by addresses / transactions / block / token... "/>
       </InputGroup>
       <Switch size="lg" onChange={ toggleColorMode }/>
       <Center minWidth="50px" width="50px" height="50px" bg={ useColorModeValue('blackAlpha.100', 'white') } borderRadius="50%" overflow="hidden">
-        { /* the displayed size is 40px, but we need to generate x2 for retina displays */ }
-        <Identicon className={ styles.identicon } string="randomness" size={ 80 }/>
+        { /* the displayed size is 48px, but we need to generate x2 for retina displays */ }
+        <Identicon className={ styles.identicon } string="randomness" size={ 96 }/>
       </Center>
     </HStack>
   )

ui/navigation/AccountNavLink.tsx

@@ -26,7 +26,7 @@ const AccountNavLink = ({ text, pathname, icon }: Props) => {
         py={ 2.5 }
         color={ isActive ? colors.text.active : colors.text.default }
         bgColor={ isActive ? colors.bg.active : colors.bg.default }
-        _hover={{ color: colors.text.hover }}
+        _hover={{ color: isActive ? colors.text.active : colors.text.hover }}
         borderRadius="base"
       >
         <HStack spacing={ 3 }>

ui/navigation/MainNavLink.tsx

@@ -27,7 +27,7 @@ const MainNavLink = ({ text, pathname, icon }: Props) => {
         py={ 2.5 }
         color={ isActive ? colors.text.active : colors.text.default }
         bgColor={ isActive ? colors.bg.active : colors.bg.default }
-        _hover={{ color: colors.text.hover }}
+        _hover={{ color: isActive ? colors.text.active : colors.text.hover }}
         borderRadius="base"
       >
         <HStack justifyContent="space-between">

ui/privateTags/DeletePrivateTagModal.tsx

 import React, { useCallback } from 'react';
-
+import { Text } from '@chakra-ui/react';
 import DeleteModal from '../shared/DeleteModal'
 
 type Props = {
@@ -13,13 +13,20 @@ const DeletePrivateTagModal: React.FC<Props> = ({ isOpen, onClose, tag }) => {
     // eslint-disable-next-line no-console
     console.log('delete', tag);
   }, [ tag ]);
+
+  const renderText = useCallback(() => {
+    return (
+      <Text display="flex">Tag<Text fontWeight="600" whiteSpace="pre">{ ` "${ tag || 'address' }" ` }</Text>will be deleted</Text>
+    )
+  }, [ tag ]);
+
   return (
     <DeleteModal
       isOpen={ isOpen }
       onClose={ onClose }
       onDelete={ onDelete }
       title="Removal of private tag"
-      text={ `Tag "${ tag || 'address' }" will be removed` }
+      renderText={ renderText }
     />
   )
 }

ui/shared/DeleteModal.tsx

@@ -16,10 +16,10 @@ type Props = {
   onClose: () => void;
   onDelete: () => void;
   title: string;
-  text: string;
+  renderText: () => JSX.Element;
 }
 
-const DeleteModal: React.FC<Props> = ({ isOpen, onClose, onDelete, title, text }) => {
+const DeleteModal: React.FC<Props> = ({ isOpen, onClose, onDelete, title, renderText }) => {
 
   const onDeleteClick = useCallback(() => {
     onDelete();
@@ -33,7 +33,7 @@ const DeleteModal: React.FC<Props> = ({ isOpen, onClose, onDelete, title, text }
         <ModalHeader fontWeight="500" textStyle="h3">{ title }</ModalHeader>
         <ModalCloseButton/>
         <ModalBody>
-          { text }
+          { renderText() }
         </ModalBody>
         <ModalFooter>
           <Button variant="primary" size="lg" onClick={ onDeleteClick }>

ui/watchlist/DeleteAddressModal.tsx

 import React, { useCallback } from 'react';
-
+import { Text } from '@chakra-ui/react';
 import DeleteModal from '../shared/DeleteModal'
 
 type Props = {
@@ -13,13 +13,20 @@ const DeleteAddressModal: React.FC<Props> = ({ isOpen, onClose, address }) => {
     // eslint-disable-next-line no-console
     console.log('delete', address);
   }, [ address ]);
+
+  const renderText = useCallback(() => {
+    return (
+      <Text display="flex">Address <Text fontWeight="600" whiteSpace="pre"> { address || 'address' } </Text>   will be deleted</Text>
+    )
+  }, [ address ]);
+
   return (
     <DeleteModal
       isOpen={ isOpen }
       onClose={ onClose }
       onDelete={ onDelete }
       title="Remove address from watch list"
-      text={ `Address ${ address || 'address' } will be deleted` }
+      renderText={ renderText }
     />
   )
 }