bigbuffet/bigbuffet-rw
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge branch 'fix-theme-toggle-bug' into 'develop'

Browse source 
Fix a bug where the theme toggle doesn't show the proper icon if the themeMode is not set

See merge request soapbox-pub/soapbox-fe!98
This commit is contained in:
Alex Gleason 2020-07-12 04:07:19 +00:00
commit a9347a9d27
1 changed files with 8 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
app/soapbox/features/ui/components/tabs_bar.js
View file

@ -13,7 +13,7 @@ import ActionBar from 'soapbox/features/compose/components/action_bar';
import { openModal } from '../../../actions/modal'; import { openModal } from '../../../actions/modal';
import { openSidebar } from '../../../actions/sidebar'; import { openSidebar } from '../../../actions/sidebar';
import Icon from '../../../components/icon'; import Icon from '../../../components/icon';
import { changeSetting } from 'soapbox/actions/settings'; import { changeSetting, getSettings } from 'soapbox/actions/settings';
const messages = defineMessages({ const messages = defineMessages({
post: { id: 'tabs_bar.post', defaultMessage: 'Post' }, post: { id: 'tabs_bar.post', defaultMessage: 'Post' },
@ -32,7 +32,7 @@ class TabsBar extends React.PureComponent {
toggleTheme: PropTypes.func, toggleTheme: PropTypes.func,
logo: PropTypes.string, logo: PropTypes.string,
account: ImmutablePropTypes.map, account: ImmutablePropTypes.map,
settings: ImmutablePropTypes.map, themeMode: PropTypes.string,
} }
state = { state = {
@ -108,7 +108,7 @@ class TabsBar extends React.PureComponent {
} }
getNewThemeValue() { getNewThemeValue() {
if (this.props.settings.get('themeMode') === 'light') return 'dark'; if (this.props.themeMode === 'light') return 'dark';
return 'light'; return 'light';
} }
@ -139,7 +139,7 @@ class TabsBar extends React.PureComponent {
}); });
render() { render() {
const { account, onOpenCompose, onOpenSidebar, intl, settings } = this.props; const { account, onOpenCompose, onOpenSidebar, intl, themeMode } = this.props;
const { collapsed } = this.state; const { collapsed } = this.state;
const classes = classNames('tabs-bar', { const classes = classNames('tabs-bar', {
@ -158,8 +158,8 @@ class TabsBar extends React.PureComponent {
</div> </div>
{ account && { account &&
<div className='flex'> <div className='flex'>
<button className='tabs-bar__button-theme-toggle button' onClick={this.handleToggleTheme} aria-label={settings.get('themeMode') === 'light' ? intl.formatMessage(messages.switchToDark) : intl.formatMessage(messages.switchToLight)}> <button className='tabs-bar__button-theme-toggle button' onClick={this.handleToggleTheme} aria-label={themeMode === 'light' ? intl.formatMessage(messages.switchToDark) : intl.formatMessage(messages.switchToLight)}>
<Icon id={settings.get('themeMode') === 'light' ? 'sun' : 'moon'} /> <Icon id={themeMode === 'light' ? 'sun' : 'moon'} />
</button> </button>
<div className='tabs-bar__profile'> <div className='tabs-bar__profile'>
<Avatar account={account} /> <Avatar account={account} />
@ -192,10 +192,11 @@ class TabsBar extends React.PureComponent {
const mapStateToProps = state => { const mapStateToProps = state => {
const me = state.get('me'); const me = state.get('me');
const settings = getSettings(state);
return { return {
account: state.getIn(['accounts', me]), account: state.getIn(['accounts', me]),
logo: state.getIn(['soapbox', 'logo']), logo: state.getIn(['soapbox', 'logo']),
settings: state.get('settings'), themeMode: settings.get('themeMode'),
}; };
}; };