sort out positioning, use new icon for fab

src/lib/icons.tsx

@@ -184,47 +184,6 @@ export function RectTallIcon({
   )
 }
 
-export function ComposeIcon2({
-  style,
-  size,
-  strokeWidth = 1.5,
-}: {
-  style?: StyleProp<TextStyle>
-  size?: string | number
-  strokeWidth?: number
-}) {
-  return (
-    <Svg
-      viewBox="0 0 24 24"
-      stroke="currentColor"
-      fill="none"
-      width={size || 24}
-      height={size || 24}
-      style={style}>
-      <Path
-        d="M 20 9 L 20 16 C 20 18.209 18.209 20 16 20 L 8 20 C 5.791 20 4 18.209 4 16 L 4 8 C 4 5.791 5.791 4 8 4 L 15 4"
-        strokeWidth={strokeWidth}
-      />
-      <Line
-        strokeLinecap="round"
-        x1="10"
-        y1="14"
-        x2="18.5"
-        y2="5.5"
-        strokeWidth={strokeWidth * 1.5}
-      />
-      <Line
-        strokeLinecap="round"
-        x1="20.5"
-        y1="3.5"
-        x2="21"
-        y2="3"
-        strokeWidth={strokeWidth * 1.5}
-      />
-    </Svg>
-  )
-}
-
 export function InfoCircleIcon({
   style,
   size,

src/screens/Messages/components/ChatListItem.tsx

@@ -553,11 +553,8 @@ function BaseChatItem({
                   {subtitle && (
                     <Text
                       numberOfLines={1}
-                      style={[
+                      style={[a.text_sm, t.atoms.text_contrast_medium, a.pb_xs]}
-                        a.text_sm,
+                      emoji>
-                        t.atoms.text_contrast_medium,
-                        a.pb_xs,
-                      ]}>
                       {subtitle}
                     </Text>
                   )}

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_FULL_WIDTH = 330
-const RIGHT_NAV_MINIMAL_WIDTH = 280 + 28
+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},
           ]}>
           <ChatListHeader newChatControl={newChatControl} />
           <ChatList
@@ -102,7 +102,12 @@ function MessagesSplitViewLayout({children, navigation, route}: LayoutProps) {
         </View>
       </SplitViewProvider>
       <SplitViewProvider side="right">
-        <View style={[a.border_x, t.atoms.border_contrast_low, {width: 600}]}>
+        <View
+          style={[
+            a.border_x,
+            t.atoms.border_contrast_low,
+            {width: CENTER_COLUMN_WIDTH},
+          ]}>
           {children}
         </View>
       </SplitViewProvider>

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'

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({
         <FAB
           testID="composeFAB"
           onPress={() => openComposer({logContext: 'Fab'})}
-          icon={
+          icon={<EditBigIcon size="lg" fill={t.palette.white} />}
-            <ComposeIcon2
-              strokeWidth={1.5}
-              size={29}
-              style={{color: 'white'}}
-            />
-          }
           accessibilityRole="button"
           accessibilityLabel={_(msg`New post`)}
           accessibilityHint=""

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({
             <FAB
               testID="composeFAB"
               onPress={() => openComposer({logContext: 'Fab'})}
-              icon={
+              icon={<EditBigIcon size="lg" fill={t.palette.white} />}
-                <ComposeIcon2
-                  strokeWidth={1.5}
-                  size={29}
-                  style={{color: 'white'}}
-                />
-              }
               accessibilityRole="button"
               accessibilityLabel={_(msg`New post`)}
               accessibilityHint=""
@@ -281,13 +275,7 @@ function ProfileListScreenLoaded({
           <FAB
             testID="composeFAB"
             onPress={() => openComposer({logContext: 'Fab'})}
-            icon={
+            icon={<EditBigIcon size="lg" fill={t.palette.white} />}
-              <ComposeIcon2
-                strokeWidth={1.5}
-                size={29}
-                style={{color: 'white'}}
-              />
-            }
             accessibilityRole="button"
             accessibilityLabel={_(msg`New post`)}
             accessibilityHint=""

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({
         <FAB
           testID="composeFAB"
           onPress={onPressCompose}
-          icon={<ComposeIcon2 strokeWidth={1.5} size={29} style={s.white} />}
+          icon={<EditBigIcon size="lg" fill={t.palette.white} />}
           accessibilityRole="button"
           accessibilityLabel={_(msg({message: `New post`, context: 'action'}))}
           accessibilityHint=""

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) {
         <FAB
           testID="composeFAB"
           onPress={onPressCompose}
-          icon={<ComposeIcon2 strokeWidth={1.5} size={29} style={s.white} />}
+          icon={<EditBigIcon size="lg" fill={t.palette.white} />}
           accessibilityRole="button"
           accessibilityLabel={_(msg`New post`)}
           accessibilityHint=""

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) {
       <FAB
         testID="composeFAB"
         onPress={() => openComposer({logContext: 'Fab'})}
-        icon={<ComposeIcon2 strokeWidth={1.5} size={29} style={s.white} />}
+        icon={<EditBigIcon size="lg" fill={t.palette.white} />}
         accessibilityRole="button"
         accessibilityLabel={_(msg`New post`)}
         accessibilityHint=""

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({
         <FAB
           testID="composeFAB"
           onPress={onPressCompose}
-          icon={<ComposeIcon2 strokeWidth={1.5} size={29} style={s.white} />}
+          icon={<EditBigIcon size="lg" fill={t.palette.white} />}
           accessibilityRole="button"
           accessibilityLabel={_(msg`New post`)}
           accessibilityHint=""

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}
             </Text>
@@ -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 (
-    <View style={minimal ? [a.p_sm] : [a.flex_row, a.pl_md, a.pt_xl]}>
+    <View style={minimal ? [a.px_sm, a.pt_lg] : [a.flex_row, a.pl_md, a.pt_lg]}>
       <Button
         disabled={isFetchingHandle}
         label={_(msg`Compose new post`)}
         onPress={() => void onPressCompose()}
         size="large"
         color="primary"
-        style={[a.rounded_full, minimal && {width: 56, height: 56}]}>
+        style={[a.rounded_full, minimal && {width: 48, height: 48}]}>
-        <ButtonIcon icon={EditBig} size={minimal ? 'lg' : 'sm'} />
+        <ButtonIcon icon={EditBigIcon} size={minimal ? 'lg' : 'sm'} />
         {!minimal && (
           <ButtonText>
             <Trans context="action">New post</Trans>
@@ -665,7 +651,7 @@ export function DesktopLeftNav({routeName}: {routeName: string}) {
                 -300 +
                 (centerColumnOffset ? CENTER_COLUMN_OFFSET : 0) +
                 (isMessagesRelatedScreen && !leftNavMinimalBreakpoint
-                  ? -130
+                  ? -153
                   : 0),
             },
             {translateX: '-100%'},
@@ -867,10 +853,6 @@ const styles = StyleSheet.create({
     width: 245,
   },
   leftNavMinimal: {
-    paddingTop: 0,
-    paddingBottom: 0,
-    paddingLeft: 0,
-    paddingRight: 0,
     height: '100%',
     width: 86,
     alignItems: 'center',