rewards hot dog ui

_locales/en/messages.json

@@ -1599,5 +1599,11 @@
 	},
 	"enable_when_not_scanned": {
 		"message": "To use this function, navigate to another page."
+	},
+	"rewards_text_single": {
+		"message": "new Reward was discovered"
+	},
+	"rewards_text_plural": {
+		"message": "new Rewards were discovered"
 	}
 }

app/content-scripts/rewards/HotDog.jsx

@@ -12,23 +12,17 @@ class HotDog extends Component {
 		super(props);
 		this.state = {
 			rewardsCount: 1
-		}
-		this.test();
-	}
-
-	test() {
-		setInterval(() => {
-			this.setState({
-				rewardsCount: ++this.state.rewardsCount
-			});
-		}, 3000);
+		};
 	}
 
 	render() {
 		return (
 			<div className="ghostery-rewards-container ghostery-top ghostery-right ghostery-collapsed">
 				<div className="ghostery-box">
-					{ this.state.rewardsCount } new Rewards were discovered!
+					<div className={`ghostery-reward-text ${this.state.rewardsCount > 0 ? 'show' : 'hide'}`}>
+						{`${this.state.rewardsCount} ${this.state.rewardsCount > 1 ? t('rewards_text_plural') : t('rewards_text_single')}`}
+					</div>
+					<div className="ghostery-reward-close" />
 				</div>
 			</div>
 		);

app/content-scripts/rewards/index.js → app/content-scripts/rewards/index.jsx

@@ -27,7 +27,7 @@ const viewport = document.getElementById('viewport');
 const rewardsContainer = document.createElement('div');
 rewardsContainer.id = 'rewards-dog';
 
-document.addEventListener("DOMContentLoaded", function(event) {
+document.addEventListener('DOMContentLoaded', (event) => {
 	document.body.appendChild(rewardsContainer);
 	ReactDOM.render(<HotDog />, document.getElementById('rewards-dog'));
 });

app/images/ghosty_star.svg

@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="28px" height="28px" viewBox="0 0 28 28" 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>Group 3</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(-1235.000000, -4096.000000)">
+        <g id="Group-32" transform="translate(1095.000000, 3554.000000)" fill="#FFFFFF">
+            <g id="Group" transform="translate(133.000000, 423.000000)">
+                <g id="Group-3" transform="translate(7.000000, 119.000000)">
+                    <path d="M21.0536665,19.7267042 C20.0268037,17.4613786 19.8500974,15.5420433 19.8224005,14.787879 L19.8224005,8.58271611 C19.8224005,3.84244752 15.796932,0 10.831569,0 C5.86565208,0 1.84004513,3.84244752 1.84004513,8.58271611 L1.84004513,14.8775802 C1.80154643,15.6888025 1.59977446,17.549596 0.612795176,19.7267042 C-0.714302125,22.6521764 0.383741755,22.3036233 1.36753589,22.0628465 C2.35105306,21.8231487 4.54755627,20.883647 5.23388563,22.0411293 C5.91966105,23.1979372 6.49187915,24.2028601 8.09317583,23.5475695 C9.69461099,22.8929532 10.4492132,22.674568 10.6778512,22.674568 L10.988749,22.674568 C11.2172485,22.674568 11.9721277,22.8929532 13.5732859,23.5475695 C15.174721,24.2028601 15.7468006,23.1979372 16.4329915,22.0411293 C17.1189054,20.883647 19.3152701,21.8231487 20.2990643,22.0628465 C21.2827199,22.3036233 22.3803484,22.6521764 21.0536665,19.7267042 M8.05633894,4.67997321 C9.0247613,4.67997321 9.80996861,5.86578224 9.80996861,7.32892302 C9.80996861,8.79219869 9.0247613,9.97827751 8.05633894,9.97827751 C7.08791659,9.97827751 6.30257079,8.79219869 6.30257079,7.32892302 C6.30257079,5.86578224 7.08791659,4.67997321 8.05633894,4.67997321 M10.831569,15.2684885 C8.69752234,15.2684885 6.90110095,13.2636335 6.3597649,11.0327047 C7.40518466,12.4049303 9.01908343,13.2865647 10.831569,13.2865647 C12.6437777,13.2865647 14.2576764,12.4049303 15.3032347,11.0327047 C14.7618986,13.2636335 12.9652003,15.2684885 10.831569,15.2684885 M13.6069376,9.97827751 C12.6376843,9.97827751 11.8528925,8.79219869 11.8528925,7.32892302 C11.8528925,5.86578224 12.6376843,4.67997321 13.6069376,4.67997321 C14.5757754,4.67997321 15.3602903,5.86578224 15.3602903,7.32892302 C15.3602903,8.79219869 14.5757754,9.97827751 13.6069376,9.97827751" id="Fill-3"></path>
+                    <g id="noun_256202" transform="translate(10.523623, 12.502664)" fill-rule="nonzero" stroke="#920094" stroke-width="0.887285837">
+                        <path d="M15.7545411,6.6903888 L12.5123916,9.28291446 C12.3246883,9.4334482 12.2393685,9.68433778 12.2905604,9.93522736 L13.2632052,13.8491048 C13.3997168,14.4846917 12.9219263,15.0031969 12.3588161,15.0031969 C12.1881767,15.0031969 12.0175372,14.953019 11.8639617,14.8526631 L8.33172523,12.7284647 C8.12695789,12.5946569 7.85393478,12.5946569 7.64916745,12.7284647 L4.15105881,14.8526631 C3.99748331,14.953019 3.80977992,15.0031969 3.63914048,15.0031969 C3.07603031,15.0031969 2.56411197,14.4846917 2.73475142,13.8491048 L3.70739626,9.93522736 C3.75858809,9.70106376 3.69033231,9.45017418 3.48556498,9.29964043 L0.328735236,6.6903888 C-0.319694657,6.13843172 0.0557121231,5.08469549 0.891845406,5.03451757 L5.02131999,4.75017605 C5.26021521,4.73345007 5.48204649,4.58291633 5.58443016,4.34875272 L7.15431305,0.58540902 C7.3249525,0.200711664 7.68329533,0 8.04163817,0 C8.39998101,0 8.75832384,0.200711664 8.92896329,0.58540902 L10.4988462,4.34875272 C10.5841659,4.56619035 10.8059972,4.7167241 11.0619564,4.75017605 L15.1914309,5.03451757 C16.0446282,5.08469549 16.4200349,6.13843172 15.7545411,6.6903888 Z" id="Shape"></path>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

app/scss/partials/_colors.scss

@@ -41,7 +41,7 @@ $button-primary:			#3AA2CF;
 /*  MARKETING COLORS */
 $red:						#E74055;
 $purple: 					#720174;
-$dark-magenta:				#910194;
+$dark-magenta:				#920094;
 $sinopia:					#D3451E;
 $apple:						#67A73A; //button_special
 $caper:						#CEECAF; //success-color

app/scss/purplebox.scss

@@ -49,7 +49,7 @@
 			width: 160px;
 		}
 		.ghostery-box {
-			width: 300px;
+			width: 265px;
 		}
 		#ghostery-pb-background {
 			border-bottom-left-radius: 2px;
@@ -73,7 +73,7 @@
 			}
 		}
 		.ghostery-box {
-			width: 300px;
+			width: 265px;
 		}
 		#ghostery-pb-background {
 			width: 160px;
