disable focus state for buttons on mobile (#1043)

Address Contract tab title: unnecessary border in mobile view Fixes #1041
blockscout · Aug 2, 2023 · 727e88a · 727e88a
1 parent 7a6afac
commit 727e88a
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 1 deletion.
diff --git a/theme/components/Button/Button.ts b/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 = {

diff --git a/theme/components/Tabs.ts b/theme/components/Tabs.ts
@@ -24,6 +24,9 @@ const variantSoftRounded = definePartsStyle((props) => {
       _hover: {
         color: 'link_hovered',
       },
+      _focusVisible: {
+        boxShadow: { base: 'none', lg: 'outline' },
+      },
     },
   };
 });

diff --git a/ui/address/coinBalance/AddressCoinBalanceListItem.tsx b/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>
   );