Improve unread notification styling

zio/stable
Paul Frazee 2022-11-28 13:56:05 -06:00
parent 6ec33dd89f
commit 1aa1f77049
3 changed files with 24 additions and 11 deletions

View File

@ -45,14 +45,15 @@ export const FeedItem = observer(function FeedItem({
if (item.isReply) { if (item.isReply) {
return ( return (
<Link <Link href={itemHref} title={itemTitle}>
style={[ <Post
styles.outerMinimal, uri={item.uri}
item.isRead ? undefined : styles.outerUnread, initView={item.additionalPost}
]} style={[
href={itemHref} styles.outerMinimal,
title={itemTitle}> item.isRead ? undefined : styles.outerUnread,
<Post uri={item.uri} initView={item.additionalPost} /> ]}
/>
</Link> </Link>
) )
} }
@ -215,8 +216,9 @@ const styles = StyleSheet.create({
marginBottom: 0, marginBottom: 0,
}, },
outerUnread: { outerUnread: {
backgroundColor: colors.unreadNotifBg,
borderWidth: 1, borderWidth: 1,
borderColor: colors.blue2, borderColor: colors.blue1,
}, },
layout: { layout: {
flexDirection: 'row', flexDirection: 'row',

View File

@ -1,8 +1,15 @@
import React, {useState, useEffect} from 'react' import React, {useState, useEffect} from 'react'
import {
ActivityIndicator,
StyleProp,
StyleSheet,
Text,
View,
ViewStyle,
} from 'react-native'
import {observer} from 'mobx-react-lite' import {observer} from 'mobx-react-lite'
import {AtUri} from '../../../third-party/uri' import {AtUri} from '../../../third-party/uri'
import * as PostType from '../../../third-party/api/src/client/types/app/bsky/feed/post' import * as PostType from '../../../third-party/api/src/client/types/app/bsky/feed/post'
import {ActivityIndicator, StyleSheet, Text, View} from 'react-native'
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
import {PostThreadViewModel} from '../../../state/models/post-thread-view' import {PostThreadViewModel} from '../../../state/models/post-thread-view'
import {Link} from '../util/Link' import {Link} from '../util/Link'
@ -18,9 +25,11 @@ import {s, colors} from '../../lib/styles'
export const Post = observer(function Post({ export const Post = observer(function Post({
uri, uri,
initView, initView,
style,
}: { }: {
uri: string uri: string
initView?: PostThreadViewModel initView?: PostThreadViewModel
style?: StyleProp<ViewStyle>
}) { }) {
const store = useStores() const store = useStores()
const [view, setView] = useState<PostThreadViewModel | undefined>(initView) const [view, setView] = useState<PostThreadViewModel | undefined>(initView)
@ -115,7 +124,7 @@ export const Post = observer(function Post({
} }
return ( return (
<Link style={styles.outer} href={itemHref} title={itemTitle}> <Link style={[styles.outer, style]} href={itemHref} title={itemTitle}>
<View style={styles.layout}> <View style={styles.layout}>
<View style={styles.layoutAvi}> <View style={styles.layoutAvi}>
<Link href={authorHref} title={authorTitle}> <Link href={authorHref} title={authorTitle}>

View File

@ -41,6 +41,8 @@ export const colors = {
green3: '#20bc07', green3: '#20bc07',
green4: '#148203', green4: '#148203',
green5: '#082b03', green5: '#082b03',
unreadNotifBg: '#ebf6ff',
} }
export const gradients = { export const gradients = {