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

Small style fixes

zio/stable
Paul Frazee 2023-06-16 16:02:26 -05:00
parent 31c9e02c0a
commit 20cdede5e1
1 changed files with 15 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -2,12 +2,11 @@ import React, {useState} from 'react'
import {StyleSheet, TouchableOpacity, View} from 'react-native' import {StyleSheet, TouchableOpacity, View} from 'react-native'
import {observer} from 'mobx-react-lite' import {observer} from 'mobx-react-lite'
import {Slider} from '@miblanchard/react-native-slider' import {Slider} from '@miblanchard/react-native-slider'
import {Text} from '../util/text/Text' import {Text} from '../util/text/Text'
import {useStores} from 'state/index' import {useStores} from 'state/index'
import {s, colors} from 'lib/styles' import {s, colors} from 'lib/styles'
import {usePalette} from 'lib/hooks/usePalette' import {usePalette} from 'lib/hooks/usePalette'
import {isDesktopWeb} from 'platform/detection' import {isWeb, isDesktopWeb} from 'platform/detection'
import {ToggleButton} from 'view/com/util/forms/ToggleButton' import {ToggleButton} from 'view/com/util/forms/ToggleButton'
import {ScrollView} from 'view/com/modals/util' import {ScrollView} from 'view/com/modals/util'
@ -18,11 +17,7 @@ function RepliesThresholdInput({enabled}: {enabled: boolean}) {
const [value, setValue] = useState(store.preferences.homeFeedRepliesThreshold) const [value, setValue] = useState(store.preferences.homeFeedRepliesThreshold)
return ( return (
<View <View style={[s.mt10, !enabled && styles.dimmed]}>
style={{
marginTop: 10,
opacity: enabled ? 1 : 0.3,
}}>
<Text type="xs"> <Text type="xs">
{value === 0 {value === 0
? `Show all replies` ? `Show all replies`
@ -39,7 +34,7 @@ function RepliesThresholdInput({enabled}: {enabled: boolean}) {
}} }}
minimumValue={0} minimumValue={0}
maximumValue={25} maximumValue={25}
containerStyle={{flex: 1}} containerStyle={isWeb ? undefined : s.flex1}
disabled={!enabled} disabled={!enabled}
thumbTintColor={colors.blue3} thumbTintColor={colors.blue3}
/> />
@ -55,7 +50,7 @@ export const Component = observer(function Component() {
<View <View
testID="preferencesHomeFeedModal" testID="preferencesHomeFeedModal"
style={[pal.view, styles.container]}> style={[pal.view, styles.container]}>
<View style={{padding: 20, paddingBottom: 30}}> <View style={styles.titleSection}>
<Text type="title-lg" style={[pal.text, styles.title]}> <Text type="title-lg" style={[pal.text, styles.title]}>
Home Feed Preferences Home Feed Preferences
</Text> </Text>
@ -65,7 +60,7 @@ export const Component = observer(function Component() {
</View> </View>
<ScrollView> <ScrollView>
<View style={{paddingHorizontal: 20}}> <View style={styles.cardsContainer}>
<View style={[styles.card]}> <View style={[styles.card]}>
<Text type="title-sm" style={[s.pb5]}> <Text type="title-sm" style={[s.pb5]}>
Show Replies Show Replies
@ -141,6 +136,10 @@ const styles = StyleSheet.create({
flex: 1, flex: 1,
paddingBottom: isDesktopWeb ? 0 : 60, paddingBottom: isDesktopWeb ? 0 : 60,
}, },
titleSection: {
padding: 20,
paddingBottom: 30,
},
title: { title: {
textAlign: 'center', textAlign: 'center',
marginBottom: 5, marginBottom: 5,
@ -149,6 +148,9 @@ const styles = StyleSheet.create({
textAlign: 'center', textAlign: 'center',
paddingHorizontal: 32, paddingHorizontal: 32,
}, },
cardsContainer: {
paddingHorizontal: 20,
},
card: { card: {
padding: 16, padding: 16,
backgroundColor: s.gray1.color, backgroundColor: s.gray1.color,
@ -168,4 +170,7 @@ const styles = StyleSheet.create({
paddingHorizontal: 20, paddingHorizontal: 20,
borderTopWidth: isDesktopWeb ? 0 : 1, borderTopWidth: isDesktopWeb ? 0 : 1,
}, },
dimmed: {
opacity: 0.3,
},
}) })