feat: Start theming buttons

Format using prettier

index.js

@@ -1,13 +1,13 @@
+// FIXME: This is never loaded by expo
 import { AppRegistry } from 'react-native';
-import * as Sentry from '@sentry/react-native';
-import Config from 'react-native-config';
+// import * as Sentry from '@sentry/react-native';
 
 import App from './src/App';
 
 import { name as appName } from './app.json';
 
-if (Config.SENTRY_DSN) {
-  Sentry.init({ dsn: Config.SENTRY_DSN });
-}
+// if (Config.SENTRY_DSN) {
+//   Sentry.init({ dsn: Config.SENTRY_DSN });
+// }
 
 AppRegistry.registerComponent(appName, () => App);

src/App.js

@@ -5,6 +5,7 @@ import { ApolloClient, HttpLink, InMemoryCache, ApolloProvider } from '@apollo/c
 import { StripeProvider } from '@stripe/stripe-react-native';
 import { LogBox } from 'react-native';
 
+import { loadTheme } from './theme';
 
 import Dusken from './Dusken';
 import { store, persistor } from './reduxStore';
@@ -14,7 +15,9 @@ const apolloClient = new ApolloClient({
   cache: new InMemoryCache(),
 });
 // FIXME: Replace unmaintained native-base with https://wix.github.io/react-native-ui-lib/ which produces this warning
-LogBox.ignoreLogs(['In React 18, SSRProvider is not necessary and is a noop. You can remove it from your app.'])
+LogBox.ignoreLogs(['In React 18, SSRProvider is not necessary and is a noop. You can remove it from your app.']);
+
+loadTheme();
 
 export default function App() {
   return (

src/Navigation.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
 import { NavigationContainer } from '@react-navigation/native';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
-import {SimpleLineIcons as Icon} from '@expo/vector-icons';
+import { SimpleLineIcons as Icon } from '@expo/vector-icons';
 
 import EventList from './modules/events/EventList';
 import EventDetail from './modules/events/EventDetail';

src/api.js

@@ -44,7 +44,7 @@ export function requestLogin(username, password) {
         (data) => {
           console.log(data);
           dispatch(loginFailure(data || { non_field_errors: ['Kunne ikke logge inn, prøv igjen'] }));
-        }
+        },
       );
   };
 }
@@ -75,7 +75,7 @@ export function requestUserData(authToken) {
         },
         (data) => {
           dispatch(userDataFailure(data || { non_field_errors: ['Kunne ikke hente brukerdata'] }));
-        }
+        },
       );
   };
 }
@@ -111,7 +111,7 @@ export function requestRegisterUser({ firstName, lastName, email, phoneNumber, p
         },
         (data) => {
           dispatch(registerUserFailure(data || { non_field_errors: ['Kunne ikke registrere bruker, prøv igjen'] }));
-        }
+        },
       );
   };
 }
@@ -146,7 +146,7 @@ export function requestMembershipCharge(authToken, stripeToken, membershipType)
         },
         (data) => {
           dispatch(membershipChargeFailure(data.detail || 'Kunne ikke belaste bankkortet, prøv igjen'));
-        }
+        },
       );
   };
 }

src/modules/about/About.js

@@ -1,8 +1,8 @@
 import React from 'react';
 import { Text, View, Platform, StyleSheet, Image, Linking, TouchableOpacity, ScrollView } from 'react-native';
 
-import {SimpleLineIcons as SimpleIcon, FontAwesome5 as FAIcon} from '@expo/vector-icons';
-import {Button} from 'react-native-ui-lib';
+import { SimpleLineIcons as SimpleIcon, FontAwesome5 as FAIcon } from '@expo/vector-icons';
+import { Button } from 'react-native-ui-lib';
 import theme from '../../theme';
 
 const CHATEAU_NEUF_ADDRESS = 'Det Norske Studentersamfund, Slemdalsveien 15, 0369 Oslo';
