diff --git a/browser/ui/webui/brave_webui_source.cc b/browser/ui/webui/brave_webui_source.cc index 31cabb7a95c5..ee9de0d5de03 100644 --- a/browser/ui/webui/brave_webui_source.cc +++ b/browser/ui/webui/brave_webui_source.cc @@ -1019,6 +1019,7 @@ void CustomizeWebUIHTMLSource(const std::string &name, { "sorryToSeeYouGo", IDS_BRAVE_REWARDS_TIP_SORRY_TO_SEE_YOU_GO }, { "supportThisCreator", IDS_BRAVE_REWARDS_TIP_SUPPORT_THIS_CREATOR }, { "thanksForTheSupport", IDS_BRAVE_REWARDS_TIP_THANKS_FOR_THE_SUPPORT }, // NOLINT + { "tipDelayNote", IDS_BRAVE_REWARDS_TIP_DELAY_NOTE }, { "tipHasBeenSent", IDS_BRAVE_REWARDS_TIP_TIP_HAS_BEEN_SET }, { "tipPostSubtitle", IDS_BRAVE_REWARDS_TIP_TIP_POST_SUBTITLE }, { "tokens", IDS_BRAVE_UI_TOKENS }, diff --git a/components/brave_rewards/resources/tip/components/tip_complete.style.ts b/components/brave_rewards/resources/tip/components/tip_complete.style.ts index be22fb431e5b..b6bbfdd3b8b5 100644 --- a/components/brave_rewards/resources/tip/components/tip_complete.style.ts +++ b/components/brave_rewards/resources/tip/components/tip_complete.style.ts @@ -45,8 +45,21 @@ export const message = styled.div` color: var(--brave-palette-neutral900); ` +export const note = styled.span` + font-size: 11px; + line-height: 17px; + font-weight: 400; + padding: 6px; + background-color: var(--brave-palette-neutral000); + border-radius: 4px; + + strong { + font-weight: 600; + } +` export const table = styled.div` margin-top: 17px; + margin-bottom: 23px; text-align: left; font-size: 14px; line-height: 21px; diff --git a/components/brave_rewards/resources/tip/components/tip_complete.tsx b/components/brave_rewards/resources/tip/components/tip_complete.tsx index 0c6539907712..1856ebc2b1f8 100644 --- a/components/brave_rewards/resources/tip/components/tip_complete.tsx +++ b/components/brave_rewards/resources/tip/components/tip_complete.tsx @@ -8,7 +8,7 @@ import { TwitterColorIcon } from 'brave-ui/components/icons' import { TipKind } from '../lib/interfaces' import { HostContext } from '../lib/host_context' -import { LocaleContext } from '../../shared/lib/locale_context' +import { formatMessage, LocaleContext } from '../../shared/lib/locale_context' import { TokenAmount } from '../../shared/components/token_amount' @@ -108,6 +108,17 @@ export function TipComplete (props: Props) { {getSummaryTable()} + + { + formatMessage(getString('tipDelayNote'), { + tags: { + $1: (content) => ( + {content} + ) + } + }) + } +