fix: use ThemeButton for claim and view/sell nfts (#5278)

* fix: use ThemeButton for claim and view/sell nfts

* fix(bag): icon update to remove front handle

* Revert "fix(bag): icon update to remove front handle"

This reverts commit 8d8a40bd4a8ed6f19730434e642b1a36785c64e9.

src/components/Button/index.tsx

@@ -414,7 +414,42 @@ function pickThemeButtonBackgroundColor({ theme, emphasis }: { theme: DefaultThe
       return theme.backgroundInteractive
   }
 }
-
+function pickThemeButtonFontSize({ size }: { size: ButtonSize }) {
+  switch (size) {
+    case ButtonSize.large:
+      return '20px'
+    case ButtonSize.medium:
+      return '16px'
+    case ButtonSize.small:
+      return '14px'
+    default:
+      return '16px'
+  }
+}
+function pickThemeButtonLineHeight({ size }: { size: ButtonSize }) {
+  switch (size) {
+    case ButtonSize.large:
+      return '24px'
+    case ButtonSize.medium:
+      return '20px'
+    case ButtonSize.small:
+      return '16px'
+    default:
+      return '20px'
+  }
+}
+function pickThemeButtonPadding({ size }: { size: ButtonSize }) {
+  switch (size) {
+    case ButtonSize.large:
+      return '16px'
+    case ButtonSize.medium:
+      return '10px 12px'
+    case ButtonSize.small:
+      return '8px'
+    default:
+      return '10px 12px'
+  }
+}
 function pickThemeButtonTextColor({ theme, emphasis }: { theme: DefaultTheme; emphasis: ButtonEmphasis }) {
   switch (emphasis) {
     case ButtonEmphasis.high:
@@ -443,10 +478,12 @@ const BaseThemeButton = styled.button<BaseButtonProps>`
   cursor: pointer;
   display: flex;
   flex-direction: row;
+  font-size: ${pickThemeButtonFontSize};
   font-weight: 600;
   gap: 12px;
   justify-content: center;
-  padding: 16px;
+  line-height: ${pickThemeButtonLineHeight};
+  padding: ${pickThemeButtonPadding};
   position: relative;
   transition: 150ms ease opacity;
 

src/components/WalletDropdown/AuthenticatedHeader.tsx

@@ -23,11 +23,11 @@ import { shortenAddress } from '../../nft/utils/address'
 import { useCloseModal, useToggleModal } from '../../state/application/hooks'
 import { ApplicationModal } from '../../state/application/reducer'
 import { useUserHasAvailableClaim, useUserUnclaimedAmount } from '../../state/claim/hooks'
-import { ButtonPrimary } from '../Button'
+import { ButtonEmphasis, ButtonSize, ThemeButton } from '../Button'
 import StatusIcon from '../Identicon/StatusIcon'
 import IconButton, { IconHoverText } from './IconButton'
 
-const WalletButton = styled(ButtonPrimary)`
+const WalletButton = styled(ThemeButton)`
   border-radius: 12px;
   padding-top: 10px;
   padding-bottom: 10px;
@@ -177,12 +177,12 @@ const AuthenticatedHeader = () => {
           <USDText>${amountUSD.toFixed(2)} USD</USDText>
         </BalanceWrapper>
         {nftFlag === NftVariant.Enabled && (
-          <ProfileButton onClick={navigateToProfile}>
+          <ProfileButton onClick={navigateToProfile} size={ButtonSize.medium} emphasis={ButtonEmphasis.medium}>
             <Trans>View and sell NFTs</Trans>
           </ProfileButton>
         )}
         {isUnclaimed && (
-          <UNIButton onClick={openClaimModal}>
+          <UNIButton onClick={openClaimModal} size={ButtonSize.medium} emphasis={ButtonEmphasis.medium}>
             <Trans>Claim</Trans> {unclaimedAmount?.toFixed(0, { groupSeparator: ',' } ?? '-')} <Trans>reward</Trans>
           </UNIButton>
         )}