Incorporate review feedback

brave · Aug 7, 2019 · f81c208 · f81c208
1 parent 8b53f6b
commit f81c208
Show file tree

Hide file tree

Showing 14 changed files with 51 additions and 62 deletions.
diff --git 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
@@ -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,28 +39,28 @@ 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;
   text-align: center;
 `
 
 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
@@ -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
@@ -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
@@ -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`] = `
             <span
               className="c11"
             >
-              0MISSING: adsPerHourPlural
+              0
             </span>
           </div>
         </div>

diff --git 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,24 +87,24 @@ export default class ModalShowAdsHistory extends React.PureComponent<Props, Stat
   }
 
   render () {
-    const { id, onClose, isMobile, adsPerHour, hasSavedEntries, rows } = this.props
+    const { id, onClose, adsPerHour, hasSavedEntries, rows, totalDays } = this.props
 
     return (
-      <Modal id={id} onClose={onClose} isMobile={isMobile} testId={'show-ads-history-modal'}>
+      <Modal id={id} onClose={onClose} testId={'show-ads-history-modal'}>
         <StyledWrapper>
           <StyledAdsHistoryTitle>
             {getLocale('adsHistoryTitle')}
           </StyledAdsHistoryTitle>
           <StyledSubTitleText>
-            {getLocale('adsHistorySubTitle')}
+            {getLocale('adsHistorySubTitle', { totalDays: totalDays || '0' })}
           </StyledSubTitleText>
           <StyledAdsHeaderWrapper>
             <StyledAdsInfoTextWrapper>
               <StyledAdsInfoText>
                 {getLocale('adsCurrentlyViewing')}
               </StyledAdsInfoText>
               <StyledAdsPerHourText>
-                {(adsPerHour || '0') + (adsPerHour !== 1 ? getLocale('adsPerHourPlural') : getLocale('adsPerHourSingular'))}
+                {adsPerHour || '0'}
               </StyledAdsPerHourText>
             </StyledAdsInfoTextWrapper>
               {

diff --git a/src/features/rewards/modalShowAdsHistory/style.ts b/src/features/rewards/modalShowAdsHistory/style.ts
@@ -6,22 +6,22 @@
 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;
 `
 
 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
@@ -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
@@ -13,15 +13,15 @@ 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;
 `
 
 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
@@ -38,14 +38,16 @@ export interface DetailRow {
   adDetailRows: AdDetailRow[]
 }
 
+export type AdAction = 'click' | 'dismiss' | 'view' | 'landed'
+
 interface AdContent {
   brand: string
   brandInfo: string
   brandLogo: string
   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
@@ -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
@@ -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
@@ -14,18 +14,13 @@ const locale: Record<string, string> = {
   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
@@ -710,6 +710,7 @@ storiesOf('Feature Components/Rewards/Modal', module)
         rows={rows}
         adsPerHour={adsPerHour}
         hasSavedEntries={true}
+        totalDays={7}
       />
     )
   })