Use admonitions in settings screens (#5741)

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>

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
+        <Admonition type="tip">
-          style={[
+          <Trans>
-            a.mt_sm,
+            You can continue ongoing conversations regardless of which setting
-            a.px_xl,
+            you choose.
-            a.py_lg,
+          </Trans>
-            a.rounded_md,
+        </Admonition>
-            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>
         {isNative && (
           <>
             <Divider style={a.my_md} />

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
+          <Admonition type="warning" style={[a.mt_sm]}>
-            style={[
+            <Trans>
-              a.mt_sm,
+              Experimental: When this preference is enabled, you'll only receive
-              a.px_xl,
+              reply and quote notifications from users you follow. We'll
-              a.py_lg,
+              continue to add more controls here over time.
-              a.rounded_md,
+            </Trans>
-              t.atoms.bg_contrast_25,
+          </Admonition>
-            ]}>
-            <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>
         </View>
       )}
     </ScrollView>