diff --git a/app/soapbox/actions/theme.js b/app/soapbox/actions/theme.js deleted file mode 100644 index c33b4ea4d..000000000 --- a/app/soapbox/actions/theme.js +++ /dev/null @@ -1,17 +0,0 @@ -export const THEME_SET = 'THEME_SET'; -export const THEME_GENERATE = 'THEME_GENERATE'; - -export function generateTheme(brandColor, mode) { - return { - type: THEME_GENERATE, - brandColor, - mode, - }; -} - -export function setTheme(themeData) { - return { - type: THEME_SET, - themeData, - }; -} diff --git a/app/soapbox/containers/soapbox.js b/app/soapbox/containers/soapbox.js index d4dccf7c0..7c196252a 100644 --- a/app/soapbox/containers/soapbox.js +++ b/app/soapbox/containers/soapbox.js @@ -23,8 +23,7 @@ import { fetchSoapboxConfig } from 'soapbox/actions/soapbox'; import { fetchMe } from 'soapbox/actions/me'; import PublicLayout from 'soapbox/features/public_layout'; import { getSettings } from 'soapbox/actions/settings'; -import { themeDataToCss } from 'soapbox/utils/theme'; -import { generateTheme } from 'soapbox/actions/theme'; +import { generateThemeCss } from 'soapbox/utils/theme'; export const store = configureStore(); const hydrateAction = hydrateStore(initialState); @@ -49,9 +48,8 @@ const mapStateToProps = (state) => { dyslexicFont: settings.get('dyslexicFont'), demetricator: settings.get('demetricator'), locale: settings.get('locale'), - themeCss: themeDataToCss(state.get('theme')), + themeCss: generateThemeCss(state.getIn(['soapbox', 'brandColor'])), themeMode: settings.get('themeMode'), - brandColor: state.getIn(['soapbox', 'brandColor']), }; }; @@ -67,25 +65,10 @@ class SoapboxMount extends React.PureComponent { demetricator: PropTypes.bool, locale: PropTypes.string.isRequired, themeCss: PropTypes.string, - brandColor: PropTypes.string, themeMode: PropTypes.string, dispatch: PropTypes.func, }; - maybeUpdateTheme = prevProps => { - const updates = [ - this.props.brandColor !== prevProps.brandColor, - this.props.themeMode !== prevProps.themeMode, - ]; - if (updates.some(u => u)) this.props.dispatch( - generateTheme(this.props.brandColor, this.props.themeMode) - ); - } - - componentDidUpdate(prevProps) { - this.maybeUpdateTheme(prevProps); - } - render() { const { me, themeCss, locale } = this.props; if (me === null) return null; diff --git a/app/soapbox/reducers/index.js b/app/soapbox/reducers/index.js index 7d3f59a98..c91f2f0cb 100644 --- a/app/soapbox/reducers/index.js +++ b/app/soapbox/reducers/index.js @@ -42,7 +42,6 @@ import soapbox from './soapbox'; import instance from './instance'; import me from './me'; import auth from './auth'; -import theme from './theme'; const reducers = { dropdown_menu, @@ -88,7 +87,6 @@ const reducers = { instance, me, auth, - theme, }; export default combineReducers(reducers); diff --git a/app/soapbox/reducers/theme.js b/app/soapbox/reducers/theme.js deleted file mode 100644 index d87297e88..000000000 --- a/app/soapbox/reducers/theme.js +++ /dev/null @@ -1,35 +0,0 @@ -import { - THEME_SET, - THEME_GENERATE, -} from '../actions/theme'; -import { Map as ImmutableMap } from 'immutable'; - -const initialState = ImmutableMap(); - -const hex2rgb = c => c.substr(1).match(/../g).map(x => + `0x${x}`); - -export const generateTheme = (brandColor, mode = 'light') => { - if (!brandColor) return false; - const [ r, g, b ] = hex2rgb(brandColor); - return ImmutableMap({ - 'brand-color-r': r, - 'brand-color-g': g, - 'brand-color-b': b, - }); -}; - -export const setTheme = themeData => { - const { 'brand-color': brandColor } = themeData.toObject(); - return ImmutableMap(generateTheme(brandColor, 'light')).merge(themeData); -}; - -export default function theme(state = initialState, action) { - switch(action.type) { - case THEME_GENERATE: - return generateTheme(action.brandColor, action.mode); - case THEME_SET: - return setTheme(ImmutableMap(action.brandColor)); - default: - return state; - } -}; diff --git a/app/soapbox/utils/theme.js b/app/soapbox/utils/theme.js index 017cce544..d0bb42ef8 100644 --- a/app/soapbox/utils/theme.js +++ b/app/soapbox/utils/theme.js @@ -1,3 +1,21 @@ +import { Map as ImmutableMap } from 'immutable'; + +const hex2rgb = c => c.substr(1).match(/../g).map(x => + `0x${x}`); + +export const generateThemeCss = brandColor => { + if (!brandColor) return null; + return themeDataToCss(brandColorToThemeData(brandColor)); +}; + +export const brandColorToThemeData = brandColor => { + const [ r, g, b ] = hex2rgb(brandColor); + return ImmutableMap({ + 'brand-color-r': r, + 'brand-color-g': g, + 'brand-color-b': b, + }); +}; + export const themeDataToCss = themeData => ( themeData .entrySeq()