Merge pull request #186 from Chia-Network/develop

Release 1.1.14

Author: TheLastCicada

package.json

@@ -1,6 +1,6 @@
 {
   "name": "climateexplorerui",
-  "version": "1.1.13",
+  "version": "1.1.14",
   "private": true,
   "author": "Chia Network Inc. <[email protected]>",
   "description": "User interface for the Chia Climate Explorer application",

src/App.js

@@ -4,13 +4,13 @@ import { IntlProvider } from 'react-intl';
 import { useDispatch, useSelector } from 'react-redux';
 
 import {
+  setCustomTheme,
   setLocale,
   setThemeFromLocalStorage,
 } from './store/actions/appActions';
 
 import { loadLocaleData } from './translations';
 import { AppNavigator } from './navigation';
-import theme from './theme';
 
 import { IndeterminateProgressOverlay } from './components';
 import { LocaleChangeListener } from './components/blocks/LocaleChangeListener';
@@ -20,6 +20,24 @@ const App = () => {
   const appStore = useSelector(state => state);
   const [translationTokens, setTranslationTokens] = useState();
 
+  const notifyParentWhenAppLoaded = () => {
+    window.parent.postMessage('appLoaded', window.location.origin);
+  };
+
+  useEffect(() => {
+    const handleMessage = event => {
+      if (event.data.customThemeColors) {
+        dispatch(setCustomTheme(event.data.customThemeColors));
+      }
+    };
+    notifyParentWhenAppLoaded();
+    window.addEventListener('message', handleMessage);
+
+    return () => {
+      window.removeEventListener('message', handleMessage);
+    };
+  }, []);
+
   useEffect(() => {
     dispatch(setThemeFromLocalStorage);
   }, [setThemeFromLocalStorage]);
@@ -41,7 +59,7 @@ const App = () => {
   }
 
   return (
-    <ThemeProvider theme={theme}>
+    <ThemeProvider theme={appStore.customTheme}>
       <IntlProvider
         locale="en"
         defaultLocale="en"

src/components/layout/LeftNav.js

@@ -23,7 +23,7 @@ const NavContainer = styled('div')`
   width: 16rem;
   min-width: 16rem;
   height: 100%;
-  background-color: ${props => props.theme.colors.default.primaryDark};
+  background-color: ${props => props.theme.colors.default.leftNav.bg};
   overflow-y: scroll;
 
   -ms-overflow-style: none;
@@ -38,16 +38,19 @@ const StyledLastItem = styled('div')`
 `;
 
 const MenuItem = styled(Link)`
-  background: ${props => (props.selected ? 'white' : 'transparent')};
+  background: ${props =>
+    props.selected
+      ? props.theme.colors.default.leftNav.highlight
+      : 'transparent'};
   :hover {
     background: ${props => props.theme.colors.default.primary};
   }
   padding: 0.5625rem 0rem 0.75rem 3.25rem;
   text-transform: uppercase;
-  ${props =>
+  color: ${props =>
     props.selected
-      ? `color: ${props.theme.colors.default.primary};`
-      : 'color: #6e7d7f;'}
+      ? props.theme.colors.default.primary
+      : props.theme.colors.default.leftNav.text};
   font-family: ${props => props.theme.typography.primary.bold};
   cursor: pointer;
   display: block;

src/store/actions/appActions.js

@@ -12,6 +12,7 @@ export const actions = keyMirror(
   'DEACTIVATE_PROGRESS_INDICATOR',
   'TOGGLE_THEME',
   'SET_THEME',
+  'SET_CUSTOM_THEME',
   'SET_GLOBAL_ERROR_MESSAGE',
   'CLEAR_GLOBAL_ERROR_MESSAGE',
   'SET_LOCALE',
@@ -84,6 +85,13 @@ export const setThemeFromLocalStorage = {
   payload: localStorage.getItem('theme'),
 };
 
+export const setCustomTheme = customColors => {
+  return {
+    type: actions.SET_CUSTOM_THEME,
+    payload: customColors,
+  };
+};
+
 export const toggleTheme = {
   type: actions.TOGGLE_THEME,
 };

src/store/reducers/appReducer.js

@@ -2,12 +2,14 @@ import u from 'updeep';
 
 import { actions as appActions } from '../actions/appActions';
 import constants from '../../constants';
+import theme from '../../theme';
 
 const initialState = {
   showProgressOverlay: false,
   theme: constants.THEME.DEFAULT,
   errorMessage: null,
   locale: null,
+  customTheme: theme,
   connectionCheck: true,
   notification: null,
   refresh: false,
@@ -62,6 +64,8 @@ const appReducer = (state = initialState, action) => {
           : constants.THEME.DARK;
       localStorage.setItem('theme', theme);
       return u({ theme }, state);
+    case appActions.SET_CUSTOM_THEME:
+      return u({ customTheme: action.payload }, state);
 
     case appActions.CONNECTION_CHECK:
       return u({ connectionCheck: action.payload }, state);

src/theme.js

@@ -37,6 +37,11 @@ const colors = {
     background: '#F0F2F5',
     onSurface: '#000000',
     onButton: '#FFFFFF',
+    leftNav: {
+      bg: 'rgb(240, 242, 245)',
+      text: '#6e7d7f',
+      highlight: '#fff',
+    },
     status: {
       info: {
         primary: '#91D5FF',