hog FormError

src/components/forms/FormError.tsx

@@ -1,10 +1,9 @@
 import React from 'react'
-import {StyleSheet, View} from 'react-native'
+import {View} from 'react-native'
 
 import {Warning_Stroke2_Corner0_Rounded as Warning} from '#/components/icons/Warning'
 import {Text} from '#/components/Typography'
 import {atoms as a, useTheme} from '#/alf'
-import {colors} from '#/lib/styles'
 
 export function FormError({error}: {error?: string}) {
   const t = useTheme()
@@ -12,7 +11,15 @@ export function FormError({error}: {error?: string}) {
   if (!error) return null
 
   return (
-    <View style={styles.error}>
+    <View
+      style={[
+        {backgroundColor: t.palette.negative_600},
+        a.flex_row,
+        a.align_center,
+        a.mb_lg,
+        a.rounded_sm,
+        a.p_sm,
+      ]}>
       <Warning fill={t.palette.white} size="sm" />
       <View style={(a.flex_1, a.ml_sm)}>
         <Text style={[{color: t.palette.white}, a.font_bold]}>{error}</Text>
@@ -20,15 +27,3 @@ export function FormError({error}: {error?: string}) {
     </View>
   )
 }
-
-const styles = StyleSheet.create({
-  error: {
-    backgroundColor: colors.red4,
-    flexDirection: 'row',
-    alignItems: 'center',
-    marginBottom: 15,
-    borderRadius: 8,
-    paddingHorizontal: 8,
-    paddingVertical: 8,
-  },
-})