rewards button styles refactoring

ui/home/HeroBanner.tsx

@@ -54,8 +54,8 @@ const HeroBanner = () => {
             }
           </Heading>
           { config.UI.navigation.layout === 'vertical' && (
-            <Box display={{ base: 'none', lg: 'block' }}>
-              { config.features.rewards.isEnabled && <RewardsButton isHomePage/> }
+            <Box display={{ base: 'none', lg: 'flex' }} gap={ 2 }>
+              { config.features.rewards.isEnabled && <RewardsButton variant="hero"/> }
               {
                 (config.features.account.isEnabled && <UserProfileDesktop buttonVariant="hero"/>) ||
                 (config.features.blockchainInteraction.isEnabled && <UserWalletDesktop buttonVariant="hero"/>)

ui/marketplace/MarketplaceAppTopBar.tsx

-import { chakra, Flex, Tooltip, Skeleton, Box } from '@chakra-ui/react';
+import { chakra, Flex, Tooltip, Skeleton } from '@chakra-ui/react';
 import React from 'react';
 
 import type { MarketplaceAppOverview, MarketplaceAppSecurityReport, ContractListTypes } from 'types/client/marketplace';
@@ -99,13 +99,13 @@ const MarketplaceAppTopBar = ({ appId, data, isLoading, securityReport }: Props)
           source="App page"
         />
         { !isMobile && (
-          <Box ml="auto">
+          <Flex ml="auto" gap={ 2 }>
             { config.features.rewards.isEnabled && <RewardsButton size="sm"/> }
             {
               (config.features.account.isEnabled && <UserProfileDesktop buttonSize="sm"/>) ||
               (config.features.blockchainInteraction.isEnabled && <UserWalletDesktop buttonSize="sm"/>)
             }
-          </Box>
+          </Flex>
         ) }
       </Flex>
       { contractListType && (

ui/rewards/RewardsButton.tsx

+import type { ButtonProps } from '@chakra-ui/react';
 import { Button, chakra, Tooltip } from '@chakra-ui/react';
 import React from 'react';
 
 import { route } from 'nextjs-routes';
 
 import { useRewardsContext } from 'lib/contexts/rewards';
+import useIsMobile from 'lib/hooks/useIsMobile';
 import IconSvg from 'ui/shared/IconSvg';
 import LinkInternal from 'ui/shared/links/LinkInternal';
 
 type Props = {
-  isHomePage?: boolean;
-  isMobile?: boolean;
-  size?: 'sm' | 'md';
+  size?: ButtonProps['size'];
+  variant?: ButtonProps['variant'];
 };
 
-const RewardsButton = ({ isHomePage, isMobile, size }: Props) => {
+const RewardsButton = ({ variant = 'header', size }: Props) => {
   const { apiToken, openLoginModal, dailyReward, balance, isDailyRewardLoading, isBalanceLoading } = useRewardsContext();
+  const isMobile = useIsMobile();
   return (
     <Tooltip
       label="Earn merits for using Blockscout"
       textAlign="center"
       padding={ 2 }
       openDelay={ 500 }
-      display={ isMobile ? 'none' : 'flex' }
+      isDisabled={ isMobile }
       width="150px"
     >
       <Button
-        variant={ isHomePage ? 'hero' : 'header' }
+        variant={ variant }
         data-selected={ Boolean(apiToken) }
         flexShrink={ 0 }
         as={ apiToken ? LinkInternal : 'button' }
@@ -33,8 +35,7 @@ const RewardsButton = ({ isHomePage, isMobile, size }: Props) => {
         onClick={ apiToken ? undefined : openLoginModal }
         fontSize="sm"
         size={ size }
-        mr={ isMobile ? 0 : 2 }
-        boxSize={ isMobile ? '40px' : 'auto' }
+        px={ 2.5 }
         isLoading={ isDailyRewardLoading || isBalanceLoading }
         loadingText={ isMobile ? undefined : 'Merits' }
         textDecoration="none !important"
@@ -45,7 +46,7 @@ const RewardsButton = ({ isHomePage, isMobile, size }: Props) => {
           flexShrink={ 0 }
           mx={ -1 }
         />
-        <chakra.span display={ isMobile ? 'none' : 'inline' } ml={ 2 }>
+        <chakra.span display={{ base: 'none', md: 'inline' }} ml={ 2 }>
           { apiToken ? balance?.total : 'Merits' }
         </chakra.span>
       </Button>

ui/snippets/header/HeaderDesktop.tsx

@@ -38,7 +38,7 @@ const HeaderDesktop = ({ renderSearchBar, isMarketplaceAppPage }: Props) => {
         { searchBar }
       </Box>
       { config.UI.navigation.layout === 'vertical' && (
-        <Box display="flex" flexShrink={ 0 }>
+        <Box display="flex" gap={ 2 } flexShrink={ 0 }>
           { config.features.rewards.isEnabled && <RewardsButton/> }
           {
             (config.features.account.isEnabled && <UserProfileDesktop/>) ||

ui/snippets/header/HeaderMobile.tsx

@@ -49,7 +49,7 @@ const HeaderMobile = ({ hideSearchBar, renderSearchBar }: Props) => {
         <Burger/>
         <NetworkLogo ml={ 2 } mr="auto"/>
         <Flex columnGap={ 2 }>
-          { config.features.rewards.isEnabled && <RewardsButton isMobile/> }
+          { config.features.rewards.isEnabled && <RewardsButton/> }
           {
             (config.features.account.isEnabled && <UserProfileMobile/>) ||
             (config.features.blockchainInteraction.isEnabled && <UserWalletMobile/>) ||

ui/snippets/navigation/horizontal/NavigationDesktop.tsx

@@ -39,11 +39,13 @@ const NavigationDesktop = () => {
             }) }
           </Flex>
         </chakra.nav>
-        { config.features.rewards.isEnabled && <RewardsButton size="sm"/> }
-        {
-          (config.features.account.isEnabled && <UserProfileDesktop buttonSize="sm"/>) ||
-          (config.features.blockchainInteraction.isEnabled && <UserWalletDesktop buttonSize="sm"/>)
-        }
+        <Flex gap={ 2 }>
+          { config.features.rewards.isEnabled && <RewardsButton size="sm"/> }
+          {
+            (config.features.account.isEnabled && <UserProfileDesktop buttonSize="sm"/>) ||
+            (config.features.blockchainInteraction.isEnabled && <UserWalletDesktop buttonSize="sm"/>)
+          }
+        </Flex>
       </Flex>
     </Box>
   );