zio
/
bsky-app
2
0
Fork 0
Code Pull Requests Packages Releases Activity

feat: styling/copy cleanup

zio/stable
Eric Bailey 2023-06-16 15:16:40 -05:00
parent 73c6afc7fb
commit 20f77ae7b7
2 changed files with 69 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

119
src/view/com/modals/PreferencesHomeFeed.tsx
View File

@ -23,10 +23,12 @@ function RepliesThresholdInput({enabled}: {enabled: boolean}) {
marginTop: 10, marginTop: 10,
opacity: enabled ? 1 : 0.3, opacity: enabled ? 1 : 0.3,
}}> }}>
<Text> <Text type="xs">
{value === 0 {value === 0
? `Show all replies` ? `Show all replies`
: `Show replies with greater than ${value} likes`} : `Show replies with greater than ${value} ${
value > 1 ? `likes` : `like`
}`}
</Text> </Text>
<Slider <Slider
value={value} value={value}
@ -53,55 +55,67 @@ export const Component = observer(function Component() {
<View <View
testID="preferencesHomeFeedModal" testID="preferencesHomeFeedModal"
style={[pal.view, styles.container]}> style={[pal.view, styles.container]}>
<Text type="title-lg" style={[pal.text, styles.title]}> <View style={{padding: 20, paddingBottom: 30}}>
Home Feed Preferences <Text type="title-lg" style={[pal.text, styles.title]}>
</Text> Home Feed Preferences
</Text>
<Text type="xl" style={[pal.textLight, styles.description]}>
Fine-tune the content you see on your home screen.
</Text>
</View>
<ScrollView> <ScrollView>
<View style={[styles.card]}> <View style={{paddingHorizontal: 20}}>
<Text type="title-sm" style={[s.pb5]}> <View style={[styles.card]}>
Show Replies <Text type="title-sm" style={[s.pb5]}>
</Text> Show Replies
<Text style={[s.pb10]}> </Text>
Replies are shown in your home feed by default. If this setting is <Text style={[s.pb10]}>
disabled, you'll see only new posts and threads. Adjust the number of likes a reply must have to be shown in your
</Text> feed.
<ToggleButton </Text>
type="default-light" <ToggleButton
label={store.preferences.homeFeedRepliesEnabled ? 'Yes' : 'No'} type="default-light"
isSelected={store.preferences.homeFeedRepliesEnabled} label={store.preferences.homeFeedRepliesEnabled ? 'Yes' : 'No'}
onPress={store.preferences.toggleHomeFeedRepliesEnabled} isSelected={store.preferences.homeFeedRepliesEnabled}
/> onPress={store.preferences.toggleHomeFeedRepliesEnabled}
/>
<RepliesThresholdInput <RepliesThresholdInput
enabled={store.preferences.homeFeedRepliesEnabled} enabled={store.preferences.homeFeedRepliesEnabled}
/> />
</View> </View>
<View style={[styles.card]}> <View style={[styles.card]}>
<Text type="title-sm" style={[s.pb5]}> <Text type="title-sm" style={[s.pb5]}>
Show Reposts Show Reposts
</Text> </Text>
<Text style={[s.pb10]}>Description</Text> <Text style={[s.pb10]}>
<ToggleButton Disable this setting to hide all reposts from your feed.
type="default-light" </Text>
label={store.preferences.homeFeedRepostsEnabled ? 'Yes' : 'No'} <ToggleButton
isSelected={store.preferences.homeFeedRepostsEnabled} type="default-light"
onPress={store.preferences.toggleHomeFeedRepostsEnabled} label={store.preferences.homeFeedRepostsEnabled ? 'Yes' : 'No'}
/> isSelected={store.preferences.homeFeedRepostsEnabled}
</View> onPress={store.preferences.toggleHomeFeedRepostsEnabled}
/>
</View>
<View style={[styles.card]}> <View style={[styles.card]}>
<Text type="title-sm" style={[s.pb5]}> <Text type="title-sm" style={[s.pb5]}>
Show Quote Posts Show Quote Posts
</Text> </Text>
<Text style={[s.pb10]}>Description</Text> <Text style={[s.pb10]}>
<ToggleButton Disable this setting to hide all quote posts from your feed.
type="default-light" Reposts will still be visible.
label={store.preferences.homeFeedQuotePostsEnabled ? 'Yes' : 'No'} </Text>
isSelected={store.preferences.homeFeedQuotePostsEnabled} <ToggleButton
onPress={store.preferences.toggleHomeFeedQuotePostsEnabled} type="default-light"
/> label={store.preferences.homeFeedQuotePostsEnabled ? 'Yes' : 'No'}
isSelected={store.preferences.homeFeedQuotePostsEnabled}
onPress={store.preferences.toggleHomeFeedQuotePostsEnabled}
/>
</View>
</View> </View>
</ScrollView> </ScrollView>
@ -125,15 +139,18 @@ export const Component = observer(function Component() {
const styles = StyleSheet.create({ const styles = StyleSheet.create({
container: { container: {
flex: 1, flex: 1,
padding: 20,
paddingBottom: isDesktopWeb ? 0 : 60, paddingBottom: isDesktopWeb ? 0 : 60,
}, },
title: { title: {
textAlign: 'center', textAlign: 'center',
marginBottom: 20, marginBottom: 5,
},
description: {
textAlign: 'center',
paddingHorizontal: 32,
}, },
card: { card: {
...s.p20, padding: 16,
backgroundColor: s.gray1.color, backgroundColor: s.gray1.color,
borderRadius: 10, borderRadius: 10,
marginBottom: 20, marginBottom: 20,
@ -147,8 +164,8 @@ const styles = StyleSheet.create({
backgroundColor: colors.blue3, backgroundColor: colors.blue3,
}, },
btnContainer: { btnContainer: {
paddingTop: 10, paddingTop: 20,
paddingHorizontal: 10, paddingHorizontal: 20,
borderTopWidth: isDesktopWeb ? 0 : 1, borderTopWidth: isDesktopWeb ? 0 : 1,
}, },
}) })

2
src/view/screens/Settings.tsx
View File

@ -396,7 +396,7 @@ export const SettingsScreen = withAuthRequired(
/> />
</View> </View>
<Text type="lg" style={pal.text}> <Text type="lg" style={pal.text}>
Preferences Home Feed Preferences
</Text> </Text>
</TouchableOpacity> </TouchableOpacity>
<TouchableOpacity <TouchableOpacity