bwc9876.dev / witchsky.app
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.

Improve styles (#4916)

Co-authored-by: Hailey <me@haileyok.com>

authored by

Minseo Lee
Hailey and committed by
GitHub 88f879ff 6f450b49

+89 -163
+14 -14
src/alf/themes.ts
··· 186 186 white: color.gray_0, 187 187 black: color.trueBlack, 188 188 189 - contrast_25: color.gray_1000, 190 - contrast_50: color.gray_975, 191 - contrast_100: color.gray_950, 192 - contrast_200: color.gray_900, 193 - contrast_300: color.gray_800, 194 - contrast_400: color.gray_700, 195 - contrast_500: color.gray_600, 196 - contrast_600: color.gray_500, 197 - contrast_700: color.gray_400, 198 - contrast_800: color.gray_300, 199 - contrast_900: color.gray_200, 200 - contrast_950: color.gray_100, 201 - contrast_975: color.gray_50, 189 + contrast_25: color.gray_975, 190 + contrast_50: color.gray_950, 191 + contrast_100: color.gray_900, 192 + contrast_200: color.gray_800, 193 + contrast_300: color.gray_700, 194 + contrast_400: color.gray_600, 195 + contrast_500: color.gray_500, 196 + contrast_600: color.gray_400, 197 + contrast_700: color.gray_300, 198 + contrast_800: color.gray_200, 199 + contrast_900: color.gray_100, 200 + contrast_950: color.gray_50, 201 + contrast_975: color.gray_25, 202 202 203 203 primary_25: color.primary_975, 204 204 primary_50: color.primary_950, ··· 400 400 color: darkPalette.contrast_400, 401 401 }, 402 402 text_contrast_medium: { 403 - color: darkPalette.contrast_700, 403 + color: darkPalette.contrast_600, 404 404 }, 405 405 text_contrast_high: { 406 406 color: darkPalette.contrast_900,
+3 -21
src/components/Button.tsx
··· 202 202 } else if (color === 'secondary') { 203 203 if (variant === 'solid') { 204 204 if (!disabled) { 205 - baseStyles.push({ 206 - backgroundColor: select(t.name, { 207 - light: t.palette.contrast_25, 208 - dim: t.palette.contrast_100, 209 - dark: t.palette.contrast_100, 210 - }), 211 - }) 212 - hoverStyles.push({ 213 - backgroundColor: select(t.name, { 214 - light: t.palette.contrast_50, 215 - dim: t.palette.contrast_200, 216 - dark: t.palette.contrast_200, 217 - }), 218 - }) 205 + baseStyles.push(t.atoms.bg_contrast_25) 206 + hoverStyles.push(t.atoms.bg_contrast_50) 219 207 } else { 220 - baseStyles.push({ 221 - backgroundColor: select(t.name, { 222 - light: t.palette.contrast_100, 223 - dim: t.palette.contrast_25, 224 - dark: t.palette.contrast_25, 225 - }), 226 - }) 208 + baseStyles.push(t.atoms.bg_contrast_100) 227 209 } 228 210 } else if (variant === 'outline') { 229 211 baseStyles.push(a.border, t.atoms.bg, {
+3 -1
src/components/dialogs/GifSelect.tsx
··· 249 249 const control = Dialog.useDialogContext() 250 250 251 251 return ( 252 - <Dialog.ScrollableInner style={a.gap_md} label={_(msg`An error has occurred`)}> 252 + <Dialog.ScrollableInner 253 + style={a.gap_md} 254 + label={_(msg`An error has occurred`)}> 253 255 <Dialog.Close /> 254 256 <ErrorScreen 255 257 title={_(msg`Oh no!`)}
+1
src/components/forms/TextField.tsx
··· 193 193 lineHeight: a.text_md.fontSize * 1.1875, 194 194 textAlignVertical: rest.multiline ? 'top' : undefined, 195 195 minHeight: rest.multiline ? 80 : undefined, 196 + minWidth: 0, 196 197 }, 197 198 // fix for autofill styles covering border 198 199 web({
+2 -1
src/lib/styles.ts
··· 1 1 import {Dimensions, StyleProp, StyleSheet, TextStyle} from 'react-native' 2 + 3 + import {isWeb} from 'platform/detection' 2 4 import {Theme, TypographyVariant} from './ThemeContext' 3 - import {isWeb} from 'platform/detection' 4 5 5 6 // 1 is lightest, 2 is light, 3 is mid, 4 is dark, 5 is darkest 6 7 export const colors = {
+3 -3
src/lib/themes.ts
··· 295 295 ...defaultTheme.palette, 296 296 default: { 297 297 background: darkPalette.black, 298 - backgroundLight: darkPalette.contrast_50, 298 + backgroundLight: darkPalette.contrast_25, 299 299 text: darkPalette.white, 300 - textLight: darkPalette.contrast_700, 300 + textLight: darkPalette.contrast_600, 301 301 textInverted: darkPalette.black, 302 302 link: darkPalette.primary_500, 303 303 border: darkPalette.contrast_100, ··· 344 344 default: { 345 345 ...darkTheme.palette.default, 346 346 background: dimPalette.black, 347 - backgroundLight: dimPalette.contrast_50, 347 + backgroundLight: dimPalette.contrast_25, 348 348 text: dimPalette.white, 349 349 textLight: dimPalette.contrast_700, 350 350 textInverted: dimPalette.black,
-2
src/view/com/pager/PagerWithHeader.web.tsx
··· 193 193 tabBarContainer: { 194 194 // @ts-ignore web-only 195 195 position: 'sticky', 196 - overflow: 'hidden', 197 196 top: 0, 198 197 zIndex: 1, 199 198 }, 200 199 tabBarContainerDesktop: { 201 200 marginHorizontal: 'auto', 202 - paddingHorizontal: 2, 203 201 width: 600, 204 202 borderLeftWidth: 1, 205 203 borderRightWidth: 1,
+1 -1
src/view/com/pager/TabBar.tsx
··· 180 180 left: 0, 181 181 right: 0, 182 182 top: '100%', 183 - borderBottomWidth: 1, 183 + borderBottomWidth: StyleSheet.hairlineWidth, 184 184 }, 185 185 }) 186 186
+1 -1
src/view/com/post-thread/PostThreadItem.tsx
··· 660 660 a.flex_row, 661 661 a.align_center, 662 662 a.flex_wrap, 663 - a.gap_sm, 663 + a.gap_xs, 664 664 s.mt2, 665 665 s.mb10, 666 666 ]}>
+1 -3
src/view/com/posts/Feed.tsx
··· 480 480 // -prf 481 481 return <DiscoverFallbackHeader /> 482 482 } 483 - return ( 484 - <FeedSlice slice={item.slice} hideTopBorder={index === 0 && !isWeb} /> 485 - ) 483 + return <FeedSlice slice={item.slice} hideTopBorder={index === 0} /> 486 484 } else { 487 485 return null 488 486 }
+1 -6
src/view/com/util/PostMeta.tsx
··· 91 91 </Text> 92 92 </ProfileHoverCard> 93 93 {!isAndroid && ( 94 - <Text 95 - type="md" 96 - style={pal.textLight} 97 - lineHeight={1.2} 98 - accessible={false}> 94 + <Text type="md" style={pal.textLight} accessible={false}> 99 95 &middot; 100 96 </Text> 101 97 )} ··· 104 100 <TextLinkOnWebOnly 105 101 type="md" 106 102 style={pal.textLight} 107 - lineHeight={1.2} 108 103 text={timeElapsed} 109 104 accessibilityLabel={niceDate(opts.timestamp)} 110 105 title={niceDate(opts.timestamp)}
+1 -1
src/view/screens/AccessibilitySettings.tsx
··· 80 80 style={s.flex1} 81 81 contentContainerStyle={[ 82 82 s.flex1, 83 - {paddingBottom: 200}, 83 + {paddingBottom: 100}, 84 84 isMobile && pal.viewLight, 85 85 ]}> 86 86 <Text type="xl-bold" style={[pal.text, styles.heading]}>
+2
src/view/screens/LanguageSettings.tsx
··· 145 145 backgroundColor: pal.viewLight.backgroundColor, 146 146 color: pal.text.color, 147 147 fontSize: 14, 148 + fontFamily: 'inherit', 148 149 letterSpacing: 0.5, 149 150 fontWeight: '500', 150 151 paddingHorizontal: 14, ··· 236 237 backgroundColor: pal.viewLight.backgroundColor, 237 238 color: pal.text.color, 238 239 fontSize: 14, 240 + fontFamily: 'inherit', 239 241 letterSpacing: 0.5, 240 242 fontWeight: '500', 241 243 paddingHorizontal: 14,
+1 -1
src/view/screens/Search/Explore.tsx
··· 571 571 keyExtractor={item => item.key} 572 572 // @ts-ignore web only -prf 573 573 desktopFixedHeight 574 - contentContainerStyle={{paddingBottom: 200}} 574 + contentContainerStyle={{paddingBottom: 100}} 575 575 keyboardShouldPersistTaps="handled" 576 576 keyboardDismissMode="on-drag" 577 577 />
+2 -1
src/view/screens/Search/Search.tsx
··· 783 783 }}> 784 784 <MagnifyingGlassIcon 785 785 style={[pal.icon, styles.headerSearchIcon]} 786 - size={21} 786 + size={20} 787 787 /> 788 788 <TextInput 789 789 testID="searchTextInput" ··· 1071 1071 headerSearchInput: { 1072 1072 flex: 1, 1073 1073 fontSize: 17, 1074 + minWidth: 0, 1074 1075 }, 1075 1076 headerCancelBtn: { 1076 1077 paddingLeft: 10,
+1 -1
src/view/screens/Settings/index.tsx
··· 325 325 </View> 326 326 </SimpleViewHeader> 327 327 <ScrollView 328 - style={[s.hContentRegion, isMobile && pal.viewLight]} 328 + style={[isMobile && pal.viewLight]} 329 329 scrollIndicatorInsets={{right: 1}} 330 330 // @ts-ignore web only -prf 331 331 dataSet={{'stable-gutters': 1}}>
+1 -1
src/view/screens/Storybook/index.tsx
··· 36 36 37 37 return ( 38 38 <CenteredView style={[t.atoms.bg]}> 39 - <View style={[a.p_xl, a.gap_5xl, {paddingBottom: 200}]}> 39 + <View style={[a.p_xl, a.gap_5xl, {paddingBottom: 100}]}> 40 40 {!showContainedList ? ( 41 41 <> 42 42 <View style={[a.flex_row, a.align_start, a.gap_md]}>
+38 -26
src/view/shell/Drawer.tsx
··· 33 33 import {formatCountShortOnly} from 'view/com/util/numeric/format' 34 34 import {Text} from 'view/com/util/text/Text' 35 35 import {UserAvatar} from 'view/com/util/UserAvatar' 36 + import {atoms as a} from '#/alf' 36 37 import {useTheme as useAlfTheme} from '#/alf' 37 38 import {Button, ButtonIcon, ButtonText} from '#/components/Button' 38 39 import { ··· 96 97 numberOfLines={1}> 97 98 @{account.handle} 98 99 </Text> 99 - <Text type="xl" style={[pal.textLight, styles.profileCardFollowers]}> 100 - <Trans> 101 - <Text type="xl-medium" style={pal.text}> 102 - {formatCountShortOnly(profile?.followersCount ?? 0)} 103 - </Text>{' '} 104 - <Plural 105 - value={profile?.followersCount || 0} 106 - one="follower" 107 - other="followers" 108 - /> 109 - </Trans>{' '} 110 - &middot;{' '} 111 - <Trans> 112 - <Text type="xl-medium" style={pal.text}> 113 - {formatCountShortOnly(profile?.followsCount ?? 0)} 114 - </Text>{' '} 115 - <Plural 116 - value={profile?.followsCount || 0} 117 - one="following" 118 - other="following" 119 - /> 120 - </Trans> 121 - </Text> 100 + <View 101 + style={[ 102 + styles.profileCardFollowers, 103 + a.gap_xs, 104 + a.flex_row, 105 + a.align_center, 106 + a.flex_wrap, 107 + ]}> 108 + <Text type="xl" style={pal.textLight}> 109 + <Trans> 110 + <Text type="xl-medium" style={pal.text}> 111 + {formatCountShortOnly(profile?.followersCount ?? 0)} 112 + </Text>{' '} 113 + <Plural 114 + value={profile?.followersCount || 0} 115 + one="follower" 116 + other="followers" 117 + /> 118 + </Trans> 119 + </Text> 120 + <Text type="xl" style={pal.textLight}> 121 + &middot; 122 + </Text> 123 + <Text type="xl" style={pal.textLight}> 124 + <Trans> 125 + <Text type="xl-medium" style={pal.text}> 126 + {formatCountShortOnly(profile?.followsCount ?? 0)} 127 + </Text>{' '} 128 + <Plural 129 + value={profile?.followsCount || 0} 130 + one="following" 131 + other="following" 132 + /> 133 + </Trans> 134 + </Text> 135 + </View> 122 136 </TouchableOpacity> 123 137 ) 124 138 } ··· 610 624 backgroundColor: '#1B1919', 611 625 }, 612 626 main: { 613 - paddingLeft: 20, 627 + paddingHorizontal: 20, 614 628 paddingTop: 20, 615 629 }, 616 630 smallSpacer: { ··· 627 641 }, 628 642 profileCardFollowers: { 629 643 marginTop: 16, 630 - paddingRight: 10, 631 644 }, 632 645 633 646 menuItem: { 634 647 flexDirection: 'row', 635 648 alignItems: 'center', 636 649 paddingVertical: 16, 637 - paddingRight: 10, 638 650 }, 639 651 menuItemIconWrapper: { 640 652 width: 24,
+5 -4
src/view/shell/desktop/RightNav.tsx
··· 11 11 import {s} from 'lib/styles' 12 12 import {TextLink} from 'view/com/util/Link' 13 13 import {Text} from 'view/com/util/text/Text' 14 + import {atoms as a} from '#/alf' 14 15 import {ProgressGuideList} from '#/components/ProgressGuide/List' 15 16 import {DesktopFeeds} from './Feeds' 16 17 import {DesktopSearch} from './Search' ··· 56 57 paddingTop: hasSession ? 0 : 18, 57 58 }, 58 59 ]}> 59 - <View style={[{flexWrap: 'wrap'}, s.flexRow]}> 60 + <View style={[{flexWrap: 'wrap'}, s.flexRow, a.gap_xs]}> 60 61 {hasSession && ( 61 62 <> 62 63 <TextLink ··· 69 70 text={_(msg`Feedback`)} 70 71 /> 71 72 <Text type="md" style={pal.textLight}> 72 - &nbsp;&middot;&nbsp; 73 + &middot; 73 74 </Text> 74 75 </> 75 76 )} ··· 80 81 text={_(msg`Privacy`)} 81 82 /> 82 83 <Text type="md" style={pal.textLight}> 83 - &nbsp;&middot;&nbsp; 84 + &middot; 84 85 </Text> 85 86 <TextLink 86 87 type="md" ··· 89 90 text={_(msg`Terms`)} 90 91 /> 91 92 <Text type="md" style={pal.textLight}> 92 - &nbsp;&middot;&nbsp; 93 + &middot; 93 94 </Text> 94 95 <TextLink 95 96 type="md"
+8 -75
src/view/shell/desktop/Search.tsx
··· 2 2 import { 3 3 ActivityIndicator, 4 4 StyleSheet, 5 - TextInput, 6 5 TouchableOpacity, 7 6 View, 8 7 ViewStyle, ··· 12 11 moderateProfile, 13 12 ModerationDecision, 14 13 } from '@atproto/api' 15 - import {msg, Trans} from '@lingui/macro' 14 + import {msg} from '@lingui/macro' 16 15 import {useLingui} from '@lingui/react' 17 16 import {StackActions, useNavigation} from '@react-navigation/native' 18 17 import {useQueryClient} from '@tanstack/react-query' ··· 24 23 import {useModerationOpts} from '#/state/preferences/moderation-opts' 25 24 import {useActorAutocompleteQuery} from '#/state/queries/actor-autocomplete' 26 25 import {usePalette} from 'lib/hooks/usePalette' 27 - import {MagnifyingGlassIcon2} from 'lib/icons' 28 26 import {NavigationProp} from 'lib/routes/types' 29 27 import {precacheProfile} from 'state/queries/profile' 30 28 import {Link} from '#/view/com/util/Link' 31 29 import {UserAvatar} from '#/view/com/util/UserAvatar' 30 + import {SearchInput} from 'view/com/util/forms/SearchInput' 32 31 import {Text} from 'view/com/util/text/Text' 33 32 import {atoms as a} from '#/alf' 34 33 ··· 183 182 184 183 return ( 185 184 <View style={[styles.container, pal.view]}> 186 - <View 187 - style={[{backgroundColor: pal.colors.backgroundLight}, styles.search]}> 188 - <View style={[styles.inputContainer]}> 189 - <MagnifyingGlassIcon2 190 - size={18} 191 - style={[pal.textLight, styles.iconWrapper]} 192 - /> 193 - <TextInput 194 - testID="searchTextInput" 195 - placeholder={_(msg`Search`)} 196 - placeholderTextColor={pal.colors.textLight} 197 - selectTextOnFocus 198 - returnKeyType="search" 199 - value={query} 200 - style={[pal.textLight, styles.input]} 201 - onChangeText={onChangeText} 202 - onSubmitEditing={onSubmit} 203 - accessibilityRole="search" 204 - accessibilityLabel={_(msg`Search`)} 205 - accessibilityHint="" 206 - autoCorrect={false} 207 - autoComplete="off" 208 - autoCapitalize="none" 209 - /> 210 - {query ? ( 211 - <View style={styles.cancelBtn}> 212 - <TouchableOpacity 213 - onPress={onPressCancelSearch} 214 - accessibilityRole="button" 215 - accessibilityLabel={_(msg`Cancel search`)} 216 - accessibilityHint={_(msg`Exits inputting search query`)} 217 - onAccessibilityEscape={onPressCancelSearch}> 218 - <Text type="lg" style={[pal.link]}> 219 - <Trans>Cancel</Trans> 220 - </Text> 221 - </TouchableOpacity> 222 - </View> 223 - ) : undefined} 224 - </View> 225 - </View> 226 - 185 + <SearchInput 186 + query={query} 187 + onChangeQuery={onChangeText} 188 + onPressCancelSearch={onPressCancelSearch} 189 + onSubmitQuery={onSubmit} 190 + /> 227 191 {query !== '' && isActive && moderationOpts && ( 228 192 <View style={[pal.view, pal.borderDark, styles.resultsContainer]}> 229 193 {isFetching && !autocompleteData?.length ? ( ··· 262 226 position: 'relative', 263 227 width: 300, 264 228 }, 265 - search: { 266 - paddingHorizontal: 16, 267 - paddingVertical: 2, 268 - width: 300, 269 - borderRadius: 20, 270 - }, 271 - inputContainer: { 272 - flexDirection: 'row', 273 - }, 274 - iconWrapper: { 275 - position: 'relative', 276 - top: 2, 277 - paddingVertical: 7, 278 - marginRight: 8, 279 - }, 280 - input: { 281 - flex: 1, 282 - fontSize: 18, 283 - width: '100%', 284 - paddingTop: 7, 285 - paddingBottom: 7, 286 - }, 287 - cancelBtn: { 288 - paddingRight: 4, 289 - paddingLeft: 10, 290 - paddingVertical: 7, 291 - }, 292 229 resultsContainer: { 293 230 marginTop: 10, 294 231 flexDirection: 'column', 295 232 width: 300, 296 233 borderWidth: 1, 297 234 borderRadius: 6, 298 - }, 299 - noResults: { 300 - textAlign: 'center', 301 - paddingVertical: 10, 302 235 }, 303 236 })