Merge pull request #30 from blockscout/redesign-fixes-2

redesign fixes 2

data/watchlist.ts

@@ -18,7 +18,7 @@ export const watchlist = [
     notification: false,
   },
   {
-    address: '0x8c461F78760988c4135e363a87dd736f8b671ff1',
+    address: '0x930F381E649c84579Ef58117E923714964C55D16',
     tokenBalance: 200.2,
     tokenBalanceUSD: 202.4,
     totalUSD: 3000.5,

theme/components/Button.ts

@@ -31,6 +31,38 @@ const Button: ComponentStyleConfig = {
         opacity: 0.2,
       },
     },
+    iconBlue: {
+      color: 'blue.600',
+      _hover: {
+        color: 'blue.400',
+      },
+    },
+  },
+  sizes: {
+    lg: {
+      h: 12,
+      minW: 'unset',
+      fontSize: 'lg',
+      px: 6,
+    },
+    md: {
+      h: 10,
+      minW: 'unset',
+      fontSize: 'md',
+      px: 4,
+    },
+    sm: {
+      h: 8,
+      minW: 'unset',
+      fontSize: 'sm',
+      px: 3,
+    },
+    xs: {
+      h: 6,
+      minW: 'unset',
+      fontSize: 'xs',
+      px: 2,
+    },
   },
 }
 

theme/components/Form.ts