@@ -90,9 +90,7 @@ const About = () => (
       </View>
       <Text style={styles.header}>Åpningstider</Text>
       <View style={styles.section}>
-        <Button
-          onPress={() => Linking.openURL('https://studentersamfundet.no/aapningstider/')}
-        >
+        <Button onPress={() => Linking.openURL('https://studentersamfundet.no/aapningstider/')}>
           <SimpleIcon name="clock" style={styles.icon} />
           <Text>Vis åpningstider</Text>
         </Button>
@@ -100,10 +98,8 @@ const About = () => (
       <Text style={styles.header}>Ta kontakt</Text>
       <View style={[styles.section, { flex: 1, flexDirection: 'row' }]}>
         <View>
-          <Button
-            onPress={() => Linking.openURL('tel:+4794430002')}
-            style={{ marginHorizontal: 10 }}
-          ><SimpleIcon name="phone" style={styles.icon} />
+          <Button onPress={() => Linking.openURL('tel:+4794430002')} style={{ marginHorizontal: 10 }}>
+            <SimpleIcon name="phone" style={styles.icon} />
             <Text>Ring</Text>
           </Button>
         </View>
@@ -111,7 +107,8 @@ const About = () => (
           <Button
             onPress={() => Linking.openURL('mailto:ledelsen@studentersamfundet.no')}
             style={{ marginHorizontal: 10 }}
-          ><SimpleIcon name="envelope" style={styles.icon} />
+          >
+            <SimpleIcon name="envelope" style={styles.icon} />
             <Text>Send e-post</Text>
           </Button>
         </View>
@@ -171,7 +168,7 @@ const styles = StyleSheet.create({
   },
   icon: {
     fontSize: 16,
-    marginRight: 4
+    marginRight: 4,
   },
   largeIcon: {
     fontSize: 40,

src/modules/events/EventDetail.js

@@ -1,5 +1,15 @@
 import React from 'react';
-import { Linking, StyleSheet, ScrollView, Text, Platform, View, Image, TouchableOpacity, useWindowDimensions } from 'react-native';
+import {
+  Linking,
+  StyleSheet,
+  ScrollView,
+  Text,
+  Platform,
+  View,
+  Image,
+  TouchableOpacity,
+  useWindowDimensions,
+} from 'react-native';
 import RenderHtml from 'react-native-render-html';
 import moment from 'moment';
 import { Icon } from 'native-base';
@@ -150,51 +160,52 @@ const EventDetail = ({
 }) => {
   const { width } = useWindowDimensions();
   return (
-  <ScrollView>
-    {event.thumbnail.medium_large && <Image source={{ uri: event.thumbnail.medium_large }} style={styles.image} />}
-    <View style={styles.card}>
-      {/* Date and title */}
-      <View style={styles.dateAndTitle}>
-        <View style={styles.dateContainer}>
-          <View style={[styles.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} />
+    <ScrollView>
+      {event.thumbnail.medium_large && <Image source={{ uri: event.thumbnail.medium_large }} style={styles.image} />}
+      <View style={styles.card}>
+        {/* Date and title */}
+        <View style={styles.dateAndTitle}>
+          <View style={styles.dateContainer}>
+            <View style={[styles.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} />
+            </View>
+          </View>
+          <View style={styles.titleContainer}>
+            <Text style={styles.title} numberOfLines={2}>
+              {event.title.decoded}
+            </Text>
           </View>
         </View>
-        <View style={styles.titleContainer}>
-          <Text style={styles.title} numberOfLines={2}>
-            {event.title.decoded}
-          </Text>
-        </View>
+        {/* Time and calendar */}
+        <TouchableOpacity style={styles.metaInner}>
+          <View style={styles.metaIcon}>
+            <Icon name="time" style={styles.icons} />
+          </View>
+          <View style={{ flexDirection: 'column' }}>
+            <Text style={styles.metaText}>{formatTimeFull(event)}</Text>
+            <Text style={styles.metaSubtitle}>{formatRelative(event.start_time)}</Text>
+          </View>
+        </TouchableOpacity>
+        {/* Location and maps */}
+        <TouchableOpacity style={styles.metaInner} onPress={() => onLocationPress(event.venue)}>
+          <View style={[styles.metaIcon, { paddingLeft: 1 }]}>
+            <Icon name="pin" style={styles.icons} />
+          </View>
+          <View style={{ flexDirection: 'column' }}>
+            <Text style={styles.metaText}>{event.venue}</Text>
+            <Text style={styles.metaSubtitle} numberOfLines={1}>
+              <VenueLocation venue={event.venue} />
+            </Text>
+          </View>
+        </TouchableOpacity>
+        <PriceAndTicket event={event} />
+        <FaceButton event={event} />
+        <RenderHtml contentWidth={width} source={{ html: event.content.rendered }} />
       </View>
-      {/* Time and calendar */}
-      <TouchableOpacity style={styles.metaInner}>
-        <View style={styles.metaIcon}>
-          <Icon name="time" style={styles.icons} />
-        </View>
-        <View style={{ flexDirection: 'column' }}>
-          <Text style={styles.metaText}>{formatTimeFull(event)}</Text>
-          <Text style={styles.metaSubtitle}>{formatRelative(event.start_time)}</Text>
-        </View>
-      </TouchableOpacity>
-      {/* Location and maps */}
-      <TouchableOpacity style={styles.metaInner} onPress={() => onLocationPress(event.venue)}>
-        <View style={[styles.metaIcon, { paddingLeft: 1 }]}>
-          <Icon name="pin" style={styles.icons} />
-        </View>
-        <View style={{ flexDirection: 'column' }}>
-          <Text style={styles.metaText}>{event.venue}</Text>
-          <Text style={styles.metaSubtitle} numberOfLines={1}>
-            <VenueLocation venue={event.venue} />
-          </Text>
-        </View>
-      </TouchableOpacity>
-      <PriceAndTicket event={event} />
-      <FaceButton event={event} />
-      <RenderHtml contentWidth={width} source={{html:event.content.rendered}} />
-    </View>
-  </ScrollView>)
+    </ScrollView>
+  );
 };
 
 export default EventDetail;

src/modules/events/EventList.js

@@ -1,5 +1,7 @@
 import { StyleSheet, View, Platform, SectionList, TouchableOpacity } from 'react-native';
-import { Card, Text, Button, Spinner, ArrowForwardIcon, HStack } from 'native-base';
+import { Card, Text, Spinner, ArrowForwardIcon, HStack } from 'native-base';
+import { Button } from 'react-native-ui-lib';
+
 import React from 'react';
 import moment from 'moment';
 import 'moment/locale/nb';

src/modules/login/Login.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Linking, StyleSheet, View } from 'react-native';
-import { ScrollView, Spinner, Button, Text } from 'native-base';
+import { ScrollView, Spinner, Text } from 'native-base';
+import { Button } from 'react-native-ui-lib';
 
 import theme from '../../theme';
 import useLogin from './useLogin';
@@ -36,7 +37,7 @@ const Login = () => {
           onSubmitEditing={onSubmit}
           returnKeyType="send"
         />
-        <Button full onPress={onSubmit} style={styles.loginButton}>
+        <Button fullWidth onPress={onSubmit} style={styles.loginButton}>
           <Text>Logg inn</Text>
         </Button>
         <Button

src/modules/login/useLogin.js

@@ -2,6 +2,7 @@ import { useNavigation } from '@react-navigation/native';
 import { useEffect } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { useForm } from 'react-hook-form';
+
 import { requestLogin } from '../../api';
 
 const useLogin = () => {

src/modules/membership/MembershipInfo.js

@@ -1,7 +1,8 @@
 import React from 'react';
 
 import { ScrollView, Text, View, StyleSheet } from 'react-native';
-import { Button, Text as NBText } from 'native-base';
+import { Text as NBText } from 'native-base';
+import { Button } from 'react-native-ui-lib';
 import theme from '../../theme';
 
 const MembershipInfo = ({ onRegister, onLogin }) => (
@@ -12,7 +13,7 @@ const MembershipInfo = ({ onRegister, onLogin }) => (
         Her kan du bli medlem i Det Norske Studentersamfund - Chateau Neuf og ha medlemsbeviset ditt på telefonen
       </Text>
       <View style={styles.button}>
-        <Button onPress={onRegister} full>
+        <Button onPress={onRegister} fullWidth>
           <NBText>Bli medlem</NBText>
         </Button>
       </View>
@@ -23,7 +24,7 @@ const MembershipInfo = ({ onRegister, onLogin }) => (
       </Text>
       <Text style={styles.em}>Allerede medlem?</Text>
       <View style={styles.button}>
-        <Button onPress={onLogin} full>
+        <Button onPress={onLogin} fullWidth>
           <NBText>Logg inn</NBText>
         </Button>
       </View>

src/modules/membership/Proof.js

@@ -1,6 +1,7 @@
 import React, { useEffect, useRef } from 'react';
 import { Image, ScrollView, StyleSheet, Text, TouchableOpacity, View, RefreshControl } from 'react-native';
-import { Button, Text as NBText, Spinner } from 'native-base';
+import { Text as NBText, Spinner } from 'native-base';
+import { Button } from 'react-native-ui-lib';
 import Confetti from 'react-native-confetti';
 
 import theme from '../../theme';
@@ -58,7 +59,7 @@ const PurchaseButton = ({ user, isChargingMembership, isLoadingMembershipType, o
       {isChargingMembership && <Spinner color="#f58220" />}
       <Button
         onPress={onChargePress}
-        full
+        fullWidth
         disabled={isChargingMembership || isLoadingMembershipType}
         style={styles.purchaseButton}
       >

src/modules/register/UserRegister.js

@@ -1,5 +1,7 @@
 import React from 'react';
-import { Spinner, Button, Text, ScrollView } from 'native-base';
+import { Spinner, Text, ScrollView } from 'native-base';
+import { Button } from 'react-native-ui-lib';
+
 import { StyleSheet, View } from 'react-native';
 import * as EmailValidator from 'email-validator';
 
@@ -68,7 +70,7 @@ const UserRegister = () => {
         <View style={styles.errorBox}>
           <FormErrors errors={errors} />
         </View>
-        <Button full disabled={isDisabled} onPress={onSubmit} style={styles.registerButton}>
+        <Button fullWidth disabled={isDisabled} onPress={onSubmit} style={styles.registerButton}>
           <Text>Registrer meg</Text>
         </Button>
         {isRegisteringUser && <Spinner color="#f58220" />}

src/theme.js

@@ -1,6 +1,8 @@
 import { Platform } from 'react-native';
+import { Colors } from 'react-native-ui-lib';
 
 const colors = {
+  primary: '#f58220',
   danger: '#d9534f',
 };
 
@@ -20,4 +22,9 @@ const card = {
   margin: 8,
   backgroundColor: '#fff',
 };
+
+export function loadTheme() {
+  Colors.loadDesignTokens({ primaryColor: colors.primary });
+}
+
 export default { card, colors };