@@ -145,7 +145,7 @@
 				}
 			}
 			.ghostery-box {
-				width: 300px;
+				width: 265px;
 			}
 		}
 		&.ghostery-expanded #ghostery-box, &.ghostery-expanded .ghostery-box {

app/scss/rewards.scss

@@ -1,6 +1,53 @@
+//Import Global Partials
+@import "settings"; //includes _colors.scss
+
 .ghostery-rewards-container {
-	div {
+
+	.ghostery-box {
+		opacity: 1;
+		background-color: $dark-magenta;
 		white-space:nowrap;
-		padding: 0px 10px;
+		background-image: url('../images/ghosty_star.svg');
+		background-repeat: no-repeat;
+		background-position: left 14px center;
+		border-bottom: 0px;
 	}
+
+	&.ghostery-collapsed {
+
+		.ghostery-box {
+			width: 50px;
+			height: 50px;
+		}
+
+	}
+
+	&.ghostery-right {
+		right: 30px;
+	}
+
+	.ghostery-reward-text {
+		visibility: hidden;
+		margin-top: 15px;
+		margin-left: 50px;
+		transition: visibility 1s;
+	}
+
+	&:hover {
+
+		.ghostery-reward-text {
+			transition: visibility 0s;
+
+			&.show {
+				visibility: visible;
+			}
+
+			&.hide {
+				visibility: hidden;
+			}
+
+		}
+
+	}
+
 }

src/classes/Rewards.js

@@ -28,20 +28,16 @@ const t = chrome.i18n.getMessage;
  * @todo  make it a Singelton
  */
 class Rewards {
-	constructor() {
-
-	}
-
 	/**
 	 * Build the rewards container.  Called from webNavigation.onCommitted handler
 	 *
 	 * @param  {number} tab_id		tab id
 	 * @return {Promise}		resolves to true or false (success/failure)
 	 */
 	showCircle(tab_id) {
-		console.log('showCircle HOT DOG');
+		// console.log('showCircle HOT DOG');
 		const tab = tabInfo.getTabInfo(tab_id);
-		console.log(tab)
+		// console.log(tab);
 		// If the tab is prefetched, we can't add purplebox to it.
 		if (!conf.enable_offers ||
 			!tab || tab.rewards) {
@@ -54,15 +50,14 @@ class Rewards {
 		// So update hotdog status for this tab
 		tabInfo.setTabInfo(tab_id, 'rewards', true);
 
-		console.log('INJECT REWARDS');
+		// console.log('INJECT REWARDS');
 		return injectScript(tab_id, 'dist/rewards.js', 'dist/css/purplebox_styles.css', 'document_start').then(() => {
-			console.log('REWARDS INJECTED');
+			// console.log('REWARDS INJECTED');
 		}).catch((err) => {
 			log('rewards injectScript error', err);
 			return false;
 		});
 	}
-
 }
 
 export default Rewards;