Persisting selected theme.

app/panel/actions/PanelActions.js

@@ -15,7 +15,8 @@ import {
 	TOGGLE_CLIQZ_FEATURE,
 	SHOW_NOTIFICATION,
 	CLOSE_NOTIFICATION,
-	TOGGLE_EXPERT
+	TOGGLE_EXPERT,
+	SET_THEME,
 } from '../constants/constants';
 import { sendMessageInPromise } from '../utils/msg';
 
@@ -102,3 +103,15 @@ export function toggleExpert() {
 		type: TOGGLE_EXPERT,
 	};
 }
+
+export function setTheme(data) {
+	return function (dispatch) {
+		return sendMessageInPromise('setThemeData', data)
+		.then ( result => {
+			dispatch({
+				type: SET_THEME,
+				data: result,
+			});
+		});
+	}
+}

app/panel/components/Subscription.jsx

@@ -17,6 +17,7 @@ import SubscriptionMenu from './Subscription/SubscriptionMenu';
 import SubscriptionInfo from './Subscription/SubscriptionInfo';
 import SubscriptionThemes from './Subscription/SubscriptionThemes';
 import PrioritySupport from './Subscription/PrioritySupport';
+import { setTheme } from '../utils/utils';
 /**
  * @class Implement base Subscription view which routes navigation to all subscription subviews
  * @memberof PanelClasses
@@ -37,30 +38,23 @@ class Subscription extends React.Component {
 	 */
 	componentWillMount() {
 		this.props.history.push('/subscription/info');
-		this.props.actions.getSubscriptionData().then(() => {});
+		this.setState({isChecked: (this.props.currentTheme !== 'default')});
+		console.log("SUBSCRIPTION PROPS IN WILL MOUNT", this.props, this.state);
+		// this.props.actions.getSubscriptionData().then(() => {});
+	}
+	componentWillReceiveProps(nextProps) {
+		console.log("SUBSCRIPTION PROPS", this.props, nextProps);
 	}
-
 	toggleThemes(event) {
-		const dataUrl = "../../dist/css/midnight.css";
 		const newChecked = !this.state.isChecked;
 		this.setState({isChecked: newChecked});
 		if(newChecked) {
-			let style = document.getElementById("midnight");
-			if(!style) {
-				style = document.createElement('style');
-				if(style) {
-					style.textContent = "#content-summary {background-color: #124559; }";
-					style.id = "midnight";
-					document.head.appendChild(style);
-				}
-			}
+			this.props.actions.setTheme({currentTheme:'midnight'});
+//			setTheme(document, this.props.currentTheme, this.props.theme);
 		} else {
-			const style = document.getElementById("midnight");
-			document.head.removeChild(style);
+			this.props.actions.setTheme({currentTheme:'default'});
+//			setTheme(document, 'default');
 		}
-		// const theme = document.getElementsByTagName("link")[ 2 ];
-		// theme.setAttribute("href", newChecked ? dataUrl : null);
-		// console.log("LINK", theme);
 	}
 
 	SubscriptionInfoComponent = () => (<SubscriptionInfo subscriptionData={this.props}/>);

app/panel/constants/constants.js

@@ -67,4 +67,5 @@ export const GET_SETTINGS_DATA = 'GET_SETTINGS_DATA';
 
 // subscription
 export const GET_SUBSCRIPTION_DATA = 'GET_SUBSCRIPTION_DATA';
+export const SET_THEME = 'SET_THEME';
 

app/panel/containers/SubscriptionContainer.js

@@ -14,6 +14,8 @@ import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import Subscription from '../components/Subscription';
 import * as subscriptionActions from '../actions/SubscriptionActions';
