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

Use ALF for post controls (#3400)

Browse source 
* alf the repost dropdown on web + import icons

* alf like icon

* convert other post controls

* add missing padding to share button

* refine buttons and use better icons

* revert buttonicon changes

* remove ButtonIcon and ButtonText from repost dialog

* use 15px font size when not big

* reduce size and use contrast_25

* add hover state to logged out view

* add `userSelect: 'none'` to buttons

* use width rather than height

* fix quote close behaviour

* prettier

* Fix Esc on repost

* Use new icons for placeholder

* Fix placeholder

---------

Co-authored-by: Dan Abramov <dan.abramov@gmail.com>
This commit is contained in:
Samuel Newman 2024-05-30 03:25:11 +03:00 • committed by GitHub
parent 4d39ef2e19
commit 165feedb86
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
17 changed files with 376 additions and 285 deletions
Download patch file Download diff file Expand all files Collapse all files

64
src/view/com/util/LoadingPlaceholder.tsx
View file

@ -1,20 +1,20 @@
import React from 'react'
import {
StyleSheet,
DimensionValue,
StyleProp,
StyleSheet,
View,
ViewStyle,
DimensionValue,
} from 'react-native'
import {
HeartIcon,
HeartIconSolid,
CommentBottomArrow,
RepostIcon,
} from 'lib/icons'
import {usePalette} from 'lib/hooks/usePalette'
import {HeartIconSolid} from 'lib/icons'
import {s} from 'lib/styles'
import {useTheme} from 'lib/ThemeContext'
import {usePalette} from 'lib/hooks/usePalette'
import {useTheme as useTheme_NEW} from '#/alf'
import {Bubble_Stroke2_Corner2_Rounded as Bubble} from '#/components/icons/Bubble'
import {Heart2_Stroke2_Corner0_Rounded as HeartIconOutline} from '#/components/icons/Heart2'
import {Repost_Stroke2_Corner2_Rounded as Repost} from '#/components/icons/Repost'
export function LoadingPlaceholder({
width,
@ -46,7 +46,7 @@ export function PostLoadingPlaceholder({
}: {
style?: StyleProp<ViewStyle>
}) {
const theme = useTheme()
const t = useTheme_NEW()
const pal = usePalette('default')
return (
<View style={[styles.post, pal.view, style]}>
@ -67,35 +67,47 @@ export function PostLoadingPlaceholder({
<LoadingPlaceholder width="95%" height={6} style={{marginBottom: 8}} />
<LoadingPlaceholder width="80%" height={6} style={{marginBottom: 11}} />
<View style={styles.postCtrls}>
<View style={styles.postCtrl}>
<View style={[styles.postBtn, {paddingLeft: 0}]}>
<CommentBottomArrow
style={[{color: theme.palette.default.icon, marginTop: 1}]}
strokeWidth={3}
size={15}
<View style={[styles.postCtrl, {marginLeft: -5}]}>
<View style={styles.postBtn}>
<Bubble
style={[
{
color: t.palette.contrast_500,
},
{pointerEvents: 'none'},
]}
width={18}
/>
</View>
</View>
<View style={styles.postCtrl}>
<View style={styles.postBtn}>
<RepostIcon
style={{color: theme.palette.default.icon}}
strokeWidth={3}
size={20}
<Repost
style={[
{
color: t.palette.contrast_500,
},
{pointerEvents: 'none'},
]}
width={18}
/>
</View>
</View>
<View style={styles.postCtrl}>
<View style={styles.postBtn}>
<HeartIcon
style={{color: theme.palette.default.icon} as ViewStyle}
size={16}
strokeWidth={3}
<HeartIconOutline
style={[
{
color: t.palette.contrast_500,
},
{pointerEvents: 'none'},
]}
width={18}
/>
</View>
</View>
<View style={styles.postCtrl}>
<View style={styles.postBtn} />
<View style={[styles.postBtn, {minHeight: 30}]} />
</View>
</View>
</View>
@ -290,10 +302,10 @@ const styles = StyleSheet.create({
flex: 1,
},
postBtn: {
padding: 5,
flex: 1,
flexDirection: 'row',
alignItems: 'center',
padding: 5,
},
avatar: {
borderRadius: 26,