GH-867 update alternate POC

_locales/en/messages.json

@@ -1195,16 +1195,16 @@
 		"message": "Reload to see changes."
 	},
 	"alert_site_trusted": {
-		"message": "Site whitelisted. Trackers are allowed and private data points unprotected."
+		"message": "Site whitelisted. Trackers will be allowed and Anti-Tracking disabled on this site."
 	},
 	"alert_site_trusted_off": {
-		"message": "Site removed from the whitelist."
+		"message": "Site no longer whitelisted."
 	},
 	"alert_site_restricted": {
-		"message": "Site blacklisted. Trackers are blocked and Anti-Tracking on for this site."
+		"message": "Site blacklisted. Trackers will be blocked and Anti-Tracking enabled on this site."
 	},
 	"alert_site_restricted_off": {
-		"message": "Site removed from the blacklist."
+		"message": "Site no longer blacklisted."
 	},
 	"tooltip_anti_track": {
 		"message": "Enhanced Anti-Tracking"
@@ -1234,16 +1234,16 @@
 		"message": "Tracking blocking adjusted to optimize page performance."
 	},
 	"tooltip_trust": {
-		"message": "Always allow trackers & turn off Anti-Tracking on tis site."
+		"message": "Always allow trackers & disable Anti-Tracking on this site."
 	},
 	"tooltip_trust_on": {
-		"message": "Trackers allowed and unprotected on site. Click to Undo."
+		"message": "Trackers allowed and Anti-Tracking disabled on site. Click to Undo."
 	},
 	"tooltip_restrict": {
-		"message": "Always block trackers & protect my data on this site."
+		"message": "Always block trackers & protect my personal data on this site."
 	},
 	"tooltip_restrict_on": {
-		"message": "Trackers blocked and protected on site. Click to Undo."
+		"message": "Trackers blocked and Anti-Tracking enabled on site. Click to Undo."
 	},
 	"tooltip_custom_settings": {
 		"message": "Use my selected tracker settings."

app/panel/components/Summary.jsx

@@ -191,6 +191,7 @@ class Summary extends React.Component {
 		const { paused_blocking, sitePolicy } = this.props;
 		let type;
 		let text;
+		let classes;
 
 		if (this.state.disableBlocking || paused_blocking) {
 			return;
@@ -200,10 +201,12 @@ class Summary extends React.Component {
 			sendMessage('ping', 'trust_site');
 			type = 'whitelist';
 			text = (sitePolicy === 2) ? t('alert_site_trusted_off') : t('alert_site_trusted');
+			classes = (sitePolicy === 2) ? 'warning' : 'success';
 		} else if (button === 'restrict' || (button === 'custom' && sitePolicy === 1)) {
 			sendMessage('ping', 'restrict_site');
 			type = 'blacklist';
 			text = (sitePolicy === 1) ? t('alert_site_restricted_off') : t('alert_site_restricted');
+			classes = (sitePolicy === 1) ? 'warning' : 'alert';
 		} else {
 			return;
 		}
@@ -217,6 +220,7 @@ class Summary extends React.Component {
 		this.props.actions.showNotification({
 			updated: type,
 			reload: true,
+			classes,
 			text,
 		});
 	}

app/panel/reducers/panel.js

@@ -191,7 +191,7 @@ const _showNotification = (state, action) => {
 			updated_notificationShown = false;
 		}
 
-		updated_notificationClasses = 'warning';
+		updated_notificationClasses = msg.classes || 'warning';
 	} else {
 		// Notification banners (success/warnings)
 		if (trackersBannerStatus.show && nowTime > trackersBannerStatus.show_time) {

app/scss/partials/_cliqz_features.scss

@@ -117,4 +117,22 @@
 	&.inactive .feature-name { color: #dedede; }
 	&.inactive .active .feature-name { color: #a4d4f2; }
 	&.smaller .feature-name { display: none; }
+
+	.cliqz-feature.clickable:hover {
+		.count { background-image: buildIconDash(#a4a4a4); }
+		&.anti-tracking .icon { background-image: buildIconAntiTracking(#a4a4a4); }
+		&.ad-blocking .icon { background-image: buildIconAdBlocking(#a4a4a4); }
+		&.smart-blocking .icon { background-image: buildIconSmartBlocking(#a4a4a4); }
+		.feature-name { color: #a4a4a4; }
+	}
+	.cliqz-feature.active.clickable:hover {
+		.count {
+			color: #0093bd;
+			background: none;
+		}
+		&.anti-tracking .icon { background-image: buildIconAntiTracking(#0093bd); }
+		&.ad-blocking .icon { background-image: buildIconAdBlocking(#0093bd); }
+		&.smart-blocking .icon { background-image: buildIconSmartBlocking(#0093bd); }
+		.feature-name { color: #0093bd; }
+	}
 }

app/scss/partials/_ghostery_features.scss

@@ -43,6 +43,12 @@
 		background-color: #1dafed;
 		box-shadow: inset 0px 1px 7px 2px #2092bf;
 	}
+	.button:hover {
+		background-color: #efefef;
+	}
+	.button.active:hover {
+		background-color: #0093bd;
+	}
 
 	.full-height { height: 100%; }
 	.button-trust .button-text,

app/scss/partials/_pause_button.scss

@@ -47,6 +47,11 @@
 			border-left-color: #efefea;
 		}
 	}
+	.button:hover { background-color: #efefef; }
+	.button.active:hover {
+		border-color: #0093bd;
+		background-color: #0093bd;
+	}
 
 	.button-pause {
 		min-width: 125px;