disable rewards notification

_locales/en/messages.json

@@ -1620,5 +1620,11 @@
 	},
 	"rewards_disable": {
 		"message": "Turn off Ghostery rewards"
+	},
+	"rewards_disable_notification": {
+		"message": "Ghostery Rewards is now off. You can always turn it on in Ghostery settings or in the Ghostery Dashboard."
+	},
+	"rewards_disable_confirm": {
+		"message": "OK, got it."
 	}
 }

app/content-scripts/rewards/Notification.jsx

@@ -0,0 +1,38 @@
+import React, { Component } from 'react';
+
+class Notification extends Component {
+	constructor(props) {
+		super(props);
+		this.closeIcon = `url(${chrome.extension.getURL('app/images/rewards/white-x.svg')})`;
+		this.state = {
+			closed: false
+		};
+
+		this.close = this.close.bind(this);
+	}
+
+	close() {
+		this.setState({
+			closed: true
+		});
+		if (typeof this.props.closeCallback === 'function') {
+			this.props.closeCallback();
+		}
+	}
+
+	render() {
+		return(
+			<div>
+				{!this.state.closed && <div className="rewards-notification-container">
+					<div className="rewards-notification">
+						<div className="close" onClick={this.close} style={{backgroundImage: this.closeIcon}} />
+						<div className="notification-text">{t('rewards_disable_notification')}</div>
+						<a className="notification-text" onClick={this.close}>{t('rewards_disable_confirm')}</a>
+					</div>
+				</div>}
+			</div>
+		);
+	}
+}
+
+export default Notification;

app/content-scripts/rewards/OfferCard.jsx

@@ -3,6 +3,7 @@ import ReactDOM from 'react-dom';
 import { Link } from 'react-router-dom';
 import msgModule from '../utils/msg';
 import { log } from '../../../src/utils/common';
+import Notification from './Notification';
 
 const msg = msgModule('rewards');
 const { sendMessage } = msg;
@@ -14,7 +15,8 @@ class OfferCard extends Component {
 		console.log('constructor props:', props);
 		this.state = {
 			closed: false,
-			copyText: t('rewards_copy_code')
+			copyText: t('rewards_copy_code'),
+			showNotification: false
 		};
 
 		this.iframeEl = parent.document.getElementById('ghostery-iframe-container');
@@ -30,6 +32,7 @@ class OfferCard extends Component {
 
 		this.close = this.close.bind(this);
 		this.copyCode = this.copyCode.bind(this);
+		this.disableRewards = this.disableRewards.bind(this);
 	}
 
 	copyCode() {
@@ -50,6 +53,12 @@ class OfferCard extends Component {
 		}, 3000);
 	}
 
+	disableRewards() {
+		this.setState({
+			showNotification: true
+		});
+	}
+
 	close() {
 		if (this.iframeEl) {
 			this.iframeEl.classList = '';
@@ -61,10 +70,14 @@ class OfferCard extends Component {
 
 	render() {
 		console.log('render props:', this.props);
+		console.log('render state:', this.state);
 		return (
 			<div className="ghostery-rewards-component">
 				{ this.state.closed !== true &&
 				<div className="ghostery-reward-card">
+					{ this.state.showNotification &&
+						<Notification closeCallback={this.close} />
+					}
 					<div className="reward-card-header">
 						<div className="rewards-logo-beta" style={{backgroundImage: this.betaLogo}} />
 						<div className="reward-card-close" onClick={this.close} style={{backgroundImage: this.closeIcon}} />
@@ -111,7 +124,7 @@ class OfferCard extends Component {
 					<div className="reward-footer">
 						<div className="reward-feedback">
 							<div className="reward-smile" />
-							<a>{t('rewards_disable')}</a>
+							<a onClick={this.disableRewards}>{t('rewards_disable')}</a>
 							<div className="reward-arrow" />
 						</div>
 						<div className="reward-ghosty" style={{backgroundImage: this.ghostyGrey}} />

app/images/rewards/white-x.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="10px" height="10px" viewBox="0 0 10 10" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 48.2 (47327) - http://www.bohemiancoding.com/sketch -->
+    <title>Fill 2</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="strong-rewards-notification-Main-Copy-2" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(-2782.000000, -2929.000000)">
+        <g id="Group-25" transform="translate(2176.000000, 2563.000000)" fill="#FFFFFF">
+            <path d="M612.718565,371 L615.642492,368.075748 C616.11744,367.601125 616.11744,366.831159 615.642492,366.356211 C615.167545,365.881263 614.397578,365.881263 613.924252,366.356211 L611,369.281435 L608.075748,366.356211 C607.601125,365.881263 606.831159,365.881263 606.356211,366.356211 C605.881263,366.831159 605.881263,367.601125 606.356211,368.075748 L609.280138,371 L606.356211,373.924252 C605.881263,374.398875 605.881263,375.168841 606.356211,375.643789 C606.831159,376.118737 607.601125,376.118737 608.074776,375.643789 L611,372.718565 L613.924252,375.642492 C614.398875,376.11744 615.168841,376.11744 615.643789,375.642492 C616.118737,375.167545 616.118737,374.397578 615.643789,373.922955 L612.718565,371 Z" id="Fill-2"></path>
+        </g>
+    </g>
+</svg>

app/scss/rewards.scss

@@ -24,6 +24,10 @@
 }
 
 .ghostery-rewards-component {
+	* {
+		-webkit-font-smoothing: antialiased;
+		-moz-osx-font-smoothing: grayscale;
+	}
 
 	.hide {
 		visibility: hidden;
@@ -92,9 +96,7 @@
 	}
 
 	.ghostery-reward-card {
-		div {
-			color: $tundora;
-		}
+		color: $tundora;
 		background-color: #f2f2f2;
 		width: 265px;
 		height: 520px;
@@ -152,10 +154,6 @@
 			border: 1px solid $dark-purple;
 			border-radius: 4px;
 
-			div, span, p {
-				color: $tundora;
-			}
-
 			.reward-content-header {
 				display: flex;
 				flex-direction: row;
@@ -225,7 +223,6 @@
 					flex: 1;
 					user-select: text;
 					margin-left: 8px;
-					color: #494949;
 					align-self: center;
 					font-size: 13px;
 					font-weight: 500;
@@ -315,6 +312,45 @@
 		}
 	}
 
+	.rewards-notification-container {
+		width: 100%;
+		height: 100%;
+		position: absolute;
+		text-align: center;
+		color: $white;
+
+		.rewards-notification {
+			margin-top: 17px;
+			margin-left: auto;
+			margin-right: auto;
+			height: 161px;
+			width: 210px;
+			background-color: $dark-purple;
+			display: flex;
+			flex-direction: column;
+			font-size: 13px;
+			line-height: 2;
+
+			.notification-text {
+				margin: 0px 22px 0px 22px;
+			}
+
+			a {
+				text-decoration: underline;
+				cursor: pointer;
+			}
+
+			.close {
+				cursor: pointer;
+				background-repeat: no-repeat;
+				height: 10px;
+				width: 10px;
+				align-self: flex-end;
+				margin: 10px 10px 0px 0px;
+			}
+		}
+	}
+
 }
 
 #ghostery-rewards-app.iframe-child {