Use React.Fragment, update class names, factor out repeat code, updat…

…e lint file

.eslintrc.js

@@ -83,6 +83,7 @@ module.exports = {
 		'react/no-access-state-in-setstate': [0], // TODO: enable this check
 		'react/no-danger': [0],
 		'react/prop-types': [0],
+		'react/jsx-fragments': [1, 'element'],
 		'react/sort-comp': [2, {
 			order: [
 				"static-variables",

app/panel/components/Rewards.jsx

@@ -11,7 +11,7 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0
  */
 
-import React from 'react';
+import React, { Fragment } from 'react';
 import ClassNames from 'classnames';
 import { Route } from 'react-router-dom';
 import { ToggleSlider } from './BuildingBlocks';
@@ -266,7 +266,7 @@ class Rewards extends React.Component {
 		const src = chrome.runtime.getURL('cliqz/offers-cc/index.html?cross-origin');
 		const text = t(`panel_rewards_view__reward${rewardsCount === 1 ? '' : 's'}`);
 		return (
-			<>
+			<Fragment>
 				{is_expanded && (
 					<div className="RewardsPanel__rewards_count_wrapper">
 						<div className="RewardsPanel__rewards_count">{rewardsCount}</div>
@@ -281,7 +281,7 @@ class Rewards extends React.Component {
 					height={iframeHeight}
 					title="myoffrz-rewards"
 				/>
-			</>
+			</Fragment>
 		);
 	}
 

app/shared-components/ModalContent/InsightsPromoModalContent/InsightsPromoModalContent.jsx

@@ -11,7 +11,7 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0
  */
 
-import React from 'react';
+import React, { Fragment } from 'react';
 
 const InsightsPromoModalContent = (props) => {
 	const {
@@ -20,56 +20,56 @@ const InsightsPromoModalContent = (props) => {
 		handleTryInsightsClick,
 	} = props;
 	return (
-		<div className="InsightsModal__container flex-container flex-dir-column align-middle">
-			<div className="InsightsModal__image" />
-			<div className="InsightsModal__header">
+		<Fragment>
+			<div className="InsightsPromoModal__image" />
+			<div className="InsightsPromoModal__header">
 				{t('panel_insights_promotion_header')}
 			</div>
-			<div className="InsightsModal__description">
+			<div className="InsightsPromoModal__description">
 				{t('panel_insights_promotion_description')}
 			</div>
 			<div className="flex-container">
-				<div className="InsightsModal__features">
+				<div className="InsightsPromoModal__features">
 					<div className="flex-container align-middle">
-						<span className="InsightsModal__checked-circle-icon" />
-						<div className="InsightsModal__feature-text">
+						<span className="InsightsPromoModal__checked-circle-icon" />
+						<div className="InsightsPromoModal__feature-text">
 							{t('panel_insights_audit_tags')}
 						</div>
 					</div>
 					<div className="flex-container align-middle">
-						<span className="InsightsModal__checked-circle-icon" />
-						<div className="InsightsModal__feature-text">
+						<span className="InsightsPromoModal__checked-circle-icon" />
+						<div className="InsightsPromoModal__feature-text">
 							{t('panel_insights_promotion_trace_poor_performance')}
 						</div>
 					</div>
 				</div>
-				<div className="InsightsModal__features">
+				<div className="InsightsPromoModal__features">
 					<div className="flex-container align-middle">
-						<span className="InsightsModal__checked-circle-icon" />
-						<div className="InsightsModal__feature-text">
+						<span className="InsightsPromoModal__checked-circle-icon" />
+						<div className="InsightsPromoModal__feature-text">
 							{t('panel_insights_promotion_watch_pings')}
 						</div>
 					</div>
 					<div className="flex-container align-middle">
-						<span className="InsightsModal__checked-circle-icon" />
-						<div className="InsightsModal__feature-text">
+						<span className="InsightsPromoModal__checked-circle-icon" />
+						<div className="InsightsPromoModal__feature-text">
 							{t('panel_insights_promotion_explore_trends')}
 						</div>
 					</div>
 				</div>
 			</div>
-			<div className="InsightsModal__call-to-action-container">
+			<div className="InsightsPromoModal__call-to-action-container">
 				<div className="flex-container align-center">
-					<span onClick={handleTryInsightsClick} className="btn InsightsModal__call-to-action">
+					<span onClick={handleTryInsightsClick} className="btn InsightsPromoModal__call-to-action">
 						<span className="button-text">{t('panel_insights_promotion_call_to_action')}</span>
 					</span>
 				</div>
-				<div className="InsightsModal__other-options-container flex-container align-justify">
-					<span onClick={handleSignInClick} className="InsightsModal__link">{t('subscribe_pitch_sign_in')}</span>
-					<span onClick={handleGoAwayClick} className="InsightsModal__link">{t('no_thanks_turn_promos_off')}</span>
+				<div className="InsightsPromoModal__other-options-container flex-container align-justify">
+					<span onClick={handleSignInClick} className="InsightsPromoModal__link">{t('subscribe_pitch_sign_in')}</span>
+					<span onClick={handleGoAwayClick} className="InsightsPromoModal__link">{t('no_thanks_turn_promos_off')}</span>
 				</div>
 			</div>
-		</div>
+		</Fragment>
 	);
 };
 

app/shared-components/ModalContent/InsightsPromoModalContent/InsightsPromoModalContent.scss

@@ -15,7 +15,7 @@
 $standard-font-family: Roboto, "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
 $condensed-font-family: Roboto Condensed, "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
 
-.InsightsModal__content {
+.InsightsPromoModal__content {
 	background-color: $alabaster;
 	position: relative;
 	width: 518px;
@@ -26,19 +26,14 @@ $condensed-font-family: Roboto Condensed, "Open Sans", "Helvetica Neue", Helveti
 	z-index: 10;
 }
 
-.InsightsModal__container {
-	min-height: 450px;
-	justify-content: space-between;
-}
-
-.InsightsModal__image {
+.InsightsPromoModal__image {
 	height: 94px;
 	width: 177px;
 	margin-top: 20px;
 	background-image: url('/app/images/panel/insights-ribbon.svg');
 }
 
-.InsightsModal__header {
+.InsightsPromoModal__header {
 	font-family: $standard-font-family;
 	height: 27.1px;
 	font-size: 20px;
@@ -48,7 +43,7 @@ $condensed-font-family: Roboto Condensed, "Open Sans", "Helvetica Neue", Helveti
 	margin-bottom: 10px;
 }
 
-.InsightsModal__description {
+.InsightsPromoModal__description {
 	width: 400px;
 	font-size: 18px;
 	font-weight: 500;
@@ -57,7 +52,7 @@ $condensed-font-family: Roboto Condensed, "Open Sans", "Helvetica Neue", Helveti
 	font-family: $standard-font-family;
 }
 
-.InsightsModal__features {
+.InsightsPromoModal__features {
 	&:nth-child(odd) {
 		margin-left: 25px;
 		width: 50%;
@@ -69,15 +64,15 @@ $condensed-font-family: Roboto Condensed, "Open Sans", "Helvetica Neue", Helveti
 	}
 }
 
-.InsightsModal__feature-text {
+.InsightsPromoModal__feature-text {
 	font-family: $standard-font-family;
 	font-size: 14px;
 	color: $medium-gray;
 	padding-bottom: 5px;
 	line-height: 16px;
 }
 
-.InsightsModal__checked-circle-icon {
+.InsightsPromoModal__checked-circle-icon {
 	flex: none;
 	height: 18px;
 	width: 18px;
@@ -86,7 +81,7 @@ $condensed-font-family: Roboto Condensed, "Open Sans", "Helvetica Neue", Helveti
 	align-self: flex-start;
 }
 
-.InsightsModal__call-to-action-container {
+.InsightsPromoModal__call-to-action-container {
 	height: 95px;
 	width: 99%;
 	margin-top: 10px;
@@ -96,7 +91,7 @@ $condensed-font-family: Roboto Condensed, "Open Sans", "Helvetica Neue", Helveti
 	flex-direction: column;
 }
 
-.InsightsModal__call-to-action {
+.InsightsPromoModal__call-to-action {
 	cursor: pointer;
 	display: flex;
 	justify-content: center;
@@ -116,7 +111,7 @@ $condensed-font-family: Roboto Condensed, "Open Sans", "Helvetica Neue", Helveti
 	}
 }
 
-.InsightsModal__link {
+.InsightsPromoModal__link {
 	font-family: $standard-font-family;
 	font-size: 13px;
 	color: $tundora;
@@ -126,7 +121,7 @@ $condensed-font-family: Roboto Condensed, "Open Sans", "Helvetica Neue", Helveti
 	}
 }
 
-.InsightsModal__other-options-container {
+.InsightsPromoModal__other-options-container {
 	margin-top: 10px;
 	padding: 0 10.5px;
 	text-decoration: underline;

app/shared-components/PromoModal/PromoModal.jsx

@@ -118,9 +118,7 @@ class PromoModal extends React.Component {
 	}
 
 	_renderXButton = (type) => {
-		const XButtonClass = type === PLUS
-			? 'PlusPromoModal__exitButton'
-			: 'InsightsModal__exitButton';
+		const XButtonClass = ClassNames({ PlusPromoModal__exitButton: type === PLUS });
 
 		return (
 			<ModalExitButton
@@ -167,11 +165,16 @@ class PromoModal extends React.Component {
 
 	render() {
 		const { type } = this.props;
-		const modalContentClassNames = ClassNames('', {
-			InsightsModal__content: type === INSIGHTS,
-			PlusPromoModal__content: type === PLUS,
-			PremiumPromoModal__content: type === PREMIUM,
-		});
+		const modalContentClassNames = ClassNames(
+			'flex-container',
+			'flex-dir-column',
+			'align-middle',
+			{
+				InsightsModal__content: type === INSIGHTS,
+				PlusPromoModal__content: type === PLUS,
+				PremiumPromoModal__content: type === PREMIUM,
+			}
+		);
 		return (
 			<Modal show>
 				<div className={modalContentClassNames}>