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) {
return (
<Link
<Link href={itemHref} title={itemTitle}>
<Post
uri={item.uri}
initView={item.additionalPost}
style={[
styles.outerMinimal,
item.isRead ? undefined : styles.outerUnread,
]}
href={itemHref}
title={itemTitle}>
<Post uri={item.uri} initView={item.additionalPost} />
/>
</Link>
)
}
@ -215,8 +216,9 @@ const styles = StyleSheet.create({
marginBottom: 0,
},
outerUnread: {
backgroundColor: colors.unreadNotifBg,
borderWidth: 1,
borderColor: colors.blue2,
borderColor: colors.blue1,
},
layout: {
flexDirection: 'row',

View File

@ -1,8 +1,15 @@
import React, {useState, useEffect} from 'react'
import {
ActivityIndicator,
StyleProp,
StyleSheet,
Text,
View,
ViewStyle,
} from 'react-native'
import {observer} from 'mobx-react-lite'
import {AtUri} from '../../../third-party/uri'
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 {PostThreadViewModel} from '../../../state/models/post-thread-view'
import {Link} from '../util/Link'
@ -18,9 +25,11 @@ import {s, colors} from '../../lib/styles'
export const Post = observer(function Post({
uri,
initView,
style,
}: {
uri: string
initView?: PostThreadViewModel
style?: StyleProp<ViewStyle>
}) {
const store = useStores()
const [view, setView] = useState<PostThreadViewModel | undefined>(initView)
@ -115,7 +124,7 @@ export const Post = observer(function Post({
}
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.layoutAvi}>
<Link href={authorHref} title={authorTitle}>

View File

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