Use context to pass theme

app/images/panel/allow.svg

@@ -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>

app/images/panel/protected.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>

app/images/panel/restrict.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>

app/panel/components/Blocking.jsx

@@ -295,7 +295,6 @@ class Blocking extends React.Component {
 			sitePolicy,
 			smartBlock,
 			smartBlockActive,
-			current_theme,
 		} = this.props;
 
 		const {
@@ -331,7 +330,6 @@ class Blocking extends React.Component {
 								smartBlock={smartBlock}
 								unknownCategory={unknownCategory}
 								enable_anti_tracking={enable_anti_tracking}
-								current_theme={current_theme}
 							/>
 						)}
 					</div>

app/panel/components/Blocking/Categories.jsx

@@ -35,7 +35,6 @@ class Categories extends React.Component {
 			unknownCategory,
 			enable_anti_tracking,
 			sitePolicy,
-			current_theme,
 		} = this.props;
 		const globalBlocking = !!this.props.globalBlocking;
 		const filtered = !!this.props.filtered;
@@ -91,7 +90,6 @@ class Categories extends React.Component {
 					smartBlock={this.props.smartBlock}
 					enable_anti_tracking={enable_anti_tracking}
 					isUnknown={isUnknown}
-					current_theme={current_theme}
 				/>
 			);
 		};

app/panel/components/Blocking/Category.jsx

@@ -164,7 +164,6 @@ class Category extends React.Component {
 			paused_blocking,
 			sitePolicy,
 			isUnknown,
-			current_theme,
 		} = this.props;
 
 		const globalBlocking = !!this.props.globalBlocking;
@@ -271,7 +270,6 @@ class Category extends React.Component {
 						smartBlockActive={this.props.smartBlockActive}
 						smartBlock={this.props.smartBlock}
 						isUnknown={isUnknown}
-						current_theme={current_theme}
 					/>
 				)}
 			</div>

app/panel/components/Blocking/Tracker.jsx

