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,16 +171,13 @@ 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
         style={[
           a.flex_1,
+          a.ml_md,
           a.flex_row,
           a.align_center,
           a.justify_between,
-            a.px_md,
-            a.rounded_full,
-            t.atoms.bg_contrast_50,
           {
             height: 40,
           },
@@ -189,14 +186,13 @@ export function ComposerPrompt() {
           style={[
             t.atoms.text_contrast_low,
             a.text_md,
-              a.pl_xs,
             {
               includeFontPadding: false,
             },
           ]}>
           {_(msg`What's up?`)}
         </Text>
-          <View style={[a.flex_row, a.gap_md, a.mr_xs]}>
+        <View style={[a.flex_row, a.gap_md]}>
           {isNative && (
             <Button
               onPress={e => {
@@ -207,11 +203,12 @@ export function ComposerPrompt() {
               accessibilityHint={_(msg`Opens device camera`)}
               variant="ghost"
               shape="round">
-                {({hovered}) => (
+              {({hovered, pressed, focused}) => (
                 <CameraIcon
                   size="md"
                   style={{
-                      color: hovered
+                    color:
+                      hovered || pressed || focused
                         ? t.palette.primary_500
                         : t.palette.contrast_300,
                   }}
@@ -228,11 +225,12 @@ export function ComposerPrompt() {
             accessibilityHint={_(msg`Opens image picker`)}
             variant="ghost"
             shape="round">
-              {({hovered}) => (
+            {({hovered, pressed, focused}) => (
               <ImageIcon
                 size="md"
                 style={{
-                    color: hovered
+                  color:
+                    hovered || pressed || focused
                       ? t.palette.primary_500
                       : t.palette.contrast_300,
                 }}
@@ -241,7 +239,6 @@ export function ComposerPrompt() {
           </Button>
         </View>
       </View>
-      </View>
     </Pressable>
   )
 }