From 29b7dd10d9eb2622a28b99b2a187f6c23bc02873 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nikolai=20R=C3=B8ed=20Kristiansen?=
 <nikolai.kristiansen@remarkable.no>
Date: Thu, 11 Jul 2024 13:33:43 +0200
Subject: [PATCH] replace native-base Alert use

---
 src/components/FormErrors.tsx | 29 ++++++++++++++++++++++-------
 src/components/FormInput.tsx  |  8 +++++---
 2 files changed, 27 insertions(+), 10 deletions(-)

diff --git a/src/components/FormErrors.tsx b/src/components/FormErrors.tsx
index 8fcf5ee..f12681d 100644
--- a/src/components/FormErrors.tsx
+++ b/src/components/FormErrors.tsx
@@ -1,6 +1,6 @@
-import { Alert, HStack } from 'native-base';
+import { FontAwesome5 as Icon } from '@expo/vector-icons';
 import React from 'react';
-import { Text } from 'react-native';
+import { Text, StyleSheet, View } from 'react-native';
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 const FormErrors = ({ errors }: { errors: Record<string, any> }) => {
@@ -17,12 +17,27 @@ const FormErrors = ({ errors }: { errors: Record<string, any> }) => {
   if (!errorFormatted) errorFormatted = 'Kunne ikke sende inn skjemaet, prøv igjen...';
 
   return (
-    <Alert w="100%" colorScheme="error" status="error">
-      <HStack space={2} flexShrink={1} w="100%">
-        <Alert.Icon mt="1" />
+    <View style={styles.container}>
+      <Icon name="exclamation-triangle" size={16} color="#b91c1c" style={styles.icon} />
+      <View>
         <Text>{errorFormatted}</Text>
-      </HStack>
-    </Alert>
+      </View>
+    </View>
   );
 };
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    flexDirection: 'row',
+    backgroundColor: '#fecaca',
+    padding: 12,
+    borderRadius: 4,
+  },
+  icon: {
+    marginTop: 2,
+    marginRight: 8,
+  },
+});
+
 export default FormErrors;
diff --git a/src/components/FormInput.tsx b/src/components/FormInput.tsx
index 3a00011..be81110 100644
--- a/src/components/FormInput.tsx
+++ b/src/components/FormInput.tsx
@@ -1,11 +1,13 @@
 import { Input, Text, WarningOutlineIcon, FormControl, IInputProps } from 'native-base';
 import React from 'react';
-import { Control, Controller, UseControllerProps } from 'react-hook-form';
+import { Controller, UseControllerProps } from 'react-hook-form';
 import { ReturnKeyTypeOptions } from 'react-native';
 
 type FormInputProps = {
-  errors: any; // TODO: Figure out how to handle typing this
-  control: Control<any, any>;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  errors: any;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  control: any;
   name: string;
   label: string;
   rules?: UseControllerProps['rules'];