ghostery · benstrumeyer · Mar 11, 2020 · Mar 11, 2020 · Mar 12, 2020 · Mar 12, 2020
@@ -1817,8 +1817,17 @@
 	"subscribe_pitch_sign_in": {
 		"message": "Already subscribed? Sign in"
 	},
-	"subscription_midnight_theme": {
-		"message": "Midnight Theme"
+	"subscription_default_theme": {
+		"message": "Default"
+	},
+	"subscription_dark_blue_theme": {
+		"message": "Dark Blue Theme"
+	},
+	"subscription_palm_theme": {
+		"message": "Palm Theme"
+	},
+	"subscription_leaf_theme": {
+		"message": "Leaf Theme"
 	},
 	"subscription_status": {
 		"message": "Status"

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="33" height="33" viewBox="0 0 33 33">
+    <circle cx="62.5" cy="147.5" r="13.5" fill="none" fill-rule="evenodd" stroke="#FFF" stroke-width="4.444" transform="translate(-46 -131)"/>
+</svg>
@@ -0,0 +1,6 @@
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <g transform="translate(1)" fill="none" fill-rule="evenodd">
+    <circle stroke="#2092bf" cx="7" cy="8" r="7"/>
+    <path d="M5.86 4.756c0-.582.326-.873.974-.873.648 0 .973.29.973.873 0 .277-.08.493-.244.647-.162.155-.405.232-.73.232-.647 0-.972-.293-.972-.88zM7.726 13H5.938V6.45h1.787V13z" fill="#2092bf"/>
+  </g>
+</svg>
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="29" height="29" viewBox="0 0 29 29">
+    <path fill="#FFF" fill-rule="evenodd" stroke="#FFF" stroke-width="3.78" d="M14.766 2.04c-.16-.053-.372-.053-.532 0L2.798 5.074C2.319 5.18 2 5.606 2 6.084c.053 8.143 4.415 15.7 11.915 20.756.16.107.372.16.585.16.213 0 .426-.053.585-.16C22.585 21.784 26.947 14.227 27 6.084c0-.478-.32-.904-.798-1.01L14.766 2.04z"/>
+</svg>
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+    <g fill="none" fill-rule="evenodd" stroke="#FFF" stroke-width="4.5" transform="translate(3 3)">
+        <path stroke-linecap="square" d="M0 0L18 18" transform="translate(4.5 4.5)"/>
+        <circle cx="13.219" cy="13.219" r="13.219"/>
+    </g>
+</svg>
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg width="10" height="10" viewBox="0 0 11 11" xmlns="http://www.w3.org/2000/svg">
+  <g fill="none" fill-rule="evenodd">
+    <path fill="#FFF" d="M7.49 1.234L9.922 3.89l-.157 3.6L7.11 9.922l-3.6-.157L1.078 7.11l.157-3.6L3.89 1.078z"/>
+    <path fill="#2e3b80" stroke="#2e3b80" stroke-width=".5" d="M2.788 8.54c.315.315.628.63.944.943.023.023.067.035.103.035 1.077.001 2.153.002 3.23-.001.04 0 .09-.02.117-.048a820.63 820.63 0 0 0 2.285-2.285.184.184 0 0 0 .05-.116c.003-1.08.003-2.16.002-3.24-.001-.03-.008-.068-.026-.088-.316-.321-.635-.64-.95-.956L2.789 8.54m-.436-.433l5.754-5.754c-.308-.309-.621-.623-.937-.936a.16.16 0 0 0-.102-.036 709.213 709.213 0 0 0-3.231 0c-.04 0-.09.02-.118.048-.765.762-1.53 1.525-2.291 2.29a.16.16 0 0 0-.045.1 928.271 928.271 0 0 0 0 3.26c0 .029.01.065.03.085.314.318.631.634.94.943m7.752-2.652c0 .581-.002 1.162.002 1.743a.405.405 0 0 1-.127.31 879.44 879.44 0 0 0-2.47 2.47.398.398 0 0 1-.303.128c-1.17-.003-2.341-.003-3.512 0a.4.4 0 0 1-.302-.126A884.3 884.3 0 0 0 .915 7.503a.385.385 0 0 1-.121-.294c.002-1.17.002-2.342 0-3.513 0-.122.036-.216.123-.303.827-.824 1.653-1.65 2.477-2.477a.388.388 0 0 1 .293-.123c1.174.002 2.348.002 3.523 0 .119 0 .21.038.293.122.827.83 1.655 1.657 2.484 2.484.081.08.12.17.119.285-.004.59-.002 1.181-.002 1.771"/>
+  </g>
+</svg>
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg width="10" height="10" viewBox="0 0 11 11" xmlns="http://www.w3.org/2000/svg">
+  <g fill="none" fill-rule="evenodd">
+    <path fill="#172a0b" d="M7.49 1.234L9.922 3.89l-.157 3.6L7.11 9.922l-3.6-.157L1.078 7.11l.157-3.6L3.89 1.078z"/>
+    <path fill="#87f0fb" stroke="#87f0fb" stroke-width=".5" d="M2.788 8.54c.315.315.628.63.944.943.023.023.067.035.103.035 1.077.001 2.153.002 3.23-.001.04 0 .09-.02.117-.048a820.63 820.63 0 0 0 2.285-2.285.184.184 0 0 0 .05-.116c.003-1.08.003-2.16.002-3.24-.001-.03-.008-.068-.026-.088-.316-.321-.635-.64-.95-.956L2.789 8.54m-.436-.433l5.754-5.754c-.308-.309-.621-.623-.937-.936a.16.16 0 0 0-.102-.036 709.213 709.213 0 0 0-3.231 0c-.04 0-.09.02-.118.048-.765.762-1.53 1.525-2.291 2.29a.16.16 0 0 0-.045.1 928.271 928.271 0 0 0 0 3.26c0 .029.01.065.03.085.314.318.631.634.94.943m7.752-2.652c0 .581-.002 1.162.002 1.743a.405.405 0 0 1-.127.31 879.44 879.44 0 0 0-2.47 2.47.398.398 0 0 1-.303.128c-1.17-.003-2.341-.003-3.512 0a.4.4 0 0 1-.302-.126A884.3 884.3 0 0 0 .915 7.503a.385.385 0 0 1-.121-.294c.002-1.17.002-2.342 0-3.513 0-.122.036-.216.123-.303.827-.824 1.653-1.65 2.477-2.477a.388.388 0 0 1 .293-.123c1.174.002 2.348.002 3.523 0 .119 0 .21.038.293.122.827.83 1.655 1.657 2.484 2.484.081.08.12.17.119.285-.004.59-.002 1.181-.002 1.771"/>
+  </g>
+</svg>
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg width="10" height="10" viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">
+  <path fill="#FFF" fill-rule="evenodd" stroke="#2e3b80" stroke-width=".96" d="M5.085 1.013a.288.288 0 0 0-.17 0l-3.66.97A.328.328 0 0 0 1 2.308c.017 2.606 1.413 5.024 3.813 6.642.05.034.119.051.187.051a.344.344 0 0 0 .187-.051C7.587 7.33 8.983 4.913 9 2.307a.328.328 0 0 0-.255-.323l-3.66-.971z"/>
+</svg>
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg width="10" height="10" viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">
+  <path fill="#172a0b" fill-rule="evenodd" stroke="#87f0fb" stroke-width=".96" d="M5.085 1.013a.288.288 0 0 0-.17 0l-3.66.97A.328.328 0 0 0 1 2.308c.017 2.606 1.413 5.024 3.813 6.642.05.034.119.051.187.051a.344.344 0 0 0 .187-.051C7.587 7.33 8.983 4.913 9 2.307a.328.328 0 0 0-.255-.323l-3.66-.971z"/>
+</svg>
@@ -294,7 +294,7 @@ class Blocking extends React.Component {
 			show_tracker_urls,
 			sitePolicy,
 			smartBlock,
-			smartBlockActive
+			smartBlockActive,
 		} = this.props;
 
 		const {

@@ -17,6 +17,7 @@ import React from 'react';
 import { ReactSVG } from 'react-svg';
 import ClassNames from 'classnames';
 
+import { ThemeContext } from '../../contexts/ThemeContext';
 import globals from '../../../../src/classes/Globals';
 import { log } from '../../../../src/utils/common';
 import { sendMessageInPromise } from '../../utils/msg';
@@ -27,6 +28,8 @@ import { renderKnownTrackerButtons, renderUnknownTrackerButtons } from './tracke
  * @memberOf BlockingComponents
  */
 class Tracker extends React.Component {
+	static contextType = ThemeContext;
+
 	constructor(props) {
 		super(props);
 		this.state = {
@@ -259,7 +262,7 @@ class Tracker extends React.Component {
 	_renderCliqzAdsIcon() { return this._renderCliqzStatsIcon('ads'); }
 
 	_renderCliqzStatsIcon(type) {
-		const path = `/app/images/panel/tracker-detail-cliqz-${type}-icon.svg`;
+		const path = `/app/images/panel/tracker-detail-cliqz-${type}-${this.context}-icon.svg`;
 
 		return (
 			<ReactSVG src={path} className="trk-cliqz-stats-icon" />

@@ -51,7 +51,13 @@ class CliqzFeature extends React.Component {
 	}
 
 	_getStatus(active) {
-		return active ? t('on') : t('off');
+		const { current_theme, trackerCount } = this.props;
+		switch (current_theme) {
+			case 'palm-theme':
+				return active ? (<span>{trackerCount}</span>) : (<div className="rectangle" />);
+			default:
+				return active ? t('on') : t('off');
+		}
 	}
 
 	_getTooltipBodyText(active, isTooltipBody, type) {

@@ -0,0 +1,46 @@
+/**
+ * Radio Button Component
+ *
+ * Ghostery Browser Extension
+ * https://www.ghostery.com/
+ *
+ * Copyright 2019 Ghostery, Inc. All rights reserved.
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import ClassNames from 'classnames';
+
+/**
+ * @class Implements a single radio button to be used inside the RadioButtonGroup component
+ * @memberof PanelBuildingBlocks
+ */
+
+const RadioButton = (props) => {
+	const { checked, handleClick } = props;
+	const OuterCircleClassNames = ClassNames('RadioButton__outerCircle', {
+		checked,
+	});
+	const InnerCircleClassNames = ClassNames('RadioButton__innerCircle', {
+		checked,
+	});
+	return (
+		<span>
+			<span className={OuterCircleClassNames} onClick={handleClick}>
+				<span className={InnerCircleClassNames} />
+			</span>
+		</span>
+	);
+};
+
+// PropTypes ensure we pass required props of the correct type
+RadioButton.propTypes = {
+	checked: PropTypes.bool.isRequired,
+	handleClick: PropTypes.func.isRequired,
+};
+
+export default RadioButton;
@@ -0,0 +1,51 @@
+/**
+ * Radio Button Group Component
+ *
+ * Ghostery Browser Extension
+ * https://www.ghostery.com/
+ *
+ * Copyright 2019 Ghostery, Inc. All rights reserved.
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0
+ */
+
+/* eslint jsx-a11y/label-has-associated-control: 0 */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import RadioButton from './RadioButton';
+
+/**
+ * @class Implements a radio button group
+ * @memberof PanelBuildingBlocks
+ */
+const RadioButtonGroup = (props) => {
+	const { indexClicked, handleItemClick } = props;
+	return (
+		props.labels.map((label, index) => (
+			<div className="flex-container align-justify RadioButtonGroup__container" key={label}>
+				<span className="RadioButtonGroup__label">
+					{t(label)}
+				</span>
+				<div>
+					<RadioButton
+						checked={index === indexClicked}
+						handleClick={() => handleItemClick(index)}
+					/>
+				</div>
+			</div>
+		))
+	);
+};
+
+// PropTypes ensure we pass required props of the correct type
+RadioButtonGroup.propTypes = {
+	labels: PropTypes.arrayOf(PropTypes.string).isRequired,
+	handleItemClick: PropTypes.func.isRequired,
+	indexClicked: PropTypes.number.isRequired
+};
+
+
+export default RadioButtonGroup;
@@ -14,12 +14,14 @@
 import { isEqual } from 'underscore';
 import React from 'react';
 import * as D3 from 'd3';
-
+import { ThemeContext } from '../../contexts/ThemeContext';
 /**
  * Generates an animated graph displaying locally stored stats
  * @memberof PanelBuildingBlocks
  */
 class StatsGraph extends React.Component {
+	static contextType = ThemeContext;
+
 	/**
 	 * Lifecycle event
 	 */
@@ -161,6 +163,17 @@ class StatsGraph extends React.Component {
 				.attrTween('stroke-dasharray', interpolator);
 		}
 
+		function getThemeColor() {
+			switch (StatsGraph.context) {
+				case 'palm-theme':
+					return '#172a0b';
+				case 'leaf-theme':
+					return '#173700';
+				default:
+					return '#124559';
+			}
+		}
+
 		pathGroup.append('path')
 			.style('stroke', '#dddddd')
 			.style('stroke-dasharray', '4,4')
@@ -170,7 +183,7 @@ class StatsGraph extends React.Component {
 		pathGroup.append('path')
 			.attr('d', line)
 			.attr('fill', 'none')
-			.attr('stroke', '#124559')
+			.attr('stroke', getThemeColor())
 			.attr('stroke-width', 1.5)
 			.call(animator);
 		// ---------------------------------------------------------------------- //
@@ -187,7 +200,6 @@ class StatsGraph extends React.Component {
 					.style('opacity', opacity);
 			}, 1);
 		}
-
 		// Add data points with event listeners for opening their respective tooltips
 		canvas.append('g')
 			.attr('class', 'point-group')
@@ -196,7 +208,7 @@ class StatsGraph extends React.Component {
 			.enter()
 			.append('circle')
 			.attr('class', (d, i) => `point point-${i}`)
-			.attr('fill', '#124559')
+			.attr('fill', getThemeColor())
 			.attr('cx', d => x(d.index))
 			.attr('cy', d => y(d.amount))
 			.attr('r', 0)

@@ -21,6 +21,8 @@ import GhosteryFeature from './GhosteryFeature';
 import NotScanned from './NotScanned';
 import PauseButton from './PauseButton';
 import ToggleSlider from './ToggleSlider';
+import RadioButtonGroup from './RadioButtonGroup';
+import RadioButton from './RadioButton';
 import ModalExitButton from './ModalExitButton';
 
 export {
@@ -31,5 +33,7 @@ export {
 	NotScanned,
 	PauseButton,
 	ToggleSlider,
+	RadioButtonGroup,
+	RadioButton,
 	ModalExitButton
 };
@@ -16,6 +16,7 @@ import { NavLink } from 'react-router-dom';
 import Header from '../containers/HeaderContainer';
 import { PremiumPromoModal } from '../../shared-components';
 import InsightsPromoModal from './InsightsPromoModal';
+import { ThemeContext } from '../contexts/ThemeContext';
 import { DynamicUIPortContext } from '../contexts/DynamicUIPortContext';
 import { sendMessage } from '../utils/msg';
 import { setTheme } from '../utils/utils';
@@ -408,7 +409,7 @@ class Panel extends React.Component {
 		}
 
 		const notificationText = this.props.notificationShown && this.renderNotification();
-
+		const { current_theme } = this.props;
 		return (
 			<div id="panel">
 				{this._renderPromoModal()}
@@ -425,9 +426,11 @@ class Panel extends React.Component {
 					</div>
 				</div>
 				<Header />
-				<DynamicUIPortContext.Provider value={this._dynamicUIPort}>
-					{ this.props.children }
-				</DynamicUIPortContext.Provider>
+				<ThemeContext.Provider value={current_theme}>
+					<DynamicUIPortContext.Provider value={this._dynamicUIPort}>
+						{ this.props.children }
+					</DynamicUIPortContext.Provider>
+				</ThemeContext.Provider>
 
 			</div>
 		);

@@ -524,13 +524,15 @@ class Stats extends React.Component {
 	 * @return {ReactComponent} StatsView instance
 	 */
 	render() {
+		const { user, loggedIn } = this.props;
+		const { showResetModal, selection } = this.state;
 		return (
 			<StatsView
-				showResetModal={this.state.showResetModal}
-				showPitchModal={!this.props.user || !this.props.user.subscriptionsPlus}
-				loggedIn={this.props.loggedIn}
+				showResetModal={showResetModal}
+				showPitchModal={!user || !user.subscriptionsPlus}
+				loggedIn={loggedIn}
 				getStats={this.getStats}
-				selection={this.state.selection}
+				selection={selection}
 				selectView={this.selectView}
 				selectType={this.selectType}
 				selectTimeframe={this.selectTimeframe}

@@ -28,7 +28,9 @@ import PrioritySupport from './Subscription/PrioritySupport';
 class Subscription extends React.Component {
 	constructor(props) {
 		super(props);
-		this.state = { isChecked: (props.current_theme !== 'default') };
+		this.state = {
+			theme: this.props.current_theme
+		};
 	}
 
 	/**
@@ -75,18 +77,16 @@ class Subscription extends React.Component {
 		return { loading: true };
 	}
 
-	toggleThemes = () => {
-		const newChecked = !this.state.isChecked;
-		this.setState({ isChecked: newChecked });
-		const updated_theme = newChecked ? 'midnight-theme' : 'default';
+	changeTheme = (updated_theme) => {
+		this.setState({ theme: updated_theme });
 		this.props.actions.getTheme(updated_theme).then(() => {
 			sendMessage('ping', 'theme_change');
 		});
 	}
 
 	SubscriptionInfoComponent = () => (<SubscriptionInfo subscriptionData={this.parseSubscriptionData()} />);
 
-	SubscriptionThemesComponent = () => (<SubscriptionThemes isChecked={this.state.isChecked} toggleThemes={this.toggleThemes} />);
+	SubscriptionThemesComponent = () => (<SubscriptionThemes theme={this.state.theme} changeTheme={this.changeTheme} />);
 
 	PrioritySupportComponent = () => (<PrioritySupport />);
 

@@ -74,7 +74,7 @@ const SubscriptionInfo = (props) => {
 									</div>
 									<div className="list-row">
 										<ul>
-											<li className="list-item">{t('subscription_midnight_theme')}</li>
+											<li className="list-item">{t('subscription_dark_blue_theme')}</li>
 											<li className="list-item">{t('historical_stats')}</li>
 											<li className="list-item">{t('priority_support')}</li>
 										</ul>