Merge pull request #301 from newweborder007/nwo-enhancements

feat: implement theme changing feature to sync with parent app
Chia-Network · Aug 13, 2024 · 7f02f28 · 7f02f28
2 parents 9f578aa + 8d86fbb
commit 7f02f28
Show file tree

Hide file tree

Showing 5 changed files with 47 additions and 7 deletions.
diff --git a/src/App.js b/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,26 @@ 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 +61,7 @@ const App = () => {
   }
 
   return (
-    <ThemeProvider theme={theme}>
+    <ThemeProvider theme={appStore.customTheme}>
       <IntlProvider
         locale="en"
         defaultLocale="en"

diff --git a/src/components/layout/LeftNav.js b/src/components/layout/LeftNav.js
@@ -23,20 +23,23 @@ 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};
 `;
 
 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;

diff --git a/src/store/actions/appActions.js b/src/store/actions/appActions.js
@@ -11,6 +11,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',
@@ -87,6 +88,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,
 };

diff --git a/src/store/reducers/appReducer.js b/src/store/reducers/appReducer.js
@@ -2,10 +2,12 @@ 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,
+  customTheme: theme,
   errorMessage: null,
   locale: null,
   connectionCheck: true,
@@ -75,6 +77,8 @@ const appReducer = (state = initialState, action) => {
         return u({ theme: action.payload }, state);
       }
       return state;
+    case appActions.SET_CUSTOM_THEME:
+      return u({ customTheme: action.payload }, state);
 
     case appActions.TOGGLE_THEME:
       // eslint-disable-next-line

diff --git a/src/theme.js b/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',