From a01917d18443485587b33817e221406c323922bc Mon Sep 17 00:00:00 2001
From: Caleb Richelson <caleb.richelson@gmail.com>
Date: Mon, 10 Jun 2019 16:52:10 -0400
Subject: [PATCH 1/2] Remove count from Cliqz Features, replace with ON/OFF
 indicator

---
 .../BuildingBlocks/CliqzFeature.jsx           | 25 ++----------
 app/scss/partials/_cliqz_feature.scss         | 38 +++++--------------
 app/scss/partials/_svgs.scss                  |  5 ---
 3 files changed, 13 insertions(+), 55 deletions(-)

diff --git a/app/panel/components/BuildingBlocks/CliqzFeature.jsx b/app/panel/components/BuildingBlocks/CliqzFeature.jsx
index 9c97b1aa3..d967ab95f 100644
--- a/app/panel/components/BuildingBlocks/CliqzFeature.jsx
+++ b/app/panel/components/BuildingBlocks/CliqzFeature.jsx
@@ -50,28 +50,9 @@ class CliqzFeature extends React.Component {
 		});
 	}
 
-	_getCount(active, data, type) {
-		if (!active) {
-			return '-';
-		}
-
-		if (type === 'anti_track') {
-			return data && data.totalUnsafeCount || 0;
-		} else if (type === 'ad_block') {
-			return data && data.totalCount || 0;
-		} else if (type === 'smart_block') {
-			return this._count(data, data.blocked) + this._count(data, data.unblocked);
-		}
-
-		return 0;
+	_getStatus(active) {
+		return active ? t('drawer_on') : t('drawer_off');
 	}
-	_count(object, property) {
-		return object && this._length(property) || 0;
-	}
-	_length(object) {
-		return Object.keys(object).length;
-	}
-
 
 	_getTooltipBodyText(active, isTooltipBody, type) {
 		if (!isTooltipBody) return false;
@@ -125,7 +106,7 @@ class CliqzFeature extends React.Component {
 
 		return (
 			<div className={cliqzFeatureClassNames} onClick={this.clickCliqzFeature}>
-				<div className="CliqzFeature__count">{this._getCount(active, data, type)}</div>
+				<div className="CliqzFeature__status">{this._getStatus(active)}</div>
 				<div className={iconClassNames}>
 					<Tooltip
 						header={this._getTooltipHeaderText(isTooltipHeader, type)}
diff --git a/app/scss/partials/_cliqz_feature.scss b/app/scss/partials/_cliqz_feature.scss
index 7779de570..525312a59 100644
--- a/app/scss/partials/_cliqz_feature.scss
+++ b/app/scss/partials/_cliqz_feature.scss
@@ -19,10 +19,11 @@ $cliqz-feature--light-gray: #dedede;
 $cliqz-feature--darker-gray: #a4a4a4;
 
 // Default styling for the elements of the CliqzFeature BEM block
-.CliqzFeature__count {
+.CliqzFeature__status {
 	text-align: center;
 	font-size: 14px;
 	font-weight: 600;
+	text-transform: uppercase;
 	transition: color 0.25s ease-out;
 	transition: background-image 0.25s ease-out;
 }
@@ -50,7 +51,7 @@ $cliqz-feature--darker-gray: #a4a4a4;
 // The CliqzFeature block is always one of normal, smaller, or condensed
 .CliqzFeature--normal,
 .CliqzFeature--smaller {
-	.CliqzFeature__count { line-height: 28px; }
+	.CliqzFeature__status { line-height: 28px; }
 	.CliqzFeature__icon {
 		height: 50px;
 		width: 50px;
@@ -63,7 +64,7 @@ $cliqz-feature--darker-gray: #a4a4a4;
 }
 
 .CliqzFeature--condensed {
-	.CliqzFeature__count { line-height: 14px; }
+	.CliqzFeature__status { line-height: 14px; }
 	.CliqzFeature__icon {
 		height: 40px;
 		width: 40px;
@@ -76,7 +77,7 @@ $cliqz-feature--darker-gray: #a4a4a4;
 // The CliqzFeature block is always either active or inactive
 // and always either clickable or not-clickable
 .CliqzFeature--active.clickable {
-	.CliqzFeature__count {
+	.CliqzFeature__status {
 		color: $cliqz-feature--blue;
 		background: none;
 	}
@@ -86,7 +87,7 @@ $cliqz-feature--darker-gray: #a4a4a4;
 	.CliqzFeature__feature-name { color: $cliqz-feature--blue; }
 
 	&:hover {
-		.CliqzFeature__count { color: $cliqz-feature--darker-blue; }
+		.CliqzFeature__status { color: $cliqz-feature--darker-blue; }
 		.CliqzFeature__icon--anti-track { background-image: buildIconAntiTracking($cliqz-feature--darker-blue); }
 		.CliqzFeature__icon--ad-block { background-image: buildIconAdBlocking($cliqz-feature--darker-blue); }
 		.CliqzFeature__icon--smart-block { background-image: buildIconSmartBlocking($cliqz-feature--darker-blue); }
@@ -95,10 +96,7 @@ $cliqz-feature--darker-gray: #a4a4a4;
 }
 
 .CliqzFeature--active.not-clickable {
-	.CliqzFeature__count {
-		color: $cliqz-feature--pale-blue;
-		background: none;
-	}
+	.CliqzFeature__status { color: $cliqz-feature--pale-blue; }
 	.CliqzFeature__icon--anti-track { background-image: buildIconAntiTracking($cliqz-feature--pale-blue); }
 	.CliqzFeature__icon--ad-block { background-image: buildIconAdBlocking($cliqz-feature--pale-blue); }
 	.CliqzFeature__icon--smart-block { background-image: buildIconSmartBlocking($cliqz-feature--pale-blue); }
@@ -106,26 +104,15 @@ $cliqz-feature--darker-gray: #a4a4a4;
 
 }
 
-.CliqzFeature--inactive {
-	.CliqzFeature__count {
-		background-repeat: no-repeat;
-		background-position: center center;
-		background-size: 10px 10px;
-	}
-}
-
 .CliqzFeature--inactive.clickable {
-	.CliqzFeature__count {
-		color: rgba($cliqz-feature--gray, 0);
-		background-image: buildIconDash($cliqz-feature--gray);
-	}
+	.CliqzFeature__status { color: $cliqz-feature--gray; }
 	.CliqzFeature__icon--anti-track { background-image: buildIconAntiTracking($cliqz-feature--gray); }
 	.CliqzFeature__icon--ad-block { background-image: buildIconAdBlocking($cliqz-feature--gray); }
 	.CliqzFeature__icon--smart-block { background-image: buildIconSmartBlocking($cliqz-feature--gray); }
 	.CliqzFeature__feature-name { color: $cliqz-feature--gray; }
 
 	&:hover {
-		.CliqzFeature__count { background-image: buildIconDash($cliqz-feature--darker-gray); }
+		.CliqzFeature__status { color: $cliqz-feature--darker-gray; }
 		.CliqzFeature__icon--anti-track { background-image: buildIconAntiTracking($cliqz-feature--darker-gray); }
 		.CliqzFeature__icon--ad-block { background-image: buildIconAdBlocking($cliqz-feature--darker-gray); }
 		.CliqzFeature__icon--smart-block { background-image: buildIconSmartBlocking($cliqz-feature--darker-gray); }
@@ -134,14 +121,9 @@ $cliqz-feature--darker-gray: #a4a4a4;
 }
 
 .CliqzFeature--inactive.not-clickable {
-	.CliqzFeature__count {
-		color: rgba($cliqz-feature--light-gray, 0);
-		background-image: buildIconDash($cliqz-feature--light-gray);
-	}
-
+	.CliqzFeature__status { color: $cliqz-feature--light-gray; }
 	.CliqzFeature__icon--anti-track { background-image: buildIconAntiTracking($cliqz-feature--light-gray); }
 	.CliqzFeature__icon--ad-block { background-image: buildIconAdBlocking($cliqz-feature--light-gray); }
 	.CliqzFeature__icon--smart-block { background-image: buildIconSmartBlocking($cliqz-feature--light-gray); }
 	.CliqzFeature__feature-name { color: $cliqz-feature--light-gray; }
 }
-
diff --git a/app/scss/partials/_svgs.scss b/app/scss/partials/_svgs.scss
index 3d2f8b98b..80029dd58 100644
--- a/app/scss/partials/_svgs.scss
+++ b/app/scss/partials/_svgs.scss
@@ -32,11 +32,6 @@
 	@return url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2250%22%20height%3D%2250%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Ccircle%20stroke%3D%22#{url-friendly-colour($stroke-color)}%22%20stroke-width%3D%222%22%20fill%3D%22none%22%20cx%3D%2225%22%20cy%3D%2225%22%20r%3D%2223%22/%3E%3Cpath%20fill%3D%22#{url-friendly-colour($stroke-color)}%22%20d%3D%22M31.977%2020.24c-.097%201.677-.697%203.156-1.654%204.514-.43.61-.867%201.217-1.285%201.84-.597.887-1.074%201.832-1.258%202.898-.03.175-.141.162-.263.162l-2.525-.001c-.832%200-1.663-.005-2.497.003-.181.002-.246-.05-.283-.238-.197-1.031-.657-1.954-1.241-2.818-.497-.733-1.015-1.454-1.514-2.187A8.257%208.257%200%200%201%2018.011%2020c-.112-2.82%201.486-5.279%204.185-6.42%203.458-1.462%207.547.004%209.166%203.293.521%201.062.682%202.19.615%203.365zM22.352%2032.3v-.63h5.305v.63h-5.305zm4.76%202.681h-4.216c-.508%200-.602-.108-.536-.653h5.28c.075.537-.022.653-.529.653zm6.238-18.576c-1.449-3.169-3.966-4.928-7.385-5.335-2.913-.348-5.446.61-7.511%202.673-2.305%202.306-2.858%205.124-2.19%208.241.351%201.63%201.149%203.046%202.104%204.39.438.617.869%201.243%201.271%201.883.372.593.635%201.241.661%201.946.03.814.008%201.627.008%202.441h.032c0%20.676-.001%201.351.002%202.027.006%201.204.952%202.22%202.15%202.3.158.01.21.056.25.214a2.322%202.322%200%200%200%204.524-.007c.034-.14.072-.194.225-.206a2.329%202.329%200%200%200%202.174-2.337c0-1.257.01-2.515-.003-3.774-.011-.941.208-1.816.706-2.61.402-.64.832-1.268%201.274-1.88%201.263-1.757%202.155-3.653%202.323-5.844.109-1.423-.018-2.816-.615-4.122z%22/%3E%3Cpath%20stroke%3D%22#{url-friendly-colour($stroke-color)}%22%20stroke-width%3D%221.5%22%20fill%3D%22none%22%20d%3D%22M25.096%2018.214a.324.324%200%200%200-.192%200l-4.117%201.092a.37.37%200%200%200-.287.364c.02%202.932%201.59%205.652%204.29%207.472a.387.387%200%200%200%20.21.058c.077%200%20.153-.02.21-.058%202.7-1.82%204.27-4.54%204.29-7.472a.37.37%200%200%200-.287-.364l-4.117-1.092z%22/%3E%3C/svg%3E');
 }
 
-// Used in Cliqz Features
-@function buildIconDash($stroke-color) {
-	@return url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2210%22%20height%3D%2210%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20stroke%3D%22#{url-friendly-colour($stroke-color)}%22%20stroke-width%3D%223%22%20d%3D%22M1%205h8%22/%3E%3C/svg%3E');
-}
-
 // Used in Ghostery Features
 @function buildIconTrust($stroke-color) {
 	@return url('data:image/svg+xml;charset%3DUS-ASCII,%3Csvg%20width%3D%2214%22%20height%3D%2214%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22>%3Ccircle%20cx%3D%227%22%20cy%3D%227%22%20r%3D%226%22%20stroke-width%3D%222%22%20stroke%3D%22#{url-friendly-colour($stroke-color)}%22%20fill%3D%22none%22/%3E%3C/svg%3E');

From c7277843a9337a14da1719f8eeed31572c2b602d Mon Sep 17 00:00:00 2001
From: ilyazarembsky <wlycdgrfromflatiron@gmail.com>
Date: Mon, 10 Jun 2019 19:52:06 -0400
Subject: [PATCH 2/2] Stop passing now unneeded data prop to CliqzFeature

---
 app/panel/components/BuildingBlocks/CliqzFeature.jsx | 1 -
 app/panel/components/Summary.jsx                     | 6 ------
 2 files changed, 7 deletions(-)

diff --git a/app/panel/components/BuildingBlocks/CliqzFeature.jsx b/app/panel/components/BuildingBlocks/CliqzFeature.jsx
index d967ab95f..6ded5c7d0 100644
--- a/app/panel/components/BuildingBlocks/CliqzFeature.jsx
+++ b/app/panel/components/BuildingBlocks/CliqzFeature.jsx
@@ -80,7 +80,6 @@ class CliqzFeature extends React.Component {
 		const {
 			active,
 			cliqzInactive,
-			data,
 			isSmaller,
 			isCondensed,
 			isTooltipBody,
diff --git a/app/panel/components/Summary.jsx b/app/panel/components/Summary.jsx
index dc641a43e..658876818 100644
--- a/app/panel/components/Summary.jsx
+++ b/app/panel/components/Summary.jsx
@@ -585,7 +585,6 @@ class Summary extends React.Component {
 
 	_renderCliqzAntiTracking() {
 		const {
-			antiTracking,
 			enable_anti_tracking,
 			is_expert,
 		} = this.props;
@@ -596,7 +595,6 @@ class Summary extends React.Component {
 				<CliqzFeature
 					clickButton={this.clickCliqzFeature}
 					type="anti_track"
-					data={antiTracking}
 					active={enable_anti_tracking}
 					cliqzInactive={this._isCliqzInactive()}
 					isSmaller={is_expert && !isCondensed}
@@ -611,7 +609,6 @@ class Summary extends React.Component {
 
 	_renderCliqzAdBlock() {
 		const {
-			adBlock,
 			enable_ad_block,
 			is_expert,
 		} = this.props;
@@ -622,7 +619,6 @@ class Summary extends React.Component {
 				<CliqzFeature
 					clickButton={this.clickCliqzFeature}
 					type="ad_block"
-					data={adBlock}
 					active={enable_ad_block}
 					cliqzInactive={this._isCliqzInactive()}
 					isSmaller={is_expert && !isCondensed}
@@ -639,7 +635,6 @@ class Summary extends React.Component {
 		const {
 			enable_smart_block,
 			is_expert,
-			smartBlock,
 		} = this.props;
 		const isCondensed = this._isCondensed();
 
@@ -648,7 +643,6 @@ class Summary extends React.Component {
 				<CliqzFeature
 					clickButton={this.clickCliqzFeature}
 					type="smart_block"
-					data={smartBlock}
 					active={enable_smart_block}
 					cliqzInactive={this._isCliqzInactive()}
 					isSmaller={is_expert && !isCondensed}