M20-51: fix first flicker of the reward box

app/content-scripts/rewards/OfferCard.jsx

@@ -249,7 +249,7 @@ class OfferCard extends Component {
 	render() {
 		return (
 			// @TODO condition for hide class
-			<div ref={(ref) => { this.offerCardRef = ref; }} className="ghostery-rewards-component">
+			<div style={{ opacity: 0 }} ref={(ref) => { this.offerCardRef = ref; }} className="ghostery-rewards-component">
 				{ this.state.closed !== true && (
 					<div>
 						<div className="ghostery-reward-card">

app/scss/rewards.scss

@@ -37,6 +37,7 @@
 }
 
 .ghostery-rewards-component {
+  opacity: 1 !important;
 	* {
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
@@ -415,8 +416,23 @@
 	.rewards-notification-container {
 		position: absolute;
 		top: 0;
+    right: 0;
 		width: 100%;
 		height: 100%;
+    max-height: 600px;
+    max-width: 300px;
+    animation: fadein 0.5s;
+    -webkit-animation: fadein 0.5s;
+
+    @keyframes fadein {
+      from { opacity: 0; }
+      to   { opacity: 1; }
+    }
+    @-webkit-keyframes fadein {
+      from { opacity: 0; }
+      to   { opacity: 1; }
+    }
+
 
     .rewards-notification-optout-image-wrapper {
       height: 80%;