remove unnecessary sx props

stubs/address.ts

@@ -27,7 +27,7 @@ export const ADDRESS_INFO: Address = {
   has_tokens: false,
   has_validated_blocks: false,
   hash: ADDRESS_HASH,
-  implementations: [ { address: ADDRESS_HASH, name: 'Proxy' } ],
+  implementations: [ { address: ADDRESS_HASH, name: 'Transparent Upgradable Proxy' } ],
   is_contract: true,
   is_verified: true,
   name: 'ChainLink Token (goerli)',

ui/address/tokens/ERC20TokensTableItem.tsx

@@ -23,11 +23,7 @@ const ERC20TokensTableItem = ({
 
   return (
     <Tr
-      sx={{
-        '&:hover [aria-label="Add token to wallet"]': {
-          opacity: 1,
-        },
-      }}
+      role="group"
     >
       <Td verticalAlign="middle">
         <TokenEntity
@@ -46,7 +42,7 @@ const ERC20TokensTableItem = ({
             truncation="constant"
             noIcon
           />
-          <AddressAddToWallet token={ token } ml={ 4 } isLoading={ isLoading } opacity="0"/>
+          <AddressAddToWallet token={ token } ml={ 4 } isLoading={ isLoading } opacity="0" _groupHover={{ opacity: 1 }}/>
         </Flex>
       </Td>
       <Td isNumeric verticalAlign="middle">

ui/gasTracker/GasTrackerPriceSnippet.tsx

@@ -32,6 +32,7 @@ const GasTrackerPriceSnippet = ({ data, type, isLoading }: Props) => {
     average: useColorModeValue('gray.50', 'whiteAlpha.200'),
     slow: useColorModeValue('gray.50', 'whiteAlpha.200'),
   };
+  const borderColor = useColorModeValue('gray.200', 'whiteAlpha.300');
 
   return (
     <Box
@@ -41,6 +42,11 @@ const GasTrackerPriceSnippet = ({ data, type, isLoading }: Props) => {
       py={ 6 }
       w={{ lg: 'calc(100% / 3)' }}
       bgColor={ bgColors[type] }
+      _notLast={{
+        borderColor: borderColor,
+        borderRightWidth: { lg: '2px' },
+        borderBottomWidth: { base: '2px', lg: '0' },
+      }}
     >
       <Skeleton textStyle="h3" isLoaded={ !isLoading } w="fit-content">{ TITLES[type] }</Skeleton>
       <Flex columnGap={ 3 } alignItems="center" mt={ 3 }>

ui/gasTracker/GasTrackerPrices.tsx

@@ -21,13 +21,6 @@ const GasTrackerPrices = ({ prices, isLoading }: Props) => {
       borderWidth="2px"
       borderRadius="xl"
       overflow="hidden"
-      sx={{
-        'li:not(:last-child)': {
-          borderColor: borderColor,
-          borderRightWidth: { lg: '2px' },
-          borderBottomWidth: { base: '2px', lg: '0' },
-        },
-      }}
     >
       { prices.fast && <GasTrackerPriceSnippet type="fast" data={ prices.fast } isLoading={ isLoading }/> }
       { prices.average && <GasTrackerPriceSnippet type="average" data={ prices.average } isLoading={ isLoading }/> }

ui/searchResults/SearchResultListItem.tsx

@@ -344,10 +344,10 @@ const SearchResultListItem = ({ data, searchTerm, isLoading }: Props) => {
           <Text
             overflow="hidden"
             textOverflow="ellipsis"
-            sx={{
+            style={{
+              WebkitLineClamp: 3,
+              WebkitBoxOrient: 'vertical',
               display: '-webkit-box',
-              '-webkit-box-orient': 'vertical',
-              '-webkit-line-clamp': '3',
             }}
           >
             { data.app.description }

ui/shared/nft/NftImageFullscreen.tsx

@@ -13,11 +13,11 @@ interface Props {
 
 const NftImageFullscreen = ({ src, isOpen, onClose }: Props) => {
   const imgRef = React.useRef<HTMLImageElement>(null);
-  const [ hasDimentions, setHasDimentions ] = React.useState<boolean>(true);
+  const [ hasDimensions, setHasDimensions ] = React.useState<boolean>(true);
 
   const checkWidth = React.useCallback(() => {
     if (imgRef.current?.getBoundingClientRect().width === 0) {
-      setHasDimentions(false);
+      setHasDimensions(false);
     }
   }, [ ]);
 
@@ -30,7 +30,7 @@ const NftImageFullscreen = ({ src, isOpen, onClose }: Props) => {
         maxW="90vw"
         ref={ imgRef }
         onLoad={ checkWidth }
-        sx={ hasDimentions ? {} : { width: '90vw', height: '90vh' } }
+        { ...(hasDimensions ? {} : { width: '90vw', height: '90vh' }) }
       />
     </NftMediaFullscreenModal>
   );

ui/snippets/navigation/vertical/NavigationDesktop.tsx

@@ -56,6 +56,7 @@ const NavigationDesktop = () => {
   return (
     <Flex
       display={{ base: 'none', lg: 'flex' }}
+      role="group"
       position="relative"
       flexDirection="column"
       alignItems="stretch"
@@ -65,11 +66,6 @@ const NavigationDesktop = () => {
       py={ 12 }
       width={{ lg: isExpanded ? '229px' : '92px', xl: isCollapsed ? '92px' : '229px' }}
       { ...getDefaultTransitionProps({ transitionProperty: 'width, padding' }) }
-      sx={{
-        '&:hover #expand-icon': {
-          display: 'block',
-        },
-      }}
       onClick={ handleContainerClick }
     >
       <TestnetBadge position="absolute" pl={ 3 } w="49px" top="34px"/>
@@ -125,8 +121,8 @@ const NavigationDesktop = () => {
         cursor="pointer"
         onClick={ handleTogglerClick }
         aria-label="Expand/Collapse menu"
-        id="expand-icon"
         display="none"
+        _groupHover={{ display: 'block' }}
       />
     </Flex>
   );

ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestApp.tsx

@@ -48,10 +48,10 @@ const SearchBarSuggestApp = ({ data, isMobile, searchTerm, onClick }: Props) =>
             variant="secondary"
             overflow="hidden"
             textOverflow="ellipsis"
-            sx={{
+            style={{
+              WebkitLineClamp: 3,
+              WebkitBoxOrient: 'vertical',
               display: '-webkit-box',
-              '-webkit-box-orient': 'vertical',
-              '-webkit-line-clamp': '3',
             }}
           >
             { data.description }

ui/token/TokenDetails.tsx

@@ -100,7 +100,7 @@ const TokenDetails = ({ tokenQuery }: Props) => {
     <Grid
       columnGap={ 8 }
       rowGap={{ base: 1, lg: 3 }}
-      templateColumns={{ base: 'minmax(0, 1fr)', lg: 'auto minmax(728px, auto)' }} overflow="hidden"
+      templateColumns={{ base: 'minmax(0, 1fr)', lg: 'auto minmax(0, 1fr)' }} overflow="hidden"
     >
       { exchangeRate && (
         <>

ui/tokens/TokensTableItem.tsx

@@ -54,11 +54,7 @@ const TokensTableItem = ({
 
   return (
     <Tr
-      sx={{
-        '&:hover [aria-label="Add token to wallet"]': {
-          opacity: 1,
-        },
-      }}
+      role="group"
     >
       <Td>
         <Flex alignItems="flex-start">
@@ -94,6 +90,7 @@ const TokensTableItem = ({
                 isLoading={ isLoading }
                 iconSize={ 5 }
                 opacity={ 0 }
+                _groupHover={{ opacity: 1 }}
               />
             </Flex>
             <Flex columnGap={ 1 }>