diff --git a/components/brave_rewards/resources/ui/components/amount/index.tsx b/components/brave_rewards/resources/ui/components/amount/index.tsx index a215a21379f8..f1a0e9140d2e 100644 --- a/components/brave_rewards/resources/ui/components/amount/index.tsx +++ b/components/brave_rewards/resources/ui/components/amount/index.tsx @@ -18,17 +18,47 @@ export interface Props { } export default class Amount extends React.PureComponent { + private selectedAmount: HTMLDivElement | null + static defaultProps = { type: 'small', currency: 'USD', converted: 0 } + constructor (props: Props) { + super(props) + this.selectedAmount = null + } + + componentDidMount () { + if (this.selectedAmount) { + this.selectedAmount.click() + } + } + + selectedNodeRef = (node: HTMLDivElement) => { + const { selected } = this.props + + if (selected) { + this.selectedAmount = node + } + } + + getAboutText = (isMobile?: boolean) => { + return isMobile ? '' : getLocale('about') + } + render () { const { id, onSelect, amount, selected, type, converted, currency } = this.props return ( - + {amount} {type === 'big' ? 'BAT' : null} diff --git a/components/brave_rewards/resources/ui/components/donate/index.tsx b/components/brave_rewards/resources/ui/components/donate/index.tsx index 1217378999bd..d5f5e83c0078 100644 --- a/components/brave_rewards/resources/ui/components/donate/index.tsx +++ b/components/brave_rewards/resources/ui/components/donate/index.tsx @@ -50,13 +50,24 @@ export interface Props { interface State { missingFunds: boolean + amountChanged: boolean } export default class Donate extends React.PureComponent { + private sendButton: HTMLButtonElement | null + constructor (props: Props) { super(props) this.state = { - missingFunds: false + missingFunds: false, + amountChanged: false + } + this.sendButton = null + } + + componentDidMount () { + if (this.sendButton) { + this.sendButton.focus() } } @@ -70,6 +81,10 @@ export default class Donate extends React.PureComponent { } } + sendNodeRef = (node: HTMLButtonElement) => { + this.sendButton = node + } + validateDonation = () => { if (this.validateAmount(this.props.balance)) { return @@ -96,6 +111,14 @@ export default class Donate extends React.PureComponent { if (this.props.onAmountSelection) { this.props.onAmountSelection(tokens) } + + this.setState({ amountChanged: true }) + } + + onKeyUp = (e: React.KeyboardEvent) => { + if (e.key === 'Enter') { + this.validateDonation() + } } render () { @@ -122,11 +145,14 @@ export default class Donate extends React.PureComponent { {title} { - donationAmounts && donationAmounts.map((donation: Donation) => { + donationAmounts && donationAmounts.map((donation: Donation, index: number) => { + const isCurrentAmount = donation.tokens === currentAmount.toString() + const isDefaultAmount = index === 1 && !this.state.amountChanged + return
{ {children} - + - + {actionText} diff --git a/components/brave_rewards/resources/ui/components/donate/style.ts b/components/brave_rewards/resources/ui/components/donate/style.ts index cac49517beee..e3b44fb662cc 100644 --- a/components/brave_rewards/resources/ui/components/donate/style.ts +++ b/components/brave_rewards/resources/ui/components/donate/style.ts @@ -55,11 +55,7 @@ const getIconColor = (p: StyleProps) => { return palette.orange500 } - if (p.disabled) { - return palette.purple300 - } - - return palette.blurple600 + return palette.white } export const StyledWrapper = styled('div')` @@ -85,10 +81,6 @@ export const StyledDonationTitle = styled('div')` ` export const StyledSend = styled('div')` - background: ${p => p.monthly - ? `inherit` - : `var(--donate-send-bg)` - }; font-size: 12px; font-weight: 600; letter-spacing: 0.2px; @@ -101,14 +93,22 @@ export const StyledSend = styled('div')` padding-bottom: ${p => p.monthly ? 20 : 13}px; ` -export const StyledSendButton = styled<{}, 'button'>('button')` +export const StyledSendButton = styled('button')` display: block; border: none; font-size: 12px; font-weight: 600; - text-transform: uppercase; background: var(--donate-send-bg); cursor: pointer; + margin: 0 auto; + border-radius: 20px; + padding: 6px 60px; + ${(p) => { + if (!p.monthly) { + return null + } + return 'margin-left: 0px;' + }} ` export const StyledMonthlySendButton = styled(StyledSendButton)` @@ -135,6 +135,7 @@ export const StyledIconSend = styled('span')` color: ${p => getIconColor(p)}; width: 27px; height: 27px; + margin-left: -20px; ` export const StyledFunds = styled<{}, 'div'>('div')` diff --git a/components/resources/brave_components_strings.grd b/components/resources/brave_components_strings.grd index db3e7ba5d104..2c94b4bac30a 100644 --- a/components/resources/brave_components_strings.grd +++ b/components/resources/brave_components_strings.grd @@ -486,7 +486,7 @@ Keep this recovery key safe. You can always use this key to get your wallet back if something happens to your browser or computer. But make sure to protect it — anyone who gets this key could steal your wallet. It’s probably safest to write it down on a piece of paper, or wherever else you keep important info. You can support this content creator by sending a tip. It’s a way of thanking them for making great content. Verified creators get paid for their tips during the first week of each calendar month. - If you like, you can schedule monthly tips to support this creator on a continuous basis. + You can also set a monthly recurring contribution from within the Brave Rewards panel. Auto-Contribute Attention Attention @@ -517,7 +517,7 @@ Save See all {{numItems}} items See all {{numSites}} sites - Send my Tip + Send Tip Send my Tip Settings site