redesign fixes

package.json

@@ -11,7 +11,7 @@
   },
   "dependencies": {
     "@chakra-ui/icons": "^2.0.2",
-    "@chakra-ui/react": "^2.1.2",
+    "@chakra-ui/react": "^2.2.1",
     "@chakra-ui/theme-tools": "^2.0.2",
     "@emotion/react": "^11",
     "@emotion/styled": "^11",

theme/components/Form.ts

@@ -40,7 +40,7 @@ const variantFloating: PartsStyleFunction<typeof parts> = (props: StyleFunctionP
       // label's styles
       label: {
         top: '20px',
-        left: '20px',
+        left: '22px',
         zIndex: 2,
         position: 'absolute',
         color: mode('gray.500', 'whiteAlpha.400')(props),

theme/components/Table.ts

@@ -21,6 +21,7 @@ const Table: ComponentMultiStyleConfig = {
       borderTopLeftRadius: 'md',
       borderTopRightRadius: 'md',
       overflow: 'hidden',
+      fontVariant: 'normal',
     },
   },
   sizes: {

ui/WatchlistTable/WatchListAddressItem.tsx

 import React from 'react';
 import Jazzicon, { jsNumberForAddress } from 'react-jazzicon';
 
-import { Box, Link, HStack, VStack, Image, Text, Icon } from '@chakra-ui/react';
+import { Box, Link, HStack, VStack, Image, Text, Icon, Tooltip } from '@chakra-ui/react';
 
 import CopyToClipboard from '../CopyToClipboard/CopyToClipboard';
 import type { TWatchlistItem } from '../../data/watchlist';
@@ -11,22 +11,22 @@ import WalletIcon from '../../icons/wallet.svg';
 
 const WatchListAddressItem = ({ item }: {item: TWatchlistItem}) => {
 
-  const image = <Jazzicon diameter={ 50 } seed={ jsNumberForAddress(item.address) }/>
+  const image = <Jazzicon diameter={ 24 } seed={ jsNumberForAddress(item.address) }/>
   return (
     <HStack spacing={ 3 } align="top">
-      <Box width="50px">{ image }</Box>
+      <Box width="24px">{ image }</Box>
       <VStack spacing={ 2 } align="stretch" overflow="hidden">
         <HStack spacing={ 2 } alignContent="center">
           <Link
             href="#"
             color="blue.500"
-            title={ item.address }
             overflow="hidden"
-            textOverflow="ellipsis"
             fontWeight={ 600 }
             lineHeight="24px"
           >
+            <Tooltip hasArrow label={ item.address }>
               { item.address }
+            </Tooltip>
           </Link>
           <CopyToClipboard text={ item.address }/>
         </HStack>

ui/WatchlistTable/WatchListTableItem.tsx

@@ -7,6 +7,7 @@ import {
   Switch,
   Icon,
   HStack,
+  Tooltip,
 } from '@chakra-ui/react'
 
 import EditIcon from '../../icons/edit.svg';
@@ -35,9 +36,11 @@ const WatchlistTableItem = ({ item, onEditClick, onDeleteClick }: Props) => {
     <Tr alignItems="top" key={ item.address }>
       <Td><WatchListAddressItem item={ item }/></Td>
       <Td>
-        <Tag variant="gray" lineHeight="24px" title={ item.tag }>
+        <Tooltip hasArrow label={ item.tag }>
+          <Tag variant="gray" lineHeight="24px">
             { item.tag }
           </Tag>
+        </Tooltip>
       </Td>
       <Td><Switch colorScheme="blue" size="md" isChecked={ item.notification }/></Td>
       <Td>

ui/WatchlistTable/WatchlistTable.tsx

@@ -27,7 +27,7 @@ const WatchlistTable = ({ data, onDeleteClick, onEditClick }: Props) => {
           <Tr>
             <Th width="70%">Address</Th>
             <Th width="30%">Private tag</Th>
-            <Th width="108px">Notification</Th>
+            <Th width="160px">Email notification</Th>
             <Th width="108px"></Th>
           </Tr>
         </Thead>

ui/navigation/AccountNavLink.tsx

@@ -19,8 +19,8 @@ const AccountNavLink = ({ text, pathname, icon }: Props) => {
         as="li"
         listStyleType="none"
         w="220px"
-        px={ 5 }
-        py={ 4 }
+        px={ 4 }
+        py={ 2.5 }
         color={ isActive ? 'blue.600' : 'gray.600' }
         bgColor={ isActive ? 'blue.50' : 'transparent' }
         _hover={{ color: 'blue.600' }}

ui/navigation/AccountNavigation.tsx

@@ -18,7 +18,7 @@ const navItems = [
 const AccountNavigation = () => {
   return (
     <Box as="nav">
-      <VStack as="ul" spacing="3">
+      <VStack as="ul" spacing="2">
         { navItems.map((item) => <AccountNavLink key={ item.text } { ...item }/>) }
       </VStack>
     </Box>

ui/navigation/MainNavLink.tsx

@@ -20,8 +20,8 @@ const MainNavLink = ({ text, pathname, icon }: Props) => {
         as="li"
         listStyleType="none"
         w="220px"
-        px={ 5 }
-        py={ 4 }
+        px={ 4 }
+        py={ 2.5 }
         color={ isActive ? 'blue.600' : 'gray.600' }
         bgColor={ isActive ? 'blue.50' : 'transparent' }
         borderRadius="base"

ui/navigation/MainNavigation.tsx

@@ -18,7 +18,7 @@ const navItems = [
 const MainNavigation = () => {
   return (
     <Box as="nav">
-      <VStack as="ul" spacing="3">
+      <VStack as="ul" spacing="2">
         { navItems.map((item) => <MainNavLink key={ item.text } { ...item }/>) }
       </VStack>
     </Box>