Merge pull request #45 from blockscout/private-tags-fixes

some style fixes

theme/components/Tabs.ts

@@ -17,6 +17,9 @@ const variantSoftRounded: PartsStyleFunction<typeof parts> = (props) => {
         color: getColor(theme, `${ c }.700`),
         bg: getColor(theme, `${ c }.50`),
       },
+      _hover: {
+        color: getColor(theme, `${ c }.400`),
+      },
     },
   }
 }

theme/components/index.ts

@@ -4,6 +4,7 @@ import Input from './Input';
 import Link from './Link';
 import Modal from './Modal';
 import Table from './Table';
+import Tabs from './Tabs';
 import Tag from './Tag';
 import Tooltip from './Tooltip';
 
@@ -13,6 +14,7 @@ const components = {
   Form,
   Link,
   Modal,
+  Tabs,
   Table,
   Tag,
   Tooltip,

ui/privateTags/AddressTagTable/AddressTagTableItem.tsx

@@ -4,19 +4,16 @@ import {
   Tag,
   Tr,
   Td,
-  Icon,
-  IconButton,
   HStack,
   Tooltip,
 } from '@chakra-ui/react'
 
-import EditIcon from '../../../icons/edit.svg';
-import DeleteIcon from '../../../icons/delete.svg';
-
 import AddressIcon from '../../shared/AddressIcon';
 import AddressLinkWithTooltip from '../../shared/AddressLinkWithTooltip';
 
 import type { TPrivateTagsAddressItem } from '../../../data/privateTagsAddress';
+import EditButton from '../../shared/EditButton';
+import DeleteButton from '../../shared/DeleteButton';
 
 interface Props {
   item: TPrivateTagsAddressItem;
@@ -50,26 +47,8 @@ const AddressTagTableItem = ({ item, onEditClick, onDeleteClick }: Props) => {
       </Td>
       <Td>
         <HStack spacing={ 6 }>
-          <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>
+          <EditButton onClick={ onItemEditClick }/>
+          <DeleteButton onClick={ onItemDeleteClick }/>
         </HStack>
       </Td>
     </Tr>

ui/privateTags/DeleteAddressModal.tsx → ui/privateTags/DeletePrivateTagModal.tsx

@@ -5,23 +5,23 @@ import DeleteModal from '../shared/DeleteModal'
 type Props = {
   isOpen: boolean;
   onClose: () => void;
-  address?: string;
+  tag?: string;
 }
 
-const DeleteAddressModal: React.FC<Props> = ({ isOpen, onClose, address }) => {
+const DeletePrivateTagModal: React.FC<Props> = ({ isOpen, onClose, tag }) => {
   const onDelete = useCallback(() => {
     // eslint-disable-next-line no-console
-    console.log('delete', address);
-  }, [ address ]);
+    console.log('delete', tag);
+  }, [ tag ]);
   return (
     <DeleteModal
       isOpen={ isOpen }
       onClose={ onClose }
       onDelete={ onDelete }
-      title="Remove address private tag"
-      text={ `Address ${ address || 'address' } will be deleted` }
+      title="Removal of private tag"
+      text={ `Tag "${ tag || 'address' }" will be removed` }
     />
   )
 }
 
-export default DeleteAddressModal;
+export default DeletePrivateTagModal;

ui/privateTags/DeleteTransactionModal.tsx

-import React, { useCallback } from 'react';
-
-import DeleteModal from '../shared/DeleteModal'
-
-type Props = {
-  isOpen: boolean;
-  onClose: () => void;
-  transaction?: string;
-}
-
-const DeleteTransactionModal: React.FC<Props> = ({ isOpen, onClose, transaction }) => {
-  const onDelete = useCallback(() => {
-    // eslint-disable-next-line no-console
-    console.log('delete', transaction);
-  }, [ transaction ]);
-  return (
-    <DeleteModal
-      isOpen={ isOpen }
-      onClose={ onClose }
-      onDelete={ onDelete }
-      title="Remove transaction private tag"
-      text={ `Transaction ${ transaction || 'transaction' } will be deleted` }
-    />
-  )
-}
-
-export default DeleteTransactionModal;

ui/privateTags/PrivateAddressTags.tsx

@@ -7,7 +7,7 @@ import AddressModal from './AddressModal/AddressModal';
 
 import type { TPrivateTagsAddressItem } from './../../data/privateTagsAddress';
 import { privateTagsAddress } from './../../data/privateTagsAddress';
-import DeleteAddressModal from './DeleteAddressModal';
+import DeletePrivateTagModal from './DeletePrivateTagModal';
 
 const PrivateAddressTags: React.FC = () => {
   const addressModalProps = useDisclosure();
@@ -27,7 +27,7 @@ const PrivateAddressTags: React.FC = () => {
   }, [ addressModalProps ]);
 
   const onDeleteClick = useCallback((data: TPrivateTagsAddressItem) => {
-    setDeleteModalData(data.address);
+    setDeleteModalData(data.tag);
     deleteModalProps.onOpen();
   }, [ deleteModalProps ])
 
@@ -59,7 +59,7 @@ const PrivateAddressTags: React.FC = () => {
         </Button>
       </Box>
       <AddressModal { ...addressModalProps } onClose={ onAddressModalClose } data={ addressModalData }/>
-      <DeleteAddressModal { ...deleteModalProps } onClose={ onDeleteModalClose } address={ deleteModalData }/>
+      <DeletePrivateTagModal { ...deleteModalProps } onClose={ onDeleteModalClose } tag={ deleteModalData }/>
     </>
   );
 };

ui/privateTags/PrivateTransactionTags.tsx

@@ -7,7 +7,7 @@ import TransactionModal from './TransactionModal/TransactionModal';
 
 import type { TPrivateTagsTransactionItem } from './../../data/privateTagsTransaction';
 import { privateTagsTransaction } from './../../data/privateTagsTransaction';
-import DeleteTransactionModal from './DeleteTransactionModal';
+import DeletePrivateTagModal from './DeletePrivateTagModal';
 
 const PrivateTransactionTags: React.FC = () => {
   const transactionModalProps = useDisclosure();
@@ -27,7 +27,7 @@ const PrivateTransactionTags: React.FC = () => {
   }, [ transactionModalProps ]);
 
   const onDeleteClick = useCallback((data: TPrivateTagsTransactionItem) => {
-    setDeleteModalData(data.transaction);
+    setDeleteModalData(data.tag);
     deleteModalProps.onOpen();
   }, [ deleteModalProps ])
 
@@ -59,7 +59,7 @@ const PrivateTransactionTags: React.FC = () => {
         </Button>
       </Box>
       <TransactionModal { ...transactionModalProps } onClose={ onAddressModalClose } data={ transactionModalData }/>
-      <DeleteTransactionModal { ...deleteModalProps } onClose={ onDeleteModalClose } transaction={ deleteModalData }/>
+      <DeletePrivateTagModal { ...deleteModalProps } onClose={ onDeleteModalClose } tag={ deleteModalData }/>
     </>
   );
 };

