Move appearance settings to settings page
Jaz
parent
b2ef6bde00
commit
3c15f6ba02
|
|
@ -1,6 +1,7 @@
|
|||
import React from 'react'
|
||||
import {
|
||||
ActivityIndicator,
|
||||
Pressable,
|
||||
StyleSheet,
|
||||
TextStyle,
|
||||
TouchableOpacity,
|
||||
|
|
@ -282,6 +283,34 @@ export const SettingsScreen = withAuthRequired(
|
|||
</Text>
|
||||
</TouchableOpacity>
|
||||
|
||||
<View style={styles.spacer20} />
|
||||
<Text type="xl-bold" style={[pal.text, styles.heading]}>
|
||||
Appearance
|
||||
</Text>
|
||||
<View>
|
||||
<View style={[styles.linkCard, pal.view, styles.selectableBtns]}>
|
||||
<SelectableBtn
|
||||
current={store.shell.colorMode}
|
||||
value="system"
|
||||
label="System"
|
||||
left
|
||||
onChange={(v: string) => store.shell.setColorMode(v)}
|
||||
/>
|
||||
<SelectableBtn
|
||||
current={store.shell.colorMode}
|
||||
value="light"
|
||||
label="Light"
|
||||
onChange={(v: string) => store.shell.setColorMode(v)}
|
||||
/>
|
||||
<SelectableBtn
|
||||
current={store.shell.colorMode}
|
||||
value="dark"
|
||||
label="Dark"
|
||||
right
|
||||
onChange={(v: string) => store.shell.setColorMode(v)}
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
<View style={styles.spacer20} />
|
||||
|
||||
<Text type="xl-bold" style={[pal.text, styles.heading]}>
|
||||
|
|
@ -411,6 +440,45 @@ function AccountDropdownBtn({handle}: {handle: string}) {
|
|||
)
|
||||
}
|
||||
|
||||
interface SelectableBtnProps {
|
||||
current: string
|
||||
value: string
|
||||
label: string
|
||||
left?: boolean
|
||||
right?: boolean
|
||||
onChange: (v: string) => void
|
||||
}
|
||||
|
||||
function SelectableBtn({
|
||||
current,
|
||||
value,
|
||||
label,
|
||||
left,
|
||||
right,
|
||||
onChange,
|
||||
}: SelectableBtnProps) {
|
||||
const pal = usePalette('default')
|
||||
const palPrimary = usePalette('inverted')
|
||||
return (
|
||||
<Pressable
|
||||
style={[
|
||||
styles.selectableBtn,
|
||||
left && styles.selectableBtnLeft,
|
||||
right && styles.selectableBtnRight,
|
||||
pal.border,
|
||||
current === value ? palPrimary.view : pal.view,
|
||||
]}
|
||||
onPress={() => onChange(value)}
|
||||
accessibilityRole="button"
|
||||
accessibilityLabel={value}
|
||||
accessibilityHint={`Set color theme to ${value}`}>
|
||||
<Text style={current === value ? palPrimary.text : pal.text}>
|
||||
{label}
|
||||
</Text>
|
||||
</Pressable>
|
||||
)
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
dimmed: {
|
||||
opacity: 0.5,
|
||||
|
|
@ -462,4 +530,43 @@ const styles = StyleSheet.create({
|
|||
paddingVertical: 8,
|
||||
paddingHorizontal: 18,
|
||||
},
|
||||
|
||||
colorModeText: {
|
||||
marginLeft: 10,
|
||||
marginBottom: 6,
|
||||
},
|
||||
|
||||
selectableBtns: {
|
||||
flexDirection: 'row',
|
||||
},
|
||||
selectableBtn: {
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'center',
|
||||
borderWidth: 1,
|
||||
borderLeftWidth: 0,
|
||||
paddingHorizontal: 10,
|
||||
paddingVertical: 10,
|
||||
},
|
||||
selectableBtnLeft: {
|
||||
borderTopLeftRadius: 8,
|
||||
borderBottomLeftRadius: 8,
|
||||
borderLeftWidth: 1,
|
||||
},
|
||||
selectableBtnRight: {
|
||||
borderTopRightRadius: 8,
|
||||
borderBottomRightRadius: 8,
|
||||
},
|
||||
|
||||
btn: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
width: '100%',
|
||||
borderRadius: 32,
|
||||
padding: 14,
|
||||
backgroundColor: colors.gray1,
|
||||
},
|
||||
toggleBtn: {
|
||||
paddingHorizontal: 0,
|
||||
},
|
||||
})
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
import React, {ComponentProps} from 'react'
|
||||
import {
|
||||
Linking,
|
||||
Pressable,
|
||||
SafeAreaView,
|
||||
StyleProp,
|
||||
StyleSheet,
|
||||
|
|
@ -54,19 +53,6 @@ export const DrawerContent = observer(() => {
|
|||
|
||||
const {notifications} = store.me
|
||||
|
||||
const colorModes = ['light', 'dark', 'system']
|
||||
const modeAccessibilityText = {
|
||||
light: 'Sets display to light mode',
|
||||
dark: 'Sets display to dark mode',
|
||||
system: 'Sets display to system default',
|
||||
}
|
||||
|
||||
const nextColorMode = () => {
|
||||
return colorModes[
|
||||
(colorModes.indexOf(store.shell.colorMode) + 1) % colorModes.length
|
||||
]
|
||||
}
|
||||
|
||||
// events
|
||||
// =
|
||||
|
||||
|
|
@ -125,15 +111,6 @@ export const DrawerContent = observer(() => {
|
|||
track('Menu:FeedbackClicked')
|
||||
Linking.openURL(FEEDBACK_FORM_URL)
|
||||
}, [track])
|
||||
|
||||
const onColorModePress = React.useCallback(
|
||||
(mode: string) => {
|
||||
track('Menu:ItemClicked', {url: '#cycleColorMode'})
|
||||
store.shell.setColorMode(mode)
|
||||
},
|
||||
[track, store],
|
||||
)
|
||||
|
||||
// rendering
|
||||
// =
|
||||
|
||||
|
|
@ -294,33 +271,6 @@ export const DrawerContent = observer(() => {
|
|||
</View>
|
||||
<View style={s.flex1} />
|
||||
<View style={styles.footer}>
|
||||
<View>
|
||||
<Text type="sm" style={[pal.textLight, styles.colorModeText]}>
|
||||
Set color theme
|
||||
</Text>
|
||||
<View style={styles.selectableBtns}>
|
||||
<SelectableBtn
|
||||
current={store.shell.colorMode}
|
||||
value="system"
|
||||
label="System"
|
||||
left
|
||||
onChange={onColorModePress}
|
||||
/>
|
||||
<SelectableBtn
|
||||
current={store.shell.colorMode}
|
||||
value="light"
|
||||
label="Light"
|
||||
onChange={onColorModePress}
|
||||
/>
|
||||
<SelectableBtn
|
||||
current={store.shell.colorMode}
|
||||
value="dark"
|
||||
label="Dark"
|
||||
right
|
||||
onChange={onColorModePress}
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
<TouchableOpacity
|
||||
accessibilityRole="link"
|
||||
accessibilityLabel="Send feedback"
|
||||
|
|
@ -440,45 +390,6 @@ const InviteCodes = observer(() => {
|
|||
)
|
||||
})
|
||||
|
||||
interface SelectableBtnProps {
|
||||
current: string
|
||||
value: string
|
||||
label: string
|
||||
left?: boolean
|
||||
right?: boolean
|
||||
onChange: (v: string) => void
|
||||
}
|
||||
|
||||
function SelectableBtn({
|
||||
current,
|
||||
value,
|
||||
label,
|
||||
left,
|
||||
right,
|
||||
onChange,
|
||||
}: SelectableBtnProps) {
|
||||
const pal = usePalette('default')
|
||||
const palPrimary = usePalette('inverted')
|
||||
return (
|
||||
<Pressable
|
||||
style={[
|
||||
styles.selectableBtn,
|
||||
left && styles.selectableBtnLeft,
|
||||
right && styles.selectableBtnRight,
|
||||
pal.border,
|
||||
current === value ? palPrimary.view : pal.view,
|
||||
]}
|
||||
onPress={() => onChange(value)}
|
||||
accessibilityRole="button"
|
||||
accessibilityLabel={value}
|
||||
accessibilityHint={`Set color theme to ${value}`}>
|
||||
<Text style={current === value ? palPrimary.text : pal.text}>
|
||||
{label}
|
||||
</Text>
|
||||
</Pressable>
|
||||
)
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
view: {
|
||||
flex: 1,
|
||||
|
|
@ -553,49 +464,8 @@ const styles = StyleSheet.create({
|
|||
marginRight: 6,
|
||||
},
|
||||
|
||||
colorModeText: {
|
||||
marginLeft: 10,
|
||||
marginBottom: 6,
|
||||
},
|
||||
|
||||
selectableBtns: {
|
||||
flexDirection: 'row',
|
||||
marginLeft: 10,
|
||||
},
|
||||
selectableBtn: {
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'center',
|
||||
borderWidth: 1,
|
||||
borderLeftWidth: 0,
|
||||
paddingHorizontal: 10,
|
||||
paddingVertical: 10,
|
||||
},
|
||||
selectableBtnLeft: {
|
||||
borderTopLeftRadius: 8,
|
||||
borderBottomLeftRadius: 8,
|
||||
borderLeftWidth: 1,
|
||||
},
|
||||
selectableBtnRight: {
|
||||
borderTopRightRadius: 8,
|
||||
borderBottomRightRadius: 8,
|
||||
},
|
||||
|
||||
btn: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
width: '100%',
|
||||
borderRadius: 32,
|
||||
padding: 14,
|
||||
backgroundColor: colors.gray1,
|
||||
},
|
||||
toggleBtn: {
|
||||
paddingHorizontal: 0,
|
||||
},
|
||||
|
||||
footer: {
|
||||
flexDirection: 'column',
|
||||
rowGap: 10,
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between',
|
||||
paddingRight: 30,
|
||||
paddingTop: 20,
|
||||
|
|
@ -607,9 +477,6 @@ const styles = StyleSheet.create({
|
|||
padding: 10,
|
||||
borderRadius: 25,
|
||||
},
|
||||
footerBtnDarkMode: {
|
||||
backgroundColor: colors.black,
|
||||
},
|
||||
footerBtnFeedback: {
|
||||
paddingHorizontal: 24,
|
||||
},
|
||||
|
|
|
|||
|
|
@ -52,33 +52,6 @@ export const DesktopRightNav = observer(function DesktopRightNav() {
|
|||
</View>
|
||||
</View>
|
||||
<InviteCodes />
|
||||
<View>
|
||||
<Text type="sm" style={[pal.textLight, styles.colorModeText]}>
|
||||
Set color theme
|
||||
</Text>
|
||||
<View style={styles.selectableBtns}>
|
||||
<SelectableBtn
|
||||
current={store.shell.colorMode}
|
||||
value="system"
|
||||
label="System"
|
||||
left
|
||||
onChange={(v: string) => store.shell.setColorMode(v)}
|
||||
/>
|
||||
<SelectableBtn
|
||||
current={store.shell.colorMode}
|
||||
value="light"
|
||||
label="Light"
|
||||
onChange={(v: string) => store.shell.setColorMode(v)}
|
||||
/>
|
||||
<SelectableBtn
|
||||
current={store.shell.colorMode}
|
||||
value="dark"
|
||||
label="Dark"
|
||||
right
|
||||
onChange={(v: string) => store.shell.setColorMode(v)}
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
})
|
||||
|
|
@ -121,45 +94,6 @@ const InviteCodes = observer(() => {
|
|||
)
|
||||
})
|
||||
|
||||
interface SelectableBtnProps {
|
||||
current: string
|
||||
value: string
|
||||
label: string
|
||||
left?: boolean
|
||||
right?: boolean
|
||||
onChange: (v: string) => void
|
||||
}
|
||||
|
||||
function SelectableBtn({
|
||||
current,
|
||||
value,
|
||||
label,
|
||||
left,
|
||||
right,
|
||||
onChange,
|
||||
}: SelectableBtnProps) {
|
||||
const pal = usePalette('default')
|
||||
const palPrimary = usePalette('inverted')
|
||||
return (
|
||||
<Pressable
|
||||
style={[
|
||||
styles.selectableBtn,
|
||||
left && styles.selectableBtnLeft,
|
||||
right && styles.selectableBtnRight,
|
||||
pal.border,
|
||||
current === value ? palPrimary.view : pal.view,
|
||||
]}
|
||||
onPress={() => onChange(value)}
|
||||
accessibilityRole="button"
|
||||
accessibilityLabel={value}
|
||||
accessibilityHint={`Set color theme to ${value}`}>
|
||||
<Text style={current === value ? palPrimary.text : pal.text}>
|
||||
{label}
|
||||
</Text>
|
||||
</Pressable>
|
||||
)
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
rightNav: {
|
||||
position: 'absolute',
|
||||
|
|
@ -187,59 +121,4 @@ const styles = StyleSheet.create({
|
|||
inviteCodesIcon: {
|
||||
marginRight: 6,
|
||||
},
|
||||
|
||||
cycleColorModeToggle: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
gap: 8,
|
||||
marginHorizontal: 12,
|
||||
},
|
||||
cycleColorModeToggleIcon: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
width: 26,
|
||||
height: 26,
|
||||
borderRadius: 15,
|
||||
},
|
||||
|
||||
colorModeText: {
|
||||
marginLeft: 10,
|
||||
marginBottom: 6,
|
||||
},
|
||||
|
||||
selectableBtns: {
|
||||
flexDirection: 'row',
|
||||
marginLeft: 10,
|
||||
},
|
||||
selectableBtn: {
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'center',
|
||||
borderWidth: 1,
|
||||
borderLeftWidth: 0,
|
||||
paddingHorizontal: 10,
|
||||
paddingVertical: 10,
|
||||
},
|
||||
selectableBtnLeft: {
|
||||
borderTopLeftRadius: 8,
|
||||
borderBottomLeftRadius: 8,
|
||||
borderLeftWidth: 1,
|
||||
},
|
||||
selectableBtnRight: {
|
||||
borderTopRightRadius: 8,
|
||||
borderBottomRightRadius: 8,
|
||||
},
|
||||
|
||||
btn: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
width: '100%',
|
||||
borderRadius: 32,
|
||||
padding: 14,
|
||||
backgroundColor: colors.gray1,
|
||||
},
|
||||
toggleBtn: {
|
||||
paddingHorizontal: 0,
|
||||
},
|
||||
})
|
||||
|
|
|
|||
Loading…
Reference in New Issue