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

Update load latest to match sizing and aesthetic better

zio/stable
Paul Frazee 2023-01-19 15:10:15 -06:00
parent 90d6d75af1
commit 2972fd8372
1 changed files with 18 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
src/view/screens/Home.tsx
View File

@ -2,7 +2,7 @@ import React, {useEffect} 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 useAppState from 'react-native-appstate-hook' import useAppState from 'react-native-appstate-hook'
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' import LinearGradient from 'react-native-linear-gradient'
import {useSafeAreaInsets} from 'react-native-safe-area-context' import {useSafeAreaInsets} from 'react-native-safe-area-context'
import {ViewHeader} from '../com/util/ViewHeader' import {ViewHeader} from '../com/util/ViewHeader'
import {Feed} from '../com/posts/Feed' import {Feed} from '../com/posts/Feed'
@ -10,7 +10,7 @@ import {Text} from '../com/util/text/Text'
import {FAB} from '../com/util/FAB' import {FAB} from '../com/util/FAB'
import {useStores} from '../../state' import {useStores} from '../../state'
import {ScreenParams} from '../routes' import {ScreenParams} from '../routes'
import {s, colors} from '../lib/styles' import {s, colors, gradients} from '../lib/styles'
import {useOnMainScroll} from '../lib/hooks/useOnMainScroll' import {useOnMainScroll} from '../lib/hooks/useOnMainScroll'
import {clamp} from 'lodash' import {clamp} from 'lodash'
@ -100,13 +100,20 @@ export const Home = observer(function Home({
style={[ style={[
styles.loadLatest, styles.loadLatest,
store.shell.minimalShellMode store.shell.minimalShellMode
? {bottom: 50} ? {bottom: 35}
: {bottom: 60 + clamp(safeAreaInsets.bottom, 15, 30)}, : {bottom: 60 + clamp(safeAreaInsets.bottom, 15, 30)},
]} ]}
onPress={onPressLoadLatest} onPress={onPressLoadLatest}
hitSlop={HITSLOP}> hitSlop={HITSLOP}>
<FontAwesomeIcon icon="arrow-up" style={{color: colors.white}} /> <LinearGradient
<Text style={styles.loadLatestText}>Load new posts</Text> colors={[gradients.blueLight.start, gradients.blueLight.end]}
start={{x: 0, y: 0}}
end={{x: 1, y: 1}}
style={styles.loadLatestInner}>
<Text type="md-bold" style={styles.loadLatestText}>
Load new posts
</Text>
</LinearGradient>
</TouchableOpacity> </TouchableOpacity>
) : undefined} ) : undefined}
<FAB icon="pen-nib" onPress={() => onPressCompose(false)} /> <FAB icon="pen-nib" onPress={() => onPressCompose(false)} />
@ -116,24 +123,19 @@ export const Home = observer(function Home({
const styles = StyleSheet.create({ const styles = StyleSheet.create({
loadLatest: { loadLatest: {
flexDirection: 'row',
position: 'absolute', position: 'absolute',
left: 10, left: 20,
backgroundColor: colors.blue3,
paddingHorizontal: 12,
paddingVertical: 10,
borderRadius: 30,
shadowColor: '#000', shadowColor: '#000',
shadowOpacity: 0.3, shadowOpacity: 0.3,
shadowOffset: {width: 0, height: 1}, shadowOffset: {width: 0, height: 1},
}, },
loadLatestLow: { loadLatestInner: {
bottom: 15, flexDirection: 'row',
paddingHorizontal: 14,
paddingVertical: 10,
borderRadius: 30,
}, },
loadLatestText: { loadLatestText: {
color: colors.white, color: colors.white,
fontWeight: 'bold',
marginLeft: 5,
fontSize: 16,
}, },
}) })