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/components/Admonition.tsx

@@ -3,17 +3,13 @@ import {type StyleProp, View, type ViewStyle} from 'react-native'
 
 import {atoms as a, useBreakpoints, useTheme} from '#/alf'
 import {Button as BaseButton, type ButtonProps} from '#/components/Button'
-import {CircleInfo_Stroke2_Corner0_Rounded as ErrorIcon} from '#/components/icons/CircleInfo'
-import {Eye_Stroke2_Corner0_Rounded as InfoIcon} from '#/components/icons/Eye'
-import {Leaf_Stroke2_Corner0_Rounded as TipIcon} from '#/components/icons/Leaf'
+import {CircleInfo_Stroke2_Corner0_Rounded as CircleInfoIcon} from '#/components/icons/CircleInfo'
+import {CircleX_Stroke2_Corner0_Rounded as CircleXIcon} from '#/components/icons/CircleX'
 import {Warning_Stroke2_Corner0_Rounded as WarningIcon} from '#/components/icons/Warning'
 import {Text as BaseText, type TextProps} from '#/components/Typography'
 
 export const colors = {
-  warning: {
-    light: '#DFBC00',
-    dark: '#BFAF1F',
-  },
+  warning: '#FFC404',
 }
 
 type Context = {
@@ -29,29 +25,44 @@ export function Icon() {
   const t = useTheme()
   const {type} = useContext(Context)
   const Icon = {
-    info: InfoIcon,
-    tip: TipIcon,
+    info: CircleInfoIcon,
+    tip: CircleInfoIcon,
     warning: WarningIcon,
-    error: ErrorIcon,
+    error: CircleXIcon,
   }[type]
   const fill = {
     info: t.atoms.text_contrast_medium.color,
     tip: t.palette.primary_500,
-    warning: colors.warning.light,
+    warning: colors.warning,
     error: t.palette.negative_500,
   }[type]
   return <Icon fill={fill} size="md" />
 }
 
+export function Content({
+  children,
+  style,
+  ...rest
+}: {
+  children: React.ReactNode
+  style?: StyleProp<ViewStyle>
+}) {
+  return (
+    <View
+      style={[a.gap_sm, a.flex_1, {minHeight: 20}, a.justify_center, style]}
+      {...rest}>
+      {children}
+    </View>
+  )
+}
+
 export function Text({
   children,
   style,
   ...rest
 }: Pick<TextProps, 'children' | 'style'>) {
   return (
-    <BaseText
-      {...rest}
-      style={[a.flex_1, a.text_sm, a.leading_snug, a.pr_md, style]}>
+    <BaseText {...rest} style={[a.text_sm, a.leading_snug, a.pr_md, style]}>
       {children}
     </BaseText>
   )
@@ -60,17 +71,23 @@ export function Text({
 export function Button({
   children,
   ...props
-}: Omit<ButtonProps, 'size' | 'variant' | 'color'>) {
+}: Omit<ButtonProps, 'size' | 'variant'>) {
   return (
-    <BaseButton size="tiny" variant="outline" color="secondary" {...props}>
+    <BaseButton size="tiny" {...props}>
       {children}
     </BaseButton>
   )
 }
 
-export function Row({children}: {children: React.ReactNode}) {
+export function Row({
+  children,
+  style,
+}: {
+  children: React.ReactNode
+  style?: StyleProp<ViewStyle>
+}) {
   return (
-    <View style={[a.flex_1, a.flex_row, a.align_center, a.gap_sm]}>
+    <View style={[a.flex_1, a.flex_row, a.align_start, a.gap_sm, style]}>
       {children}
     </View>
   )
@@ -88,19 +105,20 @@ export function Outer({
   const t = useTheme()
   const {gtMobile} = useBreakpoints()
   const borderColor = {
-    info: t.atoms.border_contrast_low.borderColor,
-    tip: t.atoms.border_contrast_low.borderColor,
-    warning: t.atoms.border_contrast_low.borderColor,
-    error: t.atoms.border_contrast_low.borderColor,
+    info: t.atoms.border_contrast_high.borderColor,
+    tip: t.palette.primary_500,
+    warning: colors.warning,
+    error: t.palette.negative_500,
   }[type]
   return (
     <Context.Provider value={{type}}>
       <View
         style={[
           gtMobile ? a.p_md : a.p_sm,
+          a.p_md,
           a.rounded_sm,
           a.border,
-          t.atoms.bg_contrast_25,
+          t.atoms.bg,
           {borderColor},
           style,
         ]}>
@@ -123,7 +141,9 @@ export function Admonition({
     <Outer type={type} style={style}>
       <Row>
         <Icon />
-        <Text>{children}</Text>
+        <Content>
+          <Text>{children}</Text>
+        </Content>
       </Row>
     </Outer>
   )

src/components/moderation/ReportDialog/index.tsx

@@ -219,10 +219,13 @@ function Inner(props: ReportDialogProps) {
             <Admonition.Outer type="error">
               <Admonition.Row>
                 <Admonition.Icon />
-                <Admonition.Text>
-                  <Trans>Something went wrong, please try again</Trans>
-                </Admonition.Text>
+                <Admonition.Content>
+                  <Admonition.Text>
+                    <Trans>Something went wrong, please try again</Trans>
+                  </Admonition.Text>
+                </Admonition.Content>
                 <Admonition.Button
+                  color="negative_subtle"
                   label={_(msg`Retry loading report options`)}
                   onPress={() => refetchLabelers()}>
                   <ButtonText>