diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/view/com/util/Views.web.tsx | 35 | ||||
| -rw-r--r-- | src/view/screens/Settings.tsx | 170 |
2 files changed, 119 insertions, 86 deletions
diff --git a/src/view/com/util/Views.web.tsx b/src/view/com/util/Views.web.tsx index 313dda9cd..2df534144 100644 --- a/src/view/com/util/Views.web.tsx +++ b/src/view/com/util/Views.web.tsx @@ -22,7 +22,9 @@ import { View, ViewProps, } from 'react-native' +import {useTheme} from '../../lib/ThemeContext' import {addStyle} from '../../lib/addStyle' +import {colors} from '../../lib/styles' export function CenteredView({ style, @@ -36,7 +38,15 @@ export function FlatList<ItemT>({ contentContainerStyle, ...props }: React.PropsWithChildren<FlatListProps<ItemT>>) { - contentContainerStyle = addStyle(contentContainerStyle, styles.container) + const theme = useTheme() + contentContainerStyle = addStyle( + contentContainerStyle, + styles.containerScroll, + ) + contentContainerStyle = addStyle( + contentContainerStyle, + theme.colorScheme === 'dark' ? styles.containerDark : styles.containerLight, + ) return <RNFlatList contentContainerStyle={contentContainerStyle} {...props} /> } @@ -44,7 +54,15 @@ export function ScrollView({ contentContainerStyle, ...props }: React.PropsWithChildren<ScrollViewProps>) { - contentContainerStyle = addStyle(contentContainerStyle, styles.container) + const theme = useTheme() + contentContainerStyle = addStyle( + contentContainerStyle, + styles.containerScroll, + ) + contentContainerStyle = addStyle( + contentContainerStyle, + theme.colorScheme === 'dark' ? styles.containerDark : styles.containerLight, + ) return ( <RNScrollView contentContainerStyle={contentContainerStyle} {...props} /> ) @@ -57,4 +75,17 @@ const styles = StyleSheet.create({ marginLeft: 'auto', marginRight: 'auto', }, + containerScroll: { + width: '100%', + height: '100%', + maxWidth: 600, + marginLeft: 'auto', + marginRight: 'auto', + }, + containerLight: { + backgroundColor: colors.gray1, + }, + containerDark: { + backgroundColor: colors.gray7, + }, }) diff --git a/src/view/screens/Settings.tsx b/src/view/screens/Settings.tsx index d659d25d4..c2953b59d 100644 --- a/src/view/screens/Settings.tsx +++ b/src/view/screens/Settings.tsx @@ -1,7 +1,6 @@ import React, {useEffect} from 'react' import { ActivityIndicator, - ScrollView, StyleSheet, TouchableOpacity, View, @@ -11,6 +10,7 @@ import {observer} from 'mobx-react-lite' import {useStores} from '../../state' import {ScreenParams} from '../routes' import {s} from '../lib/styles' +import {ScrollView} from '../com/util/Views' import {ViewHeader} from '../com/util/ViewHeader' import {Link} from '../com/util/Link' import {Text} from '../com/util/text/Text' @@ -56,109 +56,111 @@ export const Settings = observer(function Settings({ return ( <View style={[s.h100pct]} testID="settingsScreen"> <ViewHeader title="Settings" /> - <ScrollView style={[s.mt10, s.pl10, s.pr10, s.h100pct]}> - <View style={[s.flexRow]}> - <Text type="xl-bold" style={pal.text}> - Signed in as - </Text> - <View style={s.flex1} /> - <TouchableOpacity - testID="signOutBtn" - onPress={isSwitching ? undefined : onPressSignout}> - <Text type="xl-medium" style={pal.link}> - Sign out + <ScrollView style={s.h100pct}> + <View style={[s.mt10, s.pl10, s.pr10]}> + <View style={[s.flexRow]}> + <Text type="xl-bold" style={pal.text}> + Signed in as </Text> - </TouchableOpacity> - </View> - {isSwitching ? ( - <View style={[pal.view, styles.profile]}> - <ActivityIndicator /> + <View style={s.flex1} /> + <TouchableOpacity + testID="signOutBtn" + onPress={isSwitching ? undefined : onPressSignout}> + <Text type="xl-medium" style={pal.link}> + Sign out + </Text> + </TouchableOpacity> </View> - ) : ( - <Link - href={`/profile/${store.me.handle}`} - title="Your profile" - noFeedback> + {isSwitching ? ( <View style={[pal.view, styles.profile]}> + <ActivityIndicator /> + </View> + ) : ( + <Link + href={`/profile/${store.me.handle}`} + title="Your profile" + noFeedback> + <View style={[pal.view, styles.profile]}> + <UserAvatar + size={40} + displayName={store.me.displayName} + handle={store.me.handle || ''} + avatar={store.me.avatar} + /> + <View style={[s.ml10]}> + <Text type="xl-bold" style={pal.text}> + {store.me.displayName || store.me.handle} + </Text> + <Text style={pal.textLight}>@{store.me.handle}</Text> + </View> + </View> + </Link> + )} + <Text type="sm-medium" style={pal.text}> + Switch to: + </Text> + {store.session.switchableAccounts.map(account => ( + <TouchableOpacity + testID={`switchToAccountBtn-${account.handle}`} + key={account.did} + style={[ + pal.view, + styles.profile, + s.mb2, + isSwitching && styles.dimmed, + ]} + onPress={ + isSwitching ? undefined : () => onPressSwitchAccount(account) + }> <UserAvatar size={40} - displayName={store.me.displayName} - handle={store.me.handle || ''} - avatar={store.me.avatar} + displayName={account.displayName} + handle={account.handle || ''} + avatar={account.aviUrl} /> <View style={[s.ml10]}> <Text type="xl-bold" style={pal.text}> - {store.me.displayName || store.me.handle} + {account.displayName || account.handle} </Text> - <Text style={pal.textLight}>@{store.me.handle}</Text> + <Text style={pal.textLight}>@{account.handle}</Text> </View> - </View> - </Link> - )} - <Text type="sm-medium" style={pal.text}> - Switch to: - </Text> - {store.session.switchableAccounts.map(account => ( + </TouchableOpacity> + ))} <TouchableOpacity - testID={`switchToAccountBtn-${account.handle}`} - key={account.did} + testID="switchToNewAccountBtn" style={[ pal.view, styles.profile, + styles.alignCenter, s.mb2, isSwitching && styles.dimmed, ]} - onPress={ - isSwitching ? undefined : () => onPressSwitchAccount(account) - }> - <UserAvatar - size={40} - displayName={account.displayName} - handle={account.handle || ''} - avatar={account.aviUrl} - /> - <View style={[s.ml10]}> - <Text type="xl-bold" style={pal.text}> - {account.displayName || account.handle} + onPress={isSwitching ? undefined : onPressAddAccount}> + <FontAwesomeIcon icon="plus" /> + <View style={[s.ml5]}> + <Text type="md-medium" style={pal.text}> + Add account </Text> - <Text style={pal.textLight}>@{account.handle}</Text> </View> </TouchableOpacity> - ))} - <TouchableOpacity - testID="switchToNewAccountBtn" - style={[ - pal.view, - styles.profile, - styles.alignCenter, - s.mb2, - isSwitching && styles.dimmed, - ]} - onPress={isSwitching ? undefined : onPressAddAccount}> - <FontAwesomeIcon icon="plus" /> - <View style={[s.ml5]}> - <Text type="md-medium" style={pal.text}> - Add account - </Text> - </View> - </TouchableOpacity> - <View style={styles.spacer} /> - <Text type="sm-medium" style={[s.mb5]}> - Developer tools - </Text> - <Link - style={[pal.view, s.p10, s.mb2]} - href="/sys/log" - title="System log"> - <Text style={pal.link}>System log</Text> - </Link> - <Link - style={[pal.view, s.p10, s.mb2]} - href="/sys/debug" - title="Debug tools"> - <Text style={pal.link}>Storybook</Text> - </Link> - <View style={s.footerSpacer} /> + <View style={styles.spacer} /> + <Text type="sm-medium" style={[s.mb5]}> + Developer tools + </Text> + <Link + style={[pal.view, s.p10, s.mb2]} + href="/sys/log" + title="System log"> + <Text style={pal.link}>System log</Text> + </Link> + <Link + style={[pal.view, s.p10, s.mb2]} + href="/sys/debug" + title="Debug tools"> + <Text style={pal.link}>Storybook</Text> + </Link> + <View style={s.footerSpacer} /> + </View> </ScrollView> </View> ) |