Create palm theme svgs

app/images/panel/tracker-detail-cliqz-ads-palm-theme-icon.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>

app/images/panel/tracker-detail-cliqz-cookies-and-fingerprints-palm-theme-icon.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>

app/panel/components/Blocking.jsx

@@ -294,7 +294,8 @@ class Blocking extends React.Component {
 			show_tracker_urls,
 			sitePolicy,
 			smartBlock,
-			smartBlockActive
+			smartBlockActive,
+			current_theme,
 		} = this.props;
 
 		const {
@@ -330,6 +331,7 @@ 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,6 +35,7 @@ class Categories extends React.Component {
 			unknownCategory,
 			enable_anti_tracking,
 			sitePolicy,
+			current_theme,
 		} = this.props;
 		const globalBlocking = !!this.props.globalBlocking;
 		const filtered = !!this.props.filtered;
@@ -90,6 +91,7 @@ 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,6 +164,7 @@ class Category extends React.Component {
 			paused_blocking,
 			sitePolicy,
 			isUnknown,
+			current_theme,
 		} = this.props;
 
 		const globalBlocking = !!this.props.globalBlocking;
@@ -270,6 +271,7 @@ 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

@@ -259,7 +259,8 @@ class Tracker extends React.Component {
 	_renderCliqzAdsIcon() { return this._renderCliqzStatsIcon('ads'); }
 
 	_renderCliqzStatsIcon(type) {
-		const path = `/app/images/panel/tracker-detail-cliqz-${type}-icon.svg`;
+		const { current_theme } = this.props;
+		const path = `/app/images/panel/tracker-detail-cliqz-${type}-${current_theme}-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 } = this.props;
+		const { trackers, isUnknown, current_theme } = this.props;
 		let trackerList;
 		if (this.props.globalBlocking) {
 			const trackersToShow = [];
@@ -75,6 +75,7 @@ class Trackers extends React.Component {
 					smartBlockActive={this.props.smartBlockActive}
 					smartBlock={this.props.smartBlock}
 					isUnknown={isUnknown}
+					current_theme={current_theme}
 				/>
 			));
 		}

app/panel/components/BuildingBlocks/CliqzFeature.jsx

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

app/panel/components/BuildingBlocks/StatsGraph.jsx

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

app/panel/components/Stats.jsx

@@ -524,11 +524,12 @@ class Stats extends React.Component {
 	 * @return {ReactComponent} StatsView instance
 	 */
 	render() {
+		const { user, loggedIn, current_theme } = this.props;
 		return (
 			<StatsView
 				showResetModal={this.state.showResetModal}
-				showPitchModal={!this.props.user || !this.props.user.subscriptionsPlus}
-				loggedIn={this.props.loggedIn}
+				showPitchModal={!user || !user.subscriptionsPlus}
+				loggedIn={loggedIn}
 				getStats={this.getStats}
 				selection={this.state.selection}
 				selectView={this.selectView}
@@ -539,6 +540,7 @@ class Stats extends React.Component {
 				cancelReset={this.cancelReset}
 				subscribe={this.subscribe}
 				signIn={this.signIn}
+				theme={current_theme}
 			/>
 		);
 	}

app/panel/components/StatsView.jsx

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

app/panel/components/Summary.jsx

@@ -623,6 +623,7 @@ class Summary extends React.Component {
 		const {
 			enable_anti_tracking,
 			is_expert,
+			current_theme,
 		} = this.props;
 		const isCondensed = this._isCondensed();
 
@@ -638,6 +639,7 @@ class Summary extends React.Component {
 					isTooltipHeader={is_expert}
 					isTooltipBody={!isCondensed}
 					tooltipPosition={isCondensed ? 'right' : is_expert ? 'top top-right' : 'top'}
+					current_theme={current_theme}
 				/>
 			</div>
 		);
@@ -647,6 +649,7 @@ class Summary extends React.Component {
 		const {
 			enable_ad_block,
 			is_expert,
+			current_theme,
 		} = this.props;
 		const isCondensed = this._isCondensed();
 
@@ -662,6 +665,7 @@ class Summary extends React.Component {
 					isTooltipHeader={is_expert}
 					isTooltipBody={!isCondensed}
 					tooltipPosition={isCondensed ? 'right' : 'top'}
+					current_theme={current_theme}
 				/>
 			</div>
 		);
@@ -671,6 +675,7 @@ class Summary extends React.Component {
 		const {
 			enable_smart_block,
 			is_expert,
+			current_theme,
 		} = this.props;
 		const isCondensed = this._isCondensed();
 
@@ -686,6 +691,7 @@ class Summary extends React.Component {
 					isTooltipHeader={is_expert}
 					isTooltipBody={!isCondensed}
 					tooltipPosition={isCondensed ? 'right' : is_expert ? 'top top-left' : 'top'}
+					current_theme={current_theme}
 				/>
 			</div>
 		);
@@ -779,6 +785,7 @@ class Summary extends React.Component {
 			enable_offers,
 			is_expert,
 			is_expanded,
+			current_theme
 		} = this.props;
 		const { disableBlocking } = this.state;
 		const isCondensed = this._isCondensed();
@@ -787,11 +794,15 @@ class Summary extends React.Component {
 			'Summary--expert': is_expert && !is_expanded,
 			'Summary--condensed': isCondensed,
 		});
+		const foregroundClassNames = ClassNames('Summary__foreground', {
+			active: current_theme === 'palm-theme'
+					|| current_theme === 'leaf-theme',
+		});
 
 		return (
 			<div className={summaryClassNames}>
 				<div className="Summary__opacityOverlay" />
-				<div className="Summary__foreground">
+				<div className={foregroundClassNames}>
 					{!isCondensed && disableBlocking && (<NotScanned isSmall={is_expert} />)}
 					{!isCondensed && !disableBlocking && this._renderDonut()}
 					{!isCondensed && !disableBlocking && this._renderPageHostReadout()}

app/panel/containers/BlockingContainer.js

@@ -35,6 +35,7 @@ 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

app/panel/containers/StatsContainer.js

@@ -22,7 +22,9 @@ import Stats from '../components/Stats';
  * @todo  We are not using ownProps, so we better not specify it explicitly,
  * in this case it won't be passed by React (see https://github.com/reactjs/react-redux/blob/master/docs/api.md).
  */
-const mapStateToProps = state => Object.assign({}, state.account);
+const mapStateToProps = state => Object.assign({}, state.account, {
+	current_theme: state.panel.current_theme,
+});
 
 /**
  * Connects Subscription view component to the Redux store. Pass updated match, location, and history props to the wrapped component.

app/panel/containers/SummaryContainer.js

@@ -29,7 +29,8 @@ const mapStateToProps = state => Object.assign({}, state.summary, state.panel, {
 	is_expanded: state.panel.is_expanded,
 	is_expert: state.panel.is_expert,
 	tab_id: state.panel.tab_id,
-	user: state.account.user
+	user: state.account.user,
+	current_theme: state.panel.current_theme,
 });
 /**
  * Bind Summary view component action creators using Redux's bindActionCreators

app/shared-components/Modal/Modal.scss

@@ -19,8 +19,9 @@
 	right: 0;
 	bottom: 0;
 	left: 0;
+	z-index: 8000;
 }
 .Modal__background {
 	background-color: rgba(#000000, 0.25);
-	z-index: 9;
 }
+