diff options
| -rw-r--r-- | src/components/Admonition.tsx | 13 | ||||
| -rw-r--r-- | src/screens/Messages/Settings.tsx | 25 | ||||
| -rw-r--r-- | src/view/screens/NotificationsSettings.tsx | 24 |
3 files changed, 24 insertions, 38 deletions
diff --git a/src/components/Admonition.tsx b/src/components/Admonition.tsx index 7c8682119..140e838e7 100644 --- a/src/components/Admonition.tsx +++ b/src/components/Admonition.tsx @@ -1,5 +1,5 @@ import React from 'react' -import {View} from 'react-native' +import {StyleProp, View, ViewStyle} from 'react-native' import {atoms as a, useBreakpoints, useTheme} from '#/alf' import {CircleInfo_Stroke2_Corner0_Rounded as ErrorIcon} from '#/components/icons/CircleInfo' @@ -70,9 +70,11 @@ export function Row({children}: {children: React.ReactNode}) { export function Outer({ children, type = 'info', + style, }: { children: React.ReactNode type?: Context['type'] + style?: StyleProp<ViewStyle> }) { const t = useTheme() const {gtMobile} = useBreakpoints() @@ -90,9 +92,8 @@ export function Outer({ a.rounded_sm, a.border, t.atoms.bg_contrast_25, - { - borderColor, - }, + {borderColor}, + style, ]}> {children} </View> @@ -103,12 +104,14 @@ export function Outer({ export function Admonition({ children, type, + style, }: { children: TextProps['children'] type?: Context['type'] + style?: StyleProp<ViewStyle> }) { return ( - <Outer type={type}> + <Outer type={type} style={style}> <Row> <Icon /> <Text>{children}</Text> diff --git a/src/screens/Messages/Settings.tsx b/src/screens/Messages/Settings.tsx index b1c52582f..a7b55229f 100644 --- a/src/screens/Messages/Settings.tsx +++ b/src/screens/Messages/Settings.tsx @@ -12,7 +12,8 @@ import {useSession} from '#/state/session' import * as Toast from '#/view/com/util/Toast' import {ViewHeader} from '#/view/com/util/ViewHeader' import {ScrollView} from '#/view/com/util/Views' -import {atoms as a, useTheme} from '#/alf' +import {atoms as a} from '#/alf' +import {Admonition} from '#/components/Admonition' import {Divider} from '#/components/Divider' import * as Toggle from '#/components/forms/Toggle' import {Text} from '#/components/Typography' @@ -23,7 +24,6 @@ type AllowIncoming = 'all' | 'none' | 'following' type Props = NativeStackScreenProps<CommonNavigatorParams, 'MessagesSettings'> export function MessagesSettingsScreen({}: Props) { const {_} = useLingui() - const t = useTheme() const {currentAccount} = useSession() const {data: profile} = useProfileQuery({ did: currentAccount!.did, @@ -99,21 +99,12 @@ export function MessagesSettingsScreen({}: Props) { </Toggle.Item> </View> </Toggle.Group> - <View - style={[ - a.mt_sm, - a.px_xl, - a.py_lg, - a.rounded_md, - t.atoms.bg_contrast_25, - ]}> - <Text style={[t.atoms.text_contrast_high, a.leading_snug]}> - <Trans> - You can continue ongoing conversations regardless of which setting - you choose. - </Trans> - </Text> - </View> + <Admonition type="tip"> + <Trans> + You can continue ongoing conversations regardless of which setting + you choose. + </Trans> + </Admonition> {isNative && ( <> <Divider style={a.my_md} /> diff --git a/src/view/screens/NotificationsSettings.tsx b/src/view/screens/NotificationsSettings.tsx index 8955119a6..f395941df 100644 --- a/src/view/screens/NotificationsSettings.tsx +++ b/src/view/screens/NotificationsSettings.tsx @@ -10,6 +10,7 @@ import {useNotificationsSettingsMutation} from '#/state/queries/notifications/se import {ViewHeader} from '#/view/com/util/ViewHeader' import {ScrollView} from '#/view/com/util/Views' import {atoms as a, useTheme} from '#/alf' +import {Admonition} from '#/components/Admonition' import {Error} from '#/components/Error' import * as Toggle from '#/components/forms/Toggle' import {Loader} from '#/components/Loader' @@ -71,22 +72,13 @@ export function NotificationsSettingsScreen({}: Props) { </Toggle.Item> </View> </Toggle.Group> - <View - style={[ - a.mt_sm, - a.px_xl, - a.py_lg, - a.rounded_md, - t.atoms.bg_contrast_25, - ]}> - <Text style={[t.atoms.text_contrast_high, a.leading_snug]}> - <Trans> - Experimental: When this preference is enabled, you'll only - receive reply and quote notifications from users you follow. - We'll continue to add more controls here over time. - </Trans> - </Text> - </View> + <Admonition type="warning" style={[a.mt_sm]}> + <Trans> + Experimental: When this preference is enabled, you'll only receive + reply and quote notifications from users you follow. We'll + continue to add more controls here over time. + </Trans> + </Admonition> </View> )} </ScrollView> |