Make post composer prompt look less like a search field (#9492)

* Make post composer prompt look less like a search field

* change color on press

---------

Co-authored-by: Samuel Newman <mozzius@protonmail.com>

src/logger/metrics.ts

@@ -203,7 +203,6 @@ export type MetricEvents = {
 
   'composer:gif:open': {}
   'composer:gif:select': {}
-  'postComposer:click': {}
   'composerPrompt:press': {}
   'composerPrompt:camera:press': {}
   'composerPrompt:gallery:press': {}

src/view/com/feeds/ComposerPrompt.tsx

@@ -1,4 +1,4 @@
-import React, {useCallback, useState} from 'react'
+import {useCallback, useState} from 'react'
 import {Keyboard, Pressable, View} from 'react-native'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
@@ -34,7 +34,7 @@ export function ComposerPrompt() {
   const {requestVideoAccessIfNeeded} = useVideoLibraryPermission()
   const sheetWrapper = useSheetWrapper()
 
-  const onPress = React.useCallback(() => {
+  const onPress = useCallback(() => {
     logger.metric('composerPrompt:press', {})
     openComposer({})
   }, [openComposer])
@@ -171,75 +171,72 @@ export function ComposerPrompt() {
         size={40}
         type={profile.associated?.labeler ? 'labeler' : 'user'}
       />
-      <View style={[a.flex_1, a.ml_md, a.flex_row, a.align_center, a.gap_xs]}>
+      <View
-        <View
+        style={[
+          a.flex_1,
+          a.ml_md,
+          a.flex_row,
+          a.align_center,
+          a.justify_between,
+          {
+            height: 40,
+          },
+        ]}>
+        <Text
           style={[
-            a.flex_1,
+            t.atoms.text_contrast_low,
-            a.flex_row,
+            a.text_md,
-            a.align_center,
-            a.justify_between,
-            a.px_md,
-            a.rounded_full,
-            t.atoms.bg_contrast_50,
             {
-              height: 40,
+              includeFontPadding: false,
             },
           ]}>
-          <Text
+          {_(msg`What's up?`)}
-            style={[
+        </Text>
-              t.atoms.text_contrast_low,
+        <View style={[a.flex_row, a.gap_md]}>
-              a.text_md,
+          {isNative && (
-              a.pl_xs,
-              {
-                includeFontPadding: false,
-              },
-            ]}>
-            {_(msg`What's up?`)}
-          </Text>
-          <View style={[a.flex_row, a.gap_md, a.mr_xs]}>
-            {isNative && (
-              <Button
-                onPress={e => {
-                  e.stopPropagation()
-                  onPressCamera()
-                }}
-                label={_(msg`Open camera`)}
-                accessibilityHint={_(msg`Opens device camera`)}
-                variant="ghost"
-                shape="round">
-                {({hovered}) => (
-                  <CameraIcon
-                    size="md"
-                    style={{
-                      color: hovered
-                        ? t.palette.primary_500
-                        : t.palette.contrast_300,
-                    }}
-                  />
-                )}
-              </Button>
-            )}
             <Button
               onPress={e => {
                 e.stopPropagation()
-                onPressImage()
+                onPressCamera()
               }}
-              label={_(msg`Add image`)}
+              label={_(msg`Open camera`)}
-              accessibilityHint={_(msg`Opens image picker`)}
+              accessibilityHint={_(msg`Opens device camera`)}
               variant="ghost"
               shape="round">
-              {({hovered}) => (
+              {({hovered, pressed, focused}) => (
-                <ImageIcon
+                <CameraIcon
                   size="md"
                   style={{
-                    color: hovered
+                    color:
-                      ? t.palette.primary_500
+                      hovered || pressed || focused
-                      : t.palette.contrast_300,
+                        ? t.palette.primary_500
+                        : t.palette.contrast_300,
                   }}
                 />
               )}
             </Button>
-          </View>
+          )}
+          <Button
+            onPress={e => {
+              e.stopPropagation()
+              onPressImage()
+            }}
+            label={_(msg`Add image`)}
+            accessibilityHint={_(msg`Opens image picker`)}
+            variant="ghost"
+            shape="round">
+            {({hovered, pressed, focused}) => (
+              <ImageIcon
+                size="md"
+                style={{
+                  color:
+                    hovered || pressed || focused
+                      ? t.palette.primary_500
+                      : t.palette.contrast_300,
+                }}
+              />
+            )}
+          </Button>
         </View>
       </View>
     </Pressable>