diff --git a/src/lib/icons.tsx b/src/lib/icons.tsx index 4bea1ebeff..3d67dd10b2 100644 --- a/src/lib/icons.tsx +++ b/src/lib/icons.tsx @@ -184,47 +184,6 @@ export function RectTallIcon({ ) } -export function ComposeIcon2({ - style, - size, - strokeWidth = 1.5, -}: { - style?: StyleProp - size?: string | number - strokeWidth?: number -}) { - return ( - - - - - - ) -} - export function InfoCircleIcon({ style, size, diff --git a/src/screens/Messages/components/ChatListItem.tsx b/src/screens/Messages/components/ChatListItem.tsx index e3537e9a5d..5ac1d0701d 100644 --- a/src/screens/Messages/components/ChatListItem.tsx +++ b/src/screens/Messages/components/ChatListItem.tsx @@ -553,11 +553,8 @@ function BaseChatItem({ {subtitle && ( + style={[a.text_sm, t.atoms.text_contrast_medium, a.pb_xs]} + emoji> {subtitle} )} diff --git a/src/screens/Messages/components/splitView/MessagesSplitViewLayout.tsx b/src/screens/Messages/components/splitView/MessagesSplitViewLayout.tsx index 8b8da31eb1..38ebd28db2 100644 --- a/src/screens/Messages/components/splitView/MessagesSplitViewLayout.tsx +++ b/src/screens/Messages/components/splitView/MessagesSplitViewLayout.tsx @@ -17,8 +17,8 @@ import {SplitViewProvider} from './context' const CENTER_COLUMN_WIDTH = 600 const LEFT_NAV_FULL_WIDTH = 245 const LEFT_NAV_MINIMAL_WIDTH = 86 -const RIGHT_NAV_FULL_WIDTH = 330 + 28 -const RIGHT_NAV_MINIMAL_WIDTH = 280 + 28 +const RIGHT_NAV_FULL_WIDTH = 330 +const RIGHT_NAV_MINIMAL_WIDTH = 280 type MessageScreens = | 'Messages' @@ -80,7 +80,7 @@ function MessagesSplitViewLayout({children, navigation, route}: LayoutProps) { {maxWidth: containerWidth}, { transform: [ - {translateX: LEFT_NAV_MINIMAL_WIDTH / 2}, + {translateX: LEFT_NAV_MINIMAL_WIDTH}, {translateX: web(SCROLLBAR_OFFSET) ?? 0}, ], }, @@ -91,7 +91,7 @@ function MessagesSplitViewLayout({children, navigation, route}: LayoutProps) { style={[ a.border_l, t.atoms.border_contrast_low, - {width: centerColumnOffset ? 300 : 350}, + {width: containerWidth - CENTER_COLUMN_WIDTH}, ]}> - + {children} diff --git a/src/screens/Moderation/index.tsx b/src/screens/Moderation/index.tsx index dc5e6b1ad0..5bd36e3374 100644 --- a/src/screens/Moderation/index.tsx +++ b/src/screens/Moderation/index.tsx @@ -32,7 +32,7 @@ import {ChevronRight_Stroke2_Corner0_Rounded as ChevronRight} from '#/components import {CircleBanSign_Stroke2_Corner0_Rounded as CircleBanSign} from '#/components/icons/CircleBanSign' import {CircleCheck_Stroke2_Corner0_Rounded as CircleCheck} from '#/components/icons/CircleCheck' import {type Props as SVGIconProps} from '#/components/icons/common' -import {EditBig_Stroke2_Corner0_Rounded as EditBig} from '#/components/icons/EditBig' +import {EditBig_Stroke2_Corner2_Rounded as EditBig} from '#/components/icons/EditBig' import {Filter_Stroke2_Corner0_Rounded as Filter} from '#/components/icons/Filter' import {Group3_Stroke2_Corner0_Rounded as Group} from '#/components/icons/Group' import {Person_Stroke2_Corner0_Rounded as Person} from '#/components/icons/Person' diff --git a/src/screens/Profile/ProfileFeed/index.tsx b/src/screens/Profile/ProfileFeed/index.tsx index 634779f9db..6ed5f4b5b6 100644 --- a/src/screens/Profile/ProfileFeed/index.tsx +++ b/src/screens/Profile/ProfileFeed/index.tsx @@ -10,7 +10,6 @@ import {useQueryClient} from '@tanstack/react-query' import {VIDEO_FEED_URIS} from '#/lib/constants' import {useOpenComposer} from '#/lib/hooks/useOpenComposer' import {useSetTitle} from '#/lib/hooks/useSetTitle' -import {ComposeIcon2} from '#/lib/icons' import {type CommonNavigatorParams} from '#/lib/routes/types' import {cleanError} from '#/lib/strings/errors' import {makeRecordUri} from '#/lib/strings/url-helpers' @@ -40,6 +39,8 @@ import { ProfileFeedHeader, ProfileFeedHeaderSkeleton, } from '#/screens/Profile/components/ProfileFeedHeader' +import {useTheme} from '#/alf' +import {EditBig_Stroke2_Corner2_Rounded as EditBigIcon} from '#/components/icons/EditBig' import {HashtagWide_Stroke1_Corner0_Rounded as HashtagWideIcon} from '#/components/icons/Hashtag' import * as Layout from '#/components/Layout' import {IS_NATIVE} from '#/env' @@ -134,6 +135,7 @@ export function ProfileFeedScreenInner({ const {hasSession} = useSession() const {openComposer} = useOpenComposer() const isScreenFocused = useIsFocused() + const t = useTheme() useSetTitle(feedInfo?.displayName) @@ -210,13 +212,7 @@ export function ProfileFeedScreenInner({ openComposer({logContext: 'Fab'})} - icon={ - - } + icon={} accessibilityRole="button" accessibilityLabel={_(msg`New post`)} accessibilityHint="" diff --git a/src/screens/ProfileList/index.tsx b/src/screens/ProfileList/index.tsx index a090675eb5..77af470cd5 100644 --- a/src/screens/ProfileList/index.tsx +++ b/src/screens/ProfileList/index.tsx @@ -15,7 +15,6 @@ import {useQueryClient} from '@tanstack/react-query' import {useOpenComposer} from '#/lib/hooks/useOpenComposer' import {useSetTitle} from '#/lib/hooks/useSetTitle' -import {ComposeIcon2} from '#/lib/icons' import { type CommonNavigatorParams, type NativeStackScreenProps, @@ -38,6 +37,7 @@ import {ListHiddenScreen} from '#/screens/List/ListHiddenScreen' import {atoms as a, native, platform, useTheme} from '#/alf' import {useDialogControl} from '#/components/Dialog' import {ListAddRemoveUsersDialog} from '#/components/dialogs/lists/ListAddRemoveUsersDialog' +import {EditBig_Stroke2_Corner2_Rounded as EditBigIcon} from '#/components/icons/EditBig' import * as Layout from '#/components/Layout' import {Loader} from '#/components/Loader' import * as Hider from '#/components/moderation/Hider' @@ -232,13 +232,7 @@ function ProfileListScreenLoaded({ openComposer({logContext: 'Fab'})} - icon={ - - } + icon={} accessibilityRole="button" accessibilityLabel={_(msg`New post`)} accessibilityHint="" @@ -281,13 +275,7 @@ function ProfileListScreenLoaded({ openComposer({logContext: 'Fab'})} - icon={ - - } + icon={} accessibilityRole="button" accessibilityLabel={_(msg`New post`)} accessibilityHint="" diff --git a/src/view/com/feeds/FeedPage.tsx b/src/view/com/feeds/FeedPage.tsx index faf17e7168..331c62e0d1 100644 --- a/src/view/com/feeds/FeedPage.tsx +++ b/src/view/com/feeds/FeedPage.tsx @@ -15,10 +15,8 @@ import {useQueryClient} from '@tanstack/react-query' import {DISCOVER_FEED_URI, VIDEO_FEED_URIS} from '#/lib/constants' import {useOpenComposer} from '#/lib/hooks/useOpenComposer' -import {ComposeIcon2} from '#/lib/icons' import {getRootNavigation, getTabState, TabState} from '#/lib/routes/helpers' import {type AllNavigatorParams} from '#/lib/routes/types' -import {s} from '#/lib/styles' import {listenSoftReset} from '#/state/events' import {FeedFeedbackProvider, useFeedFeedback} from '#/state/feed-feedback' import {useSetHomeBadge} from '#/state/home-badge' @@ -30,14 +28,16 @@ import { } from '#/state/queries/post-feed' import {truncateAndInvalidate} from '#/state/queries/util' import {useSession} from '#/state/session' +import {PostFeed} from '#/view/com/posts/PostFeed' +import {FAB} from '#/view/com/util/fab/FAB' +import {type ListMethods} from '#/view/com/util/List' +import {LoadLatestBtn} from '#/view/com/util/load-latest/LoadLatestBtn' +import {MainScrollProvider} from '#/view/com/util/MainScrollProvider' +import {useTheme} from '#/alf' import {useHeaderOffset} from '#/components/hooks/useHeaderOffset' +import {EditBig_Stroke2_Corner2_Rounded as EditBigIcon} from '#/components/icons/EditBig' import {useAnalytics} from '#/analytics' import {IS_NATIVE} from '#/env' -import {PostFeed} from '../posts/PostFeed' -import {FAB} from '../util/fab/FAB' -import {type ListMethods} from '../util/List' -import {LoadLatestBtn} from '../util/load-latest/LoadLatestBtn' -import {MainScrollProvider} from '../util/MainScrollProvider' const POLL_FREQ = 60e3 // 60sec @@ -81,6 +81,7 @@ export function FeedPage({ const _isVideoFeed = isBskyVideoFeed || feedIsVideoMode return IS_NATIVE && _isVideoFeed }, [feedInfo]) + const t = useTheme() useEffect(() => { if (isPageFocused) { @@ -173,7 +174,7 @@ export function FeedPage({ } + icon={} accessibilityRole="button" accessibilityLabel={_(msg({message: `New post`, context: 'action'}))} accessibilityHint="" diff --git a/src/view/screens/Feeds.tsx b/src/view/screens/Feeds.tsx index 5552e88490..971c63734d 100644 --- a/src/view/screens/Feeds.tsx +++ b/src/view/screens/Feeds.tsx @@ -9,7 +9,6 @@ import debounce from 'lodash.debounce' import {useOpenComposer} from '#/lib/hooks/useOpenComposer' import {usePalette} from '#/lib/hooks/usePalette' import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries' -import {ComposeIcon2} from '#/lib/icons' import { type CommonNavigatorParams, type NativeStackScreenProps, @@ -37,6 +36,7 @@ import * as FeedCard from '#/components/FeedCard' import {SearchInput} from '#/components/forms/SearchInput' import {IconCircle} from '#/components/IconCircle' import {ChevronRight_Stroke2_Corner0_Rounded as ChevronRight} from '#/components/icons/Chevron' +import {EditBig_Stroke2_Corner2_Rounded as EditBigIcon} from '#/components/icons/EditBig' 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' @@ -104,6 +104,7 @@ type FlatlistSlice = export function FeedsScreen(_props: Props) { const pal = usePalette('default') + const t = useTheme() const {openComposer} = useOpenComposer() const {isMobile} = useWebMediaQueries() const [query, setQuery] = useState('') @@ -539,7 +540,7 @@ export function FeedsScreen(_props: Props) { } + icon={} accessibilityRole="button" accessibilityLabel={_(msg`New post`)} accessibilityHint="" diff --git a/src/view/screens/Notifications.tsx b/src/view/screens/Notifications.tsx index 3423d689a7..d35d0274e7 100644 --- a/src/view/screens/Notifications.tsx +++ b/src/view/screens/Notifications.tsx @@ -8,12 +8,10 @@ import {useQueryClient} from '@tanstack/react-query' import {useNonReactiveCallback} from '#/lib/hooks/useNonReactiveCallback' import {useOpenComposer} from '#/lib/hooks/useOpenComposer' -import {ComposeIcon2} from '#/lib/icons' import { type NativeStackScreenProps, type NotificationsTabNavigatorParams, } from '#/lib/routes/types' -import {s} from '#/lib/styles' import {logger} from '#/logger' import {emitSoftReset, listenSoftReset} from '#/state/events' import {RQKEY as NOTIFS_RQKEY} from '#/state/queries/notifications/feed' @@ -33,6 +31,7 @@ import {MainScrollProvider} from '#/view/com/util/MainScrollProvider' import {atoms as a, useTheme, web} from '#/alf' import {Admonition} from '#/components/Admonition' import {ButtonIcon} from '#/components/Button' +import {EditBig_Stroke2_Corner2_Rounded as EditBigIcon} from '#/components/icons/EditBig' import {SettingsGear2_Stroke2_Corner0_Rounded as SettingsIcon} from '#/components/icons/SettingsGear2' import * as Layout from '#/components/Layout' import {InlineLinkText, Link} from '#/components/Link' @@ -50,6 +49,7 @@ type Props = NativeStackScreenProps< > export function NotificationsScreen({}: Props) { const {_} = useLingui() + const t = useTheme() const {openComposer} = useOpenComposer() const unreadNotifs = useUnreadNotifications() const hasNew = !!unreadNotifs @@ -161,7 +161,7 @@ export function NotificationsScreen({}: Props) { openComposer({logContext: 'Fab'})} - icon={} + icon={} accessibilityRole="button" accessibilityLabel={_(msg`New post`)} accessibilityHint="" diff --git a/src/view/screens/Profile.tsx b/src/view/screens/Profile.tsx index a8e07cb59b..35718b9589 100644 --- a/src/view/screens/Profile.tsx +++ b/src/view/screens/Profile.tsx @@ -16,7 +16,6 @@ import {useQueryClient} from '@tanstack/react-query' import {useOpenComposer} from '#/lib/hooks/useOpenComposer' import {useRequireEmailVerification} from '#/lib/hooks/useRequireEmailVerification' import {useSetTitle} from '#/lib/hooks/useSetTitle' -import {ComposeIcon2} from '#/lib/icons' import { type CommonNavigatorParams, type NativeStackScreenProps, @@ -25,7 +24,7 @@ import { import {combinedDisplayName} from '#/lib/strings/display-names' import {cleanError} from '#/lib/strings/errors' import {isInvalidHandle} from '#/lib/strings/handles' -import {colors, s} from '#/lib/styles' +import {colors} from '#/lib/styles' import {useProfileShadow} from '#/state/cache/profile-shadow' import {listenSoftReset} from '#/state/events' import {useModerationOpts} from '#/state/preferences/moderation-opts' @@ -43,8 +42,9 @@ import {type ListRef} from '#/view/com/util/List' import {ProfileHeader, ProfileHeaderLoading} from '#/screens/Profile/Header' import {ProfileFeedSection} from '#/screens/Profile/Sections/Feed' import {ProfileLabelsSection} from '#/screens/Profile/Sections/Labels' -import {atoms as a} from '#/alf' +import {atoms as a, useTheme} from '#/alf' import {Circle_And_Square_Stroke1_Corner0_Rounded_Filled as CircleAndSquareIcon} from '#/components/icons/CircleAndSquare' +import {EditBig_Stroke2_Corner2_Rounded as EditBigIcon} from '#/components/icons/EditBig' import {Heart2_Stroke1_Corner0_Rounded as HeartIcon} from '#/components/icons/Heart2' import {Image_Stroke1_Corner0_Rounded as ImageIcon} from '#/components/icons/Image' import {Message_Stroke1_Corner0_Rounded_Filled as MessageIcon} from '#/components/icons/Message' @@ -172,6 +172,7 @@ function ProfileScreenLoaded({ hideBackButton: boolean isPlaceholderProfile: boolean }) { + const t = useTheme() const profile = useProfileShadow(profileUnshadowed) const {hasSession, currentAccount} = useSession() const {openComposer} = useOpenComposer() @@ -587,7 +588,7 @@ function ProfileScreenLoaded({ } + icon={} accessibilityRole="button" accessibilityLabel={_(msg`New post`)} accessibilityHint="" diff --git a/src/view/shell/desktop/LeftNav.tsx b/src/view/shell/desktop/LeftNav.tsx index d9358ca136..5ce5f9e696 100644 --- a/src/view/shell/desktop/LeftNav.tsx +++ b/src/view/shell/desktop/LeftNav.tsx @@ -49,7 +49,7 @@ import { BulletList_Stroke2_Corner0_Rounded as List, } from '#/components/icons/BulletList' import {DotGrid3x1_Stroke2_Corner0_Rounded as EllipsisIcon} from '#/components/icons/DotGrid' -import {EditBig_Stroke2_Corner0_Rounded as EditBig} from '#/components/icons/EditBig' +import {EditBig_Stroke2_Corner2_Rounded as EditBigIcon} from '#/components/icons/EditBig' import { Hashtag_Filled_Corner0_Rounded as HashtagFilled, Hashtag_Stroke2_Corner0_Rounded as Hashtag, @@ -81,8 +81,8 @@ import * as Prompt from '#/components/Prompt' import {Text} from '#/components/Typography' import {useAgeAssurance} from '#/ageAssurance' import {useActorStatus} from '#/features/liveNow' +import {router} from '#/routes' import {PlatformInfo} from '../../../../modules/expo-bluesky-swiss-army' -import {router} from '../../../routes' const NAV_ICON_WIDTH = 28 @@ -458,10 +458,6 @@ function NavItem({ width: 24, height: 24, }, - minimal && { - width: 30, - height: 30, - }, ]}> {isCurrent || isRelated ? iconFilled : icon} {typeof count === 'string' && count ? ( @@ -499,12 +495,6 @@ function NavItem({ paddingVertical: 1, minWidth: 16, }, - minimal && [ - { - top: '10%', - left: count.length === 1 ? 20 : 16, - }, - ], ]}> {count} @@ -522,10 +512,6 @@ function NavItem({ right: -2, top: -4, }, - minimal && { - right: 4, - top: 2, - }, ]} /> ) : null} @@ -584,15 +570,15 @@ function ComposeBtn({minimal}: {minimal: boolean}) { openComposer({mention: await getProfileHandle(), logContext: 'Fab'}) return ( - +