From b9778b7943b85fddb153efe413981a998bb641e3 Mon Sep 17 00:00:00 2001 From: Paul Frazee <pfrazee@gmail.com> Date: Tue, 17 Jan 2023 11:20:07 -0600 Subject: [PATCH] Lighten post controls a little in light-mode and add them to the theme --- src/view/com/util/PostCtrls.tsx | 27 +++++++++++++++------------ src/view/lib/themes.ts | 2 ++ 2 files changed, 17 insertions(+), 12 deletions(-) diff --git a/src/view/com/util/PostCtrls.tsx b/src/view/com/util/PostCtrls.tsx index c0ef412d..6bcc77e9 100644 --- a/src/view/com/util/PostCtrls.tsx +++ b/src/view/com/util/PostCtrls.tsx @@ -34,12 +34,16 @@ interface PostCtrlsOpts { onDeletePost: () => void } -const redgray = '#7A6161' -const sRedgray = {color: redgray} const HITSLOP = {top: 2, left: 2, bottom: 2, right: 2} export function PostCtrls(opts: PostCtrlsOpts) { const theme = useTheme() + const defaultCtrlColor = React.useMemo( + () => ({ + color: theme.palette.default.postCtrl, + }), + [theme], + ) const interp1 = useAnimatedValue(0) const interp2 = useAnimatedValue(0) @@ -119,12 +123,14 @@ export function PostCtrls(opts: PostCtrlsOpts) { hitSlop={HITSLOP} onPress={opts.onPressReply}> <CommentBottomArrow - style={styles.ctrlIcon} + style={defaultCtrlColor} strokeWidth={3} size={opts.big ? 20 : 15} /> {typeof opts.replyCount !== 'undefined' ? ( - <Text style={[sRedgray, s.ml5, s.f15]}>{opts.replyCount}</Text> + <Text style={[defaultCtrlColor, s.ml5, s.f15]}> + {opts.replyCount} + </Text> ) : undefined} </TouchableOpacity> </View> @@ -136,7 +142,7 @@ export function PostCtrls(opts: PostCtrlsOpts) { <Animated.View style={anim1Style}> <FontAwesomeIcon style={ - opts.isReposted ? styles.ctrlIconReposted : styles.ctrlIcon + opts.isReposted ? styles.ctrlIconReposted : defaultCtrlColor } icon="retweet" size={opts.big ? 22 : 19} @@ -147,7 +153,7 @@ export function PostCtrls(opts: PostCtrlsOpts) { style={ opts.isReposted ? [s.bold, s.green3, s.f15, s.ml5] - : [sRedgray, s.f15, s.ml5] + : [defaultCtrlColor, s.f15, s.ml5] }> {opts.repostCount} </Text> @@ -167,7 +173,7 @@ export function PostCtrls(opts: PostCtrlsOpts) { /> ) : ( <UpIcon - style={[styles.ctrlIcon]} + style={defaultCtrlColor} size={opts.big ? 22 : 19} strokeWidth={1.5} /> @@ -178,7 +184,7 @@ export function PostCtrls(opts: PostCtrlsOpts) { style={ opts.isUpvoted ? [s.bold, s.red3, s.f15, s.ml5] - : [sRedgray, s.f15, s.ml5] + : [defaultCtrlColor, s.f15, s.ml5] }> {opts.upvoteCount} </Text> @@ -202,7 +208,7 @@ export function PostCtrls(opts: PostCtrlsOpts) { s.mr5, { color: - theme.colorScheme === 'light' ? colors.gray3 : colors.gray5, + theme.colorScheme === 'light' ? colors.gray4 : colors.gray5, }, ]} /> @@ -221,9 +227,6 @@ const styles = StyleSheet.create({ flexDirection: 'row', alignItems: 'center', }, - ctrlIcon: { - color: redgray, - }, ctrlIconReposted: { color: colors.green3, }, diff --git a/src/view/lib/themes.ts b/src/view/lib/themes.ts index d3c0a24b..d25fe58f 100644 --- a/src/view/lib/themes.ts +++ b/src/view/lib/themes.ts @@ -20,6 +20,7 @@ export const defaultTheme: Theme = { replyLine: colors.gray2, replyLineDot: colors.gray3, unreadNotifBg: '#ebf6ff', + postCtrl: '#8A7171', }, primary: { background: colors.blue3, @@ -164,6 +165,7 @@ export const darkTheme: Theme = { replyLine: colors.gray5, replyLineDot: colors.gray6, unreadNotifBg: colors.blue5, + postCtrl: '#7A6161', }, primary: { ...defaultTheme.palette.primary,