Web: go lighter for now, ditch the composer prompt in feed

6 files changed, 16 insertions, 66 deletions

diff --git a/src/view/com/posts/ComposerPrompt.tsx b/src/view/com/posts/ComposerPrompt.tsx
deleted file mode 100644
index c367a17fc..000000000
--- a/src/view/com/posts/ComposerPrompt.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-export function ComposerPrompt(_opts: {
-  onPressCompose: (imagesOpen?: boolean) => void
-}) {
-  return null
-}
diff --git a/src/view/com/posts/ComposerPrompt.web.tsx b/src/view/com/posts/ComposerPrompt.web.tsx
deleted file mode 100644
index a87653cf8..000000000
--- a/src/view/com/posts/ComposerPrompt.web.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import React from 'react'
-import {StyleSheet, TouchableWithoutFeedback, View} from 'react-native'
-import {Text} from '../util/text/Text'
-import {usePalette} from 'lib/hooks/usePalette'
-import {s} from 'lib/styles'
-
-export function ComposerPrompt({
-  onPressCompose,
-}: {
-  onPressCompose: (imagesOpen?: boolean) => void
-}) {
-  const pal = usePalette('default')
-  return (
-    <TouchableWithoutFeedback onPress={() => onPressCompose(false)}>
-      <View style={[pal.view, pal.border, styles.container]}>
-        <Text type="xl" style={pal.textLight}>
-          What's up?
-        </Text>
-        <View style={s.flex1} />
-        <View style={[styles.btn, pal.btn]}>
-          <Text>Post</Text>
-        </View>
-      </View>
-    </TouchableWithoutFeedback>
-  )
-}
-
-const styles = StyleSheet.create({
-  container: {
-    paddingVertical: 16,
-    paddingHorizontal: 18,
-    flexDirection: 'row',
-    alignItems: 'center',
-    borderTopWidth: 1,
-  },
-  btn: {
-    paddingVertical: 6,
-    paddingHorizontal: 14,
-    borderRadius: 30,
-  },
-})
diff --git a/src/view/com/posts/Feed.tsx b/src/view/com/posts/Feed.tsx
index 57363ca51..7e5d166d2 100644
--- a/src/view/com/posts/Feed.tsx
+++ b/src/view/com/posts/Feed.tsx
@@ -13,12 +13,10 @@ import {EmptyState} from '../util/EmptyState'
 import {ErrorMessage} from '../util/error/ErrorMessage'
 import {FeedModel} from 'state/models/feed-view'
 import {FeedItem} from './FeedItem'
-import {ComposerPrompt} from './ComposerPrompt'
 import {OnScrollCb} from 'lib/hooks/useOnMainScroll'
 import {s} from 'lib/styles'
 import {useAnalytics} from 'lib/analytics'
 
-const COMPOSE_PROMPT_ITEM = {_reactKey: '__prompt__'}
 const EMPTY_FEED_ITEM = {_reactKey: '__empty__'}
 const ERROR_FEED_ITEM = {_reactKey: '__error__'}
 
