quilling.dev
An ATproto social media client -- with an independent Appview.
ALF post button (#4767)
hailey.at
+35
-38
+35
-38
src/view/com/composer/Composer.tsx
+35
-38
src/view/com/composer/Composer.tsx
···
14
14
KeyboardAvoidingView,
15
15
LayoutChangeEvent,
16
16
StyleSheet,
17
-
TouchableOpacity,
18
17
View,
19
18
} from 'react-native'
20
19
import Animated, {
···
24
23
withTiming,
25
24
} from 'react-native-reanimated'
26
25
import {useSafeAreaInsets} from 'react-native-safe-area-context'
27
-
import {LinearGradient} from 'expo-linear-gradient'
28
26
import {
29
27
AppBskyFeedDefs,
30
28
AppBskyFeedGetPostThread,
···
61
59
import {useComposerControls} from '#/state/shell/composer'
62
60
import {useAnalytics} from 'lib/analytics/analytics'
63
61
import * as apilib from 'lib/api/index'
64
-
import {HITSLOP_10, MAX_GRAPHEME_LENGTH} from 'lib/constants'
62
+
import {MAX_GRAPHEME_LENGTH} from 'lib/constants'
65
63
import {useIsKeyboardVisible} from 'lib/hooks/useIsKeyboardVisible'
66
64
import {usePalette} from 'lib/hooks/usePalette'
67
65
import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
68
66
import {cleanError} from 'lib/strings/errors'
69
67
import {insertMentionAt} from 'lib/strings/mention-manip'
70
68
import {shortenLinks} from 'lib/strings/rich-text-manip'
71
-
import {colors, gradients, s} from 'lib/styles'
69
+
import {colors, s} from 'lib/styles'
72
70
import {isAndroid, isIOS, isNative, isWeb} from 'platform/detection'
73
71
import {useDialogStateControlContext} from 'state/dialogs'
74
72
import {GalleryModel} from 'state/models/media/gallery'
75
73
import {ComposerOpts} from 'state/shell/composer'
76
74
import {ComposerReplyTo} from 'view/com/composer/ComposerReplyTo'
77
75
import {atoms as a, useTheme} from '#/alf'
78
-
import {Button} from '#/components/Button'
76
+
import {Button, ButtonText} from '#/components/Button'
79
77
import {EmojiArc_Stroke2_Corner0_Rounded as EmojiSmile} from '#/components/icons/Emoji'
80
78
import * as Prompt from '#/components/Prompt'
81
79
import {QuoteEmbed, QuoteX} from '../util/post-embeds/QuoteEmbed'
···
458
456
<View style={[a.flex_1, viewStyles]} aria-modal accessibilityViewIsModal>
459
457
<Animated.View style={topBarAnimatedStyle}>
460
458
<View style={styles.topbarInner}>
461
-
<TouchableOpacity
462
-
testID="composerDiscardButton"
459
+
<Button
460
+
label={_(msg`Cancel`)}
461
+
variant="ghost"
462
+
color="primary"
463
+
shape="default"
464
+
size="small"
465
+
style={[
466
+
a.rounded_full,
467
+
a.py_sm,
468
+
{paddingLeft: 7, paddingRight: 7},
469
+
]}
463
470
onPress={onPressCancel}
464
-
onAccessibilityEscape={onPressCancel}
465
-
accessibilityRole="button"
466
-
accessibilityLabel={_(msg`Cancel`)}
467
471
accessibilityHint={_(
468
472
msg`Closes post composer and discards post draft`,
469
-
)}
470
-
hitSlop={HITSLOP_10}>
471
-
<Text style={[pal.link, s.f18]}>
473
+
)}>
474
+
<ButtonText style={[a.text_md]}>
472
475
<Trans>Cancel</Trans>
473
-
</Text>
474
-
</TouchableOpacity>
476
+
</ButtonText>
477
+
</Button>
475
478
<View style={a.flex_1} />
476
479
{isProcessing ? (
477
480
<>
···
488
491
hasMedia={hasMedia}
489
492
/>
490
493
{canPost ? (
491
-
<TouchableOpacity
494
+
<Button
492
495
testID="composerPublishBtn"
493
-
onPress={onPressPublish}
494
-
accessibilityRole="button"
495
-
accessibilityLabel={
496
+
label={
496
497
replyTo ? _(msg`Publish reply`) : _(msg`Publish post`)
497
498
}
498
-
accessibilityHint="">
499
-
<LinearGradient
500
-
colors={[
501
-
gradients.blueLight.start,
502
-
gradients.blueLight.end,
503
-
]}
504
-
start={{x: 0, y: 0}}
505
-
end={{x: 1, y: 1}}
506
-
style={styles.postBtn}>
507
-
<Text style={[s.white, s.f16, s.bold]}>
508
-
{replyTo ? (
509
-
<Trans context="action">Reply</Trans>
510
-
) : (
511
-
<Trans context="action">Post</Trans>
512
-
)}
513
-
</Text>
514
-
</LinearGradient>
515
-
</TouchableOpacity>
499
+
variant="solid"
500
+
color="primary"
501
+
shape="default"
502
+
size="small"
503
+
style={[a.rounded_full, a.py_sm]}
504
+
onPress={onPressPublish}>
505
+
<ButtonText style={[a.text_md]}>
506
+
{replyTo ? (
507
+
<Trans context="action">Reply</Trans>
508
+
) : (
509
+
<Trans context="action">Post</Trans>
510
+
)}
511
+
</ButtonText>
512
+
</Button>
516
513
) : (
517
514
<View style={[styles.postBtn, pal.btn]}>
518
515
<Text style={[pal.textLight, s.f16, s.bold]}>
···
828
825
topbarInner: {
829
826
flexDirection: 'row',
830
827
alignItems: 'center',
831
-
paddingHorizontal: 16,
828
+
paddingHorizontal: 8,
832
829
height: 54,
833
830
gap: 4,
834
831
},