yet another tab styles update

toolkit/chakra/tabs.tsx

@@ -36,7 +36,6 @@ export const TabsCounter = ({ count }: TabsCounterProps) => {
   return (
     <chakra.span
       color={ count > 0 ? 'text.secondary' : { _light: 'blackAlpha.400', _dark: 'whiteAlpha.400' } }
-      ml={ 1 }
       _groupHover={{
         color: 'inherit',
       }}

toolkit/components/AdaptiveTabs/AdaptiveTabsList.tsx

@@ -155,19 +155,18 @@ const AdaptiveTabsList = (props: Props) => {
         }
 
         return (
+          <Skeleton loading={ isLoading } key={ value } asChild>
             <TabsTrigger
-            key={ value }
               value={ value }
               ref={ ref }
               scrollSnapAlign="start"
               flexShrink={ 0 }
               { ...getItemStyles(index, tabsCut) }
             >
-            <Skeleton loading={ isLoading }>
               { typeof tab.title === 'function' ? tab.title() : tab.title }
               <TabsCounter count={ tab.count }/>
-            </Skeleton>
             </TabsTrigger>
+          </Skeleton>
         );
       }) }
       {

toolkit/components/AdaptiveTabs/AdaptiveTabsMenu.tsx

@@ -2,14 +2,15 @@ import React from 'react';
 
 import type { TabItem } from './types';
 
-import type { ButtonProps } from 'toolkit/chakra/button';
-import { Button } from 'toolkit/chakra/button';
-import { PopoverBody, PopoverContent, PopoverRoot, PopoverTrigger } from 'toolkit/chakra/popover';
+import { PopoverBody, PopoverCloseTriggerWrapper, PopoverContent, PopoverRoot, PopoverTrigger } from 'toolkit/chakra/popover';
 import { TabsCounter, TabsTrigger } from 'toolkit/chakra/tabs';
+import IconSvg from 'ui/shared/IconSvg';
 
-import { getTabValue, menuButton } from './utils';
+import { IconButton } from '../../chakra/icon-button';
+import type { IconButtonProps } from '../../chakra/icon-button';
+import { getTabValue } from './utils';
 
-interface Props extends ButtonProps {
+interface Props extends IconButtonProps {
   tabs: Array<TabItem>;
   tabsCut: number;
   isActive: boolean;
@@ -20,7 +21,7 @@ const AdaptiveTabsMenu = ({ tabs, tabsCut, isActive, ...props }: Props, ref: Rea
   return (
     <PopoverRoot positioning={{ placement: 'bottom-end' }}>
       <PopoverTrigger>
-        <Button
+        <IconButton
           // we use "div" so the :last-of-type pseudo-class targets the last tab and not the menu trigger
           as="div"
           variant="plain"
@@ -34,10 +35,11 @@ const AdaptiveTabsMenu = ({ tabs, tabsCut, isActive, ...props }: Props, ref: Rea
           }}
           ref={ ref }
           expanded={ isActive }
+          px="18px"
           { ...props }
         >
-          { menuButton.title }
-        </Button>
+          <IconSvg name="dots" boxSize={ 5 }/>
+        </IconButton>
       </PopoverTrigger>
       <PopoverContent>
         <PopoverBody display="flex" flexDir="column" rowGap={ 2 } px={ 0 }>
@@ -45,12 +47,15 @@ const AdaptiveTabsMenu = ({ tabs, tabsCut, isActive, ...props }: Props, ref: Rea
             const value = getTabValue(tab);
 
             return (
+              <PopoverCloseTriggerWrapper key={ value }>
                 <TabsTrigger
-                key={ value }
+                  className="group"
                   value={ value }
                   w="100%"
                   py="5px"
                   borderRadius="none"
+                  fontWeight="normal"
+                  color="initial"
                   _hover={{
                     bg: 'tabs.solid.bg.selected',
                   }}
@@ -58,6 +63,7 @@ const AdaptiveTabsMenu = ({ tabs, tabsCut, isActive, ...props }: Props, ref: Rea
                   { typeof tab.title === 'function' ? tab.title() : tab.title }
                   <TabsCounter count={ tab.count }/>
                 </TabsTrigger>
+              </PopoverCloseTriggerWrapper>
             );
           }) }
         </PopoverBody>

toolkit/theme/recipes/tabs.recipe.ts

@@ -130,6 +130,7 @@ export const recipe = defineSlotRecipe({
       solid: {
         trigger: {
           fontWeight: '600',
+          gap: '1',
           borderRadius: 'base',
           color: 'tabs.solid.fg',
           bg: 'transparent',
@@ -148,7 +149,7 @@ export const recipe = defineSlotRecipe({
       secondary: {
         list: {
           border: 'none',
-          columnGap: '3',
+          columnGap: '2',
           _horizontal: {
             _before: {
               display: 'none',

ui/address/AddressContract.tsx

@@ -10,17 +10,13 @@ interface Props {
   shouldRender?: boolean;
 }
 
-const TAB_LIST_PROPS = {
-  columnGap: 3,
-};
-
 const AddressContract = ({ tabs, isLoading, shouldRender }: Props) => {
   if (!shouldRender) {
     return null;
   }
 
   return (
-    <RoutedTabs tabs={ tabs } variant="secondary" size="sm" listProps={ TAB_LIST_PROPS } isLoading={ isLoading }/>
+    <RoutedTabs tabs={ tabs } variant="secondary" size="sm" isLoading={ isLoading }/>
   );
 };
 

ui/address/AddressTokens.tsx

@@ -34,12 +34,10 @@ const TAB_LIST_PROPS = {
   mt: 1,
   mb: { base: 6, lg: 1 },
   py: 5,
-  columnGap: 3,
 };
 
 const TAB_LIST_PROPS_MOBILE = {
   my: 8,
-  columnGap: 3,
 };
 
 const getTokenFilterValue = (getFilterValuesFromQuery<NFTTokenType>).bind(null, NFT_TOKEN_TYPE_IDS);

ui/pages/Address.tsx

@@ -166,7 +166,7 @@ const AddressPageContent = () => {
             return (
               <>
                 <span>{ tabName }</span>
-                <IconSvg name="status/success" boxSize="14px" color="green.500" ml={ 1 }/>
+                <IconSvg name="status/success" boxSize="14px" color="green.500"/>
               </>
             );
           }