Update admonition component (#9068)

* update admonition component

* fix linting, adominition alighment

* design tweak

* edge cases for admonition, update storybook

* Update src/components/Admonition.tsx

Co-authored-by: Samuel Newman <mozzius@protonmail.com>

* fix mobile version

* change button style

---------

Co-authored-by: Samuel Newman <mozzius@protonmail.com>

src/screens/PostThread/components/ThreadItemAnchor.tsx

@@ -621,7 +621,7 @@ function BackdatedPostIndicator({post}: {post: AppBskyFeedDefs.PostView}) {
 
   if (!isBackdated) return null
 
-  const orange = t.name === 'light' ? colors.warning.dark : colors.warning.light
+  const orange = colors.warning
 
   return (
     <>

src/screens/Settings/AppPasswords.tsx

@@ -195,7 +195,7 @@ function AppPasswordCard({
       </View>
       {appPassword.privileged && (
         <View style={[a.flex_row, a.gap_sm, a.align_center, a.mt_md]}>
-          <WarningIcon style={[{color: colors.warning[t.scheme]}]} />
+          <WarningIcon style={[{color: colors.warning}]} />
           <Text style={t.atoms.text_contrast_high}>
             <Trans>Allows access to direct messages</Trans>
           </Text>

src/screens/Settings/NotificationSettings/ActivityNotificationSettings.tsx

@@ -134,7 +134,7 @@ export function ActivityNotificationSettingsScreen({}: Props) {
                 <Admonition.Outer type="tip">
                   <Admonition.Row>
                     <Admonition.Icon />
-                    <View style={[a.flex_1, a.gap_sm]}>
+                    <Admonition.Content>
                       <Admonition.Text>
                         <Trans>
                           Enable notifications for an account by visiting their
@@ -166,7 +166,7 @@ export function ActivityNotificationSettingsScreen({}: Props) {
                           .
                         </Trans>
                       </Admonition.Text>
-                    </View>
+                    </Admonition.Content>
                   </Admonition.Row>
                 </Admonition.Outer>
               ) : (

src/screens/Settings/PrivacyAndSecuritySettings.tsx

@@ -1,4 +1,3 @@
-import {View} from 'react-native'
 import {type AppBskyNotificationDeclaration} from '@atproto/api'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
@@ -112,7 +111,7 @@ export function PrivacyAndSecuritySettingsScreen({}: Props) {
             <Admonition.Outer type="tip" style={[a.flex_1]}>
               <Admonition.Row>
                 <Admonition.Icon />
-                <View style={[a.flex_1, a.gap_sm]}>
+                <Admonition.Content>
                   <Admonition.Text>
                     <Trans>
                       Note: Bluesky is an open and public network. This setting
@@ -131,7 +130,7 @@ export function PrivacyAndSecuritySettingsScreen({}: Props) {
                       <Trans>Learn more about what is public on Bluesky.</Trans>
                     </InlineLinkText>
                   </Admonition.Text>
-                </View>
+                </Admonition.Content>
               </Admonition.Row>
             </Admonition.Outer>
           </SettingsList.Item>