From a22753c4350477d32c919c3495548dcd347ecf14 Mon Sep 17 00:00:00 2001 From: NejcZdovc Date: Mon, 7 Jan 2019 07:16:10 +0100 Subject: [PATCH 1/3] Adds reserved amount to wallet summary --- src/features/rewards/walletSummary/index.tsx | 20 +++++++++++++++++-- src/features/rewards/walletSummary/style.ts | 21 ++++++++++++++++++++ stories/assets/locale.ts | 2 ++ stories/features/rewards/wallet.tsx | 4 +++- 4 files changed, 44 insertions(+), 3 deletions(-) diff --git a/src/features/rewards/walletSummary/index.tsx b/src/features/rewards/walletSummary/index.tsx index bf91d469e..e948f2556 100644 --- a/src/features/rewards/walletSummary/index.tsx +++ b/src/features/rewards/walletSummary/index.tsx @@ -11,7 +11,9 @@ import { StyledActivity, StyledActivityIcon, StyledNoActivity, - StyledNoActivityWrapper + StyledNoActivityWrapper, + StyledReservedWrapper, + StyledReservedLink } from './style' import ListToken from '../listToken' import { Type } from '../tokens' @@ -36,6 +38,8 @@ export interface Props { } id?: string compact?: boolean + reservedAmount?: number + reservedMoreLink?: string } export default class WalletSummary extends React.PureComponent { @@ -117,7 +121,9 @@ export default class WalletSummary extends React.PureComponent { const { id, onActivity, - compact + compact, + reservedAmount, + reservedMoreLink } = this.props const date = new Date() const month = getLocale(`month${date.toLocaleString('en-us', { month: 'short' })}`) @@ -133,6 +139,16 @@ export default class WalletSummary extends React.PureComponent { {month} {year}
{this.generateList()} + { + reservedAmount && reservedAmount > 0 + ? + {getLocale('reservedAmountText', { reservedAmount })} + + {getLocale('reservedMoreLink')} + + + : null + }
{ onActivity diff --git a/src/features/rewards/walletSummary/style.ts b/src/features/rewards/walletSummary/style.ts index 052229f68..edd998d0d 100644 --- a/src/features/rewards/walletSummary/style.ts +++ b/src/features/rewards/walletSummary/style.ts @@ -73,3 +73,24 @@ export const StyledNoActivity = styled<{}, 'span'>('span')` color: #B8B9C4; font-size: 18px; ` + +export const StyledReservedWrapper = styled<{}, 'div'>('div')` + background: rgba(0, 0, 0, 0.04); + color: #676283; + font-size: 12px; + font-family: ${p => p.theme.fontFamily.body}; + font-weight: normal; + letter-spacing: 0; + line-height: 16px; + padding: 10px 12px; + border-radius: 4px; + margin: 20px 0 10px; +` + +export const StyledReservedLink = styled('a')` + color: #0089FF; + font-weight: bold; + text-decoration: none; + display: inline-block; + margin-left: 4px; +` diff --git a/stories/assets/locale.ts b/stories/assets/locale.ts index d39f95b4f..d7f8d4026 100644 --- a/stories/assets/locale.ts +++ b/stories/assets/locale.ts @@ -123,6 +123,8 @@ const locale: Record = { recurringDonation: 'Recurring Donation', recurringDonations: 'Monthly Tips', remove: 'remove', + reservedAmountText: 'You’ve designated {{reservedAmount}} BAT for creators who haven’t yet signed up to receive contributions. We’ll keep trying to contribute until they verify, or until 90 days have passed.', + reservedMoreLink: 'Learn more.', restore: 'Restore', restoreAll: 'Restore All', reviewSitesMsg: 'Your pinned sites have been moved to', diff --git a/stories/features/rewards/wallet.tsx b/stories/features/rewards/wallet.tsx index 0dfaaad61..5db9bbff8 100644 --- a/stories/features/rewards/wallet.tsx +++ b/stories/features/rewards/wallet.tsx @@ -4,7 +4,7 @@ import * as React from 'react' import { storiesOf } from '@storybook/react' -import { withKnobs, object, select, text, boolean } from '@storybook/addon-knobs' +import { withKnobs, object, select, text, boolean, number } from '@storybook/addon-knobs' // @ts-ignore import centered from '@storybook/addon-centered/dist' @@ -93,6 +93,8 @@ storiesOf('Feature Components/Rewards/Wallet/Desktop', module) tips: object('Tips', { tokens: '19.0', converted: '5.25' }) }} onActivity={doNothing} + reservedAmount={number('Reserved amount', 52)} + reservedMoreLink={'https://brave.com'} /> ) From f1371ee34a33f8f72e7ebae4cc4dd03883c8f790 Mon Sep 17 00:00:00 2001 From: NejcZdovc Date: Tue, 8 Jan 2019 22:55:43 +0100 Subject: [PATCH 2/3] Removes change settings button --- src/features/rewards/walletPanel/index.tsx | 14 ++------------ src/features/rewards/walletPanel/style.ts | 10 ---------- stories/assets/locale.ts | 1 - stories/features/rewards/wallet.tsx | 1 - 4 files changed, 2 insertions(+), 24 deletions(-) diff --git a/src/features/rewards/walletPanel/index.tsx b/src/features/rewards/walletPanel/index.tsx index 94414297e..798d90c17 100644 --- a/src/features/rewards/walletPanel/index.tsx +++ b/src/features/rewards/walletPanel/index.tsx @@ -23,8 +23,7 @@ import { StyledColumn, StyleToggleTips, StyledNoticeWrapper, - StyledNoticeLink, - StyledChangeButton + StyledNoticeLink } from './style' // Components @@ -59,9 +58,7 @@ export interface Props { onAmountChange: () => void onIncludeInAuto: () => void showUnVerified?: boolean - showChangeSetting?: boolean moreLink?: string - onChangeSetting?: () => void } export default class WalletPanel extends React.PureComponent { @@ -167,9 +164,7 @@ export default class WalletPanel extends React.PureComponent { toggleTips, showUnVerified, isVerified, - moreLink, - showChangeSetting, - onChangeSetting + moreLink } = this.props return ( @@ -181,11 +176,6 @@ export default class WalletPanel extends React.PureComponent { ? {getLocale('unVerifiedText')} {getLocale('unVerifiedTextMore')} - { - showChangeSetting - ? {getLocale('changeSettingsButton')} - : null - } : null } diff --git a/src/features/rewards/walletPanel/style.ts b/src/features/rewards/walletPanel/style.ts index 899763bc1..fd57312a3 100644 --- a/src/features/rewards/walletPanel/style.ts +++ b/src/features/rewards/walletPanel/style.ts @@ -100,13 +100,3 @@ export const StyledNoticeLink = styled('a')` display: inline-block; margin-left: 4px; ` - -export const StyledChangeButton = styled('button')` - font-family: ${p => p.theme.fontFamily.body}; - font-weight: bold; - background: none; - border: none; - padding: 0; - margin-top: 2px; - cursor: pointer; -` diff --git a/stories/assets/locale.ts b/stories/assets/locale.ts index d7f8d4026..57a1a0705 100644 --- a/stories/assets/locale.ts +++ b/stories/assets/locale.ts @@ -36,7 +36,6 @@ const locale: Record = { captchaMissedTarget: 'Hmm… Not Quite. Try Again.', claim: 'Claim', closeBalance: 'Closing Balance', - changeSettingsButton: 'Change Auto-Contribute settings', contribute: 'Contribute', contributeAllocation: 'Auto-Contribute Allocation', contributeTooltip: 'Auto-Contribute Settings', diff --git a/stories/features/rewards/wallet.tsx b/stories/features/rewards/wallet.tsx index 5db9bbff8..c2912357e 100644 --- a/stories/features/rewards/wallet.tsx +++ b/stories/features/rewards/wallet.tsx @@ -137,7 +137,6 @@ storiesOf('Feature Components/Rewards/Wallet/Desktop', module) onAmountChange={doNothing} onIncludeInAuto={doNothing} showUnVerified={boolean('Show unverified content', true)} - showChangeSetting={boolean('Show change setting', true)} /> ) From 0388c48515bb915bf73680692935007fbf4acc9e Mon Sep 17 00:00:00 2001 From: NejcZdovc Date: Tue, 8 Jan 2019 23:04:03 +0100 Subject: [PATCH 3/3] Increase panel height Fixes learn more spacing --- src/features/rewards/walletPanel/index.tsx | 3 +-- src/features/rewards/walletPanel/style.ts | 4 ++-- src/features/rewards/walletSummary/index.tsx | 3 +-- src/features/rewards/walletSummary/style.ts | 4 ++-- .../rewards/walletWrapper/__snapshots__/spec.tsx.snap | 2 +- src/features/rewards/walletWrapper/style.ts | 2 +- 6 files changed, 8 insertions(+), 10 deletions(-) diff --git a/src/features/rewards/walletPanel/index.tsx b/src/features/rewards/walletPanel/index.tsx index 798d90c17..4c06a897b 100644 --- a/src/features/rewards/walletPanel/index.tsx +++ b/src/features/rewards/walletPanel/index.tsx @@ -174,8 +174,7 @@ export default class WalletPanel extends React.PureComponent { { !isVerified && showUnVerified ? - {getLocale('unVerifiedText')} - {getLocale('unVerifiedTextMore')} + {getLocale('unVerifiedText')} {getLocale('unVerifiedTextMore')} : null } diff --git a/src/features/rewards/walletPanel/style.ts b/src/features/rewards/walletPanel/style.ts index fd57312a3..5858712b7 100644 --- a/src/features/rewards/walletPanel/style.ts +++ b/src/features/rewards/walletPanel/style.ts @@ -3,6 +3,7 @@ * You can obtain one at http://mozilla.org/MPL/2.0/. */ import styled from 'styled-components' +import palette from '../../../theme/palette' interface StyleProps { size?: string @@ -94,9 +95,8 @@ export const StyledNoticeWrapper = styled('div')` ` export const StyledNoticeLink = styled('a')` - color: #0089FF; + color: ${palette.blue400}; font-weight: bold; text-decoration: none; display: inline-block; - margin-left: 4px; ` diff --git a/src/features/rewards/walletSummary/index.tsx b/src/features/rewards/walletSummary/index.tsx index e948f2556..f89e96232 100644 --- a/src/features/rewards/walletSummary/index.tsx +++ b/src/features/rewards/walletSummary/index.tsx @@ -142,8 +142,7 @@ export default class WalletSummary extends React.PureComponent { { reservedAmount && reservedAmount > 0 ? - {getLocale('reservedAmountText', { reservedAmount })} - + {getLocale('reservedAmountText', { reservedAmount })} {getLocale('reservedMoreLink')} diff --git a/src/features/rewards/walletSummary/style.ts b/src/features/rewards/walletSummary/style.ts index edd998d0d..f31da371e 100644 --- a/src/features/rewards/walletSummary/style.ts +++ b/src/features/rewards/walletSummary/style.ts @@ -3,6 +3,7 @@ * You can obtain one at http://mozilla.org/MPL/2.0/. */ import styled from 'styled-components' +import palette from '../../../theme/palette' interface StyleProps { compact?: boolean @@ -88,9 +89,8 @@ export const StyledReservedWrapper = styled<{}, 'div'>('div')` ` export const StyledReservedLink = styled('a')` - color: #0089FF; + color: ${palette.blue400}; font-weight: bold; text-decoration: none; display: inline-block; - margin-left: 4px; ` diff --git a/src/features/rewards/walletWrapper/__snapshots__/spec.tsx.snap b/src/features/rewards/walletWrapper/__snapshots__/spec.tsx.snap index 7e967392c..84288e85f 100644 --- a/src/features/rewards/walletWrapper/__snapshots__/spec.tsx.snap +++ b/src/features/rewards/walletWrapper/__snapshots__/spec.tsx.snap @@ -57,7 +57,7 @@ exports[`WalletWrapper tests basic tests matches the snapshot 1`] = ` -webkit-flex: 1; -ms-flex: 1; flex: 1; - height: 361px; + height: 381px; } .c6 { diff --git a/src/features/rewards/walletWrapper/style.ts b/src/features/rewards/walletWrapper/style.ts index d00327a3b..949a7c17b 100644 --- a/src/features/rewards/walletWrapper/style.ts +++ b/src/features/rewards/walletWrapper/style.ts @@ -78,7 +78,7 @@ export const StyledContent = styled('div')` position: relative; background: #f9fbfc; flex: 1; - height: 361px; + height: 381px; ` export const StyledAction = styled<{}, 'button'>('button')`