GH-1273 fix distorted reward image with cover

app/content-scripts/rewards/OfferCard.jsx

@@ -46,6 +46,7 @@ class OfferCard extends Component {
 			this.iframeEl.classList = '';
 			this.iframeEl.classList.add('offer-card');
 		}
+		this.rewardPictureEl = null;
 
 		this.betaLogo = `url(${chrome.extension.getURL('app/images/rewards/ghostery-rewards-beta.png')})`;
 		this.closeIcon = `url(${chrome.extension.getURL('app/images/drawer/x.svg')})`;
@@ -105,6 +106,11 @@ class OfferCard extends Component {
 
 	componentDidMount() {
 		this.props.actions.addRewardSeenListener();
+		const bgImg = new Image();
+		bgImg.onload = () => {
+			this.rewardPictureEl.style.backgroundImage = `url(${bgImg.src})`;
+		};
+		bgImg.src = this.state.rewardUI.picture_url;
 	}
 
 	copyCode() {
@@ -246,7 +252,7 @@ class OfferCard extends Component {
 								</div>
 								<div className="reward-content-img">
 									<div className="flex-grow" />
-									<img src={this.state.rewardUI.picture_url} className="hide" onLoad={this.handleImageLoaded} />
+									<div className="img" ref={(node) => { this.rewardPictureEl = node; }} />
 									<div className="flex-grow" />
 								</div>
 								<div className="reward-content-detail">

app/panel/components/BuildingBlocks/RewardDetail.jsx

@@ -107,7 +107,7 @@ class RewardDetail extends React.Component {
 			<div className="RewardDetail flex-container flex-dir-column align-justify">
 				<div className="RewardDetail__image_container">
 					<img className="RewardDetail__logo" src={logoUrl} />
-					<img className="RewardDetail__picture" src={pictureUrl} />
+					<div className="RewardDetail__picture" style={{ backgroundImage: `url('${pictureUrl}')` }} />
 				</div>
 				{text && (
 					<div className="RewardDetail__title">

app/panel/components/__tests__/__snapshots__/RewardDetail.jsx.snap

@@ -11,9 +11,13 @@ exports[`app/panel/components/BuildingBlocks/RewardDetail.jsx Snapshot tests wit
       className="RewardDetail__logo"
       src="https://www.ghostery.com/wp-content/themes/ghostery/images/ghostery_logo.svg"
     />
-    <img
+    <div
       className="RewardDetail__picture"
-      src="https://www.ghostery.com/wp-content/uploads/2017/12/simple-detailed-1024x833.png"
+      style={
+        Object {
+          "backgroundImage": "url('https://www.ghostery.com/wp-content/uploads/2017/12/simple-detailed-1024x833.png')",
+        }
+      }
     />
   </div>
   <div
@@ -86,9 +90,13 @@ exports[`app/panel/components/BuildingBlocks/RewardDetail.jsx Snapshot tests wit
       className="RewardDetail__logo"
       src="https://www.ghostery.com/wp-content/themes/ghostery/images/ghostery_logo.svg"
     />
-    <img
+    <div
       className="RewardDetail__picture"
-      src="https://www.ghostery.com/wp-content/uploads/2017/12/simple-detailed-1024x833.png"
+      style={
+        Object {
+          "backgroundImage": "url('https://www.ghostery.com/wp-content/uploads/2017/12/simple-detailed-1024x833.png')",
+        }
+      }
     />
   </div>
   <div
@@ -140,9 +148,13 @@ exports[`app/panel/components/BuildingBlocks/RewardDetail.jsx Snapshot tests wit
       className="RewardDetail__logo"
       src="https://www.ghostery.com/wp-content/themes/ghostery/images/ghostery_logo.svg"
     />
-    <img
+    <div
       className="RewardDetail__picture"
-      src="https://www.ghostery.com/wp-content/uploads/2017/12/simple-detailed-1024x833.png"
+      style={
+        Object {
+          "backgroundImage": "url('https://www.ghostery.com/wp-content/uploads/2017/12/simple-detailed-1024x833.png')",
+        }
+      }
     />
   </div>
   <div
@@ -207,9 +219,13 @@ exports[`app/panel/components/BuildingBlocks/RewardDetail.jsx Snapshot tests wit
       className="RewardDetail__logo"
       src="https://www.ghostery.com/wp-content/themes/ghostery/images/ghostery_logo.svg"
     />
-    <img
+    <div
       className="RewardDetail__picture"
-      src="https://www.ghostery.com/wp-content/uploads/2017/12/simple-detailed-1024x833.png"
+      style={
+        Object {
+          "backgroundImage": "url('https://www.ghostery.com/wp-content/uploads/2017/12/simple-detailed-1024x833.png')",
+        }
+      }
     />
   </div>
   <div
@@ -278,9 +294,13 @@ exports[`app/panel/components/BuildingBlocks/RewardDetail.jsx Snapshot tests wit
       className="RewardDetail__logo"
       src="https://www.ghostery.com/wp-content/themes/ghostery/images/ghostery_logo.svg"
     />
-    <img
+    <div
       className="RewardDetail__picture"
-      src="https://www.ghostery.com/wp-content/uploads/2017/12/simple-detailed-1024x833.png"
+      style={
+        Object {
+          "backgroundImage": "url('https://www.ghostery.com/wp-content/uploads/2017/12/simple-detailed-1024x833.png')",
+        }
+      }
     />
   </div>
 

app/scss/partials/_rewards.scss

@@ -176,6 +176,9 @@
 	height: 100%;
 	width: 100%;
 	background-color: #efefef;
+	background-repeat: no-repeat;
+	background-size: cover;
+	background-position: center;
 }
 .RewardDetail__logo {
 	position: absolute;

app/scss/rewards.scss

@@ -151,15 +151,16 @@
 
 		.reward-content-img {
 			height: 120px;
-			// margin-top: 8px;
 			width: 247px;
 			display: flex;
 			align-items: center;
 
-			img {
-				width: 100%;
+			.img {
 				height: 100%;
-				object-fit: contain;
+				width: 100%;
+				background-repeat: no-repeat;
+				background-size: cover;
+				background-position: center;
 			}
 		}
 

manifest.json

@@ -12,6 +12,8 @@
 	"version_name": "8.2.1",
 	"default_locale": "en",
 	"description": "__MSG_short_description__",
+	"debug": true,
+	"log": true,
 	"icons": {
 		"16": "app/images/icon16.png",
 		"48": "app/images/icon48.png",
@@ -94,4 +96,4 @@
 		"app/images/*",
 		"dist/css/rewards_styles.css"
 	]
-}
+}