Integrate composer prompt into design system

zio/stable
Paul Frazee 2022-12-30 12:35:37 -06:00
parent 434d874598
commit b47714fb11
6 changed files with 19 additions and 18 deletions

View File

@ -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,
},
})

View File

@ -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}

View File

@ -111,6 +111,7 @@ const styles = StyleSheet.create({
},
extOuter: {
padding: 10,
borderWidth: 1,
},
extDescription: {
marginTop: 4,

View File

@ -18,7 +18,6 @@ export function usePalette(color: PaletteColorName): UsePaletteValue {
backgroundColor: palette.background,
},
border: {
borderWidth: 1,
borderColor: palette.border,
},
text: {

View File

@ -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,

View File

@ -176,6 +176,7 @@ function PaletteView({palette}: {palette: PaletteColorName}) {
pal.view,
pal.border,
{
borderWidth: 1,
padding: 10,
marginBottom: 5,
},