MM-13362 Update account settings header color when changing theme (#2431)

* MM-13362 Update account settings header color when changing theme

* Removed unneded static var

app/screens/settings/display_settings/display_settings.js

@@ -12,7 +12,7 @@ import {
 import SettingsItem from 'app/screens/settings/settings_item';
 import StatusBar from 'app/components/status_bar';
 import {preventDoubleTap} from 'app/utils/tap';
-import {changeOpacity, makeStyleSheetFromTheme} from 'app/utils/theme';
+import {changeOpacity, makeStyleSheetFromTheme, setNavigatorStyles} from 'app/utils/theme';
 
 import ClockDisplay from 'app/screens/clock_display';
 
@@ -32,6 +32,15 @@ export default class DisplaySettings extends PureComponent {
         showClockDisplaySettings: false,
     };
 
+    constructor(props) {
+        super(props);
+        props.navigator.setOnNavigatorEvent(this.onNavigatorEvent);
+    }
+
+    closeClockDisplaySettings = () => {
+        this.setState({showClockDisplaySettings: false});
+    };
+
     goToClockDisplaySettings = preventDoubleTap(() => {
         const {navigator, theme} = this.props;
         const {intl} = this.context;
@@ -91,8 +100,10 @@ export default class DisplaySettings extends PureComponent {
         });
     });
 
-    closeClockDisplaySettings = () => {
-        this.setState({showClockDisplaySettings: false});
+    onNavigatorEvent = (event) => {
+        if (event.id === 'willAppear') {
+            setNavigatorStyles(this.props.navigator, this.props.theme);
+        }
     };
 
     render() {

app/screens/settings/display_settings/display_settings.test.js

@@ -15,7 +15,10 @@ describe('DisplaySettings', () => {
         theme: Preferences.THEMES.default,
         enableTheme: false,
         enableTimezone: false,
-        navigator: {push: () => {}}, // eslint-disable-line no-empty-function
+        navigator: {
+            push: jest.fn(),
+            setOnNavigatorEvent: jest.fn(),
+        },
     };
 
     test('should match snapshot', () => {

app/screens/settings/general/settings.js

@@ -43,12 +43,6 @@ class Settings extends PureComponent {
         this.props.navigator.setOnNavigatorEvent(this.onNavigatorEvent);
     }
 
-    componentWillReceiveProps(nextProps) {
-        if (this.props.theme !== nextProps.theme) {
-            setNavigatorStyles(this.props.navigator, nextProps.theme);
-        }
-    }
-
     errorEmailBody = () => {
         const {config, currentUserId, currentTeamId, errors} = this.props;
         let contents = [
@@ -180,6 +174,10 @@ class Settings extends PureComponent {
     });
 
     onNavigatorEvent = (event) => {
+        if (event.id === 'willAppear') {
+            setNavigatorStyles(this.props.navigator, this.props.theme);
+        }
+
         if (event.type === 'NavBarButtonPress') {
             if (event.id === 'close-settings') {
                 this.props.navigator.dismissModal({

app/screens/theme/theme.js

@@ -11,19 +11,20 @@ import Section from 'app/screens/settings/section';
 import SectionItem from 'app/screens/settings/section_item';
 import FormattedText from 'app/components/formatted_text';
 
-import {changeOpacity, makeStyleSheetFromTheme} from 'app/utils/theme';
+import {changeOpacity, makeStyleSheetFromTheme, setNavigatorStyles} from 'app/utils/theme';
 import Preferences from 'mattermost-redux/constants/preferences';
 
 export default class Theme extends React.PureComponent {
     static propTypes = {
-        teamId: PropTypes.string.isRequired,
-        theme: PropTypes.object.isRequired,
-        userId: PropTypes.string.isRequired,
         actions: PropTypes.shape({
             savePreferences: PropTypes.func.isRequired,
         }).isRequired,
         allowedThemes: PropTypes.arrayOf(PropTypes.object),
         customTheme: PropTypes.object,
+        navigator: PropTypes.object.isRequired,
+        teamId: PropTypes.string.isRequired,
+        theme: PropTypes.object.isRequired,
+        userId: PropTypes.string.isRequired,
     };
 
     static contextTypes = {
@@ -43,6 +44,12 @@ export default class Theme extends React.PureComponent {
         return null;
     }
 
+    componentDidUpdate(prevProps) {
+        if (prevProps.theme !== this.props.theme) {
+            setNavigatorStyles(this.props.navigator, this.props.theme);
+        }
+    }
+
     setTheme = (key) => {
         const {userId, teamId, actions: {savePreferences}, allowedThemes} = this.props;
         const {customTheme} = this.state;

app/screens/theme/theme.test.js

@@ -14,13 +14,16 @@ jest.mock('react-intl');
 
 describe('Theme', () => {
     const baseProps = {
-        teamId: 'test-team',
-        theme: Preferences.THEMES.default,
-        userId: 'test-user',
         actions: {
             savePreferences: jest.fn(),
         },
         allowedThemes,
+        navigator: {
+            setOnNavigatorEvent: jest.fn(),
+        },
+        teamId: 'test-team',
+        theme: Preferences.THEMES.default,
+        userId: 'test-user',
     };
 
     test('should match snapshot', () => {
@@ -147,4 +150,4 @@ const allowedThemes = [
             codeTheme: 'monokai',
         },
     },
-];
+];