diff options
| -rw-r--r-- | src/view/com/notifications/FeedItem.tsx | 43 | ||||
| -rw-r--r-- | src/view/com/post/Post.tsx | 35 | ||||
| -rw-r--r-- | src/view/lib/themes.ts | 2 |
3 files changed, 45 insertions, 35 deletions
diff --git a/src/view/com/notifications/FeedItem.tsx b/src/view/com/notifications/FeedItem.tsx index 86f43ba41..6eabee701 100644 --- a/src/view/com/notifications/FeedItem.tsx +++ b/src/view/com/notifications/FeedItem.tsx @@ -14,6 +14,7 @@ import {ErrorMessage} from '../util/error/ErrorMessage' import {Post} from '../post/Post' import {Link} from '../util/Link' import {InviteAccepter} from './InviteAccepter' +import {usePalette} from '../../lib/hooks/usePalette' const MAX_AUTHORS = 8 @@ -22,6 +23,7 @@ export const FeedItem = observer(function FeedItem({ }: { item: NotificationsViewItemModel }) { + const pal = usePalette('default') const itemHref = useMemo(() => { if (item.isUpvote || item.isRepost || item.isTrend) { const urip = new AtUri(item.subjectUri) @@ -55,7 +57,14 @@ export const FeedItem = observer(function FeedItem({ <Post uri={item.uri} initView={item.additionalPost} - style={[item.isRead ? undefined : styles.outerUnread]} + style={ + item.isRead + ? undefined + : [ + styles.outerUnread, + {backgroundColor: pal.colors.unreadNotifBg}, + ] + } /> </Link> ) @@ -117,7 +126,14 @@ export const FeedItem = observer(function FeedItem({ return ( <Link - style={[styles.outer, item.isRead ? undefined : styles.outerUnread]} + style={[ + styles.outer, + pal.view, + pal.border, + item.isRead + ? undefined + : [styles.outerUnread, {backgroundColor: pal.colors.unreadNotifBg}], + ]} href={itemHref} title={itemTitle} noFeedback> @@ -150,36 +166,36 @@ export const FeedItem = observer(function FeedItem({ </Link> ))} {authors.length > MAX_AUTHORS ? ( - <Text style={styles.aviExtraCount}> + <Text style={[styles.aviExtraCount, pal.textLight]}> +{authors.length - MAX_AUTHORS} </Text> ) : undefined} </View> <View style={styles.meta}> {item.isTrend && ( - <Text style={[styles.metaItem, s.f15]}>{action}</Text> + <Text style={[styles.metaItem, pal.text]}>{action}</Text> )} <Link key={authors[0].href} style={styles.metaItem} href={authors[0].href} title={`@${authors[0].handle}`}> - <Text style={[s.f15, s.bold, s.black]}> + <Text style={[pal.text, s.bold]}> {authors[0].displayName || authors[0].handle} </Text> </Link> {authors.length > 1 ? ( <> - <Text style={[styles.metaItem, s.f15]}>and</Text> - <Text style={[styles.metaItem, s.f15, s.bold]}> + <Text style={[styles.metaItem, pal.text]}>and</Text> + <Text style={[styles.metaItem, pal.text, s.bold]}> {authors.length - 1} {pluralize(authors.length - 1, 'other')} </Text> </> ) : undefined} {!item.isTrend && ( - <Text style={[styles.metaItem, s.f15]}>{action}</Text> + <Text style={[styles.metaItem, pal.text]}>{action}</Text> )} - <Text style={[styles.metaItem, s.f15, s.gray5]}> + <Text style={[styles.metaItem, pal.textLight]}> {ago(item.indexedAt)} </Text> </View> @@ -204,6 +220,7 @@ function AdditionalPostText({ }: { additionalPost?: PostThreadViewModel }) { + const pal = usePalette('default') if (!additionalPost) { return <View /> } @@ -211,20 +228,16 @@ function AdditionalPostText({ return <ErrorMessage message={additionalPost.error} /> } return ( - <Text style={[s.gray5]}>{additionalPost.thread?.post.record.text}</Text> + <Text style={pal.textLight}>{additionalPost.thread?.post.record.text}</Text> ) } const styles = StyleSheet.create({ outer: { - backgroundColor: colors.white, padding: 10, borderTopWidth: 1, - borderTopColor: colors.gray2, }, outerUnread: { - backgroundColor: colors.unreadNotifBg, - borderWidth: 1, borderColor: colors.blue1, }, layout: { @@ -245,7 +258,6 @@ const styles = StyleSheet.create({ aviExtraCount: { fontWeight: 'bold', paddingLeft: 6, - color: colors.gray5, }, layoutContent: { flex: 1, @@ -258,7 +270,6 @@ const styles = StyleSheet.create({ }, metaItem: { paddingRight: 3, - color: colors.black, }, postText: { paddingBottom: 5, diff --git a/src/view/com/post/Post.tsx b/src/view/com/post/Post.tsx index 8f2781ac2..43fbb9ccb 100644 --- a/src/view/com/post/Post.tsx +++ b/src/view/com/post/Post.tsx @@ -23,6 +23,7 @@ import * as Toast from '../util/Toast' import {UserAvatar} from '../util/UserAvatar' import {useStores} from '../../../state' import {s, colors} from '../../lib/styles' +import {usePalette} from '../../lib/hooks/usePalette' export const Post = observer(function Post({ uri, @@ -35,6 +36,7 @@ export const Post = observer(function Post({ showReplyLine?: boolean style?: StyleProp<ViewStyle> }) { + const pal = usePalette('default') const store = useStores() const [view, setView] = useState<PostThreadViewModel | undefined>(initView) const [deleted, setDeleted] = useState(false) @@ -58,7 +60,7 @@ export const Post = observer(function Post({ // = if (!view || view.isLoading || view.params.uri !== uri) { return ( - <View> + <View style={pal.view}> <ActivityIndicator /> </View> ) @@ -68,7 +70,7 @@ export const Post = observer(function Post({ // = if (view.hasError || !view.thread) { return ( - <View> + <View style={pal.view}> <Text>{view.error || 'Thread not found'}</Text> </View> ) @@ -134,7 +136,7 @@ export const Post = observer(function Post({ return ( <Link - style={[styles.outer, style]} + style={[styles.outer, pal.view, pal.border, style]} href={itemHref} title={itemTitle} noFeedback> @@ -164,12 +166,19 @@ export const Post = observer(function Post({ /> {replyHref !== '' && ( <View style={[s.flexRow, s.mb2, {alignItems: 'center'}]}> - <FontAwesomeIcon icon="reply" size={9} style={[s.gray4, s.mr5]} /> - <Text style={[s.gray4, s.f12, s.mr2]}>Reply to</Text> + <FontAwesomeIcon + icon="reply" + size={9} + style={[pal.textLight, s.mr5]} + /> + <Text type="body2" style={[pal.textLight, s.mr2]}> + Reply to + </Text> <Link href={replyHref} title="Parent post"> <UserInfoText + type="body2" did={replyAuthorDid} - style={[s.f12, s.gray5]} + style={[pal.textLight]} prefix="@" /> </Link> @@ -177,11 +186,7 @@ export const Post = observer(function Post({ )} {record.text ? ( <View style={styles.postTextContainer}> - <RichText - text={record.text} - entities={record.entities} - style={styles.postText} - /> + <RichText text={record.text} entities={record.entities} /> </View> ) : ( <View style={{height: 5}} /> @@ -205,10 +210,8 @@ export const Post = observer(function Post({ const styles = StyleSheet.create({ outer: { - backgroundColor: colors.white, padding: 10, borderTopWidth: 1, - borderTopColor: colors.gray2, }, layout: { flexDirection: 'row', @@ -225,12 +228,6 @@ const styles = StyleSheet.create({ flexWrap: 'wrap', paddingBottom: 8, }, - postText: { - fontFamily: 'System', - fontSize: 16, - lineHeight: 20.8, // 1.3 of 16px - color: colors.black, - }, replyLine: { position: 'absolute', left: 36, diff --git a/src/view/lib/themes.ts b/src/view/lib/themes.ts index 2ad78c20e..114d5cf99 100644 --- a/src/view/lib/themes.ts +++ b/src/view/lib/themes.ts @@ -18,6 +18,7 @@ export const defaultTheme: Theme = { actionLabel: colors.gray4, replyLine: colors.gray2, replyLineDot: colors.gray3, + unreadNotifBg: '#ebf6ff', }, primary: { background: colors.blue3, @@ -157,6 +158,7 @@ export const darkTheme: Theme = { actionLabel: colors.gray3, replyLine: colors.gray5, replyLineDot: colors.gray6, + unreadNotifBg: colors.blue5, }, primary: { ...defaultTheme.palette.primary, |