Style subscriber badge, and caret for palm-theme

app/panel/components/Blocking/Category.jsx

@@ -12,6 +12,8 @@
  */
 
 import React from 'react';
+import ClassNames from 'classnames';
+import { ThemeContext } from '../../contexts/ThemeContext';
 import Trackers from './Trackers';
 
 /**
@@ -21,6 +23,8 @@ import Trackers from './Trackers';
  * @memberOf BlockingComponents
  */
 class Category extends React.Component {
+	static contextType = ThemeContext;
+
 	constructor(props) {
 		super(props);
 		this.state = {
@@ -153,6 +157,30 @@ class Category extends React.Component {
 		}
 	}
 
+	_renderCaret() {
+		const { isExpanded } = this.state;
+		const { isUnknown } = this.props;
+		// const caretClasses = (this.state.isExpanded ? 'caret-up' : 'caret-down') + (isUnknown ? ' Category__antiTrackingCaret' : '');
+		const caretClasses = ClassNames(this.context, {
+			'caret-down': isExpanded,
+			'caret-up': !isExpanded,
+			Category__antiTrackingCaret: isUnknown
+		});
+		if (isExpanded) {
+			return (
+				<svg className={caretClasses} onClick={this.toggleCategoryTrackers} width="11" height="7" viewBox="0 0 11 7" xmlns="http://www.w3.org/2000/svg">
+					<path d="M1.21.02L-.02 1.25l5.27 5.27 5.27-5.27L9.29.02 5.25 4.06" fillRule="evenodd" />
+				</svg>
+			);
+		}
+		return (
+			<svg className={caretClasses} onClick={this.toggleCategoryTrackers} width="11" height="7" viewBox="0 0 11 7" xmlns="http://www.w3.org/2000/svg">
+				<path d="M1.283 7L0 5.676 5.5 0 11 5.676 9.717 7 5.5 2.649z" fillRule="evenodd" />
+			</svg>
+		);
+		// 4a4a4a
+	}
+
 	/**
 	* Render a list of categories. Pass globalBlocking flag to all trackers
 	* in the category so that they would know which view they are part of.
@@ -169,7 +197,8 @@ class Category extends React.Component {
 		const globalBlocking = !!this.props.globalBlocking;
 
 		const checkBoxStyle = `${(this.state.totalShownBlocked && this.state.allShownBlocked) ? 'all-blocked ' : (this.state.totalShownBlocked ? 'some-blocked ' : '')} checkbox-container`;
-		const caretClasses = (this.state.isExpanded ? 'caret-up' : 'caret-down') + (isUnknown ? ' Category__antiTrackingCaret' : '');
+		// const caretClasses = (this.state.isExpanded ? 'caret-up' : 'caret-down') + (isUnknown ? ' Category__antiTrackingCaret' : '');
+		// const caretClasses = (this.state.isExpanded ? this._renderCaret('up') : this._renderCaret('down'));
 		const filteredText = { color: 'red' };
 
 		let trackersBlockedCount;
@@ -224,7 +253,9 @@ class Category extends React.Component {
 							</div>
 						</div>
 						<div className="columns collapse-left collapse-right shrink align-self-justify">
-							<div className={caretClasses} onClick={this.toggleCategoryTrackers} />
+							{
+								this._renderCaret()
+							}
 							{!isUnknown && (
 								<div className={checkBoxStyle} onClick={this.clickCategoryStatus}>
 									<span className={this.props.index ? 't-tooltip-up-left' : 't-tooltip-down-left'} data-g-tooltip={t('panel_tracker_block_tooltip')} onMouseOver={this.showTooltip} onMouseOut={this.hideTooltip}>

app/panel/components/Summary.jsx

@@ -746,7 +746,7 @@ class Summary extends React.Component {
 	 * @return {JSX} JSX for rendering the plus upgrade banner or subscriber icon
 	 */
 	_renderPlusUpgradeBannerOrSubscriberIcon() {
-		const { is_expert } = this.props;
+		const { is_expert, current_theme } = this.props;
 
 		const isPlusSubscriber = this._isPlusSubscriber();
 		const upgradeBannerClassNames = ClassNames('UpgradeBanner', {
@@ -758,7 +758,7 @@ class Summary extends React.Component {
 			<div onClick={this.clickUpgradeBannerOrGoldPlusIcon}>
 				{isPlusSubscriber && (
 					<div className="Summary__subscriberBadgeContainer">
-						<div className="SubscriberBadge">
+						<div className={`SubscriberBadge ${current_theme}`}>
 							<ReactSVG src="/app/images/panel/gold-plus-icon.svg" className="gold-plus-icon" />
 						</div>
 					</div>

app/scss/partials/_blocking_category.scss

@@ -62,20 +62,21 @@
 			border-top: 0;
 			padding-top: 0;
 		}
-
 		.caret-down {
 			@extend %pointer;
 			display: inline-block;
-			width: 40px;
-			height: 20px;
-			background: url("../../app/images/panel/caret-down.svg") no-repeat center;
+			margin: 0 15px 4px 0;
+			path {
+				fill: $tundora;
+			}
 		}
 		.caret-up {
 			@extend %pointer;
 			display: inline-block;
-			width: 40px;
-			height: 20px;
-			background: url("../../app/images/panel/caret-up.svg") no-repeat center;
+			margin: 0 15px 4px 0;
+			path {
+				fill: $tundora;
+			}
 		}
 		.checkbox-container {
 			display: inline-block;

app/scss/theme/theme.scss

@@ -146,6 +146,16 @@ $hist_stats_tab_active: 		#FFF !default;
 	}
 	.Summary__subscriberBadgeContainer {
 		left: 15px;
+		.SubscriberBadge.palm-theme {
+			svg > g > g > path:nth-child(1) {
+				stroke: #7C8066;
+			};
+		}
+		.SubscriberBadge.leaf-theme {
+			svg > g > g > path:nth-child(1) {
+				stroke: #3A3A21;
+			};
+		}
 	}
 	.GhosteryFeatureButton {
 		border: $button_border;
@@ -294,6 +304,10 @@ $hist_stats_tab_active: 		#FFF !default;
 			border-bottom: 1px solid $divider;
 			padding-top: 3px;
 		}
+		.caret-up.palm-theme > path,
+		.caret-down.palm-theme > path {
+			fill: #FFF;
+		}
 	}
 	.cat-name {
 		color: $tracker_list_text;
@@ -571,34 +585,6 @@ $hist_stats_tab_active: 		#FFF !default;
 	}
 }
 
-#content-detail.expanded {
-	.blocking-category .sticky-category .counts:after {
-	    content: "";
-		display: block;
-		margin-left: -45px;
-		width: 470px;
-		padding-top: 20px;
-		border-bottom: 1px solid #FFF;
-		padding-top: 3px;
-	}
-	.blocking-trk {
-		&:after {
-			content: "";
-			display: block;
-			margin-left: -6px;
-			width: 470px;
-			border-bottom: 1px solid #FFF;
-		}
-	}
-	&:after {
-		content: "";
-		display: block;
-		margin-left: -6px;
-		width: 306px;
-		border-bottom: 1px solid #5a7479;
-	}
-}
-
 #content-detail.expanded {
 	.blocking-category .sticky-category .counts:after {
 	    content: "";