update: toast styles that reuse consistent style

1 files changed, 85 insertions, 54 deletions

diff --git a/src/view/screens/Storybook/Toasts.tsx b/src/view/screens/Storybook/Toasts.tsx
index 714afdfbd..5197ec2f4 100644
--- a/src/view/screens/Storybook/Toasts.tsx
+++ b/src/view/screens/Storybook/Toasts.tsx
@@ -1,68 +1,99 @@
-import {View} from 'react-native'
+import {View, Pressable} from 'react-native'
 
-import {atoms as a} from '#/alf'
-import {Button, ButtonText} from '#/components/Button'
-import {H1} from '#/components/Typography'
+import {atoms as a, useTheme} from '#/alf'
+import {Text, H1} from '#/components/Typography'
+import {
+  type ToastType,
+  TOAST_TYPE_TO_ICON,
+  getToastTypeStyles,
+} from '#/view/com/util/Toast.style'
 import * as Toast from '#/view/com/util/Toast'
-import * as ToastHelpers from '#/view/com/util/ToastHelpers'
+
+function ToastPreview({message, type}: {message: string; type: ToastType}) {
+  const t = useTheme()
+  const toastStyles = getToastTypeStyles(t)
+  const colors = toastStyles[type]
+  const IconComponent = TOAST_TYPE_TO_ICON[type]
+
+  return (
+    <Pressable
+      onPress={() => Toast.show(message, type)}
+      style={[
+        {backgroundColor: colors.backgroundColor},
+        a.shadow_sm,
+        {borderColor: colors.borderColor},
+        a.rounded_sm,
+        a.border,
+        a.px_sm,
+        a.py_sm,
+        a.flex_row,
+        a.gap_sm,
+        a.align_center,
+      ]}>
+      <View
+        style={[
+          a.flex_shrink_0,
+          a.rounded_full,
+          {width: 24, height: 24},
+          a.align_center,
+          a.justify_center,
+          {
+            backgroundColor: colors.backgroundColor,
+          },
+        ]}>
+        <IconComponent fill={colors.iconColor} size="xs" />
+      </View>
+      <View style={[a.flex_1]}>
+        <Text
+          style={[
+            a.text_sm,
+            a.font_bold,
+            a.leading_snug,
+            {color: colors.textColor},
+          ]}
+          emoji>
+          {message}
+        </Text>
+      </View>
+    </Pressable>
+  )
+}
 
 export function Toasts() {
   return (
     <View style={[a.gap_md]}>
-      <H1>Toasts</H1>
+      <H1>Toast Examples</H1>
+
+      <View style={[a.gap_md]}>
+        <View style={[a.gap_xs]}>
+          <ToastPreview message="Default Toast" type="default" />
+        </View>
 
-      <View style={[a.gap_sm]}>
-        <Button
-          variant="solid"
-          color="primary"
-          size="small"
-          label="Show success toast"
-          onPress={() =>
-            Toast.show('Operation completed successfully!', 'success')
-          }>
-          <ButtonText>Success!</ButtonText>
-        </Button>
+        <View style={[a.gap_xs]}>
+          <ToastPreview
+            message="Operation completed successfully!"
+            type="success"
+          />
+        </View>
 
-        <Button
-          variant="solid"
-          color="negative"
-          size="small"
-          label="Show error toast"
-          onPress={() => Toast.show('Something went wrong!', 'error')}>
-          <ButtonText>Error</ButtonText>
-        </Button>
+        <View style={[a.gap_xs]}>
+          <ToastPreview message="Something went wrong!" type="error" />
+        </View>
 
-        <Button
-          variant="solid"
-          color="secondary"
-          size="small"
-          label="Show warning toast"
-          onPress={() => Toast.show('Please check your input', 'warning')}>
-          <ButtonText>Warning</ButtonText>
-        </Button>
+        <View style={[a.gap_xs]}>
+          <ToastPreview message="Please check your input" type="warning" />
+        </View>
 
-        <Button
-          variant="solid"
-          color="secondary"
-          size="small"
-          label="Show info toast"
-          onPress={() => Toast.show("Here's some helpful information", 'info')}>
-          <ButtonText>Info </ButtonText>
-        </Button>
+        <View style={[a.gap_xs]}>
+          <ToastPreview message="Here's some helpful information" type="info" />
+        </View>
 
-        <Button
-          variant="outline"
-          color="secondary"
-          size="small"
-          label="Show toast with long message"
-          onPress={() =>
-            Toast.show(
-              'This is a longer message to test how the toast handles multiple lines of text content.',
-              'info',
-            )
-          }>
-          <ButtonText>Long Message </ButtonText>
-        </Button>
+        <View style={[a.gap_xs]}>
+          <ToastPreview
+            message="This is a longer message to test how the toast handles multiple lines of text content."
+            type="info"
+          />
+        </View>
       </View>
     </View>
   )