From f81c208fcbe65cb0f329749f97cb313f5707445a Mon Sep 17 00:00:00 2001 From: Emerick Rogul Date: Mon, 5 Aug 2019 16:27:04 -0400 Subject: [PATCH] Incorporate review feedback --- .../adRowsDetails/__snapshots__/spec.tsx.snap | 8 ++--- src/features/rewards/adRowsDetails/style.ts | 18 +++++------ .../rewards/categoryLikePicker/style.ts | 4 +-- src/features/rewards/dropMenu/style.ts | 6 ++-- .../__snapshots__/spec.tsx.snap | 9 +++--- .../rewards/modalShowAdsHistory/index.tsx | 11 +++---- .../rewards/modalShowAdsHistory/style.ts | 31 +++++++------------ .../__snapshots__/spec.tsx.snap | 2 +- src/features/rewards/showAdsHistory/style.ts | 4 +-- .../rewards/tableAdsHistory/index.tsx | 4 ++- src/features/rewards/tableAdsHistory/style.ts | 2 +- src/features/rewards/thumbLikePicker/style.ts | 4 +-- stories/assets/locale.ts | 9 ++---- stories/features/rewards/modal.tsx | 1 + 14 files changed, 51 insertions(+), 62 deletions(-) diff --git a/src/features/rewards/adRowsDetails/__snapshots__/spec.tsx.snap b/src/features/rewards/adRowsDetails/__snapshots__/spec.tsx.snap index acb450e79..6b708d8f4 100644 --- a/src/features/rewards/adRowsDetails/__snapshots__/spec.tsx.snap +++ b/src/features/rewards/adRowsDetails/__snapshots__/spec.tsx.snap @@ -4,7 +4,7 @@ exports[`Ad Rows Details tests basic tests matches the snapshot 1`] = ` .c4 { font-family: Muli,sans-serif; font-size: 14px; - color: #686978; + color: #5e6175; display: inline-block; } @@ -25,8 +25,8 @@ exports[`Ad Rows Details tests basic tests matches the snapshot 1`] = ` } .c6 { - color: #DADCE8; - background-color: #DADCE8; + color: #c2c4cf; + background-color: #c2c4cf; height: 2px; border: none; } @@ -37,7 +37,7 @@ exports[`Ad Rows Details tests basic tests matches the snapshot 1`] = ` border: none; width: 16px; height: 16px; - color: #9E9FAB; + color: #c2c4cf; padding: 1px; outline: none; display: inline-block; diff --git a/src/features/rewards/adRowsDetails/style.ts b/src/features/rewards/adRowsDetails/style.ts index 4893a14fa..f49c932ee 100644 --- a/src/features/rewards/adRowsDetails/style.ts +++ b/src/features/rewards/adRowsDetails/style.ts @@ -5,9 +5,9 @@ import styled from 'styled-components' export const StyledDateText = styled<{}, 'div'>('div')` - font-family: Muli, sans-serif; + font-family: ${p => p.theme.fontFamily.body}; font-size: 14px; - color: #686978; + color: ${p => p.theme.color.text}; display: inline-block; ` export const StyledAdsDateRow = styled<{}, 'div'>('div')` @@ -27,8 +27,8 @@ export const StyledHRDiv = styled<{}, 'div'>('div')` ` export const StyledHR = styled<{}, 'hr'>('hr')` - color: #DADCE8; - background-color: #DADCE8; + color: ${p => p.theme.color.subtle}; + background-color: ${p => p.theme.color.subtle}; height: 2px; border: none; ` @@ -39,7 +39,7 @@ export const StyledCaratIcon = styled<{}, 'div'>('div')` border: none; width: 16px; height: 16px; - color: #9E9FAB; + color: ${p => p.theme.color.subtle}; padding: 1px; outline: none; display: inline-block; @@ -47,20 +47,20 @@ export const StyledCaratIcon = styled<{}, 'div'>('div')` ` export const StyledAdPortionTD = styled<{}, 'td'>('td')` - font-family: Muli, sans-serif; + font-family: ${p => p.theme.fontFamily.body}; font-size: 14px; font-weight: 500; - color: #686978; + color: ${p => p.theme.color.text}; border-bottom: none; padding: 5px 0; text-align: left; ` export const StyledInnerStartTD = styled<{}, 'td'>('td')` - font-family: Muli, sans-serif; + font-family: ${p => p.theme.fontFamily.body}; font-size: 14px; font-weight: 500; - color: #686978; + color: ${p => p.theme.color.text}; border-bottom: none; padding: 12px 0; text-align: left; diff --git a/src/features/rewards/categoryLikePicker/style.ts b/src/features/rewards/categoryLikePicker/style.ts index b5658ca25..10b47ff24 100644 --- a/src/features/rewards/categoryLikePicker/style.ts +++ b/src/features/rewards/categoryLikePicker/style.ts @@ -31,9 +31,9 @@ export const StyledCategoryActionOptoutButton = styled<{}, 'div'>('div')` ` export const StyledCategoryActionOptinFilledButton = styled(StyledCategoryActionOptinButton)` - color: red; + color: ${p => p.theme.palette.red500}; ` export const StyledCategoryActionOptoutFilledButton = styled(StyledCategoryActionOptoutButton)` - color: red; + color: ${p => p.theme.palette.red500}; ` diff --git a/src/features/rewards/dropMenu/style.ts b/src/features/rewards/dropMenu/style.ts index 067f2654d..5e05a15d4 100644 --- a/src/features/rewards/dropMenu/style.ts +++ b/src/features/rewards/dropMenu/style.ts @@ -10,9 +10,9 @@ export const StyledAdMenuDropContent = styled<{}, 'div'>('div')` box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; margin-top: -10px; - background-color: white; + background-color: ${p => p.theme.color.contextMenuBackground}; border: 1px solid; - border-color: #DADCE8; + border-color: ${p => p.theme.color.inputBorder}; border-radius: 5px; min-width: 200px; ` @@ -35,7 +35,7 @@ export const StyledAdMenuOptionDropContent = styled<{}, 'div'>('div')` margin-top: auto; cursor: pointer; &:hover { - background-color: #B0DBFF; + background-color: ${p => p.theme.color.brandBraveLight}; } ` diff --git a/src/features/rewards/modalShowAdsHistory/__snapshots__/spec.tsx.snap b/src/features/rewards/modalShowAdsHistory/__snapshots__/spec.tsx.snap index e205bdfea..8b7a944d4 100644 --- a/src/features/rewards/modalShowAdsHistory/__snapshots__/spec.tsx.snap +++ b/src/features/rewards/modalShowAdsHistory/__snapshots__/spec.tsx.snap @@ -10,7 +10,7 @@ exports[`ModalShowAdsHistory tests basic tests matches the snapshot 1`] = ` .c6 { font-size: 22px; font-weight: 600; - color: rgb(193,45,124); + color: #a3278f; margin-bottom: 10px; line-height: 1.3; } @@ -24,7 +24,8 @@ exports[`ModalShowAdsHistory tests basic tests matches the snapshot 1`] = ` .c10 { font-size: 18px; - color: rgb(193,45,124); + color: #a3278f; + margin-right: 5px; } .c9 { @@ -33,7 +34,7 @@ exports[`ModalShowAdsHistory tests basic tests matches the snapshot 1`] = ` .c11 { font-size: 18px; - color: rgb(193,45,124); + color: #a3278f; font-weight: 600; } @@ -162,7 +163,7 @@ exports[`ModalShowAdsHistory tests basic tests matches the snapshot 1`] = ` - 0MISSING: adsPerHourPlural + 0 diff --git a/src/features/rewards/modalShowAdsHistory/index.tsx b/src/features/rewards/modalShowAdsHistory/index.tsx index df2c79ba0..45ec36357 100644 --- a/src/features/rewards/modalShowAdsHistory/index.tsx +++ b/src/features/rewards/modalShowAdsHistory/index.tsx @@ -28,9 +28,8 @@ export interface Props { rows?: DetailRow[] onClose?: () => void id?: string - isMobile?: boolean adsPerHour?: number - adsPerDay?: number + totalDays?: number hasSavedEntries?: boolean onSavedFilterClick?: () => void onAllFilterClick?: () => void @@ -88,16 +87,16 @@ export default class ModalShowAdsHistory extends React.PureComponent + {getLocale('adsHistoryTitle')} - {getLocale('adsHistorySubTitle')} + {getLocale('adsHistorySubTitle', { totalDays: totalDays || '0' })} @@ -105,7 +104,7 @@ export default class ModalShowAdsHistory extends React.PureComponent - {(adsPerHour || '0') + (adsPerHour !== 1 ? getLocale('adsPerHourPlural') : getLocale('adsPerHourSingular'))} + {adsPerHour || '0'} { diff --git a/src/features/rewards/modalShowAdsHistory/style.ts b/src/features/rewards/modalShowAdsHistory/style.ts index cef8496a8..211252279 100644 --- a/src/features/rewards/modalShowAdsHistory/style.ts +++ b/src/features/rewards/modalShowAdsHistory/style.ts @@ -6,7 +6,7 @@ import styled from 'styled-components' export const StyledWrapper = styled<{}, 'div'>('div')` - font-family: Poppins, sans-serif; + font-family: ${p => p.theme.fontFamily.heading}; padding-top: 10px; white-space: nowrap; ` @@ -14,14 +14,14 @@ export const StyledWrapper = styled<{}, 'div'>('div')` export const StyledLink = styled<{}, 'a'>('a')` cursor: pointer; display: inline-block; - color: #CED0DB; + color: ${p => p.theme.palette.grey300}; font-size: 16px; letter-spacing: 0; ` export const StyledNotSelectedLink = styled<{}, 'span'>('span')` display: inline-block; - color: #696FDC; + color: ${p => p.theme.color.brandBat}; font-size: 16px; letter-spacing: 0; ` @@ -30,34 +30,24 @@ export const StyledText = styled<{}, 'span'>('span')` font-size: 16px; letter-spacing: 0; display: inline-block; - color: #C2C4CF; + color: ${p => p.theme.color.text}; margin: 0 10px 0; ` export const StyledAdsHistoryTitle = styled<{}, 'div'>('div')` font-size: 22px; font-weight: 600; - color: rgb(193, 45, 124); + color: ${p => p.theme.palette.magenta600}; margin-bottom: 10px; line-height: 1.3; ` -export const StyledNote = styled<{}, 'div'>('div')` - max-width: 508px; - font-family: Muli,sans-serif; - font-size: 12px; - font-weight: 300; - margin-bottom: 10px; - line-height: 1.5; - color: #686978; -` - export const StyledSeparatorText = styled<{}, 'span'>('span')` font-size: 16px; font-weight: 200; letter-spacing: 0; display: inline-block; - color: #C2C4CF + color: ${p => p.theme.color.text}; ` export const StyledSubTitleText = styled<{}, 'div'>('div')` @@ -69,7 +59,8 @@ export const StyledSubTitleText = styled<{}, 'div'>('div')` export const StyledAdsInfoText = styled<{}, 'span'>('span')` font-size: 18px; - color: rgb(193, 45, 124); + color: ${p => p.theme.palette.magenta600}; + margin-right: 5px; ` export const StyledAdsInfoTextWrapper = styled<{}, 'div'>('div')` @@ -78,7 +69,7 @@ export const StyledAdsInfoTextWrapper = styled<{}, 'div'>('div')` export const StyledAdsPerHourText = styled<{}, 'span'>('span')` font-size: 18px; - color: rgb(193, 45, 124); + color: ${p => p.theme.palette.magenta600}; font-weight: 600; ` @@ -105,14 +96,14 @@ export const StyledThumbDownFilter = styled<{}, 'div'>('div')` padding: 4px; padding-top: 0px; cursor: pointer; - color: CED0DB; + color: ${p => p.theme.color.subtle}; ` export const StyledThumbDownNotSelectedFilter = styled<{}, 'div'>('div')` display: inline-block; width: 32px; height: 32px; - color: #696FDC; + color: ${p => p.theme.color.brandBat}; padding: 4px; padding-top: 0px; ` diff --git a/src/features/rewards/showAdsHistory/__snapshots__/spec.tsx.snap b/src/features/rewards/showAdsHistory/__snapshots__/spec.tsx.snap index 04cce803d..0e394efbb 100644 --- a/src/features/rewards/showAdsHistory/__snapshots__/spec.tsx.snap +++ b/src/features/rewards/showAdsHistory/__snapshots__/spec.tsx.snap @@ -8,7 +8,7 @@ exports[`ShowAdsHistory tests basic tests matches the snapshot 1`] = ` .c1 { display: inline-block; - color: #CED0DB; + color: #ced0db; cursor: pointer; font-size: 13px; font-weight: normal; diff --git a/src/features/rewards/showAdsHistory/style.ts b/src/features/rewards/showAdsHistory/style.ts index 137fda79d..2874ae45b 100644 --- a/src/features/rewards/showAdsHistory/style.ts +++ b/src/features/rewards/showAdsHistory/style.ts @@ -13,7 +13,7 @@ export const StyledWrapper = styled<{}, 'div'>('div')` export const StyledLink = styled<{}, 'a'>('a')` cursor: pointer; display: inline-block; - color: #696FDC; + color: ${p => p.theme.color.subtleActive}; font-size: 13px; font-weight: normal; letter-spacing: 0; @@ -21,7 +21,7 @@ export const StyledLink = styled<{}, 'a'>('a')` export const StyledDisabledLink = styled<{}, 'span'>('span')` display: inline-block; - color: #CED0DB; + color: ${p => p.theme.color.disabled}; cursor: pointer; font-size: 13px; font-weight: normal; diff --git a/src/features/rewards/tableAdsHistory/index.tsx b/src/features/rewards/tableAdsHistory/index.tsx index d60a8be5e..dacd51368 100644 --- a/src/features/rewards/tableAdsHistory/index.tsx +++ b/src/features/rewards/tableAdsHistory/index.tsx @@ -38,6 +38,8 @@ export interface DetailRow { adDetailRows: AdDetailRow[] } +export type AdAction = 'click' | 'dismiss' | 'view' | 'landed' + interface AdContent { brand: string brandInfo: string @@ -45,7 +47,7 @@ interface AdContent { brandUrl: string brandDisplayUrl: string likeAction: number - adAction: 'click' | 'dismiss' | 'view' | 'landed' + adAction: AdAction savedAd: boolean flaggedAd: boolean logoUrl?: string diff --git a/src/features/rewards/tableAdsHistory/style.ts b/src/features/rewards/tableAdsHistory/style.ts index 486305786..06d6a2a06 100644 --- a/src/features/rewards/tableAdsHistory/style.ts +++ b/src/features/rewards/tableAdsHistory/style.ts @@ -68,7 +68,7 @@ export const StyledAdContentDiv = styled<{}, 'div'>('div')` border: 1px solid; border-collapse: separate; border-radius: 5px; - border-color: ${p => p.theme.color.subtle}; + border-color: ${p => p.theme.color.subtle}; padding: 10px; display: inline-flex; align-items: center; diff --git a/src/features/rewards/thumbLikePicker/style.ts b/src/features/rewards/thumbLikePicker/style.ts index c7130e08f..6e4b9adff 100644 --- a/src/features/rewards/thumbLikePicker/style.ts +++ b/src/features/rewards/thumbLikePicker/style.ts @@ -13,7 +13,7 @@ export const StyledAdStatThumbUpIcon = styled<{}, 'div'>('div')` ` export const StyledAdStatThumbUpFilledIcon = styled(StyledAdStatThumbUpIcon)` - color: red; + color: ${p => p.theme.palette.red500}; ` export const StyledAdStatThumbDownIcon = styled<{}, 'div'>('div')` @@ -26,5 +26,5 @@ export const StyledAdStatThumbDownIcon = styled<{}, 'div'>('div')` ` export const StyledAdStatThumbDownFilledIcon = styled(StyledAdStatThumbDownIcon)` - color: red; + color: ${p => p.theme.palette.red500}; ` diff --git a/stories/assets/locale.ts b/stories/assets/locale.ts index 3d98950db..e220d200f 100644 --- a/stories/assets/locale.ts +++ b/stories/assets/locale.ts @@ -14,18 +14,13 @@ const locale: Record = { addFundsText: 'Be sure to use the address below that matches the type of cryto you own. It will be converted automatically to BAT by Uphold and appear as an increased balance in your Brave Rewards wallet. Please allow up to one hour for your wallet balance to update.', addFundsTitle: 'Send cryptocurrency from your external account to your Brave Rewards wallet.', ads: 'Ads', - adsCurrentlyViewing: 'Your setting: maximum ', + adsCurrentlyViewing: 'Your setting: maximum ads per hour: ', adsEarnings: 'earned from ads', adsHistoryFilterAll: 'All', adsHistoryFilterSaved: 'Saved', - adsHistorySubTitle: 'Ads you\'ve received in the past 7 days', + adsHistorySubTitle: 'Ads you\'ve received in the past {{totalDays}} days', adsHistoryTitle: 'Ads History', adsNotSupported: 'Sorry! Ads are not yet available in your region.', - adsPerDayPlural: ' ads per day', - adsPerDaySingular: ' ad per day', - adsPerHourContinuation: ', total ', - adsPerHourPlural: ' ads per hour', - adsPerHourSingular: ' ad per hour', all: 'All', allowTip: 'Allow tips on', amount: 'Amount', diff --git a/stories/features/rewards/modal.tsx b/stories/features/rewards/modal.tsx index 6e2feb50f..2a92f4d72 100644 --- a/stories/features/rewards/modal.tsx +++ b/stories/features/rewards/modal.tsx @@ -710,6 +710,7 @@ storiesOf('Feature Components/Rewards/Modal', module) rows={rows} adsPerHour={adsPerHour} hasSavedEntries={true} + totalDays={7} /> ) })