forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
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>
authored by
Alex Benzer
Samuel Newman
and committed by
GitHub
8637ba75
ad60be6c
+52
-56
-1
src/logger/metrics.ts
-1
src/logger/metrics.ts
+52
-55
src/view/com/feeds/ComposerPrompt.tsx
+52
-55
src/view/com/feeds/ComposerPrompt.tsx
···
1
-
import React, {useCallback, useState} from 'react'
1
+
import {useCallback, useState} from 'react'
2
2
import {Keyboard, Pressable, View} from 'react-native'
3
3
import {msg} from '@lingui/macro'
4
4
import {useLingui} from '@lingui/react'
···
34
34
const {requestVideoAccessIfNeeded} = useVideoLibraryPermission()
35
35
const sheetWrapper = useSheetWrapper()
36
36
37
-
const onPress = React.useCallback(() => {
37
+
const onPress = useCallback(() => {
38
38
logger.metric('composerPrompt:press', {})
39
39
openComposer({})
40
40
}, [openComposer])
···
171
171
size={40}
172
172
type={profile.associated?.labeler ? 'labeler' : 'user'}
173
173
/>
174
-
<View style={[a.flex_1, a.ml_md, a.flex_row, a.align_center, a.gap_xs]}>
175
-
<View
174
+
<View
175
+
style={[
176
+
a.flex_1,
177
+
a.ml_md,
178
+
a.flex_row,
179
+
a.align_center,
180
+
a.justify_between,
181
+
{
182
+
height: 40,
183
+
},
184
+
]}>
185
+
<Text
176
186
style={[
177
-
a.flex_1,
178
-
a.flex_row,
179
-
a.align_center,
180
-
a.justify_between,
181
-
a.px_md,
182
-
a.rounded_full,
183
-
t.atoms.bg_contrast_50,
187
+
t.atoms.text_contrast_low,
188
+
a.text_md,
184
189
{
185
-
height: 40,
190
+
includeFontPadding: false,
186
191
},
187
192
]}>
188
-
<Text
189
-
style={[
190
-
t.atoms.text_contrast_low,
191
-
a.text_md,
192
-
a.pl_xs,
193
-
{
194
-
includeFontPadding: false,
195
-
},
196
-
]}>
197
-
{_(msg`What's up?`)}
198
-
</Text>
199
-
<View style={[a.flex_row, a.gap_md, a.mr_xs]}>
200
-
{isNative && (
201
-
<Button
202
-
onPress={e => {
203
-
e.stopPropagation()
204
-
onPressCamera()
205
-
}}
206
-
label={_(msg`Open camera`)}
207
-
accessibilityHint={_(msg`Opens device camera`)}
208
-
variant="ghost"
209
-
shape="round">
210
-
{({hovered}) => (
211
-
<CameraIcon
212
-
size="md"
213
-
style={{
214
-
color: hovered
215
-
? t.palette.primary_500
216
-
: t.palette.contrast_300,
217
-
}}
218
-
/>
219
-
)}
220
-
</Button>
221
-
)}
193
+
{_(msg`What's up?`)}
194
+
</Text>
195
+
<View style={[a.flex_row, a.gap_md]}>
196
+
{isNative && (
222
197
<Button
223
198
onPress={e => {
224
199
e.stopPropagation()
225
-
onPressImage()
200
+
onPressCamera()
226
201
}}
227
-
label={_(msg`Add image`)}
228
-
accessibilityHint={_(msg`Opens image picker`)}
202
+
label={_(msg`Open camera`)}
203
+
accessibilityHint={_(msg`Opens device camera`)}
229
204
variant="ghost"
230
205
shape="round">
231
-
{({hovered}) => (
232
-
<ImageIcon
206
+
{({hovered, pressed, focused}) => (
207
+
<CameraIcon
233
208
size="md"
234
209
style={{
235
-
color: hovered
236
-
? t.palette.primary_500
237
-
: t.palette.contrast_300,
210
+
color:
211
+
hovered || pressed || focused
212
+
? t.palette.primary_500
213
+
: t.palette.contrast_300,
238
214
}}
239
215
/>
240
216
)}
241
217
</Button>
242
-
</View>
218
+
)}
219
+
<Button
220
+
onPress={e => {
221
+
e.stopPropagation()
222
+
onPressImage()
223
+
}}
224
+
label={_(msg`Add image`)}
225
+
accessibilityHint={_(msg`Opens image picker`)}
226
+
variant="ghost"
227
+
shape="round">
228
+
{({hovered, pressed, focused}) => (
229
+
<ImageIcon
230
+
size="md"
231
+
style={{
232
+
color:
233
+
hovered || pressed || focused
234
+
? t.palette.primary_500
235
+
: t.palette.contrast_300,
236
+
}}
237
+
/>
238
+
)}
239
+
</Button>
243
240
</View>
244
241
</View>
245
242
</Pressable>