lenooby09.tech
+44
-24
src/components/Admonition.tsx
+44
-24
src/components/Admonition.tsx
···
3
3
4
4
import {atoms as a, useBreakpoints, useTheme} from '#/alf'
5
5
import {Button as BaseButton, type ButtonProps} from '#/components/Button'
6
-
import {CircleInfo_Stroke2_Corner0_Rounded as ErrorIcon} from '#/components/icons/CircleInfo'
7
-
import {Eye_Stroke2_Corner0_Rounded as InfoIcon} from '#/components/icons/Eye'
8
-
import {Leaf_Stroke2_Corner0_Rounded as TipIcon} from '#/components/icons/Leaf'
6
+
import {CircleInfo_Stroke2_Corner0_Rounded as CircleInfoIcon} from '#/components/icons/CircleInfo'
7
+
import {CircleX_Stroke2_Corner0_Rounded as CircleXIcon} from '#/components/icons/CircleX'
9
8
import {Warning_Stroke2_Corner0_Rounded as WarningIcon} from '#/components/icons/Warning'
10
9
import {Text as BaseText, type TextProps} from '#/components/Typography'
11
10
12
11
export const colors = {
13
-
warning: {
14
-
light: '#DFBC00',
15
-
dark: '#BFAF1F',
16
-
},
12
+
warning: '#FFC404',
17
13
}
18
14
19
15
type Context = {
···
29
25
const t = useTheme()
30
26
const {type} = useContext(Context)
31
27
const Icon = {
32
-
info: InfoIcon,
33
-
tip: TipIcon,
28
+
info: CircleInfoIcon,
29
+
tip: CircleInfoIcon,
34
30
warning: WarningIcon,
35
-
error: ErrorIcon,
31
+
error: CircleXIcon,
36
32
}[type]
37
33
const fill = {
38
34
info: t.atoms.text_contrast_medium.color,
39
35
tip: t.palette.primary_500,
40
-
warning: colors.warning.light,
36
+
warning: colors.warning,
41
37
error: t.palette.negative_500,
42
38
}[type]
43
39
return <Icon fill={fill} size="md" />
44
40
}
45
41
42
+
export function Content({
43
+
children,
44
+
style,
45
+
...rest
46
+
}: {
47
+
children: React.ReactNode
48
+
style?: StyleProp<ViewStyle>
49
+
}) {
50
+
return (
51
+
<View
52
+
style={[a.gap_sm, a.flex_1, {minHeight: 20}, a.justify_center, style]}
53
+
{...rest}>
54
+
{children}
55
+
</View>
56
+
)
57
+
}
58
+
46
59
export function Text({
47
60
children,
48
61
style,
49
62
...rest
50
63
}: Pick<TextProps, 'children' | 'style'>) {
51
64
return (
52
-
<BaseText
53
-
{...rest}
54
-
style={[a.flex_1, a.text_sm, a.leading_snug, a.pr_md, style]}>
65
+
<BaseText {...rest} style={[a.text_sm, a.leading_snug, a.pr_md, style]}>
55
66
{children}
56
67
</BaseText>
57
68
)
···
60
71
export function Button({
61
72
children,
62
73
...props
63
-
}: Omit<ButtonProps, 'size' | 'variant' | 'color'>) {
74
+
}: Omit<ButtonProps, 'size' | 'variant'>) {
64
75
return (
65
-
<BaseButton size="tiny" variant="outline" color="secondary" {...props}>
76
+
<BaseButton size="tiny" {...props}>
66
77
{children}
67
78
</BaseButton>
68
79
)
69
80
}
70
81
71
-
export function Row({children}: {children: React.ReactNode}) {
82
+
export function Row({
83
+
children,
84
+
style,
85
+
}: {
86
+
children: React.ReactNode
87
+
style?: StyleProp<ViewStyle>
88
+
}) {
72
89
return (
73
-
<View style={[a.flex_1, a.flex_row, a.align_center, a.gap_sm]}>
90
+
<View style={[a.flex_1, a.flex_row, a.align_start, a.gap_sm, style]}>
74
91
{children}
75
92
</View>
76
93
)
···
88
105
const t = useTheme()
89
106
const {gtMobile} = useBreakpoints()
90
107
const borderColor = {
91
-
info: t.atoms.border_contrast_low.borderColor,
92
-
tip: t.atoms.border_contrast_low.borderColor,
93
-
warning: t.atoms.border_contrast_low.borderColor,
94
-
error: t.atoms.border_contrast_low.borderColor,
108
+
info: t.atoms.border_contrast_high.borderColor,
109
+
tip: t.palette.primary_500,
110
+
warning: colors.warning,
111
+
error: t.palette.negative_500,
95
112
}[type]
96
113
return (
97
114
<Context.Provider value={{type}}>
98
115
<View
99
116
style={[
100
117
gtMobile ? a.p_md : a.p_sm,
118
+
a.p_md,
101
119
a.rounded_sm,
102
120
a.border,
103
-
t.atoms.bg_contrast_25,
121
+
t.atoms.bg,
104
122
{borderColor},
105
123
style,
106
124
]}>
···
123
141
<Outer type={type} style={style}>
124
142
<Row>
125
143
<Icon />
126
-
<Text>{children}</Text>
144
+
<Content>
145
+
<Text>{children}</Text>
146
+
</Content>
127
147
</Row>
128
148
</Outer>
129
149
)
+6
-3
src/components/moderation/ReportDialog/index.tsx
+6
-3
src/components/moderation/ReportDialog/index.tsx
···
219
219
<Admonition.Outer type="error">
220
220
<Admonition.Row>
221
221
<Admonition.Icon />
222
-
<Admonition.Text>
223
-
<Trans>Something went wrong, please try again</Trans>
224
-
</Admonition.Text>
222
+
<Admonition.Content>
223
+
<Admonition.Text>
224
+
<Trans>Something went wrong, please try again</Trans>
225
+
</Admonition.Text>
226
+
</Admonition.Content>
225
227
<Admonition.Button
228
+
color="negative_subtle"
226
229
label={_(msg`Retry loading report options`)}
227
230
onPress={() => refetchLabelers()}>
228
231
<ButtonText>
+1
-1
src/screens/PostThread/components/ThreadItemAnchor.tsx
+1
-1
src/screens/PostThread/components/ThreadItemAnchor.tsx
+1
-1
src/screens/Settings/AppPasswords.tsx
+1
-1
src/screens/Settings/AppPasswords.tsx
···
195
195
</View>
196
196
{appPassword.privileged && (
197
197
<View style={[a.flex_row, a.gap_sm, a.align_center, a.mt_md]}>
198
-
<WarningIcon style={[{color: colors.warning[t.scheme]}]} />
198
+
<WarningIcon style={[{color: colors.warning}]} />
199
199
<Text style={t.atoms.text_contrast_high}>
200
200
<Trans>Allows access to direct messages</Trans>
201
201
</Text>
+2
-2
src/screens/Settings/NotificationSettings/ActivityNotificationSettings.tsx
+2
-2
src/screens/Settings/NotificationSettings/ActivityNotificationSettings.tsx
···
134
134
<Admonition.Outer type="tip">
135
135
<Admonition.Row>
136
136
<Admonition.Icon />
137
-
<View style={[a.flex_1, a.gap_sm]}>
137
+
<Admonition.Content>
138
138
<Admonition.Text>
139
139
<Trans>
140
140
Enable notifications for an account by visiting their
···
166
166
.
167
167
</Trans>
168
168
</Admonition.Text>
169
-
</View>
169
+
</Admonition.Content>
170
170
</Admonition.Row>
171
171
</Admonition.Outer>
172
172
) : (
+2
-3
src/screens/Settings/PrivacyAndSecuritySettings.tsx
+2
-3
src/screens/Settings/PrivacyAndSecuritySettings.tsx
···
1
-
import {View} from 'react-native'
2
1
import {type AppBskyNotificationDeclaration} from '@atproto/api'
3
2
import {msg, Trans} from '@lingui/macro'
4
3
import {useLingui} from '@lingui/react'
···
112
111
<Admonition.Outer type="tip" style={[a.flex_1]}>
113
112
<Admonition.Row>
114
113
<Admonition.Icon />
115
-
<View style={[a.flex_1, a.gap_sm]}>
114
+
<Admonition.Content>
116
115
<Admonition.Text>
117
116
<Trans>
118
117
Note: Bluesky is an open and public network. This setting
···
131
130
<Trans>Learn more about what is public on Bluesky.</Trans>
132
131
</InlineLinkText>
133
132
</Admonition.Text>
134
-
</View>
133
+
</Admonition.Content>
135
134
</Admonition.Row>
136
135
</Admonition.Outer>
137
136
</SettingsList.Item>
+74
-3
src/view/screens/Storybook/Admonitions.tsx
+74
-3
src/view/screens/Storybook/Admonitions.tsx
···
1
-
import {View} from 'react-native'
1
+
import {Text as RNText, View} from 'react-native'
2
+
import {msg, Trans} from '@lingui/macro'
3
+
import {useLingui} from '@lingui/react'
2
4
3
-
import {atoms as a} from '#/alf'
4
-
import {Admonition} from '#/components/Admonition'
5
+
import {atoms as a, useTheme} from '#/alf'
6
+
import {
7
+
Admonition,
8
+
Button as AdmonitionButton,
9
+
Content as AdmonitionContent,
10
+
Icon as AdmonitionIcon,
11
+
Outer as AdmonitionOuter,
12
+
Row as AdmonitionRow,
13
+
Text as AdmonitionText,
14
+
} from '#/components/Admonition'
15
+
import {ButtonIcon, ButtonText} from '#/components/Button'
16
+
import {ArrowRotateCounterClockwise_Stroke2_Corner0_Rounded as Retry} from '#/components/icons/ArrowRotateCounterClockwise'
17
+
import {BellRinging_Filled_Corner0_Rounded as BellRingingFilledIcon} from '#/components/icons/BellRinging'
5
18
import {InlineLinkText} from '#/components/Link'
6
19
import {H1} from '#/components/Typography'
7
20
8
21
export function Admonitions() {
22
+
const {_} = useLingui()
23
+
const t = useTheme()
24
+
9
25
return (
10
26
<View style={[a.gap_md]}>
11
27
<H1>Admonitions</H1>
···
30
46
<Admonition type="error">
31
47
The quick brown fox jumps over the lazy dog.
32
48
</Admonition>
49
+
50
+
<AdmonitionOuter type="error">
51
+
<AdmonitionRow>
52
+
<AdmonitionIcon />
53
+
<AdmonitionContent>
54
+
<AdmonitionText>
55
+
<Trans>Something went wrong, please try again</Trans>
56
+
</AdmonitionText>
57
+
</AdmonitionContent>
58
+
<AdmonitionButton
59
+
color="negative_subtle"
60
+
label={_(msg`Retry loading report options`)}
61
+
onPress={() => {}}>
62
+
<ButtonText>
63
+
<Trans>Retry</Trans>
64
+
</ButtonText>
65
+
<ButtonIcon icon={Retry} />
66
+
</AdmonitionButton>
67
+
</AdmonitionRow>
68
+
</AdmonitionOuter>
69
+
70
+
<AdmonitionOuter type="tip">
71
+
<AdmonitionRow>
72
+
<AdmonitionIcon />
73
+
<AdmonitionContent>
74
+
<AdmonitionText>
75
+
<Trans>
76
+
Enable notifications for an account by visiting their profile
77
+
and pressing the{' '}
78
+
<RNText style={[a.font_bold, t.atoms.text_contrast_high]}>
79
+
bell icon
80
+
</RNText>{' '}
81
+
<BellRingingFilledIcon
82
+
size="xs"
83
+
style={t.atoms.text_contrast_high}
84
+
/>
85
+
.
86
+
</Trans>
87
+
</AdmonitionText>
88
+
<AdmonitionText>
89
+
<Trans>
90
+
If you want to restrict who can receive notifications for your
91
+
account's activity, you can change this in{' '}
92
+
<InlineLinkText
93
+
label={_(msg`Privacy and Security settings`)}
94
+
to={{screen: 'ActivityPrivacySettings'}}
95
+
style={[a.font_bold]}>
96
+
Settings → Privacy and Security
97
+
</InlineLinkText>
98
+
.
99
+
</Trans>
100
+
</AdmonitionText>
101
+
</AdmonitionContent>
102
+
</AdmonitionRow>
103
+
</AdmonitionOuter>
33
104
</View>
34
105
)
35
106
}