Integrate composer prompt into design system
parent
434d874598
commit
b47714fb11
|
@ -4,6 +4,7 @@ import {colors} from '../../lib/styles'
|
|||
import {useStores} from '../../../state'
|
||||
import {UserAvatar} from '../util/UserAvatar'
|
||||
import {Text} from '../util/text/Text'
|
||||
import {usePalette} from '../../lib/hooks/usePalette'
|
||||
|
||||
export function ComposePrompt({
|
||||
noAvi = false,
|
||||
|
@ -16,13 +17,19 @@ export function ComposePrompt({
|
|||
btn?: string
|
||||
onPressCompose: () => void
|
||||
}) {
|
||||
const pal = usePalette('default')
|
||||
const store = useStores()
|
||||
const onPressAvatar = () => {
|
||||
store.nav.navigate(`/profile/${store.me.handle}`)
|
||||
}
|
||||
return (
|
||||
<TouchableOpacity
|
||||
style={[styles.container, noAvi ? styles.noAviContainer : undefined]}
|
||||
style={[
|
||||
pal.view,
|
||||
pal.border,
|
||||
styles.container,
|
||||
noAvi ? styles.noAviContainer : undefined,
|
||||
]}
|
||||
onPress={onPressCompose}>
|
||||
{!noAvi ? (
|
||||
<TouchableOpacity style={styles.avatar} onPress={onPressAvatar}>
|
||||
|
@ -35,10 +42,14 @@ export function ComposePrompt({
|
|||
</TouchableOpacity>
|
||||
) : undefined}
|
||||
<View style={styles.textContainer}>
|
||||
<Text style={styles.text}>{text}</Text>
|
||||
<Text type="h5" style={[pal.textLight, {fontWeight: 'normal'}]}>
|
||||
{text}
|
||||
</Text>
|
||||
</View>
|
||||
<View style={styles.btn}>
|
||||
<Text style={styles.btnText}>{btn}</Text>
|
||||
<View style={[styles.btn, {backgroundColor: pal.colors.backgroundLight}]}>
|
||||
<Text type="button" style={pal.textLight}>
|
||||
{btn}
|
||||
</Text>
|
||||
</View>
|
||||
</TouchableOpacity>
|
||||
)
|
||||
|
@ -50,9 +61,7 @@ const styles = StyleSheet.create({
|
|||
paddingVertical: 10,
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
backgroundColor: colors.white,
|
||||
borderTopWidth: 1,
|
||||
borderTopColor: colors.gray2,
|
||||
},
|
||||
noAviContainer: {
|
||||
paddingVertical: 14,
|
||||
|
@ -64,17 +73,9 @@ const styles = StyleSheet.create({
|
|||
marginLeft: 10,
|
||||
flex: 1,
|
||||
},
|
||||
text: {
|
||||
color: colors.gray4,
|
||||
fontSize: 17,
|
||||
},
|
||||
btn: {
|
||||
backgroundColor: colors.gray1,
|
||||
paddingVertical: 6,
|
||||
paddingHorizontal: 14,
|
||||
borderRadius: 30,
|
||||
},
|
||||
btnText: {
|
||||
color: colors.gray5,
|
||||
},
|
||||
})
|
||||
|
|
|
@ -180,8 +180,7 @@ export const PostThreadItem = observer(function PostThreadItem({
|
|||
) : undefined}
|
||||
<PostEmbeds embed={item.post.embed} style={s.mb10} />
|
||||
{item._isHighlightedPost && hasEngagement ? (
|
||||
<View
|
||||
style={[styles.expandedInfo, {borderColor: pal.colors.border}]}>
|
||||
<View style={[styles.expandedInfo, pal.border]}>
|
||||
{item.post.repostCount ? (
|
||||
<Link
|
||||
style={styles.expandedInfoItem}
|
||||
|
|
|
@ -111,6 +111,7 @@ const styles = StyleSheet.create({
|
|||
},
|
||||
extOuter: {
|
||||
padding: 10,
|
||||
borderWidth: 1,
|
||||
},
|
||||
extDescription: {
|
||||
marginTop: 4,
|
||||
|
|
|
@ -18,7 +18,6 @@ export function usePalette(color: PaletteColorName): UsePaletteValue {
|
|||
backgroundColor: palette.background,
|
||||
},
|
||||
border: {
|
||||
borderWidth: 1,
|
||||
borderColor: palette.border,
|
||||
},
|
||||
text: {
|
||||
|
|
|
@ -6,7 +6,7 @@ export const defaultTheme: Theme = {
|
|||
palette: {
|
||||
default: {
|
||||
background: colors.white,
|
||||
backgroundLight: colors.gray2,
|
||||
backgroundLight: colors.gray1,
|
||||
text: colors.black,
|
||||
textLight: colors.gray5,
|
||||
textInverted: colors.white,
|
||||
|
|
|
@ -176,6 +176,7 @@ function PaletteView({palette}: {palette: PaletteColorName}) {
|
|||
pal.view,
|
||||
pal.border,
|
||||
{
|
||||
borderWidth: 1,
|
||||
padding: 10,
|
||||
marginBottom: 5,
|
||||
},
|
||||
|
|
Loading…
Reference in New Issue