New styles for pagination and "Add / Remove" buttons (#2791)

* update styles for add / remove buttons

* update pagination styles

* change border color for filled inputs

* change row gap for alerts

* update icons and screenshots

* fix tests

* update buttons for contract method form

* update screenshot

icons/minus.svg

-<svg viewBox="0 0 16 2" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path d="M.5 1a.937.937 0 0 1 .938-.938h13.124a.938.938 0 0 1 0 1.875H1.438A.937.937 0 0 1 .5 1Z" fill="currentColor"/>
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
+  <g clip-path="url(#a)">
+    <path fill="currentColor" d="M8.857 9H17a1 1 0 0 1 1 1v.286a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V10a1 1 0 0 1 1-1h5.857Z"/>
+  </g>
+  <defs>
+    <clipPath id="a">
+      <path fill="currentColor" d="M0 0h20v20H0z"/>
+    </clipPath>
+  </defs>
 </svg>

icons/plus.svg

-<svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path d="M8 .5a.937.937 0 0 1 .938.938v5.625h5.624a.937.937 0 0 1 0 1.875H8.939v5.624a.937.937 0 0 1-1.876 0V8.939H1.438a.937.937 0 1 1 0-1.876h5.625V1.438A.937.937 0 0 1 8 .5Z" fill="currentColor"/>
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
+  <g clip-path="url(#a)">
+    <path fill="currentColor" d="M7.857 9.052a1 1 0 0 0 1-1V3.195a1 1 0 0 1 1-1h.286a1 1 0 0 1 1 1v4.857a1 1 0 0 0 1 1H17a1 1 0 0 1 1 1v.286a1 1 0 0 1-1 1h-4.857a1 1 0 0 0-1 1v4.857a1 1 0 0 1-1 1h-.286a1 1 0 0 1-1-1v-4.857a1 1 0 0 0-1-1H3a1 1 0 0 1-1-1v-.286a1 1 0 0 1 1-1h4.857Z"/>
+  </g>
+  <defs>
+    <clipPath id="a">
+      <path fill="currentColor" d="M0 0h20v20H0z"/>
+    </clipPath>
+  </defs>
 </svg>

toolkit/chakra/icon-button.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import { Button, type ButtonProps } from './button';
 
 export interface IconButtonProps extends Omit<ButtonProps, 'size'> {
-  size?: '2xs' | 'md';
+  size?: '2xs' | '2xs_alt' | 'md';
 }
 
 export const IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(
@@ -13,7 +13,7 @@ export const IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(
     // FIXME: I have to clone the children instead of using _icon props because of style overrides
     // in some pw tests for some reason the _icon style will be applied before the style of child (IconSvg component)
     const child = React.Children.only<React.ReactElement>(children as React.ReactElement);
-    const clonedChildren = size ? React.cloneElement(child, { boxSize: 5 } as React.HTMLAttributes<HTMLElement>) : child;
+    const clonedChildren = size ? React.cloneElement(child, { boxSize: size === '2xs_alt' ? 3 : 5 } as React.HTMLAttributes<HTMLElement>) : child;
 
     const sizeStyle = (() => {
       switch (size) {
@@ -24,6 +24,13 @@ export const IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(
             borderRadius: 'sm',
           };
         }
+        case '2xs_alt': {
+          return {
+            _icon: { boxSize: 3 },
+            boxSize: 5,
+            borderRadius: 'sm',
+          };
+        }
         case 'md': {
           return {
             _icon: { boxSize: 5 },

toolkit/components/buttons/AddButton.tsx

+import React from 'react';
+
+import type { IconButtonProps } from 'toolkit/chakra/icon-button';
+import { IconButton } from 'toolkit/chakra/icon-button';
+import IconSvg from 'ui/shared/IconSvg';
+
+interface Props extends IconButtonProps {}
+
+const AddButton = (props: Props) => {
+  return (
+    <IconButton
+      aria-label="Add item"
+      variant="icon_secondary"
+      size="md"
+      { ...props }
+    >
+      <IconSvg name="plus"/>
+    </IconButton>
+  );
+};
+
+export default React.memo(AddButton);

toolkit/components/buttons/RemoveButton.tsx

+import React from 'react';
+
+import type { IconButtonProps } from 'toolkit/chakra/icon-button';
+import { IconButton } from 'toolkit/chakra/icon-button';
+import IconSvg from 'ui/shared/IconSvg';
+
+interface Props extends IconButtonProps {}
+
+const RemoveButton = (props: Props) => {
+  return (
+    <IconButton
+      aria-label="Remove item"
+      variant="icon_secondary"
+      size="md"
+      { ...props }
+    >
+      <IconSvg name="minus"/>
+    </IconButton>
+  );
+};
+
+export default React.memo(RemoveButton);

toolkit/theme/foundations/semanticTokens.ts

@@ -64,6 +64,18 @@ const semanticTokens: ThemingConfig['semanticTokens'] = {
           selected: { value: { _light: '{colors.blue.50}', _dark: '{colors.whiteAlpha.100}' } },
         },
       },
+      pagination: {
+        fg: {
+          DEFAULT: { value: { _light: '{colors.blackAlpha.800}', _dark: '{colors.gray.50}' } },
+          selected: { value: { _light: '{colors.blue.700}', _dark: '{colors.gray.50}' } },
+        },
+        bg: {
+          selected: { value: { _light: '{colors.blue.50}', _dark: '{colors.whiteAlpha.100}' } },
+        },
+        border: {
+          DEFAULT: { value: { _light: '{colors.gray.100}', _dark: '{colors.whiteAlpha.100}' } },
+        },
+      },
       hero: {
         bg: {
           DEFAULT: {
@@ -251,7 +263,7 @@ const semanticTokens: ThemingConfig['semanticTokens'] = {
         DEFAULT: { value: { _light: '{colors.gray.100}', _dark: '{colors.gray.700}' } },
         hover: { value: { _light: '{colors.gray.200}', _dark: '{colors.gray.500}' } },
         focus: { value: '{colors.blue.400}' },
-        filled: { value: { _light: '{colors.gray.300}', _dark: '{colors.gray.600}' } },
+        filled: { value: { _light: '{colors.gray.100}', _dark: '{colors.gray.700}' } },
         readOnly: { value: { _light: '{colors.gray.200}', _dark: '{colors.gray.800}' } },
         error: { value: '{colors.red.500}' },
       },

toolkit/theme/recipes/button.recipe.ts

@@ -253,6 +253,28 @@ export const recipe = defineRecipe({
           color: 'link.primary.hover',
         },
       },
+      pagination: {
+        borderWidth: '2px',
+        borderStyle: 'solid',
+        bg: 'transparent',
+        color: 'button.pagination.fg',
+        borderColor: 'button.pagination.border',
+        _hover: {
+          bg: 'transparent',
+          color: 'link.primary.hover',
+          borderColor: 'link.primary.hover',
+        },
+        _selected: {
+          bg: 'button.pagination.bg.selected',
+          color: 'button.pagination.fg.selected',
+          borderColor: 'transparent',
+          _hover: {
+            bg: 'button.pagination.bg.selected',
+            color: 'button.pagination.fg.selected',
+            borderColor: 'transparent',
+          },
+        },
+      },
     },
     size: {
       '2xs': {

ui/address/contract/ContractDetails.pw.tsx

@@ -21,7 +21,7 @@ test.describe.configure({ mode: 'serial' });
 let addressApiUrl: string;
 
 test.beforeEach(async({ mockApiResponse, page }) => {
-  await page.route('https://cdn.jsdelivr.net/npm/monaco-editor@0.33.0/**', (route) => {
+  await page.route('https://cdn.jsdelivr.net/npm/monaco-editor@0.52.2/**', (route) => {
     route.abort();
   });
   addressApiUrl = await mockApiResponse('general:address', addressMock.contract, { pathParams: { hash: addressMock.contract.hash } });

ui/address/contract/alerts/ContractDetailsAlerts.tsx

@@ -38,7 +38,7 @@ const ContractDetailsAlerts = ({ data, isLoading, addressData, channel }: Props)
   });
 
   return (
-    <Flex flexDir="column" rowGap={ 2 } mb={ 6 } _empty={{ display: 'none' }}>
+    <Flex flexDir="column" rowGap={ 1 } mb={ 6 } _empty={{ display: 'none' }}>
       { data?.is_blueprint && (
         <Box>
           <span>This is an </span>

ui/address/contract/methods/form/ContractMethodArrayButton.tsx

-import { chakra } from '@chakra-ui/react';
 import React from 'react';
 
-import { IconButton } from 'toolkit/chakra/icon-button';
-import IconSvg from 'ui/shared/IconSvg';
+import type { IconButtonProps } from 'toolkit/chakra/icon-button';
+import AddButton from 'toolkit/components/buttons/AddButton';
+import RemoveButton from 'toolkit/components/buttons/RemoveButton';
 
-interface Props {
+interface Props extends Omit<IconButtonProps, 'type'> {
   index: number;
-  onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;
-  isDisabled?: boolean;
   type: 'add' | 'remove';
-  className?: string;
 }
 
-const ContractMethodArrayButton = ({ className, type, index, onClick, isDisabled }: Props) => {
+const ContractMethodArrayButton = ({ type, index, onClick, ...props }: Props) => {
 
   const handleClick = React.useCallback((event: React.MouseEvent<HTMLButtonElement>) => {
     event.stopPropagation();
-    onClick(event);
+    onClick?.(event);
   }, [ onClick ]);
 
+  const Button = type === 'add' ? AddButton : RemoveButton;
+
   return (
-    <IconButton
-      as="div"
-      className={ className }
-      aria-label={ type }
+    <Button
       data-index={ index }
-      variant="outline"
-      boxSize={ 5 }
+      size="2xs_alt"
       onClick={ handleClick }
-      disabled={ isDisabled }
-    >
-      <IconSvg name={ type === 'remove' ? 'minus' : 'plus' } boxSize={ 3 }/>
-    </IconButton>
+      { ...props }
+    />
   );
 };
 
-export default React.memo(chakra(ContractMethodArrayButton));
+export default React.memo(ContractMethodArrayButton);

ui/address/contract/methods/form/ContractMethodFieldAccordion.tsx

@@ -34,7 +34,7 @@ const ContractMethodFieldAccordion = ({ label, level, children, onAddClick, onRe
             { label }
           </Box>
           { onRemoveClick && index !== undefined && <ContractMethodArrayButton index={ index } onClick={ onRemoveClick } type="remove"/> }
-          { onAddClick && index !== undefined && <ContractMethodArrayButton index={ index } onClick={ onAddClick } type="add" ml={ 2 }/> }
+          { onAddClick && index !== undefined && <ContractMethodArrayButton index={ index } onClick={ onAddClick } type="add" ml={ 1 }/> }
         </AccordionItemTrigger>
         <AccordionItemContent display="flex" flexDir="column" rowGap={ 1 } pl="18px" pr="6px">
           { children }

ui/address/contract/methods/form/ContractMethodFieldInputArray.tsx

@@ -140,7 +140,7 @@ const ContractMethodFieldInputArray = ({
           const itemData = transformDataForArrayItem(data, index);
 
           return (
-            <Flex key={ registeredIndex } alignItems="flex-start" columnGap={ 3 }>
+            <Flex key={ registeredIndex } alignItems="flex-start" columnGap={ 2 }>
               <ContractMethodFieldInput
                 data={ itemData }
                 hideLabel

ui/advancedFilter/filters/AddressFilter.tsx

@@ -5,13 +5,12 @@ import React from 'react';
 
 import type { AdvancedFilterParams } from 'types/api/advancedFilter';
 
-import { IconButton } from 'toolkit/chakra/icon-button';
 import { Input } from 'toolkit/chakra/input';
 import { InputGroup } from 'toolkit/chakra/input-group';
 import { Select } from 'toolkit/chakra/select';
+import AddButton from 'toolkit/components/buttons/AddButton';
 import { ClearButton } from 'toolkit/components/buttons/ClearButton';
 import TableColumnFilter from 'ui/shared/filters/TableColumnFilter';
-import IconSvg from 'ui/shared/IconSvg';
 
 const FILTER_PARAM_TO_INCLUDE = 'to_address_hashes_to_include';
 const FILTER_PARAM_FROM_INCLUDE = 'from_address_hashes_to_include';
@@ -76,15 +75,10 @@ const AddressFilterInput = ({ address, mode, onModeChange, onChange, onClear, is
         <Input value={ address } onChange={ onChange } placeholder="Smart contract / Address (0x...)*" size="sm" autoComplete="off"/>
       </InputGroup>
       { isLast && (
-        <IconButton
-          aria-label="add"
-          variant="outline"
-          size="md"
+        <AddButton
           ml={ 2 }
           onClick={ onAddFieldClick }
-        >
-          <IconSvg name="plus"/>
-        </IconButton>
+        />
       ) }
     </Flex>
   );

ui/contractVerification/ContractVerificationForm.pw.tsx

@@ -87,7 +87,7 @@ test('flatten source code method +@dark-mode +@mobile', async({ render, page })
   await page.getByRole('option', { name: 'Solidity (Single file)' }).click();
 
   await page.getByText(/add contract libraries/i).click();
-  await page.locator('button[aria-label="add"]').click();
+  await page.locator('button[aria-label="Add item"]').click();
 
   await expect(component).toHaveScreenshot({ timeout: 10_000 });
 });

ui/contractVerification/fields/ContractVerificationFieldLibraryItem.tsx

@@ -3,10 +3,10 @@ import React from 'react';
 
 import type { FormFields } from '../types';
 
-import { IconButton } from 'toolkit/chakra/icon-button';
+import AddButton from 'toolkit/components/buttons/AddButton';
+import RemoveButton from 'toolkit/components/buttons/RemoveButton';
 import { FormFieldAddress } from 'toolkit/components/forms/fields/FormFieldAddress';
 import { FormFieldText } from 'toolkit/components/forms/fields/FormFieldText';
-import IconSvg from 'ui/shared/IconSvg';
 
 import ContractVerificationFormRow from '../ContractVerificationFormRow';
 
@@ -42,26 +42,16 @@ const ContractVerificationFieldLibraryItem = ({ index, fieldsLength, onAddFieldC
           <Text color="text.secondary" fontSize="sm">Contract library { index + 1 }</Text>
           <Flex columnGap={ 5 }>
             { fieldsLength > 1 && (
-              <IconButton
-                aria-label="delete"
-                variant="outline"
-                size="md"
+              <RemoveButton
                 onClick={ handleRemoveButtonClick }
                 disabled={ isDisabled }
-              >
-                <IconSvg name="minus"/>
-              </IconButton>
+              />
             ) }
             { fieldsLength < LIMIT && (
-              <IconButton
-                aria-label="add"
-                variant="outline"
-                size="md"
+              <AddButton
                 onClick={ handleAddButtonClick }
                 disabled={ isDisabled }
-              >
-                <IconSvg name="plus"/>
-              </IconButton>
+              />
             ) }
           </Flex>
         </Flex>

ui/publicTags/submit/fields/PublicTagsSubmitFieldAddresses.tsx

@@ -4,9 +4,9 @@ import { useFieldArray, useFormContext } from 'react-hook-form';
 
 import type { FormFields } from '../types';
 
-import { IconButton } from 'toolkit/chakra/icon-button';
+import AddButton from 'toolkit/components/buttons/AddButton';
+import RemoveButton from 'toolkit/components/buttons/RemoveButton';
 import { FormFieldAddress } from 'toolkit/components/forms/fields/FormFieldAddress';
-import IconSvg from 'ui/shared/IconSvg';
 
 const LIMIT = 20;
 
@@ -45,30 +45,20 @@ const PublicTagsSubmitFieldAddresses = () => {
                 placeholder="Smart contract / Address (0x...)"
               />
             </GridItem>
-            <GridItem display="flex" alignItems="center" columnGap={ 5 } justifyContent={{ base: 'flex-end', lg: 'flex-start' }}>
+            <GridItem display="flex" alignItems="center" columnGap={ 3 } justifyContent={{ base: 'flex-end', lg: 'flex-start' }}>
               { fields.length < LIMIT && index === fields.length - 1 && (
-                <IconButton
-                  aria-label="add"
+                <AddButton
                   data-index={ index }
-                  variant="outline"
-                  size="md"
                   onClick={ handleAddFieldClick }
                   disabled={ isDisabled }
-                >
-                  <IconSvg name="plus"/>
-                </IconButton>
+                />
               ) }
               { fields.length > 1 && (
-                <IconButton
-                  aria-label="delete"
+                <RemoveButton
                   data-index={ index }
-                  variant="outline"
-                  size="md"
                   onClick={ handleRemoveFieldClick }
                   disabled={ isDisabled }
-                >
-                  <IconSvg name="minus"/>
-                </IconButton>
+                />
               ) }
             </GridItem>
           </React.Fragment>

ui/publicTags/submit/fields/PublicTagsSubmitFieldTag.tsx

@@ -6,13 +6,13 @@ import type { FormFields, FormFieldTag } from '../types';
 import type { PublicTagType } from 'types/api/addressMetadata';
 
 import useIsMobile from 'lib/hooks/useIsMobile';
-import { IconButton } from 'toolkit/chakra/icon-button';
+import AddButton from 'toolkit/components/buttons/AddButton';
+import RemoveButton from 'toolkit/components/buttons/RemoveButton';
 import { FormFieldColor } from 'toolkit/components/forms/fields/FormFieldColor';
 import { FormFieldText } from 'toolkit/components/forms/fields/FormFieldText';
 import { FormFieldUrl } from 'toolkit/components/forms/fields/FormFieldUrl';
 import { colorValidator } from 'toolkit/components/forms/validators/color';
 import EntityTag from 'ui/shared/EntityTags/EntityTag';
-import IconSvg from 'ui/shared/IconSvg';
 
 import PublicTagsSubmitFieldTagType from './PublicTagsSubmitFieldTagType';
 
@@ -93,33 +93,23 @@ const PublicTagsSubmitFieldTag = ({ index, isDisabled, errors, onAddClick, onRem
       <GridItem py={{ lg: '10px' }}>
         <Flex
           alignItems="center"
-          columnGap={ 5 }
+          columnGap={ 3 }
           justifyContent={{ base: 'flex-end', lg: 'flex-start' }}
           h={{ base: 'auto', lg: '60px' }}
         >
           { onAddClick && (
-            <IconButton
-              aria-label="add"
+            <AddButton
               data-index={ index }
-              variant="outline"
-              size="md"
               onClick={ handleAddClick }
               disabled={ isDisabled }
-            >
-              <IconSvg name="plus"/>
-            </IconButton>
+            />
           ) }
           { onRemoveClick && (
-            <IconButton
-              aria-label="delete"
+            <RemoveButton
               data-index={ index }
-              variant="outline"
-              size="md"
               onClick={ handleRemoveClick }
               disabled={ isDisabled }
-            >
-              <IconSvg name="minus"/>
-            </IconButton>
+            />
           ) }
         </Flex>
         { !isMobile && (

ui/publicTags/submit/fields/PublicTagsSubmitFieldTagType.tsx

@@ -7,7 +7,6 @@ import type { PublicTagType } from 'types/api/addressMetadata';
 
 import type { SelectOption } from 'toolkit/chakra/select';
 import { FormFieldSelect } from 'toolkit/components/forms/fields/FormFieldSelect';
-import IconSvg from 'ui/shared/IconSvg';
 interface Props {
   index: number;
   tagTypes: Array<PublicTagType> | undefined;
@@ -15,27 +14,14 @@ interface Props {
 
 const PublicTagsSubmitFieldTagType = ({ index, tagTypes }: Props) => {
 
-  const getItemIcon = React.useCallback((type: PublicTagType) => {
-    switch (type.type) {
-      case 'name':
-        return <IconSvg name="publictags_slim" boxSize={ 5 } flexShrink={ 0 }/>;
-      case 'protocol':
-      case 'generic':
-        return <span>#</span>;
-      default:
-        return null;
-    }
-  }, []);
-
   const collection = React.useMemo(() => {
     const items = tagTypes?.map((type) => ({
       value: type.type,
       label: capitalize(type.type),
-      icon: getItemIcon(type),
     })) ?? [];
 
     return createListCollection<SelectOption>({ items });
-  }, [ tagTypes, getItemIcon ]);
+  }, [ tagTypes ]);
 
   return (
     <FormFieldSelect<FormFields, `tags.${ number }.type`>

ui/shared/pagination/Pagination.tsx

 import type { HTMLChakraProps } from '@chakra-ui/react';
-import { Center, Flex } from '@chakra-ui/react';
+import { Flex } from '@chakra-ui/react';
 import React from 'react';
 
 import type { PaginationParams } from './types';
@@ -28,7 +28,7 @@ const Pagination = (props: Props) => {
     >
       <Skeleton loading={ showSkeleton } mr={ 3 }>
         <Button
-          variant="outline"
+          variant="pagination"
           size="sm"
           onClick={ resetPage }
           disabled={ page === 1 || isLoading }
@@ -38,7 +38,7 @@ const Pagination = (props: Props) => {
       </Skeleton>
       <IconButton
         aria-label="Prev page"
-        variant="outline"
+        variant="pagination"
         boxSize={ 8 }
         onClick={ onPrevPageClick }
         disabled={ !canGoBackwards || isLoading || page === 1 }
@@ -46,26 +46,21 @@ const Pagination = (props: Props) => {
       >
         <IconSvg name="arrows/east-mini" boxSize={ 5 }/>
       </IconButton>
-      <Skeleton loading={ showSkeleton } mx={ 2 } >
-        <Center
-          display="flex"
-          alignItems="center"
-          justifyContent="center"
-          h={ 8 }
-          minW={ 8 }
-          px={ 2 }
-          fontWeight="semibold"
-          bgColor={{ _light: 'blue.50', _dark: 'whiteAlpha.100' }}
-          color={{ _light: 'blue.700', _dark: 'gray.50' }}
-          borderRadius="base"
-          textStyle="sm"
-        >
-          { page }
-        </Center>
-      </Skeleton>
+      <Button
+        variant="pagination"
+        size="sm"
+        selected={ !showSkeleton }
+        pointerEvents="none"
+        loadingSkeleton={ showSkeleton }
+        mx={ 2 }
+        minW={ 8 }
+        px={ 2 }
+      >
+        { page }
+      </Button>
       <IconButton
         aria-label="Next page"
-        variant="outline"
+        variant="pagination"
         boxSize={ 8 }
         onClick={ onNextPageClick }
         disabled={ !hasNextPage || isLoading }

ui/showcases/IconButton.tsx

@@ -93,6 +93,11 @@ const IconButtonShowcase = () => {
               <IconSvg name="star_outline"/>
             </IconButton>
           </Sample>
+          <Sample label="size: 2xs_alt">
+            <IconButton size="2xs_alt" variant="icon_secondary" outline="1px dashed lightpink">
+              <IconSvg name="plus"/>
+            </IconButton>
+          </Sample>
           <Sample label="size: md">
             <IconButton size="md" variant="icon_secondary" outline="1px dashed lightpink">
               <IconSvg name="star_outline"/>

ui/snippets/header/HeaderAlert.tsx

@@ -6,7 +6,7 @@ import MaintenanceAlert from './alerts/MaintenanceAlert';
 
 const HeaderAlert = () => {
   return (
-    <Flex flexDir="column" rowGap={ 3 } mb={{ base: 6, lg: 3 }} _empty={{ display: 'none' }}>
+    <Flex flexDir="column" rowGap={ 1 } mb={{ base: 6, lg: 3 }} _empty={{ display: 'none' }}>
       <MaintenanceAlert/>
       <IndexingBlocksAlert/>
     </Flex>