+import { setTheme } from '../actions/PanelActions';
+
 /**
  * Map redux store state properties to Subscription view component own properties.
  * @memberOf PanelContainers
@@ -24,8 +26,8 @@ import * as subscriptionActions from '../actions/SubscriptionActions';
  * 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, ownProps) => Object.assign({}, state.subscription, {
-	language: state.panel.language,
-	logged_in: state.panel.logged_in,
+	theme: state.panel.theme,
+	currentTheme: state.panel.currentTheme,
 });
 /**
  * Bind Subscription view component action creators using Redux's bindActionCreators
@@ -35,7 +37,7 @@ const mapStateToProps = (state, ownProps) => Object.assign({}, state.subscriptio
  * @return {function}          	  to be used as an argument in redux connect call
  */
 const mapDispatchToProps = (dispatch, ownProps) => ({
-	actions: bindActionCreators(Object.assign(subscriptionActions), dispatch),
+	actions: bindActionCreators(Object.assign(subscriptionActions, {setTheme}), dispatch),
 });
 /**
  * Connects Subscription view component to the Redux store. Pass updated match, location, and history props to the wrapped component.

app/panel/index.jsx

@@ -31,6 +31,8 @@ import configureStore from './store/configureStore';
 import Help from './components/Help';
 import About from './components/About';
 import Subscribe from './components/Subscribe';
+// import { sendMessageInPromise } from './utils/msg';
+// import { setTheme } from './utils/utils';
 
 const store = configureStore();
 /**
@@ -54,12 +56,18 @@ const Ghostery = () => (
 	</Panel>
 );
 
-ReactDOM.render(
-	(
-		<Provider store={store}>
-			<Router history={history}>
-				<Ghostery />
-			</Router>
-		</Provider>
-	), document.getElementById('ghostery-content'),
-);
+// sendMessageInPromise('getPanelData', {
+// 			view: 'subscription',
+// 		}).then((data) => {
+// 			setTheme(document, data.currentTheme, data.theme);
+			ReactDOM.render(
+				(
+					<Provider store={store}>
+						<Router history={history}>
+							<Ghostery />
+						</Router>
+					</Provider>
+				), document.getElementById('ghostery-content'),
+			);
+//		});
+

app/panel/reducers/panel.js

@@ -24,7 +24,8 @@ import {
 	TOGGLE_OFFERS_ENABLED,
 	REMOVE_OFFER,
 	SET_OFFER_READ,
-	TOGGLE_EXPANDED
+	TOGGLE_EXPANDED,
+	SET_THEME,
 } from '../constants/constants';
 import {
 	LOGIN_SUCCESS,
@@ -36,6 +37,7 @@ import {
 	RESET_PASSWORD_FAIL
 } from '../../Account/AccountConstants';
 import { sendMessage, sendMessageInPromise } from '../utils/msg';
+import { setTheme } from '../utils/utils';
 
 const initialState = {
 	enable_ad_block: true,
@@ -69,9 +71,13 @@ const initialState = {
 export default (state = initialState, action) => {
 	switch (action.type) {
 		case GET_PANEL_DATA: {
-			console.log("panel", action.data);
+			setTheme(document, action.data.currentTheme, action.data.theme);
 			return Object.assign({}, state, action.data, { initialized: true });
 		}
+		case SET_THEME: {
+			setTheme(document, action.data.currentTheme, action.data.theme);
+			return Object.assign({}, state, { currentTheme: action.data.currentTheme, theme: action.data.theme });
+		}
 		case SHOW_NOTIFICATION: {
 			const updated = _showNotification(state, action);
 			return Object.assign({}, state, updated);

app/panel/utils/utils.js

@@ -185,3 +185,40 @@ export function isSupporter(userScopes) {
 	return false;
 }
 
+/**
+ * Sets the theme
+ * @memberOf PanelUtils
+ * @param  {object} doc document object
+ * @param  {string} themeName unique name of the theme
+ * @param {string} theme css of the theme
+ */
+
+export function setTheme(doc, themeName, theme) {
+	//First remove all other style elements which may be there
+	const styleList = doc.head.getElementsByTagName('style');
+	let themeStyle;
+	// Other kinds of loops are not supported equally across browsers
+	for(let i = 0; i < styleList.length; i++) {
+		const style = styleList[ i ];
+		if(style.id !== themeName) {
+			doc.head.removeChild(style);
+		} else {
+			themeStyle = style;
+		}
+	};
+
+	// if themeName is 'default' all we have to do is to remove style element
+	if(themeName !== 'default') {
+		//Create element for the theme being set, if it is not there
+		if(!themeStyle) {
+			themeStyle = doc.createElement('style');
+			themeStyle.id = themeName;
+		}
+
+		//Set content of style element to the theme text.
+		if(themeStyle) {
+			themeStyle.textContent = theme;
+			document.head.appendChild(themeStyle);
+		}
+	}
+}

app/scss/partials/_header.scss

@@ -44,6 +44,9 @@
 		.header-badge {
 			display: block;
 			margin-left: 10px;
+			path {
+				fill: $white;
+			}
 			.disabled-header-badge {
 				path {
 					fill: #75D3F6;

src/background.js

@@ -664,7 +664,13 @@ function onMessageHandler(request, sender, callback) {
 		panelData.set(message);
 		callback();
 		return false;
-	} else if (name === 'getCliqzModuleData') {
+	} else if (name === 'setThemeData') {
+		panelData.set(message);
+		message.theme = conf.themes[message.currentTheme];
+		callback(message);
+		return true;
+	}
+	else if (name === 'getCliqzModuleData') {
 		const modules = { adblock: {}, antitracking: {} };
 		utils.getActiveTab((tab) => {
 			button.update();
@@ -1708,7 +1714,6 @@ init().then(() => {
     fill: #124559; }
 `;
 	conf.themes = themes;
-	conf.currentTheme = "midnight";
 	panelData.init();
 });
 

src/classes/PanelData.js

@@ -68,10 +68,11 @@ class PanelData {
 	 * @return {Object}      	view data
 	 */
 	get(view, tab) {
-		log(`Get data for ${view} view`);
+		console.log(`Get data for ${view} view`);
 		if (view === 'settings') {
 			return this.settingsView;
 		} else if (view === 'subscription') {
+			console.log("GETTING SUBSCRIPTION", this.subscriptionView);
 			return this.subscriptionView;
 		}
 		// update _trackerData with new tab info
@@ -297,6 +298,18 @@ class PanelData {
 
 		return this._settingsView;
 	}
+	get subscriptionView() {
+		const currentTheme = this._confData.get('currentTheme');
+		let theme = null;
+		if(currentTheme !== 'default') {
+			theme = (this._confData.get("themes"))[currentTheme] || null;
+		}
+		this._subscriptionView = {
+			currentTheme: currentTheme,
+			theme: theme,
+		};
+		return this._subscriptionView;
+	}
 
 	/**
 	 * Build local _confData map. Called during init() and when Conf updates