ui/privateTags/TransactionTagTable/TransactionTagTableItem.tsx

@@ -4,14 +4,12 @@ import {
   Tag,
   Tr,
   Td,
-  Icon,
-  IconButton,
   HStack,
   Tooltip,
 } from '@chakra-ui/react'
 
-import EditIcon from '../../../icons/edit.svg';
-import DeleteIcon from '../../../icons/delete.svg';
+import EditButton from '../../shared/EditButton';
+import DeleteButton from '../../shared/DeleteButton';
 
 import AddressLinkWithTooltip from '../../shared/AddressLinkWithTooltip';
 
@@ -48,26 +46,8 @@ const AddressTagTableItem = ({ item, onEditClick, onDeleteClick }: Props) => {
       </Td>
       <Td>
         <HStack spacing={ 6 }>
-          <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>
+          <EditButton onClick={ onItemEditClick }/>
+          <DeleteButton onClick={ onItemDeleteClick }/>
         </HStack>
       </Td>
     </Tr>

ui/shared/AddressInput.tsx

@@ -22,6 +22,12 @@ const AddressInput: React.FC<Props> = ({ field, isInvalid }) => {
         placeholder=" "
         isInvalid={ isInvalid }
         maxLength={ ADDRESS_LENGTH }
+        // TODO: move this to input theme
+        css={{
+          ':-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' },
+        }}
       />
       <FormLabel>Address (0x...)</FormLabel>
     </FormControl>

ui/shared/DeleteButton.tsx

+import React, { useCallback } from 'react';
+
+import { Tooltip, IconButton, Icon } from '@chakra-ui/react';
+
+import DeleteIcon from '../../icons/delete.svg';
+
+type Props = {
+  onClick: () => void;
+}
+
+const DeleteButton = ({ onClick }: Props) => {
+  const onFocusCapture = useCallback((e: React.SyntheticEvent) => e.stopPropagation(), [])
+  return (
+    <Tooltip label="Delete">
+      <IconButton
+        aria-label="delete"
+        variant="iconBlue"
+        w="30px"
+        h="30px"
+        onClick={ onClick }
+        icon={ <Icon as={ DeleteIcon } w="20px" h="20px"/> }
+        onFocusCapture={ onFocusCapture }
+      />
+    </Tooltip>
+  )
+}
+
+export default DeleteButton;

ui/shared/EditButton.tsx

+import React, { useCallback } from 'react';
+
+import { Tooltip, IconButton, Icon } from '@chakra-ui/react';
+
+import EditIcon from '../../icons/edit.svg';
+
+type Props = {
+  onClick: () => void;
+}
+
+const EditButton = ({ onClick }: Props) => {
+  const onFocusCapture = useCallback((e: React.SyntheticEvent) => e.stopPropagation(), [])
+  return (
+    <Tooltip label="Edit">
+      <IconButton
+        aria-label="edit"
+        variant="iconBlue"
+        w="30px"
+        h="30px"
+        onClick={ onClick }
+        icon={ <Icon as={ EditIcon } w="20px" h="20px"/> }
+        onFocusCapture={ onFocusCapture }
+      />
+    </Tooltip>
+  )
+}
+
+export default EditButton;

ui/watchlist/WatchlistTable/WatchListTableItem.tsx

@@ -5,14 +5,12 @@ import {
   Tr,
   Td,
   Switch,
-  Icon,
-  IconButton,
   HStack,
   Tooltip,
 } from '@chakra-ui/react'
 
-import EditIcon from '../../../icons/edit.svg';
-import DeleteIcon from '../../../icons/delete.svg';
+import EditButton from '../../shared/EditButton';
+import DeleteButton from '../../shared/DeleteButton';
 
 import type { TWatchlistItem } from '../../../data/watchlist';
 
@@ -46,26 +44,8 @@ const WatchlistTableItem = ({ item, onEditClick, onDeleteClick }: Props) => {
       <Td><Switch colorScheme="blue" size="md" isChecked={ item.notification }/></Td>
       <Td>
         <HStack spacing={ 6 }>
-          <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>
+          <EditButton onClick={ onItemEditClick }/>
+          <DeleteButton onClick={ onItemDeleteClick }/>
         </HStack>
       </Td>
     </Tr>