Merge pull request #343 from brave/ads-disabled-color

Updating disabled text, text color, and icon for ads

Author: ryanml

src/features/rewards/disabledContent/__snapshots__/spec.tsx.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Disabled Content tests basic tests matches the snapshot 1`] = `
-.c3 {
+.c4 {
   font-family: Poppins,sans-serif;
   font-size: 16px;
   font-weight: 500;
@@ -11,13 +11,13 @@ exports[`Disabled Content tests basic tests matches the snapshot 1`] = `
   color: var(--disabled-content-color);
 }
 
-.c3 b,
-.c3 a {
+.c4 b,
+.c4 a {
   color: var(--disabled-content-bold);
   font-weight: 500;
 }
 
-.c3 h3 {
+.c4 h3 {
   margin: 0;
   display: inline-block;
   padding: 0;
@@ -47,7 +47,7 @@ exports[`Disabled Content tests basic tests matches the snapshot 1`] = `
   justify-content: flex-end;
 }
 
-.c2 {
+.c3 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -62,6 +62,10 @@ exports[`Disabled Content tests basic tests matches the snapshot 1`] = `
   grid-column: span 2;
 }
 
+.c2 {
+  width: 110px;
+}
+
 <div
   id="disabled"
 >
@@ -71,13 +75,15 @@ exports[`Disabled Content tests basic tests matches the snapshot 1`] = `
     <div
       className="c1"
     >
-      <img />
+      <div
+        className="c2"
+      />
     </div>
     <div
-      className="c2"
+      className="c3"
     >
       <div
-        className="c3"
+        className="c4"
       />
     </div>
   </div>

src/features/rewards/disabledContent/index.tsx

@@ -7,27 +7,54 @@ import {
   StyledContent,
   StyledGrid,
   StyledOneColumn,
-  StyledTwoColumn
+  StyledTwoColumn,
+  StyledIcon
 } from './style'
+import {
+  AdsMegaphoneIcon,
+  RewardsActivateIcon,
+  RewardsSendTipsIcon
+} from '../../../components/icons'
 
 export type Type = 'ads' | 'contribute' | 'donation'
 
 export interface Props {
   children: React.ReactNode
   id?: string
-  image?: string
   type?: Type
 }
 
 export default class DisabledContent extends React.PureComponent<Props, {}> {
+  getIcon = (type?: Type) => {
+    let icon = null
+
+    switch (type) {
+      case 'ads':
+        icon = <AdsMegaphoneIcon />
+        break
+      case 'contribute':
+        icon = <RewardsActivateIcon />
+        break
+      case 'donation':
+        icon = <RewardsSendTipsIcon />
+        break
+    }
+
+    return (
+      <StyledIcon>
+        {icon}
+      </StyledIcon>
+    )
+  }
+
   render () {
-    const { id, image, children, type } = this.props
+    const { id, children, type } = this.props
 
     return (
       <div id={id}>
         <StyledGrid>
           <StyledOneColumn>
-            <img src={image} />
+            {this.getIcon(type)}
           </StyledOneColumn>
           <StyledTwoColumn>
             <StyledContent type={type}>

src/features/rewards/disabledContent/style.ts

@@ -11,7 +11,7 @@ const getColors = (p: Props) => {
 
   switch (p.type) {
     case 'ads':
-      color = '#ceb4e1'
+      color = '#d666a2'
       boldColor = '#b490cf'
       break
     case 'contribute':
@@ -75,3 +75,7 @@ export const StyledTwoColumn = styled<{}, 'div'>('div')`
   flex-direction: column;
   grid-column: span 2;
 `
+
+export const StyledIcon = styled<{}, 'div'>('div')`
+  width: 110px;
+`

stories/assets/img/rewards_ads.svg

@@ -33,7 +33,6 @@ import {
 import { BatColorIcon, SettingsIcon, UpholdColorIcon } from '../../../src/components/icons'
 import GrantClaim from '../../../src/features/rewards/grantClaim'
 
-const donate = require('../../assets/img/rewards_donate.svg')
 const bart = require('../../assets/img/bartBaker.jpeg')
 const tipScreen = require('../../assets/img/tip_site.jpg')
 const siteBgLogo = require('../../assets/img/ddgo_siteBanner.svg')
@@ -83,8 +82,7 @@ storiesOf('Feature Components/Rewards/Other/Desktop', module)
   .add('Disabled content',() => {
     return (
       <DisabledContent
-        image={donate}
-        type={'donation'}
+        type={select('Type', { contribute: 'contribute', donation: 'donation', ads: 'ads' }, 'donation')}
       >
         • Donate on the spot as you find gems. <br/>
         • <b>Enable Tips </b> on Twitter, YouTube, and more, to give tips to posts you ‘Like’.

stories/assets/img/rewards_contribute.svg

@@ -10,17 +10,14 @@ import { DisabledContent, Box } from '../../../../src/features/rewards'
 // Utils
 import locale from './fakeLocale'
 
-// Assets
-const adsImg = require('../../../assets/img/rewards_ads.svg')
-
 class AdsBox extends React.Component {
   adsDisabled () {
     return (
       <DisabledContent
-        image={adsImg}
         type={'ads'}
       >
-        <h3>{locale.adsDisabledText}</h3>
+        • {locale.adsDisabledTextOne} <br />
+        • {locale.adsDisabledTextTwo}
       </DisabledContent>
     )
   }

stories/features/rewards/other.tsx

@@ -23,7 +23,6 @@ import locale from './fakeLocale'
 // Assets
 const bartBaker = require('../../../assets/img/bartBaker.jpeg')
 const buzz = require('../../../assets/img/buzz.jpg')
-const contributeImg = require('../../../assets/img/rewards_contribute.svg')
 const ddgo = require('../../../assets/img/ddgo.jpg')
 const guardian = require('../../../assets/img/guardian.jpg')
 const wiki = require('../../../assets/img/wiki.jpg')
@@ -152,7 +151,6 @@ class ContributeBox extends React.Component<{}, State> {
   contributeDisabled () {
     return (
       <DisabledContent
-        image={contributeImg}
         type={'contribute'}
       >
         • Pay directly for the content you love. <br/>

stories/features/rewards/settings/adsBox.tsx

@@ -4,7 +4,8 @@
 
 const locale = {
   adsDesc: 'Earn tokens by seeing ads on Brave. Ads are matched from machine learning and the data temporarily present in your browser without tracking your information or sending it outside.',
-  adsDisabledText: 'Coming soon',
+  adsDisabledTextOne: 'Earnings are paid every month.',
+  adsDisabledTextTwo: 'Set your desired frequency to increase or decrease earnings.',
   adsDisplayed: 'Ads displayed',
   adsEarnings: 'Earnings this month',
   adsFreq: 'Ad Frequency',