diff --git a/components/brave_rewards/resources/extension/brave_rewards/_locales/en_US/messages.json b/components/brave_rewards/resources/extension/brave_rewards/_locales/en_US/messages.json index 1c606dbcb992..27e74c51fe0f 100644 --- a/components/brave_rewards/resources/extension/brave_rewards/_locales/en_US/messages.json +++ b/components/brave_rewards/resources/extension/brave_rewards/_locales/en_US/messages.json @@ -19,6 +19,26 @@ "message": "Refresh Status", "description": "" }, + "pendingTipText": { + "message": "Any tip you make will remain pending in your wallet and retry automatically for 90 days. $link_begin$Learn more$link_end$", + "description": "", + "placeholders": { + "link_begin": { + "content": "$1" + }, + "link_end": { + "content": "$2" + } + } + }, + "pendingTipTitle": { + "message": "This creator is not signed up yet.", + "description": "" + }, + "pendingTipTitleRegistered": { + "message": "This creator is currently not configured to receive tips from your wallet.", + "description": "" + }, "platformPublisherTitle": { "message": "$name$ on $platform$", "placeholders": { diff --git a/components/brave_rewards/resources/rewards_panel/components/navbar.style.ts b/components/brave_rewards/resources/rewards_panel/components/navbar.style.ts index f597012f14c0..77df7a11f003 100644 --- a/components/brave_rewards/resources/rewards_panel/components/navbar.style.ts +++ b/components/brave_rewards/resources/rewards_panel/components/navbar.style.ts @@ -61,6 +61,10 @@ export const root = styled.div` .selected button { color: var(--brave-palette-blurple400); } + + button[disabled] { + color: inherit; + } } ` diff --git a/components/brave_rewards/resources/rewards_panel/components/publisher_card.style.ts b/components/brave_rewards/resources/rewards_panel/components/publisher_card.style.ts index 972be0a6d7a3..193211fd2c7f 100644 --- a/components/brave_rewards/resources/rewards_panel/components/publisher_card.style.ts +++ b/components/brave_rewards/resources/rewards_panel/components/publisher_card.style.ts @@ -48,42 +48,145 @@ export const name = styled.div` ` export const status = styled.div` - font-weight: normal; + font-weight: 600; font-size: 12px; - line-height: 14px; + line-height: 18px; margin-top: 7px; color: var(--brave-palette-neutral700); + display: flex; + + .brave-theme-dark & { + color: var(--brave-palette-grey400); + } +` + +export const statusIndicator = styled.div` + position: relative; + border: 1px solid var(--brave-palette-neutral200); + border-radius: 48px; + padding: 3px 10px; .icon { + color: var(--brave-palette-grey200); height: 13px; width: auto; vertical-align: middle; - margin-bottom: 2px; + margin-bottom: 1px; margin-right: 4px; + + .brave-theme-dark & { + color: #343A40; + } + } + + &.registered { + border-color: var(--brave-palette-grey500); + + .icon { + color: var(--brave-color-brandBatInteracting); + } } .brave-theme-dark & { - color: var(--brave-palette-grey400); + border-color: var(--brave-palette-grey800); + } + + &:hover { + border-color: var(--brave-color-brandBatInteracting); + cursor: default; + + .pending-bubble { + display: initial; + } + } + + .pending-bubble { + position: absolute; + left: -49px; + top: 100%; + width: 318px; + z-index: 1; + padding-top: 8px; + display: none; } ` -export const refreshStatus = styled.span` - display: inline-block; - border-left: solid 1px var(--brave-palette-neutral200); - padding-left: 4px; - margin-left: 5px; +export const pendingBubble = styled.div` + position: relative; + background: var(--brave-palette-white); + box-shadow: 0px 0px 24px rgba(99, 105, 110, 0.26); + border-radius: 6px; + padding: 14px 20px; + font-weight: normal; + font-size: 14px; + line-height: 20px; + + &::before { + content: ''; + display: block; + position: absolute; + background: inherit; + width: 18px; + height: 18px; + left: 109px; + top: -8px; + transform: rotate(45deg); + } + + a { + color: var(--brave-color-brandBat); + font-weight: 600; + margin-left: 3px; + text-decoration: none; + + &:hover { + text-decoration: underline; + } + } + + .brave-theme-dark & { + background: var(--brave-palette-grey800); + + a { + color: var(--brave-palette-blurple400); + } + } +` + +export const pendingBubbleHeader = styled.div` + font-weight: 600; + color: var(--brave-palette-neutral900); + + .brave-theme-dark & { + color: var(--brave-palette-grey000); + } +` + +export const pendingBubbleText = styled.div` + margin-top: 3px; + color: var(--brave-palette-neutral600); + + .brave-theme-dark & { + color: var(--brave-palette-grey500); + } +` + +export const refreshStatus = styled.div` + padding-left: 10px; + padding-top: 4px; .icon { height: 13px; width: auto; - margin-bottom: 2px; - margin-left: 2px; + margin-left: 35px; + margin-top: 2px; color: var(--brave-color-brandBat); } button { ${mixins.buttonReset} color: var(--brave-color-brandBatInteracting); + font-weight: 600; cursor: pointer; &:hover { @@ -100,22 +203,6 @@ export const refreshStatus = styled.span` } ` -export const verified = styled.span` - .icon { - color: var(--brave-color-brandBatInteracting); - } -` - -export const unverified = styled.span` - .icon { - color: var(--brave-palette-grey200); - - .brave-theme-dark & { - color: #343A40; - } - } -` - export const attention = styled.div` font-size: 14px; line-height: 26px; @@ -192,8 +279,8 @@ export const tipAction = styled.div` line-height: 20px; cursor: pointer; - &:active { - background: var(--brave-palette-blurple400); + &:hover { + background: var(--brave-palette-blurple600); } } ` diff --git a/components/brave_rewards/resources/rewards_panel/components/publisher_card.tsx b/components/brave_rewards/resources/rewards_panel/components/publisher_card.tsx index b2a143dcb2bd..9823083a1974 100644 --- a/components/brave_rewards/resources/rewards_panel/components/publisher_card.tsx +++ b/components/brave_rewards/resources/rewards_panel/components/publisher_card.tsx @@ -8,6 +8,7 @@ import { LocaleContext, formatMessage } from '../../shared/lib/locale_context' import { getPublisherPlatformName } from '../../shared/lib/publisher_platform' import { HostContext, useHostListener } from '../lib/host_context' import { MonthlyTipAction } from '../lib/interfaces' +import { NewTabLink } from '../../shared/components/new_tab_link' import { ToggleButton } from './toggle_button' import { MonthlyTipView } from './monthly_tip_view' import { VerifiedIcon } from './icons/verified_icon' @@ -15,6 +16,8 @@ import { LoadingIcon } from './icons/loading_icon' import * as style from './publisher_card.style' +const pendingTipsURL = 'https://brave.com/faq/#unclaimed-funds' + export function PublisherCard () { const { getString } = React.useContext(LocaleContext) const host = React.useContext(HostContext) @@ -23,6 +26,8 @@ export function PublisherCard () { React.useState(host.state.publisherInfo) const [publisherRefreshing, setPublisherRefreshing] = React.useState(host.state.publisherRefreshing) + const [externalWallet, setExternalWallet] = + React.useState(host.state.externalWallet) const [settings, setSettings] = React.useState(host.state.settings) const [showPublisherLoading, setShowPublisherLoading] = React.useState(false) @@ -30,6 +35,7 @@ export function PublisherCard () { useHostListener(host, (state) => { setPublisherInfo(state.publisherInfo) setPublisherRefreshing(state.publisherRefreshing) + setExternalWallet(state.externalWallet) setSettings(host.state.settings) }) @@ -37,23 +43,63 @@ export function PublisherCard () { return null } - function renderStatusMessage () { + function renderPendingBubble () { if (!publisherInfo) { return null } - if (publisherInfo.registered) { - return ( - - {getString('verifiedCreator')} - - ) + const { supportedWalletProviders } = publisherInfo + + if (supportedWalletProviders.length > 0) { + if (!externalWallet) { + return null + } + if (supportedWalletProviders.includes(externalWallet.provider)) { + return null + } + } + + return ( + + + { + getString(publisherInfo.registered + ? 'pendingTipTitleRegistered' + : 'pendingTipTitle') + } + + + { + formatMessage(getString('pendingTipText'), { + tags: { + $1: content => ( + + {content} + + ) + } + }) + } + + + ) + } + + function renderStatusIndicator () { + if (!publisherInfo) { + return null } + const { registered } = publisherInfo + return ( - - {getString('unverifiedCreator')} - + + + {getString(registered ? 'verifiedCreator' : 'unverifiedCreator')} +
+ {renderPendingBubble()} +
+
) } @@ -99,7 +145,7 @@ export function PublisherCard () { {getPublisherName()} - {renderStatusMessage()} + {renderStatusIndicator()} { publisherRefreshing || showPublisherLoading diff --git a/components/brave_rewards/resources/rewards_panel/stories/locale_strings.ts b/components/brave_rewards/resources/rewards_panel/stories/locale_strings.ts index 02f51c56fb19..cf384d08f0c5 100644 --- a/components/brave_rewards/resources/rewards_panel/stories/locale_strings.ts +++ b/components/brave_rewards/resources/rewards_panel/stories/locale_strings.ts @@ -14,6 +14,9 @@ export const localeStrings = { unverifiedCreator: 'Unverified Creator', verifiedCreator: 'Verified Creator', refreshStatus: 'Refresh Status', + pendingTipText: 'Any tip you make will remain pending in your wallet and retry automatically for 90 days. $1Learn more$2', + pendingTipTitle: 'This creator is not signed up yet.', + pendingTipTitleRegistered: 'This creator is currently not configured to receive tips from your wallet.', platformPublisherTitle: '$1 on $2', attention: 'Attention', sendTip: 'Send Tip', diff --git a/components/brave_rewards/resources/shared/components/wallet_card/external_wallet_view.style.ts b/components/brave_rewards/resources/shared/components/wallet_card/external_wallet_view.style.ts index cf00b385b773..c916b7dd01c9 100644 --- a/components/brave_rewards/resources/shared/components/wallet_card/external_wallet_view.style.ts +++ b/components/brave_rewards/resources/shared/components/wallet_card/external_wallet_view.style.ts @@ -19,7 +19,7 @@ export const verifyWallet = styled.div` border: none; cursor: pointer; - &:active { + &:hover { background: rgba(255, 255, 255, 0.30); } } @@ -33,22 +33,6 @@ export const verifyWallet = styled.div` } ` -export const reconnectWallet = styled.div` - button.connect { - font-size: 12px; - line-height: 18px; - padding: 6px 10px; - } - - .icon { - height: 17px; - width: auto; - vertical-align: middle; - margin-right: 6px; - margin-bottom: 2px; - } -` - export const bubbleAction = styled.div` button { background: none; diff --git a/components/brave_rewards/resources/shared/components/wallet_card/wallet_card.style.ts b/components/brave_rewards/resources/shared/components/wallet_card/wallet_card.style.ts index 36b3b2851b26..ab73667c582d 100644 --- a/components/brave_rewards/resources/shared/components/wallet_card/wallet_card.style.ts +++ b/components/brave_rewards/resources/shared/components/wallet_card/wallet_card.style.ts @@ -97,7 +97,7 @@ export const addFunds = styled.div` button { background: rgba(255, 255, 255, 0.24); - &:active { + &:hover { background: rgba(255, 255, 255, 0.30); } } @@ -114,10 +114,6 @@ export const addFunds = styled.div` export const viewStatement = styled.div` button { padding: 6px 13px; - - &:active { - background: rgba(255, 255, 255, 0.05); - } } .icon {