chore(toast): update toast UI to use border instead of shadow (valora…

…-inc#5113)

### Description

We decided to refrain from using shadows with toasts because shadows
don't give enough contrast with the underlying app surface for toast to
stand out.

It is also challenging to replicate designer-proposed shadows
consistently in iOS and Android due to platform differences in rendering
shadows.

A border with 50% opaque primary color is used instead.

Designs:
https://www.figma.com/file/erFfzHvSTm5g1sjK6jWyEH/Working-Design-System-Components?type=design&node-id=1287-1599&mode=design&t=FfkYhPWuxiEi75yJ-0

Context:
https://valora-app.slack.com/archives/C0684TXDR3K/p1710432893238009?thread_ts=1708337311.090779&cid=C0684TXDR3K

#### Examples:

| With border | With shadow (deprecated) |
|--------|--------|
| ![Simulator Screenshot - iPhone 15 - 2024-03-15 at 18 22 37
2](https://github.com/valora-inc/wallet/assets/2737872/0e2bad37-0a51-48f3-ac5e-b17db481ca9e)
| ![Simulator Screenshot - iPhone 15 - 2024-03-15 at 18 24 08
2](https://github.com/valora-inc/wallet/assets/2737872/01268ca4-5130-4b86-a988-9bc866298bf8)
|
| ![Simulator Screenshot - iPhone 15 - 2024-03-15 at 18 21 23
2](https://github.com/valora-inc/wallet/assets/2737872/129773ac-cd91-4063-93a6-77fd7308a61f)
| ![Simulator Screenshot - iPhone 15 - 2024-03-15 at 18 24 33
2](https://github.com/valora-inc/wallet/assets/2737872/9cc48514-e8f6-4136-b4c5-f4ee605ce3c2)
|
| ![Simulator Screenshot - iPhone 15 - 2024-03-15 at 18 21 11
2](https://github.com/valora-inc/wallet/assets/2737872/7e29507f-8851-4fc0-bb1b-d03e0719bc50)
| ![Simulator Screenshot - iPhone 15 - 2024-03-15 at 18 24 50
2](https://github.com/valora-inc/wallet/assets/2737872/5e2c9728-bb6e-46cc-84be-d655171332cb)
|
| ![Simulator Screenshot - iPhone 15 - 2024-03-15 at 18 21 35
2](https://github.com/valora-inc/wallet/assets/2737872/83d1a984-8911-46b7-8136-d1a2ffd84425)
| ![Simulator Screenshot - iPhone 15 - 2024-03-15 at 18 24 42
2](https://github.com/valora-inc/wallet/assets/2737872/f93bfdb6-1404-40bf-a4c5-abf47bf97eec)
|

### Test plan

CI

### Related issues

- Related to RET-1004

### Backwards compatibility

Y

### Network scalability

NA

src/account/__snapshots__/Profile.test.tsx.snap

@@ -408,6 +408,7 @@ exports[`Profile renders correctly 1`] = `
                 "backgroundColor": "#F8F9F9",
               },
               undefined,
+              undefined,
             ]
           }
         >

src/components/InLineNotification.tsx

@@ -15,6 +15,7 @@ export enum NotificationVariant {
 
 export interface InLineNotificationProps {
   variant: NotificationVariant
+  withBorder?: boolean
   hideIcon?: boolean
   customIcon?: JSX.Element | null
   title?: string | null
@@ -34,6 +35,7 @@ interface CustomColors {
 
 export function InLineNotification({
   variant,
+  withBorder,
   hideIcon,
   customIcon,
   title,
@@ -59,11 +61,14 @@ export function InLineNotification({
     )
   const Icon = variantIcons[variant]
 
+  const backgroundStyle = { backgroundColor: variantColor.secondary }
+  const borderStyle = withBorder && {
+    borderWidth: 1,
+    borderColor: `${variantColor.primary}80`, // primary color with 50% opacity
+  }
+
   return (
-    <View
-      style={[styles.container, { backgroundColor: variantColor.secondary }, style]}
-      testID={testID}
-    >
+    <View style={[styles.container, backgroundStyle, borderStyle, style]} testID={testID}>
       <View style={styles.row}>
         {!hideIcon && (
           <View style={styles.iconContainer}>
@@ -101,7 +106,6 @@ const styles = StyleSheet.create({
   },
   ctaRow: {
     paddingTop: Spacing.Smallest8,
-    paddingHorizontal: Spacing.Smallest8,
     justifyContent: 'flex-end',
     gap: Spacing.Smallest8,
   },

src/components/Toast.tsx

@@ -12,13 +12,13 @@ import { useSafeAreaInsets } from 'react-native-safe-area-context'
 import InLineNotification, { InLineNotificationProps } from 'src/components/InLineNotification'
 import { useShowOrHideAnimation } from 'src/components/useShowOrHideAnimation'
 import Colors from 'src/styles/colors'
-import { Shadow, Spacing, getShadowStyle } from 'src/styles/styles'
+import { Spacing } from 'src/styles/styles'
 
 type RequiredProps<T, K extends keyof T> = Omit<T, K> & Required<Pick<T, K>>
 
 type DismissHandler = () => void
 
-interface Props extends InLineNotificationProps {
+interface Props extends Omit<InLineNotificationProps, 'withBorder'> {
   showToast: boolean
   position?: 'top' | 'bottom'
 }
@@ -126,7 +126,8 @@ const Toast = ({
       onLayout={handleLayout}
     >
       <InLineNotification
-        style={[styles.notification, !withBackdrop && getShadowStyle(Shadow.AlertShadow)]}
+        withBorder={!withBackdrop}
+        style={styles.notification}
         {...inLineNotificationProps}
       />
     </Animated.View>

src/styles/styles.ts

@@ -16,7 +16,6 @@ export enum Shadow {
   Soft = 'Soft',
   SoftLight = 'SoftLight',
   BarShadow = 'BarShadow',
-  AlertShadow = 'AlertShadow',
 }
 
 export function getShadowStyle(shadow: Shadow) {
@@ -27,8 +26,6 @@ export function getShadowStyle(shadow: Shadow) {
       return styles.softShadowLight
     case Shadow.BarShadow:
       return styles.barShadow
-    case Shadow.AlertShadow:
-      return styles.alertShadow
   }
 }
 
@@ -64,13 +61,6 @@ const styles = StyleSheet.create({
     shadowRadius: 1.5,
     shadowColor: 'rgba(129, 134, 139, 0.5)',
   },
-  alertShadow: {
-    elevation: 16,
-    shadowOffset: { width: 0, height: 16 },
-    shadowOpacity: 0.15,
-    shadowRadius: 10,
-    shadowColor: 'rgb(80, 80, 80)',
-  },
 })
 
 export default styles