Use admonitions in settings screens (#5741)

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>