callie.on-her.computer / witchsky.app2
forked from jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

Delete "non-standard" styles from `pal` (#10279)

authored by

Samuel Newman and committed by
GitHub 014ffac9 ae0c2e86

+88 -138
-2
src/lib/ThemeContext.tsx
··· 21 21 textInverted: string 22 22 link: string 23 23 border: string 24 - borderDark: string 25 - icon: string 26 24 [k: string]: string 27 25 } 28 26 export type Palette = Record<PaletteColorName, PaletteColor>
-8
src/lib/hooks/usePalette.ts
··· 13 13 viewLight: ViewStyle 14 14 btn: ViewStyle 15 15 border: ViewStyle 16 - borderDark: ViewStyle 17 16 text: TextStyle 18 17 textLight: TextStyle 19 18 textInverted: TextStyle 20 19 link: TextStyle 21 - icon: TextStyle 22 20 } 23 21 24 22 /** ··· 42 40 border: { 43 41 borderColor: palette.border, 44 42 }, 45 - borderDark: { 46 - borderColor: palette.borderDark, 47 - }, 48 43 text: { 49 44 color: palette.text, 50 45 }, ··· 56 51 }, 57 52 link: { 58 53 color: palette.link, 59 - }, 60 - icon: { 61 - color: palette.icon, 62 54 }, 63 55 } 64 56 }, [theme, color])
-2
src/lib/styles.ts
··· 54 54 green3: '#20bc07', 55 55 green4: '#148203', 56 56 green5: '#082b03', 57 - 58 - unreadNotifBg: '#ebf6ff', 59 57 } 60 58 61 59 /**
-49
src/lib/themes.ts
··· 17 17 textInverted: lightPalette.white, 18 18 link: lightPalette.primary_500, 19 19 border: lightPalette.contrast_100, 20 - borderDark: lightPalette.contrast_200, 21 - icon: lightPalette.contrast_500, 22 - 23 - // non-standard 24 - textVeryLight: lightPalette.contrast_400, 25 - replyLine: lightPalette.contrast_100, 26 - replyLineDot: lightPalette.contrast_200, 27 - unreadNotifBg: lightPalette.primary_25, 28 - unreadNotifBorder: lightPalette.primary_100, 29 - postCtrl: lightPalette.contrast_500, 30 - brandText: lightPalette.primary_500, 31 - emptyStateIcon: lightPalette.contrast_300, 32 - borderLinkHover: lightPalette.contrast_300, 33 20 }, 34 21 primary: { 35 22 background: colors.blue3, ··· 39 26 textInverted: colors.blue3, 40 27 link: colors.blue0, 41 28 border: colors.blue4, 42 - borderDark: colors.blue5, 43 - icon: colors.blue4, 44 29 }, 45 30 secondary: { 46 31 background: colors.green3, ··· 50 35 textInverted: colors.green4, 51 36 link: colors.green1, 52 37 border: colors.green4, 53 - borderDark: colors.green5, 54 - icon: colors.green4, 55 38 }, 56 39 inverted: { 57 40 background: darkPalette.black, ··· 61 44 textInverted: darkPalette.black, 62 45 link: darkPalette.primary_500, 63 46 border: darkPalette.contrast_100, 64 - borderDark: darkPalette.contrast_200, 65 - icon: darkPalette.contrast_500, 66 47 }, 67 48 error: { 68 49 background: colors.red3, ··· 72 53 textInverted: colors.red3, 73 54 link: colors.red1, 74 55 border: colors.red4, 75 - borderDark: colors.red5, 76 - icon: colors.red4, 77 56 }, 78 57 }, 79 58 shapes: { ··· 303 282 textInverted: darkPalette.black, 304 283 link: darkPalette.primary_500, 305 284 border: darkPalette.contrast_100, 306 - borderDark: darkPalette.contrast_200, 307 - icon: darkPalette.contrast_500, 308 - 309 - // non-standard 310 - textVeryLight: darkPalette.contrast_400, 311 - replyLine: darkPalette.contrast_200, 312 - replyLineDot: darkPalette.contrast_200, 313 - unreadNotifBg: darkPalette.primary_25, 314 - unreadNotifBorder: darkPalette.primary_100, 315 - postCtrl: darkPalette.contrast_500, 316 - brandText: darkPalette.primary_500, 317 - emptyStateIcon: darkPalette.contrast_300, 318 - borderLinkHover: darkPalette.contrast_300, 319 285 }, 320 286 primary: { 321 287 ...defaultTheme.palette.primary, ··· 333 299 textInverted: darkPalette.white, 334 300 link: lightPalette.primary_500, 335 301 border: lightPalette.contrast_100, 336 - borderDark: lightPalette.contrast_200, 337 - icon: lightPalette.contrast_500, 338 302 }, 339 303 }, 340 304 } ··· 352 316 textInverted: dimPalette.black, 353 317 link: dimPalette.primary_500, 354 318 border: dimPalette.contrast_100, 355 - borderDark: dimPalette.contrast_200, 356 - icon: dimPalette.contrast_500, 357 - 358 - // non-standard 359 - textVeryLight: dimPalette.contrast_400, 360 - replyLine: dimPalette.contrast_200, 361 - replyLineDot: dimPalette.contrast_200, 362 - unreadNotifBg: dimPalette.primary_25, 363 - unreadNotifBorder: dimPalette.primary_100, 364 - postCtrl: dimPalette.contrast_500, 365 - brandText: dimPalette.primary_500, 366 - emptyStateIcon: dimPalette.contrast_300, 367 - borderLinkHover: dimPalette.contrast_300, 368 319 }, 369 320 }, 370 321 }
+6 -8
src/view/com/notifications/NotificationFeedItem.tsx
··· 26 26 27 27 import {DM_SERVICE_HEADERS, MAX_POST_LINES} from '#/lib/constants' 28 28 import {useAnimatedValue} from '#/lib/hooks/useAnimatedValue' 29 - import {usePalette} from '#/lib/hooks/usePalette' 30 29 import {makeProfileLink} from '#/lib/routes/links' 31 30 import {type NavigationProp} from '#/lib/routes/types' 32 31 import {forceLTR} from '#/lib/strings/bidi' ··· 92 91 hideTopBorder?: boolean 93 92 }): React.ReactNode => { 94 93 const queryClient = useQueryClient() 95 - const pal = usePalette('default') 96 94 const t = useTheme() 97 95 const {_, i18n} = useLingui() 98 - const [isAuthorsExpanded, setAuthorsExpanded] = useState<boolean>(false) 96 + const [isAuthorsExpanded, setIsAuthorsExpanded] = useState<boolean>(false) 99 97 const itemHref = useMemo(() => { 100 98 switch (item.type) { 101 99 case 'post-like': ··· 145 143 e.preventDefault() 146 144 e.stopPropagation() 147 145 } 148 - setAuthorsExpanded(currentlyExpanded => !currentlyExpanded) 146 + setIsAuthorsExpanded(currentlyExpanded => !currentlyExpanded) 149 147 } 150 148 151 149 const onBeforePress = useCallback(() => { ··· 222 220 post={item.subject} 223 221 style={ 224 222 isHighlighted && { 225 - backgroundColor: pal.colors.unreadNotifBg, 226 - borderColor: pal.colors.unreadNotifBorder, 223 + backgroundColor: t.palette.primary_25, 224 + borderColor: t.palette.primary_100, 227 225 } 228 226 } 229 227 hideTopBorder={hideTopBorder} ··· 577 575 item.notification.isRead 578 576 ? undefined 579 577 : { 580 - backgroundColor: pal.colors.unreadNotifBg, 581 - borderColor: pal.colors.unreadNotifBorder, 578 + backgroundColor: t.palette.primary_25, 579 + borderColor: t.palette.primary_100, 582 580 }, 583 581 !hideTopBorder && a.border_t, 584 582 a.overflow_hidden,
+18 -8
src/view/com/post/Post.tsx
··· 12 12 13 13 import {MAX_POST_LINES} from '#/lib/constants' 14 14 import {useOpenComposer} from '#/lib/hooks/useOpenComposer' 15 - import {usePalette} from '#/lib/hooks/usePalette' 16 15 import {makeProfileLink} from '#/lib/routes/links' 17 16 import {countLines} from '#/lib/strings/helpers' 18 - import {colors} from '#/lib/styles' 19 17 import { 20 18 POST_TOMBSTONE, 21 19 type Shadow, ··· 26 24 import {Link} from '#/view/com/util/Link' 27 25 import {PostMeta} from '#/view/com/util/PostMeta' 28 26 import {PreviewableUserAvatar} from '#/view/com/util/UserAvatar' 29 - import {atoms as a} from '#/alf' 27 + import {atoms as a, select, useTheme} from '#/alf' 30 28 import { 31 29 GalleryBleed, 32 30 maybeApplyGalleryOffsetStyles, ··· 119 117 onBeforePress?: () => void 120 118 }) { 121 119 const queryClient = useQueryClient() 122 - const pal = usePalette('default') 120 + const t = useTheme() 123 121 const {openComposer} = useOpenComposer() 124 122 const [limitLines, setLimitLines] = useState( 125 123 () => countLines(richText?.text) >= MAX_POST_LINES, ··· 164 162 href={itemHref} 165 163 style={[ 166 164 styles.outer, 167 - pal.border, 168 - !hideTopBorder && {borderTopWidth: StyleSheet.hairlineWidth}, 165 + t.atoms.border_contrast_low, 166 + !hideTopBorder && a.border_t, 169 167 style, 170 168 ]} 171 169 onBeforePress={onBeforePress} ··· 176 174 setHover(false) 177 175 }}> 178 176 <SubtleHover hover={hover} /> 179 - {showReplyLine && <View style={styles.replyLine} />} 177 + {showReplyLine && ( 178 + <View 179 + style={[ 180 + styles.replyLine, 181 + { 182 + backgroundColor: select(t.name, { 183 + light: t.palette.contrast_100, 184 + dim: t.palette.contrast_200, 185 + dark: t.palette.contrast_200, 186 + }), 187 + }, 188 + ]} 189 + /> 190 + )} 180 191 <View style={styles.layout}> 181 192 <View style={styles.layoutAvi}> 182 193 <PreviewableUserAvatar ··· 290 301 top: 70, 291 302 bottom: 0, 292 303 borderLeftWidth: 2, 293 - borderLeftColor: colors.gray2, 294 304 }, 295 305 contentHider: { 296 306 marginBottom: 2,
+13 -5
src/view/com/posts/PostFeedItem.tsx
··· 33 33 import {Link} from '#/view/com/util/Link' 34 34 import {PostMeta} from '#/view/com/util/PostMeta' 35 35 import {PreviewableUserAvatar} from '#/view/com/util/UserAvatar' 36 - import {atoms as a} from '#/alf' 36 + import {atoms as a, select, useTheme} from '#/alf' 37 37 import { 38 38 GalleryBleed, 39 39 maybeApplyGalleryOffsetStyles, ··· 167 167 const queryClient = useQueryClient() 168 168 const {openComposer} = useOpenComposer() 169 169 const pal = usePalette('default') 170 + const t = useTheme() 170 171 const {currentAccount} = useSession() 171 172 172 173 const [hover, setHover] = useState(false) ··· 346 347 style={[ 347 348 styles.replyLine, 348 349 { 349 - flexGrow: 1, 350 - backgroundColor: pal.colors.replyLine, 350 + backgroundColor: select(t.name, { 351 + light: t.palette.contrast_100, 352 + dim: t.palette.contrast_200, 353 + dark: t.palette.contrast_200, 354 + }), 351 355 marginBottom: 4, 352 356 }, 353 357 ]} ··· 381 385 style={[ 382 386 styles.replyLine, 383 387 { 384 - flexGrow: 1, 385 - backgroundColor: pal.colors.replyLine, 388 + backgroundColor: select(t.name, { 389 + light: t.palette.contrast_100, 390 + dim: t.palette.contrast_200, 391 + dark: t.palette.contrast_200, 392 + }), 386 393 marginTop: live ? 8 : 4, 387 394 }, 388 395 ]} ··· 536 543 cursor: 'pointer', 537 544 }, 538 545 replyLine: { 546 + flexGrow: 1, 539 547 width: 2, 540 548 marginLeft: 'auto', 541 549 marginRight: 'auto',
+51 -56
src/view/com/posts/ViewFullThread.tsx
··· 1 1 import {useMemo} from 'react' 2 - import {StyleSheet, View} from 'react-native' 2 + import {View} from 'react-native' 3 3 import Svg, {Circle, Line} from 'react-native-svg' 4 4 import {AtUri} from '@atproto/api' 5 - import {msg} from '@lingui/core/macro' 6 - import {useLingui} from '@lingui/react' 5 + import {useLingui} from '@lingui/react/macro' 7 6 8 - import {usePalette} from '#/lib/hooks/usePalette' 9 7 import {makeProfileLink} from '#/lib/routes/links' 10 - import {useInteractionState} from '#/components/hooks/useInteractionState' 8 + import {atoms as a, select, useTheme} from '#/alf' 9 + import {Link} from '#/components/Link' 11 10 import {SubtleHover} from '#/components/SubtleHover' 12 - import {Link} from '../util/Link' 13 - import {Text} from '../util/text/Text' 11 + import {Text} from '#/components/Typography' 14 12 15 13 export function ViewFullThread({uri}: {uri: string}) { 16 - const { 17 - state: hover, 18 - onIn: onHoverIn, 19 - onOut: onHoverOut, 20 - } = useInteractionState() 21 - const pal = usePalette('default') 14 + const t = useTheme() 22 15 const itemHref = useMemo(() => { 23 16 const urip = new AtUri(uri) 24 17 return makeProfileLink({did: urip.hostname, handle: ''}, 'post', urip.rkey) 25 18 }, [uri]) 26 - const {_} = useLingui() 19 + const {t: l} = useLingui() 27 20 28 21 return ( 29 22 <Link 30 - style={[styles.viewFullThread]} 31 - href={itemHref} 32 - asAnchor 33 - noFeedback 34 - onPointerEnter={onHoverIn} 35 - onPointerLeave={onHoverOut}> 36 - <SubtleHover 37 - hover={hover} 38 - // adjust position for visual alignment - the actual box has lots of top padding and not much bottom padding -sfn 39 - style={{top: 8, bottom: -5}} 40 - /> 41 - <View style={styles.viewFullThreadDots}> 42 - <Svg width="4" height="40"> 43 - <Line 44 - x1="2" 45 - y1="0" 46 - x2="2" 47 - y2="15" 48 - stroke={pal.colors.replyLine} 49 - strokeWidth="2" 23 + style={[ 24 + a.flex_row, 25 + { 26 + gap: 10, 27 + paddingLeft: 18, 28 + }, 29 + ]} 30 + to={itemHref} 31 + label={l`View full thread`}> 32 + {({hovered}) => ( 33 + <> 34 + <SubtleHover 35 + hover={hovered} 36 + // adjust position for visual alignment - the actual box has lots of top padding and not much bottom padding -sfn 37 + style={{top: 8, bottom: -5}} 50 38 /> 51 - <Circle cx="2" cy="22" r="1.5" fill={pal.colors.replyLineDot} /> 52 - <Circle cx="2" cy="28" r="1.5" fill={pal.colors.replyLineDot} /> 53 - <Circle cx="2" cy="34" r="1.5" fill={pal.colors.replyLineDot} /> 54 - </Svg> 55 - </View> 56 - 57 - <Text type="md" style={[pal.link, {paddingTop: 18, paddingBottom: 4}]}> 58 - {/* HACKFIX: Trans isn't working after SDK 53 upgrade -sfn */} 59 - {_(msg`View full thread`)} 60 - </Text> 39 + <View style={[a.align_center, {width: 42}]}> 40 + <Svg width="4" height="40"> 41 + <Line 42 + x1="2" 43 + y1="0" 44 + x2="2" 45 + y2="15" 46 + stroke={select(t.name, { 47 + light: t.palette.contrast_100, 48 + dim: t.palette.contrast_200, 49 + dark: t.palette.contrast_200, 50 + })} 51 + strokeWidth="2" 52 + /> 53 + <Circle cx="2" cy="22" r="1.5" fill={t.palette.contrast_200} /> 54 + <Circle cx="2" cy="28" r="1.5" fill={t.palette.contrast_200} /> 55 + <Circle cx="2" cy="34" r="1.5" fill={t.palette.contrast_200} /> 56 + </Svg> 57 + </View> 58 + <Text 59 + style={[ 60 + a.text_md, 61 + {color: t.palette.primary_500, paddingTop: 18, paddingBottom: 4}, 62 + ]}> 63 + {/* HACKFIX: Trans isn't working after SDK 53 upgrade -sfn */} 64 + {l`View full thread`} 65 + </Text> 66 + </> 67 + )} 61 68 </Link> 62 69 ) 63 70 } 64 - 65 - const styles = StyleSheet.create({ 66 - viewFullThread: { 67 - flexDirection: 'row', 68 - gap: 10, 69 - paddingLeft: 18, 70 - }, 71 - viewFullThreadDots: { 72 - width: 42, 73 - alignItems: 'center', 74 - }, 75 - })