@@ -27,7 +25,6 @@ export const Feed = observer(function Feed({
   style,
   scrollElRef,
   onPressTryAgain,
-  onPressCompose,
   onScroll,
   testID,
   headerOffset = 0,
@@ -36,7 +33,6 @@ export const Feed = observer(function Feed({
   style?: StyleProp<ViewStyle>
   scrollElRef?: MutableRefObject<FlatList<any> | null>
   onPressTryAgain?: () => void
-  onPressCompose: (imagesOpen?: boolean) => void
   onScroll?: OnScrollCb
   testID?: string
   headerOffset?: number
@@ -47,7 +43,6 @@ export const Feed = observer(function Feed({
   const data = React.useMemo(() => {
     let feedItems: any[] = []
     if (feed.hasLoaded) {
-      feedItems = feedItems.concat([COMPOSE_PROMPT_ITEM])
       if (feed.hasError) {
         feedItems = feedItems.concat([ERROR_FEED_ITEM])
       }
@@ -91,9 +86,7 @@ export const Feed = observer(function Feed({
   //   like PureComponent, shouldComponentUpdate, etc
   const renderItem = React.useCallback(
     ({item}: {item: any}) => {
-      if (item === COMPOSE_PROMPT_ITEM) {
-        return <ComposerPrompt onPressCompose={onPressCompose} />
-      } else if (item === EMPTY_FEED_ITEM) {
+      if (item === EMPTY_FEED_ITEM) {
         return (
           <EmptyState
             icon="bars"
@@ -111,7 +104,7 @@ export const Feed = observer(function Feed({
       }
       return <FeedItem item={item} />
     },
-    [feed, onPressTryAgain, onPressCompose],
+    [feed, onPressTryAgain],
   )
 
   const FeedFooter = React.useCallback(
diff --git a/src/view/screens/Home.tsx b/src/view/screens/Home.tsx
index 125c57406..0e9cdd48d 100644
--- a/src/view/screens/Home.tsx
+++ b/src/view/screens/Home.tsx
@@ -11,7 +11,7 @@ import {ScreenParams} from '../routes'
 import {s} from 'lib/styles'
 import {useOnMainScroll} from 'lib/hooks/useOnMainScroll'
 import {useAnalytics} from 'lib/analytics'
-import {isWeb} from 'platform/detection'
+import {isWeb} from '../../platform/detection'
 
 const HEADER_HEIGHT = 42
 
@@ -100,7 +100,6 @@ export const Home = observer(function Home({navIdx, visible}: ScreenParams) {
         scrollElRef={scrollElRef}
         style={s.h100pct}
         onPressTryAgain={onPressTryAgain}
-        onPressCompose={onPressCompose}
         onScroll={onMainScroll}
         headerOffset={HEADER_HEIGHT}
       />
diff --git a/src/view/shell/web/DesktopHeader.tsx b/src/view/shell/web/DesktopHeader.tsx
index acef3d9ba..bc72b40ba 100644
--- a/src/view/shell/web/DesktopHeader.tsx
+++ b/src/view/shell/web/DesktopHeader.tsx
@@ -92,27 +92,27 @@ export const DesktopHeader = observer(function DesktopHeader({}: {
   const onPressCompose = () => store.shell.openComposer({})
   return (
     <View style={[styles.header, pal.borderDark, pal.view]}>
-      <Text type="title-2xl" style={[pal.text, styles.title]}>
+      <Text type="title-xl" style={[pal.text, styles.title]}>
         Bluesky
       </Text>
       <View style={styles.space30} />
       <NavItem
         href="/"
-        icon={<HomeIcon size={28} />}
-        iconFilled={<HomeIconSolid size={28} />}
+        icon={<HomeIcon size={24} />}
+        iconFilled={<HomeIconSolid size={24} />}
       />
       <View style={styles.space15} />
       <NavItem
         href="/search"
-        icon={<MagnifyingGlassIcon size={28} />}
-        iconFilled={<MagnifyingGlassIcon strokeWidth={3} size={28} />}
+        icon={<MagnifyingGlassIcon size={24} />}
+        iconFilled={<MagnifyingGlassIcon strokeWidth={3} size={24} />}
       />
       <View style={styles.space15} />
       <NavItem
         href="/notifications"
         count={store.me.notifications.unreadCount}
-        icon={<BellIcon size={28} />}
-        iconFilled={<BellIconSolid size={28} />}
+        icon={<BellIcon size={24} />}
+        iconFilled={<BellIconSolid size={24} />}
       />
       <View style={styles.spaceFlex} />
       <TouchableOpacity style={[styles.newPostBtn]} onPress={onPressCompose}>
@@ -191,6 +191,10 @@ const styles = StyleSheet.create({
     backgroundColor: colors.blue3,
   },
   navItemIconWrapper: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: 28,
+    height: 28,
     marginBottom: 2,
   },
   navItemCount: {
diff --git a/src/view/shell/web/index.tsx b/src/view/shell/web/index.tsx
index 5258257f7..fff34b1ce 100644
--- a/src/view/shell/web/index.tsx
+++ b/src/view/shell/web/index.tsx
@@ -131,10 +131,10 @@ const styles = StyleSheet.create({
     height: '100%',
   },
   bgLight: {
-    backgroundColor: colors.gray1,
+    backgroundColor: colors.white,
   },
   bgDark: {
-    backgroundColor: colors.gray1, // TODO
+    backgroundColor: colors.black, // TODO
   },
   visible: {
     display: 'flex',