diff --git a/app/components/channel_drawer/channel_drawer.js b/app/components/channel_drawer/channel_drawer.js index fe479dd48..bf44d9403 100644 --- a/app/components/channel_drawer/channel_drawer.js +++ b/app/components/channel_drawer/channel_drawer.js @@ -368,7 +368,6 @@ export default class ChannelDrawer extends Component { + + {children} ); @@ -39,6 +46,7 @@ export default class KeyboardLayout extends PureComponent { {children} @@ -46,3 +54,13 @@ export default class KeyboardLayout extends PureComponent { ); } } + +const getStyleFromTheme = makeStyleSheetFromTheme((theme) => { + return { + keyboardLayout: { + backgroundColor: theme.centerChannelBg, + flex: 1, + paddingBottom: 0 + } + }; +}); diff --git a/app/components/post_list/date_header.js b/app/components/post_list/date_header.js deleted file mode 100644 index b704442ec..000000000 --- a/app/components/post_list/date_header.js +++ /dev/null @@ -1,66 +0,0 @@ -// Copyright (c) 2017-present Mattermost, Inc. All Rights Reserved. -// See License.txt for license information. - -import React from 'react'; -import PropTypes from 'prop-types'; -import { - StyleSheet, - View, - ViewPropTypes -} from 'react-native'; - -import FormattedDate from 'app/components/formatted_date'; -import {makeStyleSheetFromTheme} from 'app/utils/theme'; - -function DateHeader(props) { - const style = getStyleSheet(props.theme); - - return ( - - - - - - - - ); -} - -DateHeader.propTypes = { - date: PropTypes.object.isRequired, - theme: PropTypes.object.isRequired, - style: ViewPropTypes.style -}; - -const getStyleSheet = makeStyleSheetFromTheme((theme) => { - return { - container: { - alignItems: 'center', - flexDirection: 'row', - height: 28 - }, - dateContainer: { - marginHorizontal: 15 - }, - line: { - flex: 1, - height: StyleSheet.hairlineWidth, - backgroundColor: theme.centerChannelColor, - opacity: 0.2 - }, - date: { - color: theme.centerChannelColor, - fontSize: 14, - fontWeight: '600' - } - }; -}); - -export default DateHeader; diff --git a/app/components/post_list/date_header/date_header.js b/app/components/post_list/date_header/date_header.js new file mode 100644 index 000000000..c95a3665e --- /dev/null +++ b/app/components/post_list/date_header/date_header.js @@ -0,0 +1,66 @@ +// Copyright (c) 2017-present Mattermost, Inc. All Rights Reserved. +// See License.txt for license information. + +import React, {PureComponent} from 'react'; +import PropTypes from 'prop-types'; +import { + View, + ViewPropTypes +} from 'react-native'; + +import FormattedDate from 'app/components/formatted_date'; +import {makeStyleSheetFromTheme} from 'app/utils/theme'; + +export default class DateHeader extends PureComponent { + static propTypes = { + date: PropTypes.object.isRequired, + theme: PropTypes.object.isRequired, + style: ViewPropTypes.style + }; + + render() { + const {date, theme} = this.props; + const style = getStyleSheet(theme); + + return ( + + + + + + + + ); + } +} + +const getStyleSheet = makeStyleSheetFromTheme((theme) => { + return { + container: { + alignItems: 'center', + flexDirection: 'row', + height: 28 + }, + dateContainer: { + marginHorizontal: 15 + }, + line: { + flex: 1, + height: 1, + backgroundColor: theme.centerChannelColor, + opacity: 0.2 + }, + date: { + color: theme.centerChannelColor, + fontSize: 14, + fontWeight: '600' + } + }; +}); diff --git a/app/components/post_list/date_header/index.js b/app/components/post_list/date_header/index.js new file mode 100644 index 000000000..33d81bc30 --- /dev/null +++ b/app/components/post_list/date_header/index.js @@ -0,0 +1,17 @@ +// Copyright (c) 2017-present Mattermost, Inc. All Rights Reserved. +// See License.txt for license information. + +import {connect} from 'react-redux'; + +import {getTheme} from 'mattermost-redux/selectors/entities/preferences'; + +import DateHeader from './date_header'; + +function mapStateToProps(state) { + return { + theme: getTheme(state) + }; +} + +export default connect(mapStateToProps)(DateHeader); + diff --git a/app/components/post_list/post_list.js b/app/components/post_list/post_list.js index 6b103b10a..9f34bafad 100644 --- a/app/components/post_list/post_list.js +++ b/app/components/post_list/post_list.js @@ -154,10 +154,7 @@ export default class PostList extends PureComponent { renderDateHeader = (date) => { return ( - + ); }; diff --git a/app/components/safe_area_view/index.js b/app/components/safe_area_view/index.js index 4a902fa2a..3840d8cdb 100644 --- a/app/components/safe_area_view/index.js +++ b/app/components/safe_area_view/index.js @@ -1,5 +1,17 @@ // Copyright (c) 2017-present Mattermost, Inc. All Rights Reserved. // See License.txt for license information. +import {connect} from 'react-redux'; + +import {getTheme} from 'mattermost-redux/selectors/entities/preferences'; + import SafeAreaView from './safe_area_view'; -export default SafeAreaView; + +function mapStateToProps(state) { + return { + theme: getTheme(state) + }; +} + +export default connect(mapStateToProps)(SafeAreaView); + diff --git a/app/screens/about/about.js b/app/screens/about/about.js index 8f6165e36..392b676de 100644 --- a/app/screens/about/about.js +++ b/app/screens/about/about.js @@ -14,7 +14,7 @@ import DeviceInfo from 'react-native-device-info'; import FormattedText from 'app/components/formatted_text'; import StatusBar from 'app/components/status_bar'; -import {changeOpacity, makeStyleSheetFromTheme} from 'app/utils/theme'; +import {changeOpacity, makeStyleSheetFromTheme, setNavigatorStyles} from 'app/utils/theme'; import AppIcon from 'app/components/app_icon'; import Config from 'assets/config'; @@ -25,9 +25,16 @@ export default class About extends PureComponent { static propTypes = { config: PropTypes.object.isRequired, license: PropTypes.object.isRequired, + navigator: PropTypes.object.isRequired, theme: PropTypes.object.isRequired }; + componentWillReceiveProps(nextProps) { + if (this.props.theme !== nextProps.theme) { + setNavigatorStyles(this.props.navigator, nextProps.theme); + } + } + handleAboutTeam = () => { Linking.openURL(Config.AboutTeamURL); }; diff --git a/app/screens/add_reaction/add_reaction.js b/app/screens/add_reaction/add_reaction.js index efc4556e3..5a8e8d0d7 100644 --- a/app/screens/add_reaction/add_reaction.js +++ b/app/screens/add_reaction/add_reaction.js @@ -10,12 +10,14 @@ import { import EmojiPicker from 'app/components/emoji_picker'; import {emptyFunction} from 'app/utils/general'; +import {setNavigatorStyles} from 'app/utils/theme'; export default class AddReaction extends PureComponent { static propTypes = { closeButton: PropTypes.object, navigator: PropTypes.object.isRequired, - onEmojiPress: PropTypes.func + onEmojiPress: PropTypes.func, + theme: PropTypes.object.isRequired }; static defaultProps = { @@ -35,6 +37,12 @@ export default class AddReaction extends PureComponent { }); } + componentWillReceiveProps(nextProps) { + if (this.props.theme !== nextProps.theme) { + setNavigatorStyles(this.props.navigator, nextProps.theme); + } + } + close = () => { this.props.navigator.dismissModal({ animationType: 'slide-down' diff --git a/app/screens/add_reaction/index.js b/app/screens/add_reaction/index.js index 4f7bc6df7..ffb715123 100644 --- a/app/screens/add_reaction/index.js +++ b/app/screens/add_reaction/index.js @@ -1,6 +1,16 @@ // Copyright (c) 2017-present Mattermost, Inc. All Rights Reserved. // See License.txt for license information. +import {connect} from 'react-redux'; + +import {getTheme} from 'mattermost-redux/selectors/entities/preferences'; + import AddReaction from './add_reaction'; -export default AddReaction; +function mapStateToProps(state) { + return { + theme: getTheme(state) + }; +} + +export default connect(mapStateToProps)(AddReaction); diff --git a/app/screens/channel/channel.js b/app/screens/channel/channel.js index 6c242854c..6461f1fcf 100644 --- a/app/screens/channel/channel.js +++ b/app/screens/channel/channel.js @@ -68,6 +68,12 @@ class Channel extends PureComponent { } componentWillReceiveProps(nextProps) { + if (this.props.theme !== nextProps.theme) { + this.props.navigator.setStyle({ + screenBackgroundColor: nextProps.theme.centerChannelBg + }); + } + if (nextProps.currentTeamId && this.props.currentTeamId !== nextProps.currentTeamId) { this.loadChannels(nextProps.currentTeamId); } @@ -195,20 +201,14 @@ class Channel extends PureComponent { intl={intl} navigator={navigator} > - + - + @@ -234,11 +234,6 @@ const getStyleFromTheme = makeStyleSheetFromTheme((theme) => { loading: { backgroundColor: theme.centerChannelBg, flex: 1 - }, - keyboardLayout: { - backgroundColor: theme.centerChannelBg, - flex: 1, - paddingBottom: 0 } }; }); diff --git a/app/screens/channel/channel_nav_bar/channel_search_button/channel_search_button.js b/app/screens/channel/channel_nav_bar/channel_search_button/channel_search_button.js index 6a1cb3506..e7eecab89 100644 --- a/app/screens/channel/channel_nav_bar/channel_search_button/channel_search_button.js +++ b/app/screens/channel/channel_nav_bar/channel_search_button/channel_search_button.js @@ -41,9 +41,6 @@ export default class ChannelSearchButton extends PureComponent { navigatorStyle: { navBarHidden: true, screenBackgroundColor: theme.centerChannelBg - }, - passProps: { - theme } }); }); diff --git a/app/screens/channel_add_members/channel_add_members.js b/app/screens/channel_add_members/channel_add_members.js index 4fbeb3c51..4ecf0f9c5 100644 --- a/app/screens/channel_add_members/channel_add_members.js +++ b/app/screens/channel_add_members/channel_add_members.js @@ -17,7 +17,7 @@ import SearchBar from 'app/components/search_bar'; import StatusBar from 'app/components/status_bar'; import {alertErrorIfInvalidPermissions} from 'app/utils/general'; import {createMembersSections, loadingText, markSelectedProfiles} from 'app/utils/member_list'; -import {changeOpacity, makeStyleSheetFromTheme} from 'app/utils/theme'; +import {changeOpacity, makeStyleSheetFromTheme, setNavigatorStyles} from 'app/utils/theme'; import {General, RequestStatus} from 'mattermost-redux/constants'; import {filterProfilesMatchingTerm} from 'mattermost-redux/utils/user_utils'; @@ -81,6 +81,10 @@ class ChannelAddMembers extends PureComponent { } componentWillReceiveProps(nextProps) { + if (this.props.theme !== nextProps.theme) { + setNavigatorStyles(this.props.navigator, nextProps.theme); + } + const {loadMoreRequestStatus} = this.props; if (loadMoreRequestStatus === RequestStatus.STARTED && nextProps.loadMoreRequestStatus === RequestStatus.SUCCESS) { diff --git a/app/screens/channel_info/channel_info.js b/app/screens/channel_info/channel_info.js index f65cc5173..6830edfbe 100644 --- a/app/screens/channel_info/channel_info.js +++ b/app/screens/channel_info/channel_info.js @@ -14,7 +14,7 @@ import { import StatusBar from 'app/components/status_bar'; import {wrapWithPreventDoubleTap} from 'app/utils/tap'; import {alertErrorWithFallback} from 'app/utils/general'; -import {changeOpacity, makeStyleSheetFromTheme} from 'app/utils/theme'; +import {changeOpacity, makeStyleSheetFromTheme, setNavigatorStyles} from 'app/utils/theme'; import {General} from 'mattermost-redux/constants'; import EventEmitter from 'mattermost-redux/utils/event_emitter'; @@ -60,6 +60,10 @@ class ChannelInfo extends PureComponent { } componentWillReceiveProps(nextProps) { + if (this.props.theme !== nextProps.theme) { + setNavigatorStyles(this.props.navigator, nextProps.theme); + } + const isFavorite = nextProps.isFavorite; if (isFavorite !== this.state.isFavorite) { this.setState({isFavorite}); diff --git a/app/screens/channel_members/channel_members.js b/app/screens/channel_members/channel_members.js index efc88ecf6..c4a747698 100644 --- a/app/screens/channel_members/channel_members.js +++ b/app/screens/channel_members/channel_members.js @@ -17,7 +17,7 @@ import StatusBar from 'app/components/status_bar'; import {alertErrorIfInvalidPermissions} from 'app/utils/general'; import {createMembersSections, loadingText, markSelectedProfiles} from 'app/utils/member_list'; import UserListRow from 'app/components/custom_list/user_list_row'; -import {changeOpacity, makeStyleSheetFromTheme} from 'app/utils/theme'; +import {changeOpacity, makeStyleSheetFromTheme, setNavigatorStyles} from 'app/utils/theme'; import {General, RequestStatus} from 'mattermost-redux/constants'; import {filterProfilesMatchingTerm} from 'mattermost-redux/utils/user_utils'; @@ -81,6 +81,10 @@ class ChannelMembers extends PureComponent { } componentWillReceiveProps(nextProps) { + if (this.props.theme !== nextProps.theme) { + setNavigatorStyles(this.props.navigator, nextProps.theme); + } + const {requestStatus} = this.props; if (requestStatus === RequestStatus.STARTED && nextProps.requestStatus === RequestStatus.SUCCESS) { diff --git a/app/screens/client_upgrade/client_upgrade.js b/app/screens/client_upgrade/client_upgrade.js index 0c9f7edf8..fdbeacd8f 100644 --- a/app/screens/client_upgrade/client_upgrade.js +++ b/app/screens/client_upgrade/client_upgrade.js @@ -18,7 +18,7 @@ import StatusBar from 'app/components/status_bar'; import {UpgradeTypes} from 'app/constants/view'; import logo from 'assets/images/logo.png'; import checkUpgradeType from 'app/utils/client_upgrade'; -import {makeStyleSheetFromTheme} from 'app/utils/theme'; +import {makeStyleSheetFromTheme, setNavigatorStyles} from 'app/utils/theme'; export default class ClientUpgrade extends PureComponent { static propTypes = { @@ -56,6 +56,12 @@ export default class ClientUpgrade extends PureComponent { } } + componentWillReceiveProps(nextProps) { + if (this.props.theme !== nextProps.theme) { + setNavigatorStyles(this.props.navigator, nextProps.theme); + } + } + checkUpgrade = ({minVersion, latestVersion}) => { const {actions, currentVersion, downloadLink} = this.props; diff --git a/app/screens/code/code.js b/app/screens/code/code.js index ff4f36efe..b5114d8e8 100644 --- a/app/screens/code/code.js +++ b/app/screens/code/code.js @@ -11,14 +11,21 @@ import { } from 'react-native'; import {getCodeFont} from 'app/utils/markdown'; -import {changeOpacity, makeStyleSheetFromTheme} from 'app/utils/theme'; +import {changeOpacity, makeStyleSheetFromTheme, setNavigatorStyles} from 'app/utils/theme'; export default class Code extends React.PureComponent { static propTypes = { + navigator: PropTypes.object.isRequired, theme: PropTypes.object.isRequired, content: PropTypes.string.isRequired }; + componentWillReceiveProps(nextProps) { + if (this.props.theme !== nextProps.theme) { + setNavigatorStyles(this.props.navigator, nextProps.theme); + } + } + countLines = (content) => { return content.split('\n').length; }; diff --git a/app/screens/create_channel/create_channel.js b/app/screens/create_channel/create_channel.js index d1afc4d22..1153bd560 100644 --- a/app/screens/create_channel/create_channel.js +++ b/app/screens/create_channel/create_channel.js @@ -9,10 +9,12 @@ import { InteractionManager } from 'react-native'; -import EditChannelInfo from 'app/components/edit_channel_info'; import {General, RequestStatus} from 'mattermost-redux/constants'; import EventEmitter from 'mattermost-redux/utils/event_emitter'; +import EditChannelInfo from 'app/components/edit_channel_info'; +import {setNavigatorStyles} from 'app/utils/theme'; + export default class CreateChannel extends PureComponent { static propTypes = { navigator: PropTypes.object.isRequired, @@ -79,6 +81,10 @@ export default class CreateChannel extends PureComponent { } componentWillReceiveProps(nextProps) { + if (this.props.theme !== nextProps.theme) { + setNavigatorStyles(this.props.navigator, nextProps.theme); + } + const {createChannelRequest} = nextProps; if (this.props.createChannelRequest !== createChannelRequest) { diff --git a/app/screens/edit_channel/edit_channel.js b/app/screens/edit_channel/edit_channel.js index d208a5d6a..88872c0a3 100644 --- a/app/screens/edit_channel/edit_channel.js +++ b/app/screens/edit_channel/edit_channel.js @@ -9,11 +9,12 @@ import { InteractionManager } from 'react-native'; -import EditChannelInfo from 'app/components/edit_channel_info'; import {RequestStatus} from 'mattermost-redux/constants'; import EventEmitter from 'mattermost-redux/utils/event_emitter'; -import {ViewTypes} from 'app/constants'; +import EditChannelInfo from 'app/components/edit_channel_info'; +import {ViewTypes} from 'app/constants'; +import {setNavigatorStyles} from 'app/utils/theme'; import {cleanUpUrlable} from 'app/utils/url'; const messages = { @@ -107,6 +108,10 @@ export default class EditChannel extends PureComponent { } componentWillReceiveProps(nextProps) { + if (this.props.theme !== nextProps.theme) { + setNavigatorStyles(this.props.navigator, nextProps.theme); + } + const {updateChannelRequest} = nextProps; if (this.props.updateChannelRequest !== updateChannelRequest) { diff --git a/app/screens/edit_post/edit_post.js b/app/screens/edit_post/edit_post.js index f87bb075a..51ec65d8e 100644 --- a/app/screens/edit_post/edit_post.js +++ b/app/screens/edit_post/edit_post.js @@ -14,7 +14,7 @@ import KeyboardLayout from 'app/components/layout/keyboard_layout'; import Loading from 'app/components/loading'; import StatusBar from 'app/components/status_bar'; import TextInputWithLocalizedPlaceholder from 'app/components/text_input_with_localized_placeholder'; -import {changeOpacity, makeStyleSheetFromTheme} from 'app/utils/theme'; +import {changeOpacity, makeStyleSheetFromTheme, setNavigatorStyles} from 'app/utils/theme'; import {RequestStatus} from 'mattermost-redux/constants'; @@ -58,6 +58,10 @@ class EditPost extends PureComponent { } componentWillReceiveProps(nextProps) { + if (this.props.theme !== nextProps.theme) { + setNavigatorStyles(this.props.navigator, nextProps.theme); + } + const {editPostRequest} = nextProps; if (this.props.editPostRequest !== editPostRequest) { diff --git a/app/screens/image_preview/image_preview.js b/app/screens/image_preview/image_preview.js index 74ef4b5e1..a1a90060c 100644 --- a/app/screens/image_preview/image_preview.js +++ b/app/screens/image_preview/image_preview.js @@ -480,7 +480,6 @@ export default class ImagePreview extends PureComponent { return ( diff --git a/app/screens/more_channels/more_channels.js b/app/screens/more_channels/more_channels.js index 3842969a3..d6d58055f 100644 --- a/app/screens/more_channels/more_channels.js +++ b/app/screens/more_channels/more_channels.js @@ -19,7 +19,7 @@ import Loading from 'app/components/loading'; import SearchBar from 'app/components/search_bar'; import StatusBar from 'app/components/status_bar'; import {alertErrorWithFallback} from 'app/utils/general'; -import {makeStyleSheetFromTheme, changeOpacity} from 'app/utils/theme'; +import {changeOpacity, makeStyleSheetFromTheme, setNavigatorStyles} from 'app/utils/theme'; class MoreChannels extends PureComponent { static propTypes = { @@ -93,6 +93,10 @@ class MoreChannels extends PureComponent { } componentWillReceiveProps(nextProps) { + if (this.props.theme !== nextProps.theme) { + setNavigatorStyles(this.props.navigator, nextProps.theme); + } + const {requestStatus} = this.props; if (this.state.searching && nextProps.requestStatus.status === RequestStatus.SUCCESS) { diff --git a/app/screens/more_dms/more_dms.js b/app/screens/more_dms/more_dms.js index 8863106fa..c38681df3 100644 --- a/app/screens/more_dms/more_dms.js +++ b/app/screens/more_dms/more_dms.js @@ -21,7 +21,7 @@ import SearchBar from 'app/components/search_bar'; import StatusBar from 'app/components/status_bar'; import {alertErrorWithFallback} from 'app/utils/general'; import {loadingText} from 'app/utils/member_list'; -import {makeStyleSheetFromTheme, changeOpacity} from 'app/utils/theme'; +import {changeOpacity, makeStyleSheetFromTheme, setNavigatorStyles} from 'app/utils/theme'; import SelectedUsers from './selected_users'; @@ -84,6 +84,10 @@ class MoreDirectMessages extends PureComponent { } componentWillReceiveProps(nextProps) { + if (this.props.theme !== nextProps.theme) { + setNavigatorStyles(this.props.navigator, nextProps.theme); + } + const {getRequest} = this.props; if (getRequest.status === RequestStatus.STARTED && nextProps.getRequest.status === RequestStatus.SUCCESS) { diff --git a/app/screens/search/index.js b/app/screens/search/index.js index 4a2348872..30ad92bb4 100644 --- a/app/screens/search/index.js +++ b/app/screens/search/index.js @@ -9,6 +9,7 @@ import {selectPost} from 'mattermost-redux/actions/posts'; import {clearSearch, removeSearchTerms, searchPosts} from 'mattermost-redux/actions/search'; import {getCurrentChannelId} from 'mattermost-redux/selectors/entities/channels'; import {getCurrentTeamId} from 'mattermost-redux/selectors/entities/teams'; +import {getTheme} from 'mattermost-redux/selectors/entities/preferences'; import { handleSelectChannel, @@ -33,7 +34,8 @@ function mapStateToProps(state) { isLandscape: isLandscape(state), postIds: state.entities.search.results, recent: recent[currentTeamId], - searchingStatus: searchRequest.status + searchingStatus: searchRequest.status, + theme: getTheme(state) }; } diff --git a/app/screens/search/search.js b/app/screens/search/search.js index 615a5bbe8..cc99963a2 100644 --- a/app/screens/search/search.js +++ b/app/screens/search/search.js @@ -440,10 +440,6 @@ class Search extends PureComponent { const {terms, isOrSearch} = recent; this.handleTextChanged(terms); this.search(terms, isOrSearch); - - if (this.refs.searchBar) { - this.refs.searchBar.blur(); - } }); handleClosePreview = () => { @@ -615,7 +611,6 @@ class Search extends PureComponent { diff --git a/app/screens/select_team/select_team.js b/app/screens/select_team/select_team.js index 53fbce797..cb947f265 100644 --- a/app/screens/select_team/select_team.js +++ b/app/screens/select_team/select_team.js @@ -21,7 +21,7 @@ import Loading from 'app/components/loading'; 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'; export default class SelectTeam extends PureComponent { static propTypes = { @@ -55,6 +55,10 @@ export default class SelectTeam extends PureComponent { } componentWillReceiveProps(nextProps) { + if (this.props.theme !== nextProps.theme) { + setNavigatorStyles(this.props.navigator, nextProps.theme); + } + if (this.props.teams !== nextProps.teams) { this.buildData(nextProps); } diff --git a/app/screens/settings/general/settings.js b/app/screens/settings/general/settings.js index fbe7a835f..f9d8ba322 100644 --- a/app/screens/settings/general/settings.js +++ b/app/screens/settings/general/settings.js @@ -15,7 +15,7 @@ import DeviceInfo from 'react-native-device-info'; import SettingsItem from 'app/screens/settings/settings_item'; import StatusBar from 'app/components/status_bar'; import {wrapWithPreventDoubleTap} from 'app/utils/tap'; -import {changeOpacity, makeStyleSheetFromTheme} from 'app/utils/theme'; +import {changeOpacity, makeStyleSheetFromTheme, setNavigatorStyles} from 'app/utils/theme'; import {isValidUrl} from 'app/utils/url'; import LocalConfig from 'assets/config'; @@ -43,6 +43,12 @@ 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 = [ diff --git a/app/screens/settings/notification_settings/notification_settings.js b/app/screens/settings/notification_settings/notification_settings.js index 1a4d2b6f1..3a87f0be1 100644 --- a/app/screens/settings/notification_settings/notification_settings.js +++ b/app/screens/settings/notification_settings/notification_settings.js @@ -23,7 +23,7 @@ import NotificationPreferences from 'app/notification_preferences'; import SettingsItem from 'app/screens/settings/settings_item'; import {getNotificationProps} from 'app/utils/notify_props'; import {preventDoubleTap} from 'app/utils/tap'; -import {changeOpacity, makeStyleSheetFromTheme} from 'app/utils/theme'; +import {changeOpacity, makeStyleSheetFromTheme, setNavigatorStyles} from 'app/utils/theme'; class NotificationSettings extends PureComponent { static propTypes = { @@ -44,6 +44,10 @@ class NotificationSettings extends PureComponent { }; componentWillReceiveProps(nextProps) { + if (this.props.theme !== nextProps.theme) { + setNavigatorStyles(this.props.navigator, nextProps.theme); + } + const {updateMeRequest, intl} = nextProps; if (this.props.updateMeRequest !== updateMeRequest && updateMeRequest.status === RequestStatus.FAILURE) { Alert.alert( diff --git a/app/screens/settings/notification_settings_email/notification_settings_email.js b/app/screens/settings/notification_settings_email/notification_settings_email.js index 9842793f3..e0477ccb3 100644 --- a/app/screens/settings/notification_settings_email/notification_settings_email.js +++ b/app/screens/settings/notification_settings_email/notification_settings_email.js @@ -15,7 +15,7 @@ import {getPreferencesByCategory} from 'mattermost-redux/utils/preference_utils' import FormattedText from 'app/components/formatted_text'; import StatusBar from 'app/components/status_bar'; import {getNotificationProps} from 'app/utils/notify_props'; -import {changeOpacity, makeStyleSheetFromTheme} from 'app/utils/theme'; +import {changeOpacity, makeStyleSheetFromTheme, setNavigatorStyles} from 'app/utils/theme'; import Section from 'app/screens/settings/section'; import SectionItem from 'app/screens/settings/section_item'; @@ -40,6 +40,12 @@ export default class NotificationSettingsEmail extends PureComponent { this.state = this.setStateFromNotifyProps(notifyProps); } + componentWillReceiveProps(nextProps) { + if (this.props.theme !== nextProps.theme) { + setNavigatorStyles(this.props.navigator, nextProps.theme); + } + } + onNavigatorEvent = (event) => { if (event.type === 'ScreenChangedEvent') { switch (event.id) { diff --git a/app/screens/settings/notification_settings_mentions/notification_settings_mention_base.js b/app/screens/settings/notification_settings_mentions/notification_settings_mention_base.js index 43d3b1357..9b54a9387 100644 --- a/app/screens/settings/notification_settings_mentions/notification_settings_mention_base.js +++ b/app/screens/settings/notification_settings_mentions/notification_settings_mention_base.js @@ -6,6 +6,7 @@ import PropTypes from 'prop-types'; import {intlShape} from 'react-intl'; import {getNotificationProps} from 'app/utils/notify_props'; +import {setNavigatorStyles} from 'app/utils/theme'; export default class NotificationSettingsMentionsBase extends PureComponent { static propTypes = { @@ -28,6 +29,12 @@ export default class NotificationSettingsMentionsBase extends PureComponent { this.state = this.setStateFromNotifyProps(notifyProps); } + componentWillReceiveProps(nextProps) { + if (this.props.theme !== nextProps.theme) { + setNavigatorStyles(this.props.navigator, nextProps.theme); + } + } + onNavigatorEvent = (event) => { if (event.type === 'ScreenChangedEvent' && this.goingBack) { switch (event.id) { diff --git a/app/screens/settings/notification_settings_mentions_keywords/notification_settings_mentions_keywords.js b/app/screens/settings/notification_settings_mentions_keywords/notification_settings_mentions_keywords.js index 4833ba160..4fd190d89 100644 --- a/app/screens/settings/notification_settings_mentions_keywords/notification_settings_mentions_keywords.js +++ b/app/screens/settings/notification_settings_mentions_keywords/notification_settings_mentions_keywords.js @@ -7,7 +7,7 @@ import {View} from 'react-native'; import FormattedText from 'app/components/formatted_text'; import StatusBar from 'app/components/status_bar'; import TextInputWithLocalizedPlaceholder from 'app/components/text_input_with_localized_placeholder'; -import {changeOpacity, makeStyleSheetFromTheme} from 'app/utils/theme'; +import {changeOpacity, makeStyleSheetFromTheme, setNavigatorStyles} from 'app/utils/theme'; export default class NotificationSettingsMentionsKeywords extends PureComponent { static propTypes = { @@ -27,6 +27,12 @@ export default class NotificationSettingsMentionsKeywords extends PureComponent props.navigator.setOnNavigatorEvent(this.onNavigatorEvent); } + componentWillReceiveProps(nextProps) { + if (this.props.theme !== nextProps.theme) { + setNavigatorStyles(this.props.navigator, nextProps.theme); + } + } + handleSubmit = () => { this.props.navigator.pop(); }; diff --git a/app/screens/settings/notification_settings_mobile/notification_settings_mobile_base.js b/app/screens/settings/notification_settings_mobile/notification_settings_mobile_base.js index 679514986..1e71fa89e 100644 --- a/app/screens/settings/notification_settings_mobile/notification_settings_mobile_base.js +++ b/app/screens/settings/notification_settings_mobile/notification_settings_mobile_base.js @@ -7,6 +7,7 @@ import PropTypes from 'prop-types'; import {intlShape} from 'react-intl'; import {getNotificationProps} from 'app/utils/notify_props'; +import {setNavigatorStyles} from 'app/utils/theme'; export default class NotificationSettingsMobileBase extends PureComponent { static propTypes = { @@ -37,6 +38,12 @@ export default class NotificationSettingsMobileBase extends PureComponent { props.navigator.setOnNavigatorEvent(this.onNavigatorEvent); } + componentWillReceiveProps(nextProps) { + if (this.props.theme !== nextProps.theme) { + setNavigatorStyles(this.props.navigator, nextProps.theme); + } + } + getNotificationPreferences = (props) => { if (Platform.OS === 'android') { const { diff --git a/app/screens/thread/thread.js b/app/screens/thread/thread.js index 2c28ec0d1..be6b8a009 100644 --- a/app/screens/thread/thread.js +++ b/app/screens/thread/thread.js @@ -13,7 +13,7 @@ import PostList from 'app/components/post_list'; import PostTextbox from 'app/components/post_textbox'; import SafeAreaView from 'app/components/safe_area_view'; import StatusBar from 'app/components/status_bar'; -import {makeStyleSheetFromTheme} from 'app/utils/theme'; +import {makeStyleSheetFromTheme, setNavigatorStyles} from 'app/utils/theme'; class Thread extends PureComponent { static propTypes = { @@ -49,6 +49,10 @@ class Thread extends PureComponent { } componentWillReceiveProps(nextProps) { + if (this.props.theme !== nextProps.theme) { + setNavigatorStyles(this.props.navigator, nextProps.theme); + } + if (this.props.postIds !== nextProps.postIds && !nextProps.postIds.length) { this.close(); return; @@ -92,7 +96,6 @@ class Thread extends PureComponent { { const {navigator} = this.props; diff --git a/app/utils/theme.js b/app/utils/theme.js index 99de76a3a..3f42ff966 100644 --- a/app/utils/theme.js +++ b/app/utils/theme.js @@ -75,3 +75,12 @@ export function blendColors(background, foreground, opacity) { export function concatStyles(...styles) { return [].concat(styles); } + +export function setNavigatorStyles(navigator, theme) { + navigator.setStyle({ + navBarTextColor: theme.sidebarHeaderTextColor, + navBarBackgroundColor: theme.sidebarHeaderBg, + navBarButtonColor: theme.sidebarHeaderTextColor, + screenBackgroundColor: theme.centerChannelBg + }); +}