tag refactor

theme/components/Badge.ts

+import { defineStyle, defineStyleConfig } from '@chakra-ui/styled-system';
+import { mode, transparentize } from '@chakra-ui/theme-tools';
+
+const baseStyle = defineStyle({
+  fontSize: 'xs',
+  borderRadius: 'sm',
+  fontWeight: 'bold',
+});
+
+const variantSubtle = defineStyle((props) => {
+  const { colorScheme: c, theme } = props;
+  const darkBg = transparentize(`${ c }.200`, 0.16)(theme);
+
+  if (c === 'gray') {
+    return {
+      bg: mode('blackAlpha.100', 'whiteAlpha.400')(props),
+      color: mode('gray.600', 'gray.50')(props),
+    };
+  }
+
+  return {
+    bg: mode(`${ c }.50`, darkBg)(props),
+    color: mode(`${ c }.500`, `${ c }.200`)(props),
+  };
+});
+
+const variants = {
+  subtle: variantSubtle,
+};
+
+const Badge = defineStyleConfig({
+  baseStyle,
+  variants,
+  defaultProps: {
+    variant: 'subtle',
+    colorScheme: 'gray',
+  },
+});
+
+export default Badge;

theme/components/Tag.ts

@@ -3,34 +3,41 @@ import {
   createMultiStyleConfigHelpers,
   defineStyle,
 } from '@chakra-ui/styled-system';
-import { mode } from '@chakra-ui/theme-tools';
+
+import getDefaultTransitionProps from '../utils/getDefaultTransitionProps';
+import Badge from './Badge';
+const transitionProps = getDefaultTransitionProps();
 
 const { defineMultiStyleConfig, definePartsStyle } =
   createMultiStyleConfigHelpers(parts.keys);
 
-import getDefaultTransitionProps from '../utils/getDefaultTransitionProps';
-
-const variantGray = definePartsStyle((props) => {
-  const transitionProps = getDefaultTransitionProps();
+const variants = {
+  subtle: definePartsStyle((props) => ({
+    container: Badge.variants?.subtle(props),
+  })),
+};
 
-  return {
+const sizes = {
+  md: definePartsStyle({
     container: {
-      bg: mode('blackAlpha.100', 'whiteAlpha.400')(props),
-      color: mode('gray.600', 'gray.50')(props),
-      ...transitionProps,
+      minH: 6,
+      minW: 6,
+      fontSize: 'sm',
+      px: 2,
+      py: '2px',
     },
-  };
-});
-
-const variants = {
-  gray: variantGray,
+    label: {
+      lineHeight: 5,
+    },
+  }),
 };
 
 const baseStyleContainer = defineStyle({
-  display: 'inline-block',
+  display: 'inline-flex',
   overflow: 'hidden',
   textOverflow: 'ellipsis',
   borderRadius: 'sm',
+  ...transitionProps,
 });
 
 const baseStyle = definePartsStyle({
@@ -40,6 +47,12 @@ const baseStyle = definePartsStyle({
 const Tag = defineMultiStyleConfig({
   baseStyle,
   variants,
+  sizes,
+  defaultProps: {
+    size: 'md',
+    variant: 'subtle',
+    colorScheme: 'gray',
+  },
 });
 
 export default Tag;

theme/components/index.ts

 import Alert from './Alert';
+import Badge from './Badge';
 import Button from './Button';
 import Checkbox from './Checkbox';
 import Drawer from './Drawer';
@@ -19,6 +20,7 @@ import Tooltip from './Tooltip';
 
 const components = {
   Alert,
+  Badge,
   Button,
   Checkbox,
   Drawer,

ui/privateTags/AddressTagTable/AddressTagListItem.tsx

@@ -28,7 +28,7 @@ const AddressTagListItem = ({ item, onEditClick, onDeleteClick }: Props) => {
         <AddressSnippet address={ item.address_hash }/>
         <HStack spacing={ 3 } mt={ 4 }>
           <Text fontSize="sm" fontWeight={ 500 }>Private tag</Text>
-          <Tag variant="gray" lineHeight="24px">
+          <Tag>
             { item.name }
           </Tag>
         </HStack>

ui/privateTags/AddressTagTable/AddressTagTableItem.tsx

@@ -33,7 +33,7 @@ const AddressTagTableItem = ({ item, onEditClick, onDeleteClick }: Props) => {
       </Td>
       <Td>
         <TruncatedTextTooltip label={ item.name }>
-          <Tag variant="gray" lineHeight="24px">
+          <Tag>
             { item.name }
           </Tag>
         </TruncatedTextTooltip>

ui/privateTags/TransactionTagTable/TransactionTagListItem.tsx

@@ -28,7 +28,7 @@ const TransactionTagListItem = ({ item, onEditClick, onDeleteClick }: Props) =>
         <TransactionSnippet hash={ item.transaction_hash }/>
         <HStack spacing={ 3 } mt={ 4 }>
           <Text fontSize="sm" fontWeight={ 500 }>Private tag</Text>
-          <Tag variant="gray" lineHeight="24px">
+          <Tag>
             { item.name }
           </Tag>
         </HStack>

ui/privateTags/TransactionTagTable/TransactionTagTableItem.tsx

@@ -33,7 +33,7 @@ const TransactionTagTableItem = ({ item, onEditClick, onDeleteClick }: Props) =>
       </Td>
       <Td>
         <Tooltip label={ item.name }>
-          <Tag variant="gray" lineHeight="24px">
+          <Tag>
             { item.name }
           </Tag>
         </Tooltip>

ui/publicTags/PublicTagTable/PublicTagListItem.tsx

@@ -35,7 +35,7 @@ const PublicTagListItem = ({ item, onEditClick, onDeleteClick }: Props) => {
             { item.tags.split(';').map((tag) => {
               return (
                 <TruncatedTextTooltip label={ tag } key={ tag }>
-                  <Tag variant="gray" lineHeight="24px">
+                  <Tag>
                     { tag }
                   </Tag>
                 </TruncatedTextTooltip>

ui/publicTags/PublicTagTable/PublicTagTableItem.tsx

@@ -40,7 +40,7 @@ const PublicTagTableItem = ({ item, onEditClick, onDeleteClick }: Props) => {
           { item.tags.split(';').map((tag) => {
             return (
               <TruncatedTextTooltip label={ tag } key={ tag }>
-                <Tag variant="gray" lineHeight="24px">
+                <Tag>
                   { tag }
                 </Tag>
               </TruncatedTextTooltip>

ui/watchlist/WatchlistTable/WatchListItem.tsx

@@ -48,7 +48,7 @@ const WatchListItem = ({ item, onEditClick, onDeleteClick }: Props) => {
         <WatchListAddressItem item={ item }/>
         <HStack spacing={ 3 } mt={ 6 }>
           <Text fontSize="sm" fontWeight={ 500 }>Private tag</Text>
-          <Tag variant="gray" lineHeight="24px">
+          <Tag>
             { item.name }
           </Tag>
         </HStack>

ui/watchlist/WatchlistTable/WatchListTableItem.tsx

@@ -72,7 +72,7 @@ const WatchlistTableItem = ({ item, onEditClick, onDeleteClick }: Props) => {
       <Td><WatchListAddressItem item={ item }/></Td>
       <Td>
         <TruncatedTextTooltip label={ item.name }>
-          <Tag variant="gray" lineHeight="24px">
+          <Tag>
             { item.name }
           </Tag>
         </TruncatedTextTooltip>