Bluesky app fork with some witchin' additions 💫
witchsky.app
bluesky
fork
client
Fix background in web scroll elements and update settings screen for web
+119
-86
+33
-2
src/view/com/util/Views.web.tsx
+33
-2
src/view/com/util/Views.web.tsx
···
22
22
View,
23
23
ViewProps,
24
24
} from 'react-native'
25
+
import {useTheme} from '../../lib/ThemeContext'
25
26
import {addStyle} from '../../lib/addStyle'
27
+
import {colors} from '../../lib/styles'
26
28
27
29
export function CenteredView({
28
30
style,
···
36
38
contentContainerStyle,
37
39
...props
38
40
}: React.PropsWithChildren<FlatListProps<ItemT>>) {
39
-
contentContainerStyle = addStyle(contentContainerStyle, styles.container)
41
+
const theme = useTheme()
42
+
contentContainerStyle = addStyle(
43
+
contentContainerStyle,
44
+
styles.containerScroll,
45
+
)
46
+
contentContainerStyle = addStyle(
47
+
contentContainerStyle,
48
+
theme.colorScheme === 'dark' ? styles.containerDark : styles.containerLight,
49
+
)
40
50
return <RNFlatList contentContainerStyle={contentContainerStyle} {...props} />
41
51
}
42
52
···
44
54
contentContainerStyle,
45
55
...props
46
56
}: React.PropsWithChildren<ScrollViewProps>) {
47
-
contentContainerStyle = addStyle(contentContainerStyle, styles.container)
57
+
const theme = useTheme()
58
+
contentContainerStyle = addStyle(
59
+
contentContainerStyle,
60
+
styles.containerScroll,
61
+
)
62
+
contentContainerStyle = addStyle(
63
+
contentContainerStyle,
64
+
theme.colorScheme === 'dark' ? styles.containerDark : styles.containerLight,
65
+
)
48
66
return (
49
67
<RNScrollView contentContainerStyle={contentContainerStyle} {...props} />
50
68
)
···
56
74
maxWidth: 600,
57
75
marginLeft: 'auto',
58
76
marginRight: 'auto',
77
+
},
78
+
containerScroll: {
79
+
width: '100%',
80
+
height: '100%',
81
+
maxWidth: 600,
82
+
marginLeft: 'auto',
83
+
marginRight: 'auto',
84
+
},
85
+
containerLight: {
86
+
backgroundColor: colors.gray1,
87
+
},
88
+
containerDark: {
89
+
backgroundColor: colors.gray7,
59
90
},
60
91
})
+86
-84
src/view/screens/Settings.tsx
+86
-84
src/view/screens/Settings.tsx
···
1
1
import React, {useEffect} from 'react'
2
2
import {
3
3
ActivityIndicator,
4
-
ScrollView,
5
4
StyleSheet,
6
5
TouchableOpacity,
7
6
View,
···
11
10
import {useStores} from '../../state'
12
11
import {ScreenParams} from '../routes'
13
12
import {s} from '../lib/styles'
13
+
import {ScrollView} from '../com/util/Views'
14
14
import {ViewHeader} from '../com/util/ViewHeader'
15
15
import {Link} from '../com/util/Link'
16
16
import {Text} from '../com/util/text/Text'
···
56
56
return (
57
57
<View style={[s.h100pct]} testID="settingsScreen">
58
58
<ViewHeader title="Settings" />
59
-
<ScrollView style={[s.mt10, s.pl10, s.pr10, s.h100pct]}>
60
-
<View style={[s.flexRow]}>
61
-
<Text type="xl-bold" style={pal.text}>
62
-
Signed in as
63
-
</Text>
64
-
<View style={s.flex1} />
65
-
<TouchableOpacity
66
-
testID="signOutBtn"
67
-
onPress={isSwitching ? undefined : onPressSignout}>
68
-
<Text type="xl-medium" style={pal.link}>
69
-
Sign out
59
+
<ScrollView style={s.h100pct}>
60
+
<View style={[s.mt10, s.pl10, s.pr10]}>
61
+
<View style={[s.flexRow]}>
62
+
<Text type="xl-bold" style={pal.text}>
63
+
Signed in as
70
64
</Text>
71
-
</TouchableOpacity>
72
-
</View>
73
-
{isSwitching ? (
74
-
<View style={[pal.view, styles.profile]}>
75
-
<ActivityIndicator />
65
+
<View style={s.flex1} />
66
+
<TouchableOpacity
67
+
testID="signOutBtn"
68
+
onPress={isSwitching ? undefined : onPressSignout}>
69
+
<Text type="xl-medium" style={pal.link}>
70
+
Sign out
71
+
</Text>
72
+
</TouchableOpacity>
76
73
</View>
77
-
) : (
78
-
<Link
79
-
href={`/profile/${store.me.handle}`}
80
-
title="Your profile"
81
-
noFeedback>
74
+
{isSwitching ? (
82
75
<View style={[pal.view, styles.profile]}>
76
+
<ActivityIndicator />
77
+
</View>
78
+
) : (
79
+
<Link
80
+
href={`/profile/${store.me.handle}`}
81
+
title="Your profile"
82
+
noFeedback>
83
+
<View style={[pal.view, styles.profile]}>
84
+
<UserAvatar
85
+
size={40}
86
+
displayName={store.me.displayName}
87
+
handle={store.me.handle || ''}
88
+
avatar={store.me.avatar}
89
+
/>
90
+
<View style={[s.ml10]}>
91
+
<Text type="xl-bold" style={pal.text}>
92
+
{store.me.displayName || store.me.handle}
93
+
</Text>
94
+
<Text style={pal.textLight}>@{store.me.handle}</Text>
95
+
</View>
96
+
</View>
97
+
</Link>
98
+
)}
99
+
<Text type="sm-medium" style={pal.text}>
100
+
Switch to:
101
+
</Text>
102
+
{store.session.switchableAccounts.map(account => (
103
+
<TouchableOpacity
104
+
testID={`switchToAccountBtn-${account.handle}`}
105
+
key={account.did}
106
+
style={[
107
+
pal.view,
108
+
styles.profile,
109
+
s.mb2,
110
+
isSwitching && styles.dimmed,
111
+
]}
112
+
onPress={
113
+
isSwitching ? undefined : () => onPressSwitchAccount(account)
114
+
}>
83
115
<UserAvatar
84
116
size={40}
85
-
displayName={store.me.displayName}
86
-
handle={store.me.handle || ''}
87
-
avatar={store.me.avatar}
117
+
displayName={account.displayName}
118
+
handle={account.handle || ''}
119
+
avatar={account.aviUrl}
88
120
/>
89
121
<View style={[s.ml10]}>
90
122
<Text type="xl-bold" style={pal.text}>
91
-
{store.me.displayName || store.me.handle}
123
+
{account.displayName || account.handle}
92
124
</Text>
93
-
<Text style={pal.textLight}>@{store.me.handle}</Text>
125
+
<Text style={pal.textLight}>@{account.handle}</Text>
94
126
</View>
95
-
</View>
96
-
</Link>
97
-
)}
98
-
<Text type="sm-medium" style={pal.text}>
99
-
Switch to:
100
-
</Text>
101
-
{store.session.switchableAccounts.map(account => (
127
+
</TouchableOpacity>
128
+
))}
102
129
<TouchableOpacity
103
-
testID={`switchToAccountBtn-${account.handle}`}
104
-
key={account.did}
130
+
testID="switchToNewAccountBtn"
105
131
style={[
106
132
pal.view,
107
133
styles.profile,
134
+
styles.alignCenter,
108
135
s.mb2,
109
136
isSwitching && styles.dimmed,
110
137
]}
111
-
onPress={
112
-
isSwitching ? undefined : () => onPressSwitchAccount(account)
113
-
}>
114
-
<UserAvatar
115
-
size={40}
116
-
displayName={account.displayName}
117
-
handle={account.handle || ''}
118
-
avatar={account.aviUrl}
119
-
/>
120
-
<View style={[s.ml10]}>
121
-
<Text type="xl-bold" style={pal.text}>
122
-
{account.displayName || account.handle}
138
+
onPress={isSwitching ? undefined : onPressAddAccount}>
139
+
<FontAwesomeIcon icon="plus" />
140
+
<View style={[s.ml5]}>
141
+
<Text type="md-medium" style={pal.text}>
142
+
Add account
123
143
</Text>
124
-
<Text style={pal.textLight}>@{account.handle}</Text>
125
144
</View>
126
145
</TouchableOpacity>
127
-
))}
128
-
<TouchableOpacity
129
-
testID="switchToNewAccountBtn"
130
-
style={[
131
-
pal.view,
132
-
styles.profile,
133
-
styles.alignCenter,
134
-
s.mb2,
135
-
isSwitching && styles.dimmed,
136
-
]}
137
-
onPress={isSwitching ? undefined : onPressAddAccount}>
138
-
<FontAwesomeIcon icon="plus" />
139
-
<View style={[s.ml5]}>
140
-
<Text type="md-medium" style={pal.text}>
141
-
Add account
142
-
</Text>
143
-
</View>
144
-
</TouchableOpacity>
145
-
<View style={styles.spacer} />
146
-
<Text type="sm-medium" style={[s.mb5]}>
147
-
Developer tools
148
-
</Text>
149
-
<Link
150
-
style={[pal.view, s.p10, s.mb2]}
151
-
href="/sys/log"
152
-
title="System log">
153
-
<Text style={pal.link}>System log</Text>
154
-
</Link>
155
-
<Link
156
-
style={[pal.view, s.p10, s.mb2]}
157
-
href="/sys/debug"
158
-
title="Debug tools">
159
-
<Text style={pal.link}>Storybook</Text>
160
-
</Link>
161
-
<View style={s.footerSpacer} />
146
+
<View style={styles.spacer} />
147
+
<Text type="sm-medium" style={[s.mb5]}>
148
+
Developer tools
149
+
</Text>
150
+
<Link
151
+
style={[pal.view, s.p10, s.mb2]}
152
+
href="/sys/log"
153
+
title="System log">
154
+
<Text style={pal.link}>System log</Text>
155
+
</Link>
156
+
<Link
157
+
style={[pal.view, s.p10, s.mb2]}
158
+
href="/sys/debug"
159
+
title="Debug tools">
160
+
<Text style={pal.link}>Storybook</Text>
161
+
</Link>
162
+
<View style={s.footerSpacer} />
163
+
</View>
162
164
</ScrollView>
163
165
</View>
164
166
)