GH-1192 Left align title in Rewards Panel

app/panel/components/Rewards.jsx

@@ -12,6 +12,7 @@
  */
 
 import React, { Component } from 'react';
+import ClassNames from 'classnames';
 import { Link, Route } from 'react-router-dom';
 import { ToggleSlider, RewardListItem, RewardDetail } from './BuildingBlocks';
 import { sendMessage } from '../utils/msg';
@@ -126,19 +127,25 @@ class Rewards extends React.Component {
 		const { enable_offers, location } = this.props;
 		const showBack = location.pathname.indexOf('/detail/rewards/detail') !== -1;
 		const showToggle = location.pathname === '/detail/rewards/list';
+		const headerClassNames = ClassNames('RewardsPanel__header', 'flex-container', 'align-middle', {
+			'align-justify': !showBack,
+		});
+		const headerTitleClassNames = ClassNames('RewardsPanel__title', {
+			'RewardsPanel--left-padding': showBack,
+		});
 
 		return (
-			<div className="RewardsPanel__header flex-container align-center-middle">
+			<div className={headerClassNames}>
 				{showBack && (
-					<Link to="/detail/rewards/list" className="RewardPanel__back send-left-with-padding flex-container clickable" onClick={this.handleBackClick}>
+					<Link to="/detail/rewards/list" className="RewardPanel__back flex-container clickable" onClick={this.handleBackClick}>
 						<svg height="16" width="10" fillRule="evenodd">
 							<path d="M10 1.833L8.108 0 0 7.857l8.108 7.857L10 13.881 3.784 7.857z" />
 						</svg>
 					</Link>
 				)}
-				<span className="RewardsPanel__title">{ t('panel_detail_rewards_title') }</span>
+				<span className={headerTitleClassNames}>{ t('panel_detail_rewards_title') }</span>
 				{showToggle && !IS_EDGE && !IS_CLIQZ && (
-					<span className="send-right-with-padding flex-container align-middle">
+					<span className="flex-container align-middle">
 						<span className="RewardsPanel__slider_text">
 							{enable_offers ? t('rewards_on') : t('rewards_off')}
 						</span>

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

@@ -5,15 +5,15 @@ exports[`app/panel/components/Rewards.jsx Snapshot tests with react-test-rendere
   className="RewardsPanel"
 >
   <div
-    className="RewardsPanel__header flex-container align-center-middle"
+    className="RewardsPanel__header flex-container align-middle align-justify"
   >
     <span
       className="RewardsPanel__title"
     >
       panel_detail_rewards_title
     </span>
     <span
-      className="send-right-with-padding flex-container align-middle"
+      className="flex-container align-middle"
     >
       <span
         className="RewardsPanel__slider_text"
@@ -71,15 +71,15 @@ exports[`app/panel/components/Rewards.jsx Snapshot tests with react-test-rendere
   className="RewardsPanel"
 >
   <div
-    className="RewardsPanel__header flex-container align-center-middle"
+    className="RewardsPanel__header flex-container align-middle align-justify"
   >
     <span
       className="RewardsPanel__title"
     >
       panel_detail_rewards_title
     </span>
     <span
-      className="send-right-with-padding flex-container align-middle"
+      className="flex-container align-middle"
     >
       <span
         className="RewardsPanel__slider_text"

app/scss/partials/_rewards.scss

@@ -21,16 +21,6 @@
 .display-inline-block {
 	display: inline-block;
 }
-.send-left-with-padding {
-	position: absolute;
-	left: 0;
-	padding: 5px 13px;
-}
-.send-right-with-padding {
-	position: absolute;
-	right: 0;
-	padding: 5px 13px;
-}
 .clickable {
 	@extend %pointer;
 }
@@ -43,7 +33,7 @@
 	background-color: #ffffff;
 }
 .RewardsPanel__header {
-	padding: 10px 0;
+	padding: 10px 13px;
 	background-color: $whisper;
 }
 .RewardPanel__back svg {
@@ -57,6 +47,9 @@
 	font-size: 14px;
 	color: #9b9b9b;
 }
+.RewardsPanel--left-padding {
+	padding-left: 13px;
+}
 .RewardsPanel__slider_text {
 	text-transform: uppercase;
 	padding-right: 7px;

yarn.lock

@@ -1708,9 +1708,9 @@ brorand@^1.0.1:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/brorand/-/brorand-1.1.0.tgz#12c25efe40a45e3c323eb8675a0a0ce57b22371f"
 
-"browser-core@https://s3.amazonaws.com/cdncliqz/update/edge/ghostery/v7.27/7.27.4.tgz?v=1":
-  version "7.27.4"
-  resolved "https://s3.amazonaws.com/cdncliqz/update/edge/ghostery/v7.27/7.27.4.tgz?v=1#f64c4ddfafef49b65a0cbb0998a532bd9d30bfe6"
+"browser-core@https://s3.amazonaws.com/cdncliqz/update/edge/ghostery/v7.27/7.27.5.tgz?v=1":
+  version "7.27.5"
+  resolved "https://s3.amazonaws.com/cdncliqz/update/edge/ghostery/v7.27/7.27.5.tgz?v=1#02761a949c1bdaa3596b2422083b98c1bd4aa303"
   dependencies:
     "@cliqz-oss/dexie" "2.0.3"
     "@cliqz-oss/pouchdb" "6.3.4-security-error-fix-2"