Ghostery Feature button alignment and styling fixes. Centered page st…

…ats.

app/panel/components/BuildingBlocks/GhosteryFeature.jsx

@@ -74,40 +74,42 @@ class GhosteryFeature extends React.Component {
 		}
 	}
 
-	_trustActive() {
-		const { type, sitePolicy } = this.props;
-
-		return (type === 'trust' && sitePolicy === WHITELISTED);
-	}
-
-	_restrictActive() {
-		const { type, sitePolicy } = this.props;
-
-		return (type === 'restrict' && sitePolicy === BLACKLISTED);
+	_isFeatureActive(type, sitePolicy) {
+		switch (type) {
+			case 'trust':
+				return sitePolicy === WHITELISTED;
+			case 'restrict':
+				return sitePolicy === BLACKLISTED;
+			default:
+				return false;
+		}
 	}
 
 	render() {
 		const {
 			blockingPausedOrDisabled,
-			sitePolicy,
+			narrow,
+			short,
 			showText,
+			sitePolicy,
 			tooltipPosition,
 			type
 		} = this.props;
 
-		const active = this._trustActive() || this._restrictActive();
+		const active = this._isFeatureActive(type, sitePolicy);
 		// TODO Foundation dependency: button
 		const ghosteryFeatureClassNames = ClassNames(
 			'button',
 			'g-tooltip',
 			'GhosteryFeatureButton',
-			'GhosteryFeatureButton--FoundationButtonOverrides',
 			{
+				'GhosteryFeatureButton--normal': !narrow && !short,
+				'GhosteryFeatureButton--short': short,
+				'GhosteryFeatureButton--narrow': narrow,
 				'GhosteryFeatureButton--inactive': !active,
 				'GhosteryFeatureButton--active': active,
-				'GhosteryFeatureButton--trust': type === 'trust',
-				'GhosteryFeatureButton--restrict': type === 'restrict',
-				'GhosteryFeatureButton--blockingPausedOrDisabled': blockingPausedOrDisabled,
+				trust: type === 'trust',
+				restrict: type === 'restrict',
 				clickable: !blockingPausedOrDisabled,
 				'not-clickable': blockingPausedOrDisabled,
 			}

app/panel/components/Summary.jsx

@@ -543,6 +543,7 @@ class Summary extends React.Component {
 			sitePolicy,
 		} = this.props;
 		const { disableBlocking } = this.state;
+		const isCondensed = this._isCondensed();
 		const containerClassNames = ClassNames('Summary__ghosteryFeatureContainer', modifiers);
 
 		return (
@@ -554,6 +555,8 @@ class Summary extends React.Component {
 					blockingPausedOrDisabled={paused_blocking || disableBlocking}
 					showText={!this._isCondensed()}
 					tooltipPosition={is_expert ? 'right' : 'top'}
+					short={is_expert && !isCondensed}
+					narrow={isCondensed}
 				/>
 			</div>
 		);

app/scss/partials/_ghostery_feature.scss

@@ -27,123 +27,12 @@
 /*
 .sub-component.ghostery-features {
 	.button {
-		width: 150px;
-		height: 45px;
-		font-size: 11px;
-		line-height: 1.5;
-		color: #4a4a4a;
-		border-color: #cccccc;
-		background-color: #ffffff;
-		margin-bottom: 0;
-		box-shadow: inset 0 0 0 0 rgba($white, 0);
-
-		transition: background-image 0.25s ease-out,
-		background-color 0.25s ease-out,
-		border-color 0.25s ease-out,
-		box-shadow 0.25 ease-out,
-		color 0.25s ease-out;
 		&:hover {
 			background-color: #efefef;
 		}
 	}
-	.button.active.button-trust {
-		color: #ffffff;
-		border-color: #85b329;
-		background-color: #9ecc42;
-		box-shadow: inset 0px 1px 7px 2px #85b329;
-		&:hover {
-			background-color: #85b329;
-		}
-	}
-	.button.active.button-restrict {
-		color: #ffffff;
-		border-color: #ce273c;
-		background-color: #e74055;
-		box-shadow: inset 0px 1px 7px 2px #ce273c;
-		&:hover {
-			background-color: #ce273c;
-		}
-	}
-	.button.active.ab-pause {
-		color: #ffffff;
-		border-color: #2092bf;
-		background-color: #1dafed;
-		box-shadow: inset 0px 1px 7px 2px #2092bf;
-		&:hover {
-			background-color: #0093bd;
-		}
-	}
 
 	.full-height { height: 100%; }
-	.button-trust .button-text,
-	.button-restrict .button-text {
-		padding: 0 10px 0 30px;
-		background-repeat: no-repeat;
-		background-position: 0 center;
-		background-size: 14px 14px;
-	}
-	.button-trust .button-text {
-		background-image: buildIconTrust(#4a4a4a);
-	}
-	.button-trust.active .button-text {
-		background-image: buildIconTrust(#ffffff);
-	}
-	.button-restrict .button-text {
-		background-image: buildIconRestrict(#4a4a4a);
-	}
-	.button-restrict.active .button-text {
-		background-image: buildIconRestrict(#ffffff);
-	}
-
-	.button-group.inactive {
-		.button {
-			color: #a4a4a4;
-			border-color: #e5e5e5;
-			background-color: #ffffff;
-			box-shadow: inset 0 0 0 0 rgba($white, 0);
-		}
-		.button.active.button-trust {
-			color: #ffffff;
-			border-color: #b8e65c;
-			background-color: #b8e65c;
-		}
-		.button.active.button-restrict {
-			color: #ffffff;
-			border-color: #ff8da2;
-			background-color: #ff8da2;
-		}
-		.button.active.ab-pause {
-			color: #ffffff;
-			border-color: #a4d4f2;
-			background-color: #a4d4f2;
-		}
-		.button-trust .button-text {
-			background-image: buildIconTrust(#a4a4a4);
-		}
-		.button-trust.active .button-text {
-			background-image: buildIconTrust(#ffffff);
-		}
-		.button-restrict .button-text {
-			background-image: buildIconRestrict(#a4a4a4);
-		}
-		.button-restrict.active .button-text {
-			background-image: buildIconRestrict(#ffffff);
-		}
-	}
-
-	.button-group.stacked .button {
-		height: 35px;
-		margin-bottom: 0;
-	}
-	.button-group.stacked .button.condensed {
-		width: 66px;
-		height: 41px;
-		.button-text {
-			padding: 10px;
-			font-size: 9px;
-			background-position: center center;
-		}
-	}
 
 	.button-top {
 		border-bottom-left-radius: 0;
@@ -174,85 +63,124 @@
 }
 */
 
-/*
-.button {
-	color: #4a4a4a;
-	border-color: #cccccc;
-	background-color: #ffffff;
-	box-shadow: inset 0 0 0 0 rgba($white, 0);
-*/
+.GhosteryFeatureButton__text {
+	background-repeat: no-repeat;
+	background-size: 14px 14px;
+}
 
 .GhosteryFeatureButton {
-	width: 150px;
-	height: 45px;
-
 	transition: background-image 0.25s ease-out,
 		background-color 0.25s ease-out,
 		border-color 0.25s ease-out,
 		box-shadow 0.25s ease-out,
 		color 0.25s ease-out;
-}
 
-.GhosteryFeatureButton--FoundationButtonOverrides {
+	// Foundation .button overrides
+	margin-bottom: 0;
 	line-height: 1.5;
 	font-size: 11px;
-	margin-bottom: 0;
 }
 
-.GhosteryFeatureButton--inactive {
-	color: $tundora;
-	border-color: #cccccc;
-	background-color: $white;
-	box-shadow: inset 0 0 0 0 rgba($white, 0);
+.GhosteryFeatureButton--normal,
+.GhosteryFeatureButton--short {
+	width: 150px;
 
-	&:hover {
-		color: $tundora;
+	.GhosteryFeatureButton__text {
+		padding: 0 10px 0 30px;
+		background-position: 0 center;
 	}
 }
 
-.GhosteryFeatureButton--active {
-	color: $white;
+.GhosteryFeatureButton--normal {
+	height: 45px;
+}
+
+.GhosteryFeatureButton--short {
+	height: 35px;
 }
 
-.GhosteryFeatureButton--trust.GhosteryFeatureButton--active {
-	border-color: #85b329;
-	background-color: $atlantis;
-	box-shadow: inset 0px 1px 7px 2px #85b329;
+.GhosteryFeatureButton--narrow {
+	width: 66px;
+	height: 41px;
 
-	&:hover {
-		background-color: #85b329;
+	.GhosteryFeatureButton__text {
+		padding: 10px;
+		font-size: 9px;
+		background-position: center center;
 	}
 }
 
-.GhosteryFeatureButton--restrict.GhosteryFeatureButton--active {
-	border-color: #ce273c;
-	background-color: $red;
-	box-shadow: inset 0px 1px 7px 2px #ce273c;
+.GhosteryFeatureButton--inactive.clickable {
+	color: $tundora;
+	border-color: #cccccc;
+	background-color: $white;
+	box-shadow: inset 0 0 0 0 rgba($white, 0);
+	&:hover { color: $tundora; }
 
-	&:hover {
-		background-color: #ce273c;
+	&.trust .GhosteryFeatureButton__text {
+		background-image: buildIconTrust($tundora);
 	}
-}
 
-.GhosteryFeatureButton__text {
-	padding: 0 10px 0 30px;
-	background-repeat: no-repeat;
-	background-position: 0 center;
-	background-size: 14px 14px;
+	&.restrict .GhosteryFeatureButton__text {
+		background-image: buildIconRestrict($tundora);
+	}
 }
 
-.GhosteryFeatureButton--trust.GhosteryFeatureButton--inactive .GhosteryFeatureButton__text {
-	background-image: buildIconTrust($tundora);
+.GhosteryFeatureButton--inactive.not-clickable {
+	color: #a4a4a4;
+	border-color: #e5e5e5;
+	background-color: #ffffff;
+	box-shadow: inset 0 0 0 0 rgba($white, 0);
 
-}
-.GhosteryFeatureButton--trust.GhosteryFeatureButton--active .GhosteryFeatureButton__text {
-	background-image: buildIconTrust($white);
+	&.trust .GhosteryFeatureButton__text {
+		background-image: buildIconTrust(#a4a4a4);
+	}
 
+	&.restrict .GhosteryFeatureButton__text {
+		background-image: buildIconRestrict(#a4a4a4);
+	}
 }
-.GhosteryFeatureButton--restrict.GhosteryFeatureButton--inactive .GhosteryFeatureButton__text {
-	background-image: buildIconRestrict($tundora);
 
+.GhosteryFeatureButton--active.clickable {
+	color: $white;
+
+	&.trust {
+		border-color: #85b329;
+		background-color: $atlantis;
+		box-shadow: inset 0px 1px 7px 2px #85b329;
+	}
+	&.trust:hover { background-color: #85b329; }
+	&.trust .GhosteryFeatureButton__text {
+		background-image: buildIconTrust($white);
+	}
+
+	&.restrict {
+		border-color: #ce273c;
+		background-color: $red;
+		box-shadow: inset 0px 1px 7px 2px #ce273c;
+	}
+	&.restrict:hover { background-color: #ce273c; }
+	&.restrict .GhosteryFeatureButton__text {
+		background-image: buildIconRestrict($white);
+	}
 }
-.GhosteryFeatureButton--restrict.GhosteryFeatureButton--active .GhosteryFeatureButton__text {
-	background-image: buildIconRestrict($white);
+
+.GhosteryFeatureButton--active.not-clickable {
+	&.trust {
+		color: $white;
+		border-color: #b8e65c;
+		background-color: #b8e65c;
+	}
+	&.trust .GhosteryFeatureButton__text {
+		background-image: buildIconTrust($white);
+	}
+
+	&.restrict {
+		color: $white;
+		border-color: #ff8da2;
+		background-color: #ff8da2;
+	}
+	&.restrict .GhosteryFeatureButton__text {
+		background-image: buildIconRestrict($white);
+	}
 }

app/scss/partials/_summary.scss

@@ -30,6 +30,10 @@
 	color: #4a4a4a;
 }
 
+.Summary__pageStatsContainer {
+	text-align: center;
+}
+
 .Summary__pageStatContainer {
 	text-align: center;
 }
@@ -168,6 +172,10 @@
 	height: 162px;
 }
 
+.Summary__ghosteryFeaturesContainer {
+	text-align: center;
+}
+
 .Summary__ghosteryFeatureContainer {
 	display: inline-block;
 }