callie.on-her.computer
forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
Use admonitions in settings screens (#5741)
samuel.fm
+8
-5
src/components/Admonition.tsx
+8
-5
src/components/Admonition.tsx
···
1
1
import React from 'react'
2
-
import {View} from 'react-native'
2
+
import {StyleProp, View, ViewStyle} from 'react-native'
3
3
4
4
import {atoms as a, useBreakpoints, useTheme} from '#/alf'
5
5
import {CircleInfo_Stroke2_Corner0_Rounded as ErrorIcon} from '#/components/icons/CircleInfo'
···
70
70
export function Outer({
71
71
children,
72
72
type = 'info',
73
+
style,
73
74
}: {
74
75
children: React.ReactNode
75
76
type?: Context['type']
77
+
style?: StyleProp<ViewStyle>
76
78
}) {
77
79
const t = useTheme()
78
80
const {gtMobile} = useBreakpoints()
···
90
92
a.rounded_sm,
91
93
a.border,
92
94
t.atoms.bg_contrast_25,
93
-
{
94
-
borderColor,
95
-
},
95
+
{borderColor},
96
+
style,
96
97
]}>
97
98
{children}
98
99
</View>
···
103
104
export function Admonition({
104
105
children,
105
106
type,
107
+
style,
106
108
}: {
107
109
children: TextProps['children']
108
110
type?: Context['type']
111
+
style?: StyleProp<ViewStyle>
109
112
}) {
110
113
return (
111
-
<Outer type={type}>
114
+
<Outer type={type} style={style}>
112
115
<Row>
113
116
<Icon />
114
117
<Text>{children}</Text>
+8
-17
src/screens/Messages/Settings.tsx
+8
-17
src/screens/Messages/Settings.tsx
···
12
12
import * as Toast from '#/view/com/util/Toast'
13
13
import {ViewHeader} from '#/view/com/util/ViewHeader'
14
14
import {ScrollView} from '#/view/com/util/Views'
15
-
import {atoms as a, useTheme} from '#/alf'
15
+
import {atoms as a} from '#/alf'
16
+
import {Admonition} from '#/components/Admonition'
16
17
import {Divider} from '#/components/Divider'
17
18
import * as Toggle from '#/components/forms/Toggle'
18
19
import {Text} from '#/components/Typography'
···
23
24
type Props = NativeStackScreenProps<CommonNavigatorParams, 'MessagesSettings'>
24
25
export function MessagesSettingsScreen({}: Props) {
25
26
const {_} = useLingui()
26
-
const t = useTheme()
27
27
const {currentAccount} = useSession()
28
28
const {data: profile} = useProfileQuery({
29
29
did: currentAccount!.did,
···
99
99
</Toggle.Item>
100
100
</View>
101
101
</Toggle.Group>
102
-
<View
103
-
style={[
104
-
a.mt_sm,
105
-
a.px_xl,
106
-
a.py_lg,
107
-
a.rounded_md,
108
-
t.atoms.bg_contrast_25,
109
-
]}>
110
-
<Text style={[t.atoms.text_contrast_high, a.leading_snug]}>
111
-
<Trans>
112
-
You can continue ongoing conversations regardless of which setting
113
-
you choose.
114
-
</Trans>
115
-
</Text>
116
-
</View>
102
+
<Admonition type="tip">
103
+
<Trans>
104
+
You can continue ongoing conversations regardless of which setting
105
+
you choose.
106
+
</Trans>
107
+
</Admonition>
117
108
{isNative && (
118
109
<>
119
110
<Divider style={a.my_md} />
+8
-16
src/view/screens/NotificationsSettings.tsx
+8
-16
src/view/screens/NotificationsSettings.tsx
···
10
10
import {ViewHeader} from '#/view/com/util/ViewHeader'
11
11
import {ScrollView} from '#/view/com/util/Views'
12
12
import {atoms as a, useTheme} from '#/alf'
13
+
import {Admonition} from '#/components/Admonition'
13
14
import {Error} from '#/components/Error'
14
15
import * as Toggle from '#/components/forms/Toggle'
15
16
import {Loader} from '#/components/Loader'
···
71
72
</Toggle.Item>
72
73
</View>
73
74
</Toggle.Group>
74
-
<View
75
-
style={[
76
-
a.mt_sm,
77
-
a.px_xl,
78
-
a.py_lg,
79
-
a.rounded_md,
80
-
t.atoms.bg_contrast_25,
81
-
]}>
82
-
<Text style={[t.atoms.text_contrast_high, a.leading_snug]}>
83
-
<Trans>
84
-
Experimental: When this preference is enabled, you'll only
85
-
receive reply and quote notifications from users you follow.
86
-
We'll continue to add more controls here over time.
87
-
</Trans>
88
-
</Text>
89
-
</View>
75
+
<Admonition type="warning" style={[a.mt_sm]}>
76
+
<Trans>
77
+
Experimental: When this preference is enabled, you'll only receive
78
+
reply and quote notifications from users you follow. We'll
79
+
continue to add more controls here over time.
80
+
</Trans>
81
+
</Admonition>
90
82
</View>
91
83
)}
92
84
</ScrollView>