Style tweaks to post/profile alerts

src/components/Button.tsx

@@ -15,6 +15,7 @@ import LinearGradient from 'react-native-linear-gradient'
 
 import {useTheme, atoms as a, tokens, android, flatten} from '#/alf'
 import {Props as SVGIconProps} from '#/components/icons/common'
+import {normalizeTextStyles} from '#/components/Typography'
 
 export type ButtonVariant = 'solid' | 'outline' | 'ghost' | 'gradient'
 export type ButtonColor =
@@ -519,7 +520,14 @@ export function ButtonText({children, style, ...rest}: ButtonTextProps) {
   const textStyles = useSharedButtonTextStyles()
 
   return (
-    <Text {...rest} style={[a.font_bold, a.text_center, textStyles, style]}>
+    <Text
+      {...rest}
+      style={normalizeTextStyles([
+        a.font_bold,
+        a.text_center,
+        textStyles,
+        style,
+      ])}>
       {children}
     </Text>
   )

src/components/Typography.tsx

@@ -1,5 +1,10 @@
 import React from 'react'
-import {Text as RNText, TextStyle, TextProps as RNTextProps} from 'react-native'
+import {
+  Text as RNText,
+  StyleProp,
+  TextStyle,
+  TextProps as RNTextProps,
+} from 'react-native'
 import {UITextView} from 'react-native-ui-text-view'
 
 import {useTheme, atoms, web, flatten} from '#/alf'
@@ -34,7 +39,7 @@ export function leading<
  * If the `lineHeight` value is > 2, we assume it's an absolute value and
  * returns it as-is.
  */
-function normalizeTextStyles(styles: TextStyle[]) {
+export function normalizeTextStyles(styles: StyleProp<TextStyle>) {
   const s = flatten(styles)
   // should always be defined on these components
   const fontSize = s.fontSize || atoms.text_md.fontSize

src/components/moderation/PostAlerts.tsx

@@ -83,7 +83,7 @@ function PostAlert({cause}: {cause: ModerationCause}) {
           control.open()
         }}>
         <ButtonIcon icon={desc.icon} position="left" />
-        <ButtonText style={[a.flex_1, a.text_left]}>
+        <ButtonText style={[a.flex_1, a.text_left, a.italic, a.leading_snug]}>
           {desc.name}
           {desc.source && (
             <Text style={[a.text_sm, t.atoms.text_contrast_medium]}>

src/components/moderation/ProfileHeaderAlerts.tsx

@@ -83,7 +83,7 @@ function ProfileAlert({cause}: {cause: ModerationCause}) {
           control.open()
         }}>
         <ButtonIcon icon={desc.icon} position="left" />
-        <ButtonText style={[a.flex_1, a.text_left]}>
+        <ButtonText style={[a.flex_1, a.text_left, a.italic, a.leading_snug]}>
           {desc.name}
           {desc.source && (
             <Text style={[a.text_sm, t.atoms.text_contrast_medium]}>