Testing switching between themes

app/panel/components/Login.jsx

@@ -68,6 +68,7 @@ class Login extends React.Component {
 							this.props.actions.getUserSettings(),
 						])
 							.then((res) => {
+								console.log('res: ', res);
 								const { current_theme = 'default' } = res[1];
 								return this.props.actions.getTheme(current_theme);
 							})

app/panel/components/Subscription.jsx

@@ -80,6 +80,7 @@ class Subscription extends React.Component {
 	changeTheme = (updated_theme) => {
 		this.setState({ theme: updated_theme });
 		this.props.actions.getTheme(updated_theme).then(() => {
+			console.log('updated theme: ', updated_theme);
 			sendMessage('ping', 'theme_change');
 		});
 	}

app/panel/components/Subscription/SubscriptionThemes.jsx

@@ -32,7 +32,7 @@ const SubscriptionThemes = (props) => {
 			text: 'subscription_dark_blue_theme',
 		},
 		{
-			name: 'palm',
+			name: 'palm-theme',
 			text: 'subscription_palm_theme',
 		},
 		{

app/panel/components/Summary.jsx

@@ -269,7 +269,7 @@ class Summary extends React.Component {
 				pageLatency = unfixedLatency.toFixed(2);
 			}
 			this.setState({ trackerLatencyTotal: pageLatency });
-		// reset page load value if page is reloaded while panel is open
+			// reset page load value if page is reloaded while panel is open
 		} else if (this.props.performanceData && !performanceData) {
 			this.setState({ trackerLatencyTotal: pageLatency });
 		}
@@ -790,36 +790,40 @@ class Summary extends React.Component {
 
 		return (
 			<div className={summaryClassNames}>
-				{!isCondensed && disableBlocking && (<NotScanned isSmall={is_expert} />)}
-				{!isCondensed && !disableBlocking && this._renderDonut()}
-				{!isCondensed && !disableBlocking && this._renderPageHostReadout()}
-
-				{isCondensed && !disableBlocking && this._renderTotalTrackersFound()}
+				{/* Case on theme.props here */}
+				<div className="opacityOverlay" />
+				<div className="foreground">
+					{!isCondensed && disableBlocking && (<NotScanned isSmall={is_expert} />)}
+					{!isCondensed && !disableBlocking && this._renderDonut()}
+					{!isCondensed && !disableBlocking && this._renderPageHostReadout()}
+
+					{isCondensed && !disableBlocking && this._renderTotalTrackersFound()}
+
+					<div className="Summary__pageStatsContainer">
+						{!disableBlocking && this._renderTotalTrackersBlocked()}
+						{!disableBlocking && this._renderTotalRequestsModified()}
+						{!disableBlocking && this._renderPageLoadTime()}
+					</div>
 
-				<div className="Summary__pageStatsContainer">
-					{!disableBlocking && this._renderTotalTrackersBlocked()}
-					{!disableBlocking && this._renderTotalRequestsModified()}
-					{!disableBlocking && this._renderPageLoadTime()}
-				</div>
+					{isCondensed && disableBlocking && (
+						<div className="Summary__spaceTaker" />
+					)}
 
-				{isCondensed && disableBlocking && (
-					<div className="Summary__spaceTaker" />
-				)}
+					<div className="Summary__ghosteryFeaturesContainer">
+						{this._renderGhosteryFeature('trust')}
+						{this._renderGhosteryFeature('restrict', 'Summary__ghosteryFeatureContainer--middle')}
+						{this._renderPauseButton()}
+					</div>
+					<div className="Summary__cliqzFeaturesContainer">
+						{this._renderCliqzAntiTracking()}
+						{this._renderCliqzAdBlock()}
+						{this._renderCliqzSmartBlock()}
+					</div>
+					{this._renderStatsNavicon()}
+					{enable_offers && this._renderRewardsNavicon()}
 
-				<div className="Summary__ghosteryFeaturesContainer">
-					{this._renderGhosteryFeature('trust')}
-					{this._renderGhosteryFeature('restrict', 'Summary__ghosteryFeatureContainer--middle')}
-					{this._renderPauseButton()}
+					{!isCondensed && this._renderPlusUpgradeBannerOrSubscriberIcon()}
 				</div>
-				<div className="Summary__cliqzFeaturesContainer">
-					{this._renderCliqzAntiTracking()}
-					{this._renderCliqzAdBlock()}
-					{this._renderCliqzSmartBlock()}
-				</div>
-				{this._renderStatsNavicon()}
-				{enable_offers && this._renderRewardsNavicon()}
-
-				{!isCondensed && this._renderPlusUpgradeBannerOrSubscriberIcon()}
 			</div>
 		);
 	}

app/panel/utils/utils.js

@@ -225,10 +225,14 @@ export function setTheme(doc, name, account) {
 		}
 	}
 
+	console.log('setting theme...');
 	if (name !== 'default') {
+		console.log('name != default');
 		if (!account) { return; }
+		console.log('account is initialized', account);
 		const { themeData } = account;
 		if (!themeData) { return; }
+		console.log('themeData is initialized', themeData);
 		const { css } = themeData[name];
 
 		// Create element for the theme being set, if it is not there

app/scss/panel.scss

@@ -77,6 +77,7 @@ html body {
 @import './partials/_stats_graph';
 @import './partials/_modal_exit_button';
 @import './partials/insights_promo_modal.scss';
+// @import './themes/theme.scss';
 
 // Imports from ../shared-components directory
 @import '../shared-components/Modal/Modal.scss';