diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx index 9fde098baa..07ca31e7b7 100644 --- a/src/components/Button/index.tsx +++ b/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` 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; diff --git a/src/components/WalletDropdown/AuthenticatedHeader.tsx b/src/components/WalletDropdown/AuthenticatedHeader.tsx index b7aa126031..03b354b451 100644 --- a/src/components/WalletDropdown/AuthenticatedHeader.tsx +++ b/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 = () => { ${amountUSD.toFixed(2)} USD {nftFlag === NftVariant.Enabled && ( - + View and sell NFTs )} {isUnclaimed && ( - + Claim {unclaimedAmount?.toFixed(0, { groupSeparator: ',' } ?? '-')} reward )}