disable focus state for buttons on mobile (#1043)

Address Contract tab title: unnecessary border in mobile view

Fixes #1041

theme/components/Button/Button.ts

@@ -177,6 +177,9 @@ const baseStyle = defineStyle({
   fontWeight: 600,
   borderRadius: 'base',
   overflow: 'hidden',
+  _focusVisible: {
+    boxShadow: { base: 'none', lg: 'outline' },
+  },
 });
 
 const sizes = {

theme/components/Tabs.ts

@@ -24,6 +24,9 @@ const variantSoftRounded = definePartsStyle((props) => {
       _hover: {
         color: 'link_hovered',
       },
+      _focusVisible: {
+        boxShadow: { base: 'none', lg: 'outline' },
+      },
     },
   };
 });

ui/address/coinBalance/AddressCoinBalanceListItem.tsx

@@ -57,7 +57,7 @@ const AddressCoinBalanceListItem = (props: Props) => {
       ) }
       <Flex columnGap={ 2 } w="100%">
         <Skeleton isLoaded={ !props.isLoading } fontWeight={ 500 } flexShrink={ 0 }>Age</Skeleton>
-        <Skeleton isLoaded={ !props.isLoading } color="text_secondary">{ timeAgo }</Skeleton>
+        <Skeleton isLoaded={ !props.isLoading } color="text_secondary"><span>{ timeAgo }</span></Skeleton>
       </Flex>
     </ListItemMobile>
   );