@@ -14,7 +14,6 @@ const getActiveInputStyles = (theme: Dict, fc: string) => ({
   paddingTop: '30px',
   paddingBottom: '10px',
   borderColor: getColor(theme, fc),
-  boxShadow: 'none',
 })
 
 const variantFloating: PartsStyleFunction<typeof parts> = (props: StyleFunctionProps) => {

theme/components/Input.ts

@@ -42,7 +42,7 @@ const variantOutline: PartsStyleFunction<typeof parts> = (props) => {
       _focusVisible: {
         zIndex: 1,
         borderColor: getColor(theme, fc),
-        boxShadow: `none`,
+        boxShadow: '0px 4px 6px -1px rgba(0, 0, 0, 0.1), 0px 2px 4px -1px rgba(0, 0, 0, 0.06)',
       },
     },
     addon: {

theme/components/Modal.ts

@@ -18,6 +18,7 @@ const Modal: ComponentMultiStyleConfig = {
       padding: 0,
       marginBottom: 8,
       fontSize: '2xl',
+      lineHeight: 10,
     },
     body: {
       padding: 0,
@@ -25,11 +26,16 @@ const Modal: ComponentMultiStyleConfig = {
     },
     footer: {
       padding: 0,
+      justifyContent: 'flex-start',
     },
     closeButton: {
-      top: '40px',
-      right: '40px',
-      color: 'blue.500',
+      top: 8,
+      right: 8,
+      height: 10,
+      width: 10,
+      color: 'gray.700',
+      _hover: { color: 'blue.400' },
+      _active: { bg: 'none' },
     },
   },
 }

theme/components/Table.ts

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

theme/components/Tooltip.ts

+import type { ComponentStyleConfig } from '@chakra-ui/theme';
+import { Tooltip as TooltipComponent } from '@chakra-ui/react';
+
+const Tooltip: ComponentStyleConfig = {
+  baseStyle: {
+    maxWidth: 'unset',
+  },
+}
+
+TooltipComponent.defaultProps = { ...TooltipComponent.defaultProps, hasArrow: true }
+
+export default Tooltip;

theme/components/index.ts

@@ -4,6 +4,7 @@ import Table from './Table';
 import Form from './Form';
 import Input from './Input';
 import Tag from './Tag';
+import Tooltip from './Tooltip';
 
 const components = {
   Button,
@@ -12,6 +13,7 @@ const components = {
   Input,
   Form,
   Tag,
+  Tooltip,
 }
 
 export default components;

ui/AddressModal/AddressForm.tsx

@@ -75,16 +75,18 @@ const AddressModal: React.FC<Props> = ({ data }) => {
           render={ renderAddressInput }
         />
       </Box>
-      <Controller
-        name="tag"
-        control={ control }
-        rules={{
-          maxLength: TAG_MAX_LENGTH,
-        }}
-        render={ renderTagInput }
-      />
-      <Text color="gray.500" fontSize="sm" marginBottom={ 8 }>
-            Please select what types of notifications you will receive:
+      <Box marginBottom={ 8 }>
+        <Controller
+          name="tag"
+          control={ control }
+          rules={{
+            maxLength: TAG_MAX_LENGTH,
+          }}
+          render={ renderTagInput }
+        />
+      </Box>
+      <Text color="gray.500" fontSize="sm" marginBottom={ 5 }>
+        Please select what types of notifications you will receive
       </Text>
       <Box marginBottom={ 8 }>
         { /* add them to the form later */ }
@@ -100,7 +102,7 @@ const AddressModal: React.FC<Props> = ({ data }) => {
           }) }
         </Grid>
       </Box>
-      <Text color="gray.500" fontSize="sm" marginBottom={ 5 }>Notification methods:</Text>
+      <Text color="gray.500" fontSize="sm" marginBottom={ 5 }>Notification methods</Text>
       <Controller
         name="notification"
         control={ control }
@@ -108,6 +110,7 @@ const AddressModal: React.FC<Props> = ({ data }) => {
       />
       <Box marginTop={ 8 }>
         <Button
+          size="lg"
           variant="primary"
           onClick={ handleSubmit(onSubmit) }
           disabled={ Object.keys(errors).length > 0 }

ui/AddressModal/AddressModal.tsx

@@ -21,7 +21,7 @@ type Props = {
 }
 
 const AddressModal: React.FC<Props> = ({ isOpen, onClose, data }) => {
-  const title = data ? 'Edit watchlist address' : 'New Address to Watchlist';
+  const title = data ? 'Edit watch list address' : 'New address to watch list';
 
   return (
     <Modal isOpen={ isOpen } onClose={ onClose } size="md">
@@ -29,10 +29,10 @@ const AddressModal: React.FC<Props> = ({ isOpen, onClose, data }) => {
       <ModalContent>
         <ModalHeader fontWeight="500" textStyle="h3">{ title }</ModalHeader>
         <ModalCloseButton/>
-        <ModalBody>
+        <ModalBody mb={ 0 }>
           { !data && (
             <Text lineHeight="30px" marginBottom={ 12 }>
-              An Email notification can be sent to you when an address on your watch list sends or receives any transactions.
+              An email notification can be sent to you when an address on your watch list sends or receives any transactions.
             </Text>
           ) }
           <AddressForm data={ data }/>

ui/DeleteModal/DeleteModal.tsx

@@ -6,6 +6,7 @@ import {
   ModalOverlay,
   ModalContent,
   ModalFooter,
+  ModalHeader,
   ModalBody,
   ModalCloseButton,
 } from '@chakra-ui/react';
@@ -28,15 +29,14 @@ const DeleteModal: React.FC<Props> = ({ isOpen, onClose, address }) => {
     <Modal isOpen={ isOpen } onClose={ onClose } size="md">
       <ModalOverlay/>
       <ModalContent>
+        <ModalHeader fontWeight="500" textStyle="h3">Remove address from watch list</ModalHeader>
         <ModalCloseButton/>
         <ModalBody>
-          { `Delete ${ address || 'address' } from watchlist?` }
+          { `Address ${ address || 'address' } will be deleted` }
         </ModalBody>
-
         <ModalFooter>
-          <Button variant="secondary" onClick={ onDeleteClick }>Yes</Button>
-          <Button variant="primary" ml={ 3 } onClick={ onClose }>
-              No
+          <Button variant="primary" size="lg" onClick={ onDeleteClick }>
+              Delete
           </Button>
         </ModalFooter>
       </ModalContent>

ui/WatchlistTable/WatchListAddressItem.tsx

@@ -16,7 +16,7 @@ const WatchListAddressItem = ({ item }: {item: TWatchlistItem}) => {
   return (
     <HStack spacing={ 3 } align="top">
       <Box width="24px">{ image }</Box>
-      <VStack spacing={ 2 } align="stretch" overflow="hidden">
+      <VStack spacing={ 2 } align="stretch" overflow="hidden" fontWeight={ 500 } color="gray.700">
         <HStack spacing={ 2 } alignContent="center">
           <Link
             href="#"
@@ -24,9 +24,11 @@ const WatchListAddressItem = ({ item }: {item: TWatchlistItem}) => {
             overflow="hidden"
             fontWeight={ 600 }
             lineHeight="24px"
+            // need theme
+            _hover={{ color: 'blue.400' }}
           >
-            <Tooltip hasArrow label={ item.address }>
-              <AddressWithDots address={ item.address }/>
+            <Tooltip label={ item.address }>
+              <Box overflow="hidden"><AddressWithDots address={ item.address }/></Box>
             </Tooltip>
           </Link>
           <CopyToClipboard text={ item.address }/>
@@ -34,22 +36,22 @@ const WatchListAddressItem = ({ item }: {item: TWatchlistItem}) => {
         { item.tokenBalance && (
           <HStack spacing={ 0 } fontSize="sm" h={ 6 }>
             <Image src="./xdai.png" alt="chain-logo" marginRight="10px" w="16px" h="16px"/>
-            <Text>{ item.tokenBalance + ' xDAI' }</Text>
+            <Text>{ `xDAI balance:${ nbsp }` + item.tokenBalance }</Text>
             <Text color="gray.500">{ `${ nbsp }($${ item.tokenBalanceUSD } USD)` }</Text>
           </HStack>
         ) }
         { item.tokensAmount && (
-          <HStack spacing={ 0 } fontSize="sm">
+          <HStack spacing={ 0 } fontSize="sm" h={ 6 }>
             <Icon as={ TokensIcon } marginRight="10px" w="17px" h="16px"/>
-            <Text>{ item.tokensAmount + ' tokens' }</Text>
+            <Text>{ `Tokens:${ nbsp }` + item.tokensAmount }</Text>
             <Text color="gray.500">{ `${ nbsp }($${ item.tokensUSD } USD)` }</Text>
           </HStack>
         ) }
         { item.totalUSD && (
-          <HStack spacing={ 0 } fontSize="sm">
+          <HStack spacing={ 0 } fontSize="sm" h={ 6 }>
             <Icon as={ WalletIcon } marginRight="10px" w="16px" h="16px"/>
-            <Text>{ `Total balance:${ nbsp }` }</Text>
-            <Link href="#" color="blue.500">{ `$${ item.totalUSD } USD` }</Link>
+            <Text>{ `Net worth:${ nbsp }` }</Text>
+            <Link href="#" color="blue.500" _hover={{ color: 'blue.400' }}>{ `$${ item.totalUSD } USD` }</Link>
           </HStack>
         ) }
       </VStack>

ui/WatchlistTable/WatchListTableItem.tsx

@@ -6,6 +6,7 @@ import {
   Td,
   Switch,
   Icon,
+  IconButton,
   HStack,
   Tooltip,
 } from '@chakra-ui/react'
@@ -36,7 +37,7 @@ const WatchlistTableItem = ({ item, onEditClick, onDeleteClick }: Props) => {
     <Tr alignItems="top" key={ item.address }>
       <Td><WatchListAddressItem item={ item }/></Td>
       <Td>
-        <Tooltip hasArrow label={ item.tag }>
+        <Tooltip label={ item.tag }>
           <Tag variant="gray" lineHeight="24px">
             { item.tag }
           </Tag>
@@ -45,8 +46,26 @@ const WatchlistTableItem = ({ item, onEditClick, onDeleteClick }: Props) => {
       <Td><Switch colorScheme="blue" size="md" isChecked={ item.notification }/></Td>
       <Td>
         <HStack spacing={ 6 }>
-          <Icon as={ EditIcon } w="20px" h="20px" cursor="pointer" color="blue.600" onClick={ onItemEditClick }/>
-          <Icon as={ DeleteIcon } w="20px" h="20px" cursor="pointer" color="blue.600" onClick={ onItemDeleteClick }/>
+          <Tooltip label="Edit">
+            <IconButton
+              aria-label="edit"
+              variant="iconBlue"
+              w="30px"
+              h="30px"
+              onClick={ onItemEditClick }
+              icon={ <Icon as={ EditIcon } w="20px" h="20px"/> }
+            />
+          </Tooltip>
+          <Tooltip label="Delete">
+            <IconButton
+              aria-label="delete"
+              variant="iconBlue"
+              w="30px"
+              h="30px"
+              onClick={ onItemDeleteClick }
+              icon={ <Icon as={ DeleteIcon } w="20px" h="20px"/> }
+            />
+          </Tooltip>
         </HStack>
       </Td>
     </Tr>

ui/navigation/AccountNavLink.tsx

@@ -23,7 +23,7 @@ const AccountNavLink = ({ text, pathname, icon }: Props) => {
         py={ 2.5 }
         color={ isActive ? 'blue.600' : 'gray.600' }
         bgColor={ isActive ? 'blue.50' : 'transparent' }
-        _hover={{ color: 'blue.600' }}
+        _hover={{ color: 'blue.400' }}
         borderRadius="base"
       >
         <HStack spacing={ 3 }>

ui/navigation/MainNavLink.tsx

@@ -25,7 +25,7 @@ const MainNavLink = ({ text, pathname, icon }: Props) => {
         color={ isActive ? 'blue.600' : 'gray.600' }
         bgColor={ isActive ? 'blue.50' : 'transparent' }
         borderRadius="base"
-        _hover={{ color: 'blue.600' }}
+        _hover={{ color: 'blue.400' }}
       >
         <HStack justifyContent="space-between">
           <HStack spacing={ 3 }>

ui/navigation/Navigation.tsx

@@ -19,7 +19,7 @@ const Navigation = () => {
       py={ 12 }
       width="300px"
     >
-      <HStack as="header" justifyContent="space-between" w="100%" padding={ 4 }>
+      <HStack as="header" justifyContent="space-between" w="100%" px={ 4 } mb={ 2 } h={ 10 } alignItems="center">
         <Icon as={ logoIcon } width="142px" height="26px" color="blue.600"/>
         <Icon as={ networksIcon } width="20px" height="20px"/>
       </HStack>

ui/pages/Watchlist.tsx

@@ -42,7 +42,7 @@ const WatchList: React.FC = () => {
     <Page>
       <Box h="100%">
         <Box as="h1" textStyle="h2" marginBottom={ 8 }>Watch list</Box>
-        <Text marginBottom={ 12 }>An Email notification can be sent to you when an address on your watch list sends or receives any transactions.</Text>
+        <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
             data={ watchlist }
@@ -53,6 +53,7 @@ const WatchList: React.FC = () => {
         <Box marginTop={ 8 }>
           <Button
             variant="primary"
+            size="lg"
             onClick={ addressModalProps.onOpen }
           >
             Add address

ui/shared/CopyToClipboard.tsx

-import React, { useCallback, useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 
-import { Icon, useClipboard, useToast } from '@chakra-ui/react';
+import { IconButton, Tooltip, useClipboard } from '@chakra-ui/react';
 import CopyIcon from '../../icons/copy.svg';
 
 const CopyToClipboard = ({ text }: {text: string}) => {
-  const { hasCopied, onCopy } = useClipboard(text);
-  const toast = useToast();
+  const { hasCopied, onCopy } = useClipboard(text, 3000);
+  const [ copied, setCopied ] = useState(false);
 
   useEffect(() => {
     if (hasCopied) {
-      toast({
-        description: 'Copied',
-        status: 'success',
-        duration: 3000,
-      })
+      setCopied(true);
+    } else {
+      setCopied(false);
     }
-  }, [ toast, hasCopied ]);
+  }, [ hasCopied ]);
 
-  const copyToClipboardCallback = useCallback(() => onCopy(), [ onCopy ]);
-  return <Icon as={ CopyIcon } w="20px" h="20px" color="blue.500" cursor="pointer" onClick={ copyToClipboardCallback }/>;
+  return (
+    <Tooltip label={ copied ? 'Copied' : 'Copy to clipboard' } closeOnClick={ false }>
+      <IconButton
+        aria-label="copy"
+        icon={ <CopyIcon/> }
+        w="20px"
+        h="20px"
+        variant="iconBlue"
+        onClick={ onCopy }
+      />
+    </Tooltip>
+  );
 }
 
 export default CopyToClipboard;