Merge branch 'main' into 'leander/form-error-handling'

# Conflicts:
#   src/modules/login/Login.tsx

src/modules/about/About.tsx

@@ -72,7 +72,7 @@ const openMap = () => {
 /** FIXME: Values here are pretty hardcoded. Should fetch config from a JSON-file or API */
 const About = () => (
   <ScrollView>
-    <View style={styles.card}>
+    <View style={theme.card}>
       <Text style={[styles.header, { marginTop: 8 }]}>Det Norske Studentersamfund</Text>
       <TouchableOpacity onPress={() => Linking.openURL('https://www.studentersamfundet.no/')}>
         <Image style={styles.logo} source={logo} />
@@ -167,7 +167,6 @@ const styles = StyleSheet.create({
     paddingBottom: 10,
     lineHeight: 25,
   },
-  card: theme.card,
   featuredImage: {
     height: 230,
     width: null,

src/modules/events/EventDetail.tsx

@@ -166,11 +166,11 @@ const EventDetail = ({
   return (
     <ScrollView>
       {event.thumbnail.medium_large && <Image source={{ uri: event.thumbnail.medium_large }} style={styles.image} />}
-      <View style={styles.card}>
+      <View style={theme.card}>
         {/* Date and title */}
         <View style={styles.dateAndTitle}>
           <View style={styles.dateContainer}>
-            <View style={[styles.card, styles.dateCard]}>
+            <View style={[theme.card, styles.dateCard]}>
               <Text style={styles.day}>{format(event.start_time, FORMAT_DAY)}</Text>
               <Text style={styles.month}>{format(event.start_time, FORMAT_MONTH)}</Text>
               <Year startTime={event.start_time} />
@@ -229,7 +229,6 @@ const styles = StyleSheet.create({
     fontWeight: 'bold',
     color: theme.colors.neufBlack,
   },
-  card: theme.card,
   image: {
     height: 260,
     width: null,

src/modules/events/EventList.tsx

@@ -1,7 +1,7 @@
+import { SimpleLineIcons as Icon } from '@expo/vector-icons';
 import moment from 'moment';
-import { Card, Text, Spinner, ArrowForwardIcon, HStack } from 'native-base';
 import React from 'react';
-import { StyleSheet, View, Platform, SectionList, TouchableOpacity } from 'react-native';
+import { StyleSheet, View, Platform, SectionList, TouchableOpacity, ActivityIndicator, Text } from 'react-native';
 import { Button } from 'react-native-ui-lib';
 import 'moment/locale/nb';
 
@@ -33,7 +33,7 @@ const EventList = () => {
       }}
       style={styles.listItem}
     >
-      <HStack>
+      <View style={styles.row}>
         <View style={{ flex: 5 }}>
           <Text style={styles.listItemTitle} numberOfLines={1}>
             {item.title.decoded}
@@ -41,9 +41,9 @@ const EventList = () => {
           <Text style={styles.listItemTime}>{formatTime(item.start_time)}</Text>
         </View>
         <View style={styles.arrow}>
-          <ArrowForwardIcon size={4} color={theme.colors.neufBlack} marginTop={3} />
+          <Icon name="arrow-right" style={{ color: theme.colors.neufBlack, marginTop: 3 }} />
         </View>
-      </HStack>
+      </View>
     </TouchableOpacity>
   );
 
@@ -52,23 +52,21 @@ const EventList = () => {
   const Footer = () =>
     !loading && (
       <View style={{ paddingVertical: 20 }}>
-        <Spinner color={theme.colors.neufOrange} />
+        <ActivityIndicator color={theme.colors.neufOrange} />
       </View>
     );
 
   if (error) {
     return (
-      <View>
-        <Card style={{ margin: 4 }}>
-          <View>
-            <Text style={styles.loadingText}>Kunne ikke hente programmet...</Text>
-          </View>
-          <View>
-            <Button onPress={handleRefresh}>
-              <Text>Prøv igjen</Text>
-            </Button>
-          </View>
-        </Card>
+      <View style={theme.card}>
+        <View>
+          <Text style={styles.loadingText}>Kunne ikke hente programmet...</Text>
+        </View>
+        <View>
+          <Button onPress={handleRefresh}>
+            <Text>Prøv igjen</Text>
+          </Button>
+        </View>
       </View>
     );
   }
@@ -85,7 +83,7 @@ const EventList = () => {
       onEndReachedThreshold={10}
       initialNumToRender={10}
       ListFooterComponent={Footer}
-      style={[styles.card, styles.list]}
+      style={[theme.card, styles.list]}
       ListHeaderComponent={Header}
     />
   );
@@ -125,7 +123,6 @@ const styles = StyleSheet.create({
     textAlign: 'center',
     paddingBottom: 8,
   },
-  card: theme.card,
   list: {
     padding: 0,
     marginTop: 0,
@@ -139,4 +136,5 @@ const styles = StyleSheet.create({
     flex: 1,
     alignItems: 'flex-end',
   },
+  row: { flex: 1, flexDirection: 'row' },
 });

src/modules/login/Login.tsx

@@ -1,6 +1,5 @@
-import { ScrollView } from 'native-base';
 import React from 'react';
-import { ActivityIndicator, Linking, StyleSheet, View, Text } from 'react-native';
+import { ActivityIndicator, Linking, StyleSheet, View, Text, ScrollView } from 'react-native';
 import { Button } from 'react-native-ui-lib';
 
 import FormErrors from 'src/components/FormErrors';
@@ -14,13 +13,14 @@ const Login = () => {
 
   return (
     <ScrollView>
-      <View style={styles.card}>
+      <View style={theme.card}>
+        <FormErrors errors={errors} />
         <FormInput
           name="email"
           label="E-post / Brukernavn"
-          keyboardType="email-address"
           control={control}
           errors={errors}
+          keyboardType="email-address"
           autoFocus
           autoCapitalize="none"
           autoCorrect={false}
@@ -67,5 +67,4 @@ const styles = StyleSheet.create({
     marginTop: 32,
     marginBottom: 16,
   },
-  card: theme.card,
 });

src/modules/membership/Membership.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { View, StyleSheet, ActivityIndicator } from 'react-native';
+import { View, ActivityIndicator } from 'react-native';
 
 import PrivacyButton from 'src/components/PrivacyButton';
 import theme from 'src/theme';
@@ -14,7 +14,7 @@ const Membership = () => {
 
   if (isFetchingUserData) {
     return (
-      <View style={styles.card}>
+      <View style={theme.card}>
         <ActivityIndicator color={theme.colors.neufOrange} />
       </View>
     );
@@ -37,40 +37,3 @@ const Membership = () => {
   );
 };
 export default Membership;
-
-const styles = StyleSheet.create({
-  card: theme.card,
-  paragraph: {
-    textAlign: 'center',
-    fontSize: 16,
-    color: theme.colors.neufBlack,
-    paddingBottom: 10,
-    lineHeight: 25,
-  },
-  button: {
-    marginTop: 6,
-    marginBottom: 16,
-  },
-  em: {
-    fontSize: 16,
-    color: theme.colors.neufBlack,
-    fontStyle: 'italic',
-    textAlign: 'center',
-    marginVertical: 10,
-  },
-  headerTitle: {
-    textAlign: 'center',
-    fontWeight: 'bold',
-    fontSize: 20,
-    color: theme.colors.neufBlack,
-    paddingVertical: 10,
-    lineHeight: 25,
-  },
-  header: {
-    fontSize: 16,
-    fontWeight: 'bold',
-    color: theme.colors.neufBlack,
-    lineHeight: 25,
-    paddingLeft: 2,
-  },
-});

src/modules/membership/MembershipInfo.tsx

@@ -10,7 +10,7 @@ interface MembershipInfoProps {
 }
 const MembershipInfo = ({ onRegister, onLogin }: MembershipInfoProps) => (
   <ScrollView>
-    <View style={styles.card}>
+    <View style={theme.card}>
       <Text style={styles.headerTitle}>Hei 👋</Text>
       <Text style={styles.paragraph}>
         Her kan du bli medlem i Det Norske Studentersamfund - Chateau Neuf og ha medlemsbeviset ditt på telefonen
@@ -38,7 +38,6 @@ const MembershipInfo = ({ onRegister, onLogin }: MembershipInfoProps) => (
 export default MembershipInfo;
 
 const styles = StyleSheet.create({
-  card: theme.card,
   paragraph: {
     textAlign: 'center',
     fontSize: 16,

src/modules/membership/Proof.tsx

@@ -148,9 +148,11 @@ interface ProofProps {
 const Proof = ({ onLogoutPress, fetchUser, isFetchingUserData }: ProofProps) => {
   const CONFETTI_TIMEOUT = 15000;
   const confettiRef = useRef<Confetti>(null);
-  const { paymentLoading, isLoadingMembershipType, onPurchasePress, membershipPrice, toast, setToast, user } = useProof({
-    fetchUser,
-  });
+  const { paymentLoading, isLoadingMembershipType, onPurchasePress, membershipPrice, toast, setToast, user } = useProof(
+    {
+      fetchUser,
+    },
+  );
 
   useEffect(() => {
     const currentRef = confettiRef.current;
@@ -183,7 +185,7 @@ const Proof = ({ onLogoutPress, fetchUser, isFetchingUserData }: ProofProps) =>
       <View>
         <UserConfetti user={user} confettiRef={confettiRef} />
         <ScrollView refreshControl={<RefreshControl refreshing={isFetchingUserData} onRefresh={fetchUser} />}>
-          <View style={[styles.card, { paddingVertical: 16 }]}>
+          <View style={[theme.card, { paddingVertical: 16 }]}>
             <MembershipName user={user} />
             <Logo user={user} />
             <MembershipStatus user={user} onMembershipPress={onMembershipPress} />
@@ -218,7 +220,6 @@ const Proof = ({ onLogoutPress, fetchUser, isFetchingUserData }: ProofProps) =>
 export default Proof;
 
 const styles = StyleSheet.create({
-  card: theme.card,
   membershipStatus: {
     marginVertical: 16,
   },

src/modules/register/UserRegister.tsx

@@ -26,12 +26,10 @@ const UserRegister = () => {
     setToast,
   } = useUserRegister();
   const isDisabled = isRegisteringUser || !isValid;
-  // TODO: validate on type
-  // TODO: highlight errorfields
 
   return (
     <>
-      <View style={styles.card}>
+      <View style={theme.card}>
         <ScrollView>
           <FormInput
             name="first_name"
@@ -122,5 +120,4 @@ const styles = StyleSheet.create({
   errorBox: {
     marginVertical: 10,
   },
-  card: theme.card,
 });