diff --git a/client/components/mobile/Selector.jsx b/client/components/mobile/Selector.jsx index 8541454c..5ef41a9e 100644 --- a/client/components/mobile/Selector.jsx +++ b/client/components/mobile/Selector.jsx @@ -5,7 +5,7 @@ import { prop } from '../../theme'; const PreferenceTitle = styled.h4.attrs(props => ({ ...props, className: 'preference__title' }))` - color: ${prop('primaryTextColor')} !important; + color: ${prop('primaryTextColor')}; `; const Preference = styled.div.attrs(props => ({ ...props, className: 'preference' }))` diff --git a/client/modules/Mobile/MobilePreferences.jsx b/client/modules/Mobile/MobilePreferences.jsx index a7634701..f8500e2b 100644 --- a/client/modules/Mobile/MobilePreferences.jsx +++ b/client/modules/Mobile/MobilePreferences.jsx @@ -12,7 +12,7 @@ import Screen from '../../components/mobile/MobileScreen'; import Header from '../../components/mobile/Header'; import Selector from '../../components/mobile/Selector'; import { ExitIcon } from '../../common/icons'; -import { remSize } from '../../theme'; +import { remSize, prop } from '../../theme'; const IconLinkWrapper = styled(Link)` width: 3rem; @@ -30,12 +30,17 @@ const SettingsHeader = styled(Header)` background: transparent `; +const SectionHeader = styled.h2` + color: ${prop('primaryTextColor')}; + padding-top: 2rem +`; + const MobilePreferences = (props) => { const { setTheme, setAutosave, setLinewrap } = props; const { theme, autosave, linewrap } = props; - const preferences = [ + const generalSettings = [ { title: 'Theme', value: theme, @@ -95,12 +100,14 @@ const MobilePreferences = (props) => { -
- { preferences.map(option => ) } + General Settings + { generalSettings.map(option => ) } + + Accessibility