@@ -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,8 +262,7 @@ class Tracker extends React.Component {
 	_renderCliqzAdsIcon() { return this._renderCliqzStatsIcon('ads'); }
 
 	_renderCliqzStatsIcon(type) {
-		const { current_theme } = this.props;
-		const path = `/app/images/panel/tracker-detail-cliqz-${type}-${current_theme}-icon.svg`;
+		const path = `/app/images/panel/tracker-detail-cliqz-${type}-${this.context}-icon.svg`;
 
 		return (
 			<ReactSVG src={path} className="trk-cliqz-stats-icon" />

app/panel/components/Blocking/Trackers.jsx

@@ -40,7 +40,7 @@ class Trackers extends React.Component {
 	* @return {ReactComponent}   ReactComponent instance
 	*/
 	render() {
-		const { trackers, isUnknown, current_theme } = this.props;
+		const { trackers, isUnknown } = this.props;
 		let trackerList;
 		if (this.props.globalBlocking) {
 			const trackersToShow = [];
@@ -75,7 +75,6 @@ class Trackers extends React.Component {
 					smartBlockActive={this.props.smartBlockActive}
 					smartBlock={this.props.smartBlock}
 					isUnknown={isUnknown}
-					current_theme={current_theme}
 				/>
 			));
 		}

app/panel/components/BuildingBlocks/RadioButton.jsx

@@ -11,8 +11,6 @@
  * 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 ClassNames from 'classnames';
@@ -23,15 +21,16 @@ import ClassNames from 'classnames';
  */
 
 const RadioButton = (props) => {
+	const { checked, handleClick } = props;
 	const OuterCircleClassNames = ClassNames('RadioButton__outerCircle', {
-		checked: props.checked,
+		checked,
 	});
 	const InnerCircleClassNames = ClassNames('RadioButton__innerCircle', {
-		checked: props.checked,
+		checked,
 	});
 	return (
 		<span>
-			<span className={OuterCircleClassNames} onClick={props.handleClick}>
+			<span className={OuterCircleClassNames} onClick={handleClick}>
 				<span className={InnerCircleClassNames} />
 			</span>
 		</span>
@@ -40,6 +39,7 @@ const RadioButton = (props) => {
 
 // PropTypes ensure we pass required props of the correct type
 RadioButton.propTypes = {
+	checked: PropTypes.bool.isRequired,
 	handleClick: PropTypes.func.isRequired,
 };
 

app/panel/components/BuildingBlocks/RadioButtonGroup.jsx

@@ -25,20 +25,20 @@ class RadioButtonGroup extends React.Component {
 	constructor(props) {
 		super(props);
 		this.state = {
-			buttons: []
+			buttonState: []
 		};
 	}
 
 	componentDidMount() {
-		const buttons = new Array(this.props.items.length).fill(false);
-		buttons[this.props.selectedIndex] = true;
-		this.setState({ buttons });
+		const buttonState = new Array(this.props.labels.length).fill(false);
+		buttonState[this.props.selectedIndex] = true;
+		this.setState({ buttonState });
 	}
 
 	handleClick(indexClicked) {
-		const { buttons } = this.state;
-		const updatedButtons = buttons.map((button, index) => (index === indexClicked));
-		this.setState({ buttons: updatedButtons });
+		const { buttonState } = this.state;
+		const updatedButtonState = buttonState.map((button, index) => (index === indexClicked));
+		this.setState({ buttonState: updatedButtonState });
 		this.props.handleItemClick(indexClicked);
 	}
 
@@ -47,15 +47,15 @@ class RadioButtonGroup extends React.Component {
 	 * @return {JSX} JSX for rendering the Toggle Slider used throughout the extension
 	 */
 	render() {
-		const { buttons } = this.state;
+		const { buttonState } = this.state;
 		return (
-			this.props.items.map((item, index) => (
-				<div className="flex-container align-justify RadioButtonGroup__container" key={`${index * 2}`}>
+			this.props.labels.map((label, index) => (
+				<div className="flex-container align-justify RadioButtonGroup__container" key={label}>
 					<span className="RadioButtonGroup__label">
-						{t(item.text)}
+						{t(label)}
 					</span>
 					<div>
-						<RadioButton checked={buttons[index]} handleClick={() => this.handleClick(index)} />
+						<RadioButton checked={buttonState[index]} handleClick={() => this.handleClick(index)} />
 					</div>
 				</div>
 			))
@@ -65,7 +65,7 @@ class RadioButtonGroup extends React.Component {
 
 // PropTypes ensure we pass required props of the correct type
 RadioButtonGroup.propTypes = {
-	items: PropTypes.arrayOf(PropTypes.object).isRequired, // Number of objects in array is the number of radio buttons
+	labels: PropTypes.arrayOf(PropTypes.string).isRequired,
 	handleItemClick: PropTypes.func.isRequired,
 	selectedIndex: PropTypes.number.isRequired
 };

app/panel/components/BuildingBlocks/StatsGraph.jsx

@@ -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,12 +163,12 @@ class StatsGraph extends React.Component {
 				.attrTween('stroke-dasharray', interpolator);
 		}
 
-		function getThemeColor(theme) {
-			switch (theme) {
-				default:
-					return '#124559';
+		function getThemeColor() {
+			switch (StatsGraph.context) {
 				case 'palm-theme':
 					return '#172a0b';
+				default:
+					return '#124559';
 			}
 		}
 
@@ -179,7 +181,7 @@ class StatsGraph extends React.Component {
 		pathGroup.append('path')
 			.attr('d', line)
 			.attr('fill', 'none')
-			.attr('stroke', getThemeColor(this.props.theme))
+			.attr('stroke', getThemeColor())
 			.attr('stroke-width', 1.5)
 			.call(animator);
 		// ---------------------------------------------------------------------- //
@@ -204,7 +206,7 @@ class StatsGraph extends React.Component {
 			.enter()
 			.append('circle')
 			.attr('class', (d, i) => `point point-${i}`)
-			.attr('fill', getThemeColor(this.props.theme))
+			.attr('fill', getThemeColor())
 			.attr('cx', d => x(d.index))
 			.attr('cy', d => y(d.amount))
 			.attr('r', 0)

app/panel/components/Panel.jsx

@@ -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>
 		);

app/panel/components/Stats.jsx

@@ -524,14 +524,15 @@ class Stats extends React.Component {
 	 * @return {ReactComponent} StatsView instance
 	 */
 	render() {
-		const { user, loggedIn, current_theme } = this.props;
+		const { user, loggedIn } = this.props;
+		const { showResetModal, selection } = this.state;
 		return (
 			<StatsView
-				showResetModal={this.state.showResetModal}
+				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}
@@ -540,7 +541,6 @@ class Stats extends React.Component {
 				cancelReset={this.cancelReset}
 				subscribe={this.subscribe}
 				signIn={this.signIn}
-				theme={current_theme}
 			/>
 		);
 	}

app/panel/components/StatsView.jsx

@@ -38,7 +38,6 @@ const StatsView = (props) => {
 		cancelReset,
 		subscribe,
 		signIn,
-		theme
 	} = props;
 
 	const {
@@ -123,7 +122,6 @@ const StatsView = (props) => {
 				tooltipText={tooltipText}
 				selectTimeframe={selectTimeframe}
 				timeframeSelectors={timeframeSelectors}
-				theme={theme}
 			/>
 			<div className="tab-header">
 				<div className="tab-container">

app/panel/components/Subscription/SubscriptionThemes.jsx

@@ -22,34 +22,16 @@ import { RadioButtonGroup } from '../BuildingBlocks';
  * @memberOf SettingsComponents
 */
 const SubscriptionThemes = (props) => {
-	const themes = [
-		{
-			name: 'default',
-			text: 'subscription_default_theme',
-		},
-		{
-			name: 'midnight-theme',
-			text: 'subscription_dark_blue_theme',
-		},
-		{
-			name: 'palm-theme',
-			text: 'subscription_palm_theme',
-		},
-		{
-			name: 'leaf',
-			text: 'subscription_leaf_theme',
-		}
-	];
+	const themes = ['default', 'midnight-theme', 'palm-theme', 'leaf-theme'];
+	const themeLabels = ['subscription_default_theme', 'subscription_dark_blue_theme', 'subscription_palm_theme', 'subscription_leaf_theme'];
 
 	const getSelectedIndex = () => {
-		const index = themes.findIndex(theme => theme.name === props.theme);
+		const index = themes.indexOf(props.theme);
 		return index;
 	};
 
 	const handleThemeClick = (index) => {
-		const theme = themes[index];
-		console.log('CLICK', index, themes, theme);
-		props.changeTheme(theme.name);
+		props.changeTheme(themes[index]);
 	};
 
 	return (
@@ -61,7 +43,7 @@ const SubscriptionThemes = (props) => {
 						<img src="../../app/images/panel/icon-information-tooltip-blue.svg" className="s-question" />
 					</span>
 					<RadioButtonGroup
-						items={themes}
+						labels={themeLabels}
 						handleItemClick={handleThemeClick}
 						selectedIndex={getSelectedIndex(props.theme)}
 					/>
@@ -74,7 +56,6 @@ const SubscriptionThemes = (props) => {
 // PropTypes ensure we pass required props of the correct type
 SubscriptionThemes.propTypes = {
 	changeTheme: PropTypes.func.isRequired,
-	theme: PropTypes.string.isRequired,
 };
 
 export default SubscriptionThemes;

app/panel/containers/BlockingContainer.js

@@ -35,7 +35,6 @@ const mapStateToProps = state => Object.assign({}, state.blocking, {
 	paused_blocking: state.summary.paused_blocking,
 	sitePolicy: state.summary.sitePolicy,
 	smartBlockActive: state.panel.enable_smart_block,
-	current_theme: state.panel.current_theme
 });
 /**
  * Bind Blocking view component action creators using Redux's bindActionCreators