Change post prompt to a set of buttons (#55)

3 files changed, 59 insertions, 4 deletions

diff --git a/src/view/com/posts/Feed.tsx b/src/view/com/posts/Feed.tsx
index 9affd4078..e08702203 100644
--- a/src/view/com/posts/Feed.tsx
+++ b/src/view/com/posts/Feed.tsx
@@ -12,7 +12,7 @@ import {EmptyState} from '../util/EmptyState'
 import {ErrorMessage} from '../util/error/ErrorMessage'
 import {FeedModel} from '../../../state/models/feed-view'
 import {FeedItem} from './FeedItem'
-import {ComposePrompt} from '../composer/Prompt'
+import {PromptButtons} from './PromptButtons'
 import {OnScrollCb} from '../../lib/hooks/useOnMainScroll'
 
 const COMPOSE_PROMPT_ITEM = {_reactKey: '__prompt__'}
@@ -41,7 +41,7 @@ export const Feed = observer(function Feed({
   //   like PureComponent, shouldComponentUpdate, etc
   const renderItem = ({item}: {item: any}) => {
     if (item === COMPOSE_PROMPT_ITEM) {
-      return <ComposePrompt onPressCompose={onPressCompose} />
+      return <PromptButtons onPressCompose={onPressCompose} />
     } else if (item === EMPTY_FEED_ITEM) {
       return (
         <EmptyState
diff --git a/src/view/com/posts/PromptButtons.tsx b/src/view/com/posts/PromptButtons.tsx
new file mode 100644
index 000000000..0e6c500d1
--- /dev/null
+++ b/src/view/com/posts/PromptButtons.tsx
@@ -0,0 +1,48 @@
+import React from 'react'
+import {StyleSheet, TouchableOpacity, View} from 'react-native'
+import {Text} from '../util/text/Text'
+import {usePalette} from '../../lib/hooks/usePalette'
+
+export function PromptButtons({
+  onPressCompose,
+}: {
+  onPressCompose: (imagesOpen?: boolean) => void
+}) {
+  const pal = usePalette('default')
+  return (
+    <View style={[pal.view, pal.border, styles.container]}>
+      <TouchableOpacity
+        testID="composePromptButton"
+        style={[styles.btn, {backgroundColor: pal.colors.backgroundLight}]}
+        onPress={() => onPressCompose(false)}>
+        <Text type="button" style={pal.textLight}>
+          New post
+        </Text>
+      </TouchableOpacity>
+      <TouchableOpacity
+        style={[styles.btn, {backgroundColor: pal.colors.backgroundLight}]}
+        onPress={() => onPressCompose(true)}>
+        <Text type="button" style={pal.textLight}>
+          Share photo
+        </Text>
+      </TouchableOpacity>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    paddingVertical: 12,
+    paddingBottom: 10,
+    paddingHorizontal: 16,
+    flexDirection: 'row',
+    alignItems: 'center',
+    borderTopWidth: 1,
+  },
+  btn: {
+    paddingVertical: 6,
+    paddingHorizontal: 14,
+    borderRadius: 30,
+    marginRight: 10,
+  },
+})
diff --git a/src/view/com/util/ViewHeader.tsx b/src/view/com/util/ViewHeader.tsx
index 07f7bc22f..230273709 100644
--- a/src/view/com/util/ViewHeader.tsx
+++ b/src/view/com/util/ViewHeader.tsx
@@ -135,8 +135,15 @@ const styles = StyleSheet.create({
     fontWeight: 'normal',
   },
 
-  backIcon: {width: 30, height: 30},
-  backIconWide: {width: 40, height: 30},
+  backIcon: {
+    width: 30,
+    height: 30,
+  },
+  backIconWide: {
+    width: 40,
+    height: 30,
+    marginLeft: 6,
+  },
   btn: {
     flexDirection: 'row',
     alignItems: 'center',