From 3c00a1d4d125ffd4b5b16003d6720e739c19827e Mon Sep 17 00:00:00 2001 From: Hailey Date: Thu, 30 May 2024 18:50:18 -0700 Subject: [PATCH 01/29] feed items --- src/view/com/notifications/FeedItem.tsx | 3 ++- src/view/com/post-thread/PostThreadItem.tsx | 7 ++++--- src/view/com/posts/FeedItem.tsx | 3 ++- src/view/shell/bottom-bar/BottomBarStyles.tsx | 3 ++- 4 files changed, 10 insertions(+), 6 deletions(-) diff --git a/src/view/com/notifications/FeedItem.tsx b/src/view/com/notifications/FeedItem.tsx index c20a8e9ee3..1a22506542 100644 --- a/src/view/com/notifications/FeedItem.tsx +++ b/src/view/com/notifications/FeedItem.tsx @@ -47,6 +47,7 @@ import {formatCount} from '../util/numeric/format' import {Text} from '../util/text/Text' import {TimeElapsed} from '../util/TimeElapsed' import {PreviewableUserAvatar, UserAvatar} from '../util/UserAvatar' +import hairlineWidth = StyleSheet.hairlineWidth const MAX_AUTHORS = 5 @@ -480,7 +481,7 @@ const styles = StyleSheet.create({ outer: { padding: 10, paddingRight: 15, - borderTopWidth: 1, + borderTopWidth: hairlineWidth, flexDirection: 'row', }, layoutIcon: { diff --git a/src/view/com/post-thread/PostThreadItem.tsx b/src/view/com/post-thread/PostThreadItem.tsx index 9d2985f155..8852ee341a 100644 --- a/src/view/com/post-thread/PostThreadItem.tsx +++ b/src/view/com/post-thread/PostThreadItem.tsx @@ -49,6 +49,7 @@ import {PostEmbeds} from '../util/post-embeds' import {PostMeta} from '../util/PostMeta' import {Text} from '../util/text/Text' import {PreviewableUserAvatar} from '../util/UserAvatar' +import hairlineWidth = StyleSheet.hairlineWidth export function PostThreadItem({ post, @@ -618,7 +619,7 @@ function PostOuterWrapper({ { flexDirection: 'row', paddingHorizontal: isMobile ? 10 : 6, - borderTopWidth: depth === 1 ? 1 : 0, + borderTopWidth: depth === 1 ? hairlineWidth : 0, }, ]}> {Array.from(Array(depth - 1)).map((_, n: number) => ( @@ -699,7 +700,7 @@ function ExpandedPostDetails({ const styles = StyleSheet.create({ outer: { - borderTopWidth: 1, + borderTopWidth: hairlineWidth, paddingLeft: 8, }, outerHighlighted: { @@ -709,7 +710,7 @@ const styles = StyleSheet.create({ paddingRight: 8, }, outerHighlightedRoot: { - borderTopWidth: 1, + borderTopWidth: hairlineWidth, paddingTop: 16, }, noTopBorder: { diff --git a/src/view/com/posts/FeedItem.tsx b/src/view/com/posts/FeedItem.tsx index 8077c29683..343910485c 100644 --- a/src/view/com/posts/FeedItem.tsx +++ b/src/view/com/posts/FeedItem.tsx @@ -41,6 +41,7 @@ import {PostEmbeds} from '../util/post-embeds' import {PostMeta} from '../util/PostMeta' import {Text} from '../util/text/Text' import {PreviewableUserAvatar} from '../util/UserAvatar' +import hairlineWidth = StyleSheet.hairlineWidth interface FeedItemProps { record: AppBskyFeedPost.Record @@ -442,7 +443,7 @@ function ReplyToLabel({profile}: {profile: AppBskyActorDefs.ProfileViewBasic}) { const styles = StyleSheet.create({ outer: { - borderTopWidth: 1, + borderTopWidth: hairlineWidth, paddingLeft: 10, paddingRight: 15, // @ts-ignore web only -prf diff --git a/src/view/shell/bottom-bar/BottomBarStyles.tsx b/src/view/shell/bottom-bar/BottomBarStyles.tsx index 367c204e8a..ba8743474f 100644 --- a/src/view/shell/bottom-bar/BottomBarStyles.tsx +++ b/src/view/shell/bottom-bar/BottomBarStyles.tsx @@ -1,6 +1,7 @@ import {StyleSheet} from 'react-native' import {colors} from 'lib/styles' +import hairlineWidth = StyleSheet.hairlineWidth export const styles = StyleSheet.create({ bottomBar: { @@ -9,7 +10,7 @@ export const styles = StyleSheet.create({ left: 0, right: 0, flexDirection: 'row', - borderTopWidth: 1, + borderTopWidth: hairlineWidth, paddingLeft: 5, paddingRight: 10, }, From 9deae3231f9d6f0e92b9767cb9b6d484dcb480df Mon Sep 17 00:00:00 2001 From: Hailey Date: Thu, 30 May 2024 18:55:43 -0700 Subject: [PATCH 02/29] update some more --- src/view/com/pager/TabBar.tsx | 5 +++-- src/view/com/util/post-embeds/QuoteEmbed.tsx | 5 +++-- src/view/com/util/post-embeds/index.tsx | 3 ++- 3 files changed, 8 insertions(+), 5 deletions(-) diff --git a/src/view/com/pager/TabBar.tsx b/src/view/com/pager/TabBar.tsx index 5791e26a97..71205ca651 100644 --- a/src/view/com/pager/TabBar.tsx +++ b/src/view/com/pager/TabBar.tsx @@ -7,6 +7,7 @@ import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' import {PressableWithHover} from '../util/PressableWithHover' import {Text} from '../util/text/Text' import {DraggableScrollView} from './DraggableScrollView' +import hairlineWidth = StyleSheet.hairlineWidth export interface TabBarProps { testID?: string @@ -180,7 +181,7 @@ const desktopStyles = StyleSheet.create({ left: 0, right: 0, bottom: -1, - borderBottomWidth: 1, + borderBottomWidth: hairlineWidth, }, }) @@ -207,6 +208,6 @@ const mobileStyles = StyleSheet.create({ left: 0, right: 0, bottom: -1, - borderBottomWidth: 1, + borderBottomWidth: hairlineWidth, }, }) diff --git a/src/view/com/util/post-embeds/QuoteEmbed.tsx b/src/view/com/util/post-embeds/QuoteEmbed.tsx index 57f1d28ba6..019216eca4 100644 --- a/src/view/com/util/post-embeds/QuoteEmbed.tsx +++ b/src/view/com/util/post-embeds/QuoteEmbed.tsx @@ -39,6 +39,7 @@ import {Link} from '../Link' import {PostMeta} from '../PostMeta' import {Text} from '../text/Text' import {PostEmbeds} from '.' +import hairlineWidth = StyleSheet.hairlineWidth export function MaybeQuoteEmbed({ embed, @@ -247,7 +248,7 @@ const styles = StyleSheet.create({ marginTop: 8, paddingVertical: 12, paddingHorizontal: 12, - borderWidth: 1, + borderWidth: hairlineWidth, }, quotePost: { flex: 1, @@ -262,7 +263,7 @@ const styles = StyleSheet.create({ marginTop: 8, paddingVertical: 14, paddingHorizontal: 14, - borderWidth: 1, + borderWidth: hairlineWidth, }, alert: { marginBottom: 6, diff --git a/src/view/com/util/post-embeds/index.tsx b/src/view/com/util/post-embeds/index.tsx index 0fc8296252..d8ef6e6ab8 100644 --- a/src/view/com/util/post-embeds/index.tsx +++ b/src/view/com/util/post-embeds/index.tsx @@ -27,6 +27,7 @@ import {ImageLayoutGrid} from '../images/ImageLayoutGrid' import {ExternalLinkEmbed} from './ExternalLinkEmbed' import {ListEmbed} from './ListEmbed' import {MaybeQuoteEmbed} from './QuoteEmbed' +import hairlineWidth = StyleSheet.hairlineWidth type Embed = | AppBskyEmbedRecord.View @@ -187,7 +188,7 @@ const styles = StyleSheet.create({ fontWeight: 'bold', }, customFeedOuter: { - borderWidth: 1, + borderWidth: hairlineWidth, borderRadius: 8, marginTop: 4, paddingHorizontal: 12, From c703fea4e6838965b85c69fc6a8b56c59a82901c Mon Sep 17 00:00:00 2001 From: Hailey Date: Thu, 30 May 2024 18:59:41 -0700 Subject: [PATCH 03/29] moar --- src/alf/atoms.ts | 11 ++++++----- src/view/com/composer/Prompt.tsx | 16 +++++++++------- src/view/com/post-thread/PostThreadItem.tsx | 4 ++-- src/view/com/util/ViewHeader.tsx | 5 +++-- 4 files changed, 20 insertions(+), 16 deletions(-) diff --git a/src/alf/atoms.ts b/src/alf/atoms.ts index eb130f3ae9..7604d712c3 100644 --- a/src/alf/atoms.ts +++ b/src/alf/atoms.ts @@ -1,7 +1,8 @@ -import {Platform} from 'react-native' +import {Platform, StyleSheet} from 'react-native' import * as tokens from '#/alf/tokens' import {native, web} from '#/alf/util/platform' +import hairlineWidth = StyleSheet.hairlineWidth export const atoms = { /* @@ -280,16 +281,16 @@ export const atoms = { borderWidth: 1, }, border_t: { - borderTopWidth: 1, + borderTopWidth: hairlineWidth, }, border_b: { - borderBottomWidth: 1, + borderBottomWidth: hairlineWidth, }, border_l: { - borderLeftWidth: 1, + borderLeftWidth: hairlineWidth, }, border_r: { - borderRightWidth: 1, + borderRightWidth: hairlineWidth, }, /* diff --git a/src/view/com/composer/Prompt.tsx b/src/view/com/composer/Prompt.tsx index 16d1b6fb9e..54defb101c 100644 --- a/src/view/com/composer/Prompt.tsx +++ b/src/view/com/composer/Prompt.tsx @@ -1,13 +1,15 @@ import React from 'react' import {StyleSheet, TouchableOpacity} from 'react-native' -import {UserAvatar} from '../util/UserAvatar' -import {Text} from '../util/text/Text' -import {usePalette} from 'lib/hooks/usePalette' -import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' -import {Trans, msg} from '@lingui/macro' +import {msg, Trans} from '@lingui/macro' import {useLingui} from '@lingui/react' -import {useSession} from '#/state/session' + import {useProfileQuery} from '#/state/queries/profile' +import {useSession} from '#/state/session' +import {usePalette} from 'lib/hooks/usePalette' +import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' +import {Text} from '../util/text/Text' +import {UserAvatar} from '../util/UserAvatar' +import hairlineWidth = StyleSheet.hairlineWidth export function ComposePrompt({onPressCompose}: {onPressCompose: () => void}) { const {currentAccount} = useSession() @@ -47,7 +49,7 @@ const styles = StyleSheet.create({ paddingBottom: 10, flexDirection: 'row', alignItems: 'center', - borderTopWidth: 1, + borderTopWidth: hairlineWidth, }, labelMobile: { paddingLeft: 12, diff --git a/src/view/com/post-thread/PostThreadItem.tsx b/src/view/com/post-thread/PostThreadItem.tsx index 8852ee341a..4827aef512 100644 --- a/src/view/com/post-thread/PostThreadItem.tsx +++ b/src/view/com/post-thread/PostThreadItem.tsx @@ -762,8 +762,8 @@ const styles = StyleSheet.create({ expandedInfo: { flexDirection: 'row', padding: 10, - borderTopWidth: 1, - borderBottomWidth: 1, + borderTopWidth: hairlineWidth, + borderBottomWidth: hairlineWidth, marginTop: 5, marginBottom: 10, }, diff --git a/src/view/com/util/ViewHeader.tsx b/src/view/com/util/ViewHeader.tsx index 63a2b3de39..4c0f0e3e5c 100644 --- a/src/view/com/util/ViewHeader.tsx +++ b/src/view/com/util/ViewHeader.tsx @@ -15,6 +15,7 @@ import {NavigationProp} from 'lib/routes/types' import {useTheme} from '#/alf' import {Text} from './text/Text' import {CenteredView} from './Views' +import hairlineWidth = StyleSheet.hairlineWidth const BACK_HITSLOP = {left: 20, top: 20, right: 50, bottom: 20} @@ -156,7 +157,7 @@ function DesktopWebHeader({ styles.desktopHeader, pal.border, { - borderBottomWidth: showBorder ? 1 : 0, + borderBottomWidth: showBorder ? hairlineWidth : 0, }, {display: 'flex', flexDirection: 'column'}, ]}> @@ -245,7 +246,7 @@ const styles = StyleSheet.create({ marginRight: 'auto', }, border: { - borderBottomWidth: 1, + borderBottomWidth: hairlineWidth, }, titleContainer: { marginLeft: 'auto', From bc1e29ee57af797314e23e4dcfcbfa8fb0a4b1e2 Mon Sep 17 00:00:00 2001 From: Hailey Date: Thu, 30 May 2024 19:00:47 -0700 Subject: [PATCH 04/29] profile card --- src/view/com/profile/ProfileCard.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/view/com/profile/ProfileCard.tsx b/src/view/com/profile/ProfileCard.tsx index 6c89789467..2b0790002d 100644 --- a/src/view/com/profile/ProfileCard.tsx +++ b/src/view/com/profile/ProfileCard.tsx @@ -25,6 +25,7 @@ import {Link} from '../util/Link' import {Text} from '../util/text/Text' import {PreviewableUserAvatar} from '../util/UserAvatar' import {FollowButton} from './FollowButton' +import hairlineWidth = StyleSheet.hairlineWidth export function ProfileCard({ testID, @@ -280,7 +281,7 @@ export function ProfileCardWithFollowBtn({ const styles = StyleSheet.create({ outer: { - borderTopWidth: 1, + borderTopWidth: hairlineWidth, paddingHorizontal: 6, paddingVertical: 4, }, From 6e074705820342335005767ed961e272591d1365 Mon Sep 17 00:00:00 2001 From: Hailey Date: Thu, 30 May 2024 19:05:14 -0700 Subject: [PATCH 05/29] composer and notifications --- src/view/com/composer/Composer.tsx | 5 +++-- src/view/com/feeds/FeedSourceCard.tsx | 3 ++- src/view/com/notifications/Feed.tsx | 3 ++- src/view/screens/ProfileList.tsx | 5 +++-- 4 files changed, 10 insertions(+), 6 deletions(-) diff --git a/src/view/com/composer/Composer.tsx b/src/view/com/composer/Composer.tsx index 2618c51a3d..c8bb8d7262 100644 --- a/src/view/com/composer/Composer.tsx +++ b/src/view/com/composer/Composer.tsx @@ -90,6 +90,7 @@ import {SuggestedLanguage} from './select-language/SuggestedLanguage' import {TextInput, TextInputRef} from './text-input/TextInput' import {ThreadgateBtn} from './threadgate/ThreadgateBtn' import {useExternalLinkFetch} from './useExternalLinkFetch' +import hairlineWidth = StyleSheet.hairlineWidth type CancelRef = { onPressCancel: () => void @@ -657,7 +658,7 @@ const styles = StyleSheet.create({ marginBottom: 6, }, errorIcon: { - borderWidth: 1, + borderWidth: hairlineWidth, borderColor: colors.red4, color: colors.red4, borderRadius: 30, @@ -692,6 +693,6 @@ const styles = StyleSheet.create({ paddingLeft: 15, paddingRight: 20, alignItems: 'center', - borderTopWidth: 1, + borderTopWidth: hairlineWidth, }, }) diff --git a/src/view/com/feeds/FeedSourceCard.tsx b/src/view/com/feeds/FeedSourceCard.tsx index b89a3946ed..4d2a36289d 100644 --- a/src/view/com/feeds/FeedSourceCard.tsx +++ b/src/view/com/feeds/FeedSourceCard.tsx @@ -25,6 +25,7 @@ import * as Prompt from '#/components/Prompt' import {RichText} from '#/components/RichText' import {Text} from '../util/text/Text' import {UserAvatar} from '../util/UserAvatar' +import hairlineWidth = StyleSheet.hairlineWidth export function FeedSourceCard({ feedUri, @@ -295,7 +296,7 @@ const styles = StyleSheet.create({ paddingVertical: 20, flexDirection: 'column', flex: 1, - borderTopWidth: 1, + borderTopWidth: hairlineWidth, gap: 14, }, headerContainer: { diff --git a/src/view/com/notifications/Feed.tsx b/src/view/com/notifications/Feed.tsx index 15c103bed0..5830a181da 100644 --- a/src/view/com/notifications/Feed.tsx +++ b/src/view/com/notifications/Feed.tsx @@ -17,6 +17,7 @@ import {NotificationFeedLoadingPlaceholder} from '../util/LoadingPlaceholder' import {LoadMoreRetryBtn} from '../util/LoadMoreRetryBtn' import {CenteredView} from '../util/Views' import {FeedItem} from './FeedItem' +import hairlineWidth = StyleSheet.hairlineWidth const EMPTY_FEED_ITEM = {_reactKey: '__empty__'} const LOAD_MORE_ERROR_ITEM = {_reactKey: '__load_more_error__'} @@ -122,7 +123,7 @@ export function Feed({ ) } else if (item === LOADING_ITEM) { return ( - + ) diff --git a/src/view/screens/ProfileList.tsx b/src/view/screens/ProfileList.tsx index de3c01ea3d..0c2cecbfce 100644 --- a/src/view/screens/ProfileList.tsx +++ b/src/view/screens/ProfileList.tsx @@ -65,6 +65,7 @@ import {useDialogControl} from '#/components/Dialog' import * as Prompt from '#/components/Prompt' import {ReportDialog, useReportDialogControl} from '#/components/ReportDialog' import {RichText} from '#/components/RichText' +import hairlineWidth = StyleSheet.hairlineWidth const SECTION_TITLES_CURATE = ['Posts', 'About'] const SECTION_TITLES_MOD = ['About'] @@ -802,7 +803,7 @@ const AboutSection = React.forwardRef( From 8f357240d2e334f5885438206d5c8a8fc8ba8531 Mon Sep 17 00:00:00 2001 From: Hailey Date: Thu, 30 May 2024 19:07:06 -0700 Subject: [PATCH 06/29] settings screen --- src/view/screens/Settings/index.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/view/screens/Settings/index.tsx b/src/view/screens/Settings/index.tsx index 078ebedabb..49702ae47c 100644 --- a/src/view/screens/Settings/index.tsx +++ b/src/view/screens/Settings/index.tsx @@ -66,6 +66,7 @@ import {BirthDateSettingsDialog} from '#/components/dialogs/BirthDateSettings' import {navigate, resetToTab} from '#/Navigation' import {Email2FAToggle} from './Email2FAToggle' import {ExportCarDialog} from './ExportCarDialog' +import hairlineWidth = StyleSheet.hairlineWidth function SettingsAccountCard({ account, @@ -317,7 +318,7 @@ export function SettingsScreen({}: Props) { showBackButton={isMobile} style={[ pal.border, - {borderBottomWidth: 1}, + {borderBottomWidth: hairlineWidth}, !isMobile && {borderLeftWidth: 1, borderRightWidth: 1}, ]}> From 5a21904848ec2aa874b7f59be6fff69198cd6b22 Mon Sep 17 00:00:00 2001 From: Hailey Date: Thu, 30 May 2024 19:12:17 -0700 Subject: [PATCH 07/29] remove border from first item in feeds --- src/view/com/notifications/Feed.tsx | 17 ++++++++++++++--- src/view/com/posts/FeedItem.tsx | 12 +++++++----- 2 files changed, 21 insertions(+), 8 deletions(-) diff --git a/src/view/com/notifications/Feed.tsx b/src/view/com/notifications/Feed.tsx index 5830a181da..718973bc7b 100644 --- a/src/view/com/notifications/Feed.tsx +++ b/src/view/com/notifications/Feed.tsx @@ -1,5 +1,10 @@ import React from 'react' -import {ActivityIndicator, StyleSheet, View} from 'react-native' +import { + ActivityIndicator, + ListRenderItemInfo, + StyleSheet, + View, +} from 'react-native' import {msg} from '@lingui/macro' import {useLingui} from '@lingui/react' @@ -103,7 +108,7 @@ export function Feed({ // renderItem function renders components that follow React performance best practices // like PureComponent, shouldComponentUpdate, etc const renderItem = React.useCallback( - ({item}: {item: any}) => { + ({item, index}: ListRenderItemInfo) => { if (item === EMPTY_FEED_ITEM) { return ( ) } - return + return ( + + ) }, [onPressRetryLoadMore, moderationOpts, _, pal.border], ) diff --git a/src/view/com/posts/FeedItem.tsx b/src/view/com/posts/FeedItem.tsx index 343910485c..1b01c2eff8 100644 --- a/src/view/com/posts/FeedItem.tsx +++ b/src/view/com/posts/FeedItem.tsx @@ -53,6 +53,7 @@ interface FeedItemProps { isThreadLastChild?: boolean isThreadParent?: boolean feedContext: string | undefined + hideTopBorder?: boolean } export function FeedItem({ @@ -66,6 +67,7 @@ export function FeedItem({ isThreadChild, isThreadLastChild, isThreadParent, + hideTopBorder, }: FeedItemProps & {post: AppBskyFeedDefs.PostView}): React.ReactNode { const postShadowed = usePostShadow(post) const richText = useMemo( @@ -95,6 +97,7 @@ export function FeedItem({ isThreadChild={isThreadChild} isThreadLastChild={isThreadLastChild} isThreadParent={isThreadParent} + hideTopBorder={hideTopBorder} /> ) } @@ -113,6 +116,7 @@ let FeedItemInner = ({ isThreadChild, isThreadLastChild, isThreadParent, + hideTopBorder, }: FeedItemProps & { richText: RichTextAPI post: Shadow @@ -187,7 +191,9 @@ let FeedItemInner = ({ ? 8 : undefined, }, - isThreadChild ? styles.outerSmallTop : undefined, + (hideTopBorder || isThreadChild) && { + borderTopWidth: hideTopBorder ? 0 : hairlineWidth, + }, ] return ( @@ -443,16 +449,12 @@ function ReplyToLabel({profile}: {profile: AppBskyActorDefs.ProfileViewBasic}) { const styles = StyleSheet.create({ outer: { - borderTopWidth: hairlineWidth, paddingLeft: 10, paddingRight: 15, // @ts-ignore web only -prf cursor: 'pointer', overflow: 'hidden', }, - outerSmallTop: { - borderTopWidth: 0, - }, replyLine: { width: 2, marginLeft: 'auto', From 3b9ffe489aaa3fb28ab24fd6e12aef22e892f63d Mon Sep 17 00:00:00 2001 From: Hailey Date: Thu, 30 May 2024 19:13:21 -0700 Subject: [PATCH 08/29] remove border from first item in feeds --- src/view/com/posts/FeedItem.tsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/view/com/posts/FeedItem.tsx b/src/view/com/posts/FeedItem.tsx index 1b01c2eff8..0660d7892e 100644 --- a/src/view/com/posts/FeedItem.tsx +++ b/src/view/com/posts/FeedItem.tsx @@ -190,9 +190,7 @@ let FeedItemInner = ({ isThreadLastChild || (!isThreadChild && !isThreadParent) ? 8 : undefined, - }, - (hideTopBorder || isThreadChild) && { - borderTopWidth: hideTopBorder ? 0 : hairlineWidth, + borderTopWidth: hideTopBorder || isThreadParent ? 0 : hairlineWidth, }, ] From ebbd0891f26f48a206431c929cdd9ff278ae24ff Mon Sep 17 00:00:00 2001 From: Hailey Date: Thu, 30 May 2024 19:18:39 -0700 Subject: [PATCH 09/29] more removal of top border --- src/view/com/notifications/FeedItem.tsx | 4 +- src/view/com/posts/Feed.tsx | 5 ++- src/view/com/posts/FeedSlice.tsx | 10 ++++- src/view/screens/Notifications.tsx | 51 ++++++++++++++----------- 4 files changed, 43 insertions(+), 27 deletions(-) diff --git a/src/view/com/notifications/FeedItem.tsx b/src/view/com/notifications/FeedItem.tsx index 1a22506542..4fe557f402 100644 --- a/src/view/com/notifications/FeedItem.tsx +++ b/src/view/com/notifications/FeedItem.tsx @@ -62,9 +62,11 @@ interface Author { let FeedItem = ({ item, moderationOpts, + hideTopBorder, }: { item: FeedNotification moderationOpts: ModerationOpts + hideTopBorder?: boolean }): React.ReactNode => { const queryClient = useQueryClient() const pal = usePalette('default') @@ -189,6 +191,7 @@ let FeedItem = ({ backgroundColor: pal.colors.unreadNotifBg, borderColor: pal.colors.unreadNotifBorder, }, + {borderTopWidth: hideTopBorder ? 0 : hairlineWidth}, ]} href={itemHref} noFeedback @@ -481,7 +484,6 @@ const styles = StyleSheet.create({ outer: { padding: 10, paddingRight: 15, - borderTopWidth: hairlineWidth, flexDirection: 'row', }, layoutIcon: { diff --git a/src/view/com/posts/Feed.tsx b/src/view/com/posts/Feed.tsx index 12171dc3b7..996451329f 100644 --- a/src/view/com/posts/Feed.tsx +++ b/src/view/com/posts/Feed.tsx @@ -3,6 +3,7 @@ import { ActivityIndicator, AppState, Dimensions, + ListRenderItemInfo, StyleProp, StyleSheet, View, @@ -279,7 +280,7 @@ let Feed = ({ // = const renderItem = React.useCallback( - ({item}: {item: any}) => { + ({item, index}: ListRenderItemInfo) => { if (item === EMPTY_FEED_ITEM) { return renderEmptyState() } else if (item === ERROR_ITEM) { @@ -311,7 +312,7 @@ let Feed = ({ // -prf return } - return + return }, [ feed, diff --git a/src/view/com/posts/FeedSlice.tsx b/src/view/com/posts/FeedSlice.tsx index 6d8f038b4f..aeb24e8bbf 100644 --- a/src/view/com/posts/FeedSlice.tsx +++ b/src/view/com/posts/FeedSlice.tsx @@ -11,7 +11,13 @@ import {Link} from '../util/Link' import {Text} from '../util/text/Text' import {FeedItem} from './FeedItem' -let FeedSlice = ({slice}: {slice: FeedPostSlice}): React.ReactNode => { +let FeedSlice = ({ + slice, + hideTopBorder, +}: { + slice: FeedPostSlice + hideTopBorder?: boolean +}): React.ReactNode => { if (slice.isThread && slice.items.length > 3) { const last = slice.items.length - 1 return ( @@ -27,6 +33,7 @@ let FeedSlice = ({slice}: {slice: FeedPostSlice}): React.ReactNode => { moderation={slice.items[0].moderation} isThreadParent={isThreadParentAt(slice.items, 0)} isThreadChild={isThreadChildAt(slice.items, 0)} + hideTopBorder={hideTopBorder} /> { isThreadLastChild={ isThreadChildAt(slice.items, i) && slice.items.length === i + 1 } + hideTopBorder={hideTopBorder && i === 0} /> ))} diff --git a/src/view/screens/Notifications.tsx b/src/view/screens/Notifications.tsx index 48c834a28f..7e2fc68b37 100644 --- a/src/view/screens/Notifications.tsx +++ b/src/view/screens/Notifications.tsx @@ -1,37 +1,38 @@ import React from 'react' import {View} from 'react-native' +import {msg, Trans} from '@lingui/macro' +import {useLingui} from '@lingui/react' import {useFocusEffect, useIsFocused} from '@react-navigation/native' import {useQueryClient} from '@tanstack/react-query' + +import {useNonReactiveCallback} from '#/lib/hooks/useNonReactiveCallback' +import {logger} from '#/logger' +import {isNative} from '#/platform/detection' +import {emitSoftReset, listenSoftReset} from '#/state/events' +import {RQKEY as NOTIFS_RQKEY} from '#/state/queries/notifications/feed' +import { + useUnreadNotifications, + useUnreadNotificationsApi, +} from '#/state/queries/notifications/unread' +import {truncateAndInvalidate} from '#/state/queries/util' +import {useSetMinimalShellMode} from '#/state/shell' +import {useComposerControls} from '#/state/shell/composer' +import {useAnalytics} from 'lib/analytics/analytics' +import {usePalette} from 'lib/hooks/usePalette' +import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' +import {ComposeIcon2} from 'lib/icons' import { NativeStackScreenProps, NotificationsTabNavigatorParams, } from 'lib/routes/types' -import {ViewHeader} from '../com/util/ViewHeader' -import {Feed} from '../com/notifications/Feed' +import {colors, s} from 'lib/styles' import {TextLink} from 'view/com/util/Link' import {ListMethods} from 'view/com/util/List' import {LoadLatestBtn} from 'view/com/util/load-latest/LoadLatestBtn' -import {MainScrollProvider} from '../com/util/MainScrollProvider' -import {usePalette} from 'lib/hooks/usePalette' -import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' -import {s, colors} from 'lib/styles' -import {useAnalytics} from 'lib/analytics/analytics' -import {logger} from '#/logger' -import {useSetMinimalShellMode} from '#/state/shell' -import {Trans, msg} from '@lingui/macro' -import {useLingui} from '@lingui/react' -import { - useUnreadNotifications, - useUnreadNotificationsApi, -} from '#/state/queries/notifications/unread' -import {RQKEY as NOTIFS_RQKEY} from '#/state/queries/notifications/feed' -import {listenSoftReset, emitSoftReset} from '#/state/events' -import {truncateAndInvalidate} from '#/state/queries/util' -import {useNonReactiveCallback} from '#/lib/hooks/useNonReactiveCallback' -import {isNative} from '#/platform/detection' +import {Feed} from '../com/notifications/Feed' import {FAB} from '../com/util/fab/FAB' -import {ComposeIcon2} from 'lib/icons' -import {useComposerControls} from '#/state/shell/composer' +import {MainScrollProvider} from '../com/util/MainScrollProvider' +import {ViewHeader} from '../com/util/ViewHeader' type Props = NativeStackScreenProps< NotificationsTabNavigatorParams, @@ -145,7 +146,11 @@ export function NotificationsScreen({}: Props) { return ( - + Date: Thu, 30 May 2024 19:19:27 -0700 Subject: [PATCH 10/29] fix flatlist rendering --- src/view/com/notifications/Feed.tsx | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/src/view/com/notifications/Feed.tsx b/src/view/com/notifications/Feed.tsx index 718973bc7b..e485028cbd 100644 --- a/src/view/com/notifications/Feed.tsx +++ b/src/view/com/notifications/Feed.tsx @@ -23,6 +23,7 @@ import {LoadMoreRetryBtn} from '../util/LoadMoreRetryBtn' import {CenteredView} from '../util/Views' import {FeedItem} from './FeedItem' import hairlineWidth = StyleSheet.hairlineWidth +import {useInitialNumToRender} from 'lib/hooks/useInitialNumToRender' const EMPTY_FEED_ITEM = {_reactKey: '__empty__'} const LOAD_MORE_ERROR_ITEM = {_reactKey: '__load_more_error__'} @@ -39,6 +40,8 @@ export function Feed({ onScrolledDownChange: (isScrolledDown: boolean) => void ListHeaderComponent?: () => JSX.Element }) { + const initialNumToRender = useInitialNumToRender() + const [isPTRing, setIsPTRing] = React.useState(false) const pal = usePalette('default') @@ -103,10 +106,6 @@ export function Feed({ fetchNextPage() }, [fetchNextPage]) - // TODO optimize renderItem or FeedItem, we're getting this notice from RN: -prf - // VirtualizedList: You have a large list that is slow to update - make sure your - // renderItem function renders components that follow React performance best practices - // like PureComponent, shouldComponentUpdate, etc const renderItem = React.useCallback( ({item, index}: ListRenderItemInfo) => { if (item === EMPTY_FEED_ITEM) { @@ -182,6 +181,8 @@ export function Feed({ contentContainerStyle={s.contentContainer} // @ts-ignore our .web version only -prf desktopFixedHeight + initialNumToRender={initialNumToRender} + windowSize={11} /> ) From 9444f6f3f694efa43500b65f9a9c5aa4896dae9c Mon Sep 17 00:00:00 2001 From: Hailey Date: Thu, 30 May 2024 19:20:30 -0700 Subject: [PATCH 11/29] oops --- src/view/com/posts/FeedItem.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/view/com/posts/FeedItem.tsx b/src/view/com/posts/FeedItem.tsx index 0660d7892e..5a523d978a 100644 --- a/src/view/com/posts/FeedItem.tsx +++ b/src/view/com/posts/FeedItem.tsx @@ -190,7 +190,7 @@ let FeedItemInner = ({ isThreadLastChild || (!isThreadChild && !isThreadParent) ? 8 : undefined, - borderTopWidth: hideTopBorder || isThreadParent ? 0 : hairlineWidth, + borderTopWidth: hideTopBorder || isThreadChild ? 0 : hairlineWidth, }, ] From 08e606ae33211f67ccd5e240c3ae1af4f095b929 Mon Sep 17 00:00:00 2001 From: Hailey Date: Thu, 30 May 2024 19:21:56 -0700 Subject: [PATCH 12/29] scroll to top fab --- src/view/com/util/load-latest/LoadLatestBtn.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/view/com/util/load-latest/LoadLatestBtn.tsx b/src/view/com/util/load-latest/LoadLatestBtn.tsx index 7e85e670f4..a6b40f9f52 100644 --- a/src/view/com/util/load-latest/LoadLatestBtn.tsx +++ b/src/view/com/util/load-latest/LoadLatestBtn.tsx @@ -13,6 +13,7 @@ import {clamp} from '#/lib/numbers' import {colors} from '#/lib/styles' import {isWeb} from '#/platform/detection' import {useSession} from '#/state/session' +import hairlineWidth = StyleSheet.hairlineWidth const AnimatedTouchableOpacity = Animated.createAnimatedComponent(TouchableOpacity) @@ -73,7 +74,7 @@ const styles = StyleSheet.create({ // @ts-ignore 'fixed' is web only -prf position: isWeb ? 'fixed' : 'absolute', left: 18, - borderWidth: 1, + borderWidth: hairlineWidth, width: 52, height: 52, borderRadius: 26, From 75e5cf6b6d7dd911d388b63f26b4ecb2b267ff6e Mon Sep 17 00:00:00 2001 From: Hailey Date: Thu, 30 May 2024 19:29:44 -0700 Subject: [PATCH 13/29] a.border --- src/alf/atoms.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/alf/atoms.ts b/src/alf/atoms.ts index 7604d712c3..1ccb0460c4 100644 --- a/src/alf/atoms.ts +++ b/src/alf/atoms.ts @@ -278,7 +278,7 @@ export const atoms = { borderWidth: 0, }, border: { - borderWidth: 1, + borderWidth: hairlineWidth, }, border_t: { borderTopWidth: hairlineWidth, From c63beb43e9e6ea353b68e6a37eb29896c84b6e99 Mon Sep 17 00:00:00 2001 From: Hailey Date: Thu, 30 May 2024 19:31:45 -0700 Subject: [PATCH 14/29] centeredview/list --- src/view/com/util/Views.web.tsx | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/src/view/com/util/Views.web.tsx b/src/view/com/util/Views.web.tsx index 0ebd986cbb..ffea9fe2e6 100644 --- a/src/view/com/util/Views.web.tsx +++ b/src/view/com/util/Views.web.tsx @@ -26,6 +26,7 @@ import Animated from 'react-native-reanimated' import {usePalette} from 'lib/hooks/usePalette' import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' import {addStyle} from 'lib/styles' +import hairlineWidth = StyleSheet.hairlineWidth interface AddedProps { desktopFixedHeight?: boolean | number @@ -46,8 +47,8 @@ export const CenteredView = React.forwardRef(function CenteredView({ } if (sideBorders) { style = addStyle(style, { - borderLeftWidth: 1, - borderRightWidth: 1, + borderLeftWidth: hairlineWidth, + borderRightWidth: hairlineWidth, }) style = addStyle(style, pal.border) } @@ -159,8 +160,8 @@ export const ScrollView = React.forwardRef(function ScrollViewImpl( const styles = StyleSheet.create({ contentContainer: { - borderLeftWidth: 1, - borderRightWidth: 1, + borderLeftWidth: hairlineWidth, + borderRightWidth: hairlineWidth, // @ts-ignore web only minHeight: '100vh', }, From fb56a41b924191fffbd42a2902da12ecb1eef283 Mon Sep 17 00:00:00 2001 From: Hailey Date: Thu, 30 May 2024 19:34:03 -0700 Subject: [PATCH 15/29] placeholder --- src/view/com/util/LoadingPlaceholder.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/view/com/util/LoadingPlaceholder.tsx b/src/view/com/util/LoadingPlaceholder.tsx index 33a59be6dc..be67d10cba 100644 --- a/src/view/com/util/LoadingPlaceholder.tsx +++ b/src/view/com/util/LoadingPlaceholder.tsx @@ -15,6 +15,7 @@ import {useTheme as useTheme_NEW} from '#/alf' import {Bubble_Stroke2_Corner2_Rounded as Bubble} from '#/components/icons/Bubble' import {Heart2_Stroke2_Corner0_Rounded as HeartIconOutline} from '#/components/icons/Heart2' import {Repost_Stroke2_Corner2_Rounded as Repost} from '#/components/icons/Repost' +import hairlineWidth = StyleSheet.hairlineWidth export function LoadingPlaceholder({ width, @@ -233,7 +234,7 @@ export function FeedLoadingPlaceholder({ { paddingHorizontal: 12, paddingVertical: 18, - borderTopWidth: showTopBorder ? 1 : 0, + borderTopWidth: showTopBorder ? hairlineWidth : 0, }, pal.border, style, From 0c4b907338298e49d97bb3c474358f89649c518b Mon Sep 17 00:00:00 2001 From: Hailey Date: Thu, 30 May 2024 19:35:31 -0700 Subject: [PATCH 16/29] web sidebar --- src/view/shell/desktop/RightNav.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/view/shell/desktop/RightNav.tsx b/src/view/shell/desktop/RightNav.tsx index f0cd4f59ae..633f04932a 100644 --- a/src/view/shell/desktop/RightNav.tsx +++ b/src/view/shell/desktop/RightNav.tsx @@ -13,6 +13,7 @@ import {TextLink} from 'view/com/util/Link' import {Text} from 'view/com/util/text/Text' import {DesktopFeeds} from './Feeds' import {DesktopSearch} from './Search' +import hairlineWidth = StyleSheet.hairlineWidth export function DesktopRightNav({routeName}: {routeName: string}) { const pal = usePalette('default') @@ -130,8 +131,8 @@ const styles = StyleSheet.create({ marginBottom: 10, }, desktopFeedsContainer: { - borderTopWidth: 1, - borderBottomWidth: 1, + borderTopWidth: hairlineWidth, + borderBottomWidth: hairlineWidth, marginTop: 18, marginBottom: 18, }, From 5db915773ec23559a068d89ed8d21224d4a8a294 Mon Sep 17 00:00:00 2001 From: Hailey Date: Thu, 30 May 2024 20:24:45 -0700 Subject: [PATCH 17/29] search posts --- src/view/com/post/Post.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/view/com/post/Post.tsx b/src/view/com/post/Post.tsx index 1a7185cd92..34614693ac 100644 --- a/src/view/com/post/Post.tsx +++ b/src/view/com/post/Post.tsx @@ -35,6 +35,7 @@ import {PostMeta} from '../util/PostMeta' import {Text} from '../util/text/Text' import {PreviewableUserAvatar} from '../util/UserAvatar' import {UserInfoText} from '../util/UserInfoText' +import hairlineWidth = StyleSheet.hairlineWidth export function Post({ post, @@ -239,7 +240,7 @@ const styles = StyleSheet.create({ paddingRight: 15, paddingBottom: 5, paddingLeft: 10, - borderTopWidth: 1, + borderTopWidth: hairlineWidth, // @ts-ignore web only -prf cursor: 'pointer', }, From bf7133987424977d991ba67533b86c2125186fb6 Mon Sep 17 00:00:00 2001 From: Hailey Date: Thu, 30 May 2024 20:25:26 -0700 Subject: [PATCH 18/29] feeds list --- src/view/screens/Feeds.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/view/screens/Feeds.tsx b/src/view/screens/Feeds.tsx index 826f997dda..837e58195e 100644 --- a/src/view/screens/Feeds.tsx +++ b/src/view/screens/Feeds.tsx @@ -52,6 +52,7 @@ import {IconCircle} from '#/components/IconCircle' import {FilterTimeline_Stroke2_Corner0_Rounded as FilterTimeline} from '#/components/icons/FilterTimeline' import {ListMagnifyingGlass_Stroke2_Corner0_Rounded} from '#/components/icons/ListMagnifyingGlass' import {ListSparkle_Stroke2_Corner0_Rounded} from '#/components/icons/ListSparkle' +import hairlineWidth = StyleSheet.hairlineWidth type Props = NativeStackScreenProps @@ -856,13 +857,13 @@ const styles = StyleSheet.create({ paddingHorizontal: 16, paddingVertical: 14, gap: 12, - borderBottomWidth: 1, + borderBottomWidth: hairlineWidth, }, savedFeedMobile: { paddingVertical: 10, }, offlineSlug: { - borderWidth: 1, + borderWidth: hairlineWidth, borderRadius: 4, paddingHorizontal: 4, paddingVertical: 2, From 33af45ee9a6a1f682eb8e9ab95f89cfba164541d Mon Sep 17 00:00:00 2001 From: Hailey Date: Thu, 30 May 2024 20:27:37 -0700 Subject: [PATCH 19/29] user lists --- src/view/com/lists/ListCard.tsx | 22 ++++++++++++---------- src/view/com/lists/MyLists.tsx | 18 ++++++++++-------- src/view/screens/Lists.tsx | 31 ++++++++++++++++++------------- 3 files changed, 40 insertions(+), 31 deletions(-) diff --git a/src/view/com/lists/ListCard.tsx b/src/view/com/lists/ListCard.tsx index 19842eb54d..3adf5c09da 100644 --- a/src/view/com/lists/ListCard.tsx +++ b/src/view/com/lists/ListCard.tsx @@ -1,18 +1,20 @@ import React from 'react' import {StyleProp, StyleSheet, View, ViewStyle} from 'react-native' -import {AtUri, AppBskyGraphDefs, RichText} from '@atproto/api' -import {Link} from '../util/Link' -import {Text} from '../util/text/Text' -import {RichText as RichTextCom} from '#/components/RichText' -import {UserAvatar} from '../util/UserAvatar' -import {s} from 'lib/styles' -import {usePalette} from 'lib/hooks/usePalette' +import {AppBskyGraphDefs, AtUri, RichText} from '@atproto/api' +import {Trans} from '@lingui/macro' + import {useSession} from '#/state/session' +import {usePalette} from 'lib/hooks/usePalette' +import {makeProfileLink} from 'lib/routes/links' import {sanitizeDisplayName} from 'lib/strings/display-names' import {sanitizeHandle} from 'lib/strings/handles' -import {makeProfileLink} from 'lib/routes/links' -import {Trans} from '@lingui/macro' +import {s} from 'lib/styles' import {atoms as a} from '#/alf' +import {RichText as RichTextCom} from '#/components/RichText' +import {Link} from '../util/Link' +import {Text} from '../util/text/Text' +import {UserAvatar} from '../util/UserAvatar' +import hairlineWidth = StyleSheet.hairlineWidth export const ListCard = ({ testID, @@ -132,7 +134,7 @@ export const ListCard = ({ const styles = StyleSheet.create({ outer: { - borderTopWidth: 1, + borderTopWidth: hairlineWidth, paddingHorizontal: 6, }, outerNoBorder: { diff --git a/src/view/com/lists/MyLists.tsx b/src/view/com/lists/MyLists.tsx index e9d2e4f0fe..5ea95971ca 100644 --- a/src/view/com/lists/MyLists.tsx +++ b/src/view/com/lists/MyLists.tsx @@ -9,17 +9,19 @@ import { ViewStyle, } from 'react-native' import {AppBskyGraphDefs as GraphDefs} from '@atproto/api' -import {ListCard} from './ListCard' +import {Trans} from '@lingui/macro' + +import {cleanError} from '#/lib/strings/errors' +import {logger} from '#/logger' import {MyListsFilter, useMyListsQuery} from '#/state/queries/my-lists' -import {ErrorMessage} from '../util/error/ErrorMessage' -import {Text} from '../util/text/Text' import {useAnalytics} from 'lib/analytics/analytics' import {usePalette} from 'lib/hooks/usePalette' -import {List} from '../util/List' import {s} from 'lib/styles' -import {logger} from '#/logger' -import {Trans} from '@lingui/macro' -import {cleanError} from '#/lib/strings/errors' +import {ErrorMessage} from '../util/error/ErrorMessage' +import {List} from '../util/List' +import {Text} from '../util/text/Text' +import {ListCard} from './ListCard' +import hairlineWidth = StyleSheet.hairlineWidth const LOADING = {_reactKey: '__loading__'} const EMPTY = {_reactKey: '__empty__'} @@ -84,7 +86,7 @@ export function MyLists({ + style={[{padding: 18, borderTopWidth: hairlineWidth}, pal.border]}> You have no lists. diff --git a/src/view/screens/Lists.tsx b/src/view/screens/Lists.tsx index bdd5dd9b78..0dd2febcb6 100644 --- a/src/view/screens/Lists.tsx +++ b/src/view/screens/Lists.tsx @@ -1,20 +1,22 @@ import React from 'react' -import {View} from 'react-native' -import {useFocusEffect, useNavigation} from '@react-navigation/native' -import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' +import {StyleSheet, View} from 'react-native' import {AtUri} from '@atproto/api' -import {NativeStackScreenProps, CommonNavigatorParams} from 'lib/routes/types' -import {MyLists} from '#/view/com/lists/MyLists' -import {Text} from 'view/com/util/text/Text' -import {Button} from 'view/com/util/forms/Button' -import {NavigationProp} from 'lib/routes/types' +import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' +import {Trans} from '@lingui/macro' +import {useFocusEffect, useNavigation} from '@react-navigation/native' + +import {useModalControls} from '#/state/modals' +import {useSetMinimalShellMode} from '#/state/shell' import {usePalette} from 'lib/hooks/usePalette' import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' -import {SimpleViewHeader} from 'view/com/util/SimpleViewHeader' +import {CommonNavigatorParams, NativeStackScreenProps} from 'lib/routes/types' +import {NavigationProp} from 'lib/routes/types' import {s} from 'lib/styles' -import {useSetMinimalShellMode} from '#/state/shell' -import {useModalControls} from '#/state/modals' -import {Trans} from '@lingui/macro' +import {MyLists} from '#/view/com/lists/MyLists' +import {Button} from 'view/com/util/forms/Button' +import {SimpleViewHeader} from 'view/com/util/SimpleViewHeader' +import {Text} from 'view/com/util/text/Text' +import hairlineWidth = StyleSheet.hairlineWidth type Props = NativeStackScreenProps export function ListsScreen({}: Props) { @@ -51,7 +53,10 @@ export function ListsScreen({}: Props) { From a0cea39c7454d0504651fe1c21f220a824767c63 Mon Sep 17 00:00:00 2001 From: Hailey Date: Thu, 30 May 2024 20:28:42 -0700 Subject: [PATCH 20/29] list header --- src/view/com/profile/ProfileSubpageHeader.tsx | 28 ++++++++++--------- 1 file changed, 15 insertions(+), 13 deletions(-) diff --git a/src/view/com/profile/ProfileSubpageHeader.tsx b/src/view/com/profile/ProfileSubpageHeader.tsx index eaf00f3e66..549fc5151a 100644 --- a/src/view/com/profile/ProfileSubpageHeader.tsx +++ b/src/view/com/profile/ProfileSubpageHeader.tsx @@ -1,24 +1,26 @@ import React from 'react' import {Pressable, StyleSheet, View} from 'react-native' import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' +import {msg, Trans} from '@lingui/macro' +import {useLingui} from '@lingui/react' import {useNavigation} from '@react-navigation/native' + +import {emitSoftReset} from '#/state/events' +import {ImagesLightbox, useLightboxControls} from '#/state/lightbox' +import {useSetDrawerOpen} from '#/state/shell' +import {BACK_HITSLOP} from 'lib/constants' import {usePalette} from 'lib/hooks/usePalette' import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' -import {Text} from '../util/text/Text' -import {TextLink} from '../util/Link' -import {UserAvatar, UserAvatarType} from '../util/UserAvatar' -import {LoadingPlaceholder} from '../util/LoadingPlaceholder' -import {CenteredView} from '../util/Views' -import {sanitizeHandle} from 'lib/strings/handles' import {makeProfileLink} from 'lib/routes/links' import {NavigationProp} from 'lib/routes/types' -import {BACK_HITSLOP} from 'lib/constants' +import {sanitizeHandle} from 'lib/strings/handles' import {isNative} from 'platform/detection' -import {useLightboxControls, ImagesLightbox} from '#/state/lightbox' -import {useLingui} from '@lingui/react' -import {Trans, msg} from '@lingui/macro' -import {useSetDrawerOpen} from '#/state/shell' -import {emitSoftReset} from '#/state/events' +import {TextLink} from '../util/Link' +import {LoadingPlaceholder} from '../util/LoadingPlaceholder' +import {Text} from '../util/text/Text' +import {UserAvatar, UserAvatarType} from '../util/UserAvatar' +import {CenteredView} from '../util/Views' +import hairlineWidth = StyleSheet.hairlineWidth export function ProfileSubpageHeader({ isLoading, @@ -79,7 +81,7 @@ export function ProfileSubpageHeader({ { flexDirection: 'row', alignItems: 'center', - borderBottomWidth: 1, + borderBottomWidth: hairlineWidth, paddingTop: isNative ? 0 : 8, paddingBottom: 8, paddingHorizontal: isMobile ? 12 : 14, From 73c32520ad5a1c269a64ee14a2bf97fceed1a809 Mon Sep 17 00:00:00 2001 From: Hailey Date: Thu, 30 May 2024 20:31:30 -0700 Subject: [PATCH 21/29] account list width 1 --- src/components/AccountList.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/AccountList.tsx b/src/components/AccountList.tsx index 7d696801ed..883c06c144 100644 --- a/src/components/AccountList.tsx +++ b/src/components/AccountList.tsx @@ -37,7 +37,7 @@ export function AccountList({ style={[ a.rounded_md, a.overflow_hidden, - a.border, + {borderWidth: 1}, t.atoms.border_contrast_low, ]}> {accounts.map(account => ( @@ -48,7 +48,7 @@ export function AccountList({ isCurrentAccount={account.did === currentAccount?.did} isPendingAccount={account.did === pendingDid} /> - + ))}