refactor: Extract card style to theme file

src/modules/about/About.js

@@ -3,6 +3,7 @@ import {Text, ScrollView, View, Platform, StyleSheet, Image, Linking, TouchableO
 // import HTMLView from 'react-native-htmlview';
 
 import {Button, Text as NBText, Icon} from 'native-base';
+import theme from "../../theme";
 
 const CHATEAU_NEUF_ADDRESS = 'Det Norske Studentersamfund, Slemdalsveien 15, 0369 Oslo';
 
@@ -125,24 +126,7 @@ const styles = StyleSheet.create({
         paddingBottom: 10,
         lineHeight: 25,
     },
-    card: {
-        borderColor: '#e1e8ee',
-        borderWidth: 1,
-        ...Platform.select({
-            ios: {
-                shadowColor: 'rgba(0,0,0, .2)',
-                shadowOffset: {height: 0, width: 0},
-                shadowOpacity: 1,
-                shadowRadius: 1,
-            },
-            android: {
-                elevation: 1,
-            },
-        }),
-        padding: 8,
-        margin: 8,
-        backgroundColor: '#fff',
-    },
+    card: theme.card,
     featuredImage: {
         height: 230,
         width: null,

src/modules/events/EventDetail.js

@@ -1,9 +1,9 @@
 import React, { Component } from 'react';
-import {Linking, StyleSheet, ScrollView, Text, Platform, View, Image, TouchableHighlight,
-        TouchableOpacity} from "react-native";
+import {Linking, StyleSheet, ScrollView, Text, Platform, View, Image, TouchableOpacity} from "react-native";
 import HTMLView from 'react-native-htmlview';
 import moment from "moment";
-import {Button, Icon, Text as NBText} from "native-base";
+import {Icon} from "native-base";
+import theme from "../../theme";
 
 moment.locale('nb');
 
@@ -172,7 +172,7 @@ export default class EventDetail extends Component {
                     {/* Date and title */}
                     <View style={styles.dateAndTitle}>
                         <View style={styles.dateContainer}>
-                            <View style={styles.dateCard}>
+                            <View style={[styles.card, styles.dateCard]}>
                                 <Text style={styles.day}>{this._formatDay(item.start_time)}</Text>
                                 <Text style={styles.month}>{this._formatMonth(item.start_time)}</Text>
                                 {this.showYear()}
@@ -222,24 +222,7 @@ const styles = StyleSheet.create({
         fontWeight: 'bold',
         color: '#000',
     },
-    card: {
-        borderColor: '#e1e8ee',
-        borderWidth: 1,
-        ...Platform.select({
-            ios: {
-                shadowColor: 'rgba(0,0,0, .2)',
-                shadowOffset: {height: 0, width: 0},
-                shadowOpacity: 1,
-                shadowRadius: 1,
-            },
-            android: {
-                elevation: 1,
-            },
-        }),
-        padding: 8,
-        margin: 8,
-        backgroundColor: '#fff',
-    },
+    card: theme.card,
     image: {
         height: 260,
         width: null
@@ -275,20 +258,8 @@ const styles = StyleSheet.create({
         justifyContent: 'center',
     },
     dateCard: {
-        borderColor: '#e1e8ee',
-        borderWidth: 1,
-        ...Platform.select({
-            ios: {
-                shadowColor: 'rgba(0,0,0, .2)',
-                shadowOffset: {height: 0, width: 0},
-                shadowOpacity: 2,
-                shadowRadius: 2,
-            },
-            android: {
-                elevation: 1,
-            },
-        }),
-        backgroundColor: '#fff',
+        margin: 0,
+        padding: 0,
         paddingBottom: 6,
         width: 62,
     },

src/modules/events/EventList.js

@@ -3,6 +3,7 @@ import {Card, ListItem, CardItem, Body, Text as Text, Left, Right, Icon, Button,
 import React, { Component } from 'react';
 import moment from "moment";
 import 'moment/locale/nb';
+import theme from "../../theme";
 
 moment.locale('nb');
 
@@ -20,7 +21,7 @@ export default class EventList extends Component {
     );
 
     _renderSectionHeader = ({section}) => {
-        return (<ListItem style={[styles.listItem, {paddingBottom: 8}]}>
+        return (<ListItem style={[styles.listItem, {paddingBottom: 0, borderBottomWidth: 0}]}>
             <Body>
                 <Text style={styles.listItemSectionTitle}>{section.title}</Text>
             </Body>
@@ -71,7 +72,7 @@ export default class EventList extends Component {
             onEndReachedThreshould={10}
             initialNumToRender={10}
             ListFooterComponent={this._renderFooter}
-            style={styles.list}
+            style={[styles.list, {paddingRight: 0}]}
         />);
     }
 }
@@ -96,7 +97,5 @@ const styles = StyleSheet.create({
         textAlign: 'center',
         paddingBottom: 8
     },
-    list: {
-        backgroundColor: 'white'
-    }
+    list: theme.card,
 });

src/modules/login/Login.js

@@ -3,6 +3,7 @@ import {Linking, StyleSheet, View, Platform} from 'react-native';
 import {Container, Header, Content, Form, Item, Input, Label, Spinner, Button, Text,
     Icon} from 'native-base';
 import Config from 'react-native-config';
+import theme from "../../theme";
 
 export default class Login extends Component {
     constructor(props) {
@@ -157,22 +158,5 @@ const styles = StyleSheet.create({
         textAlign: 'center',
         color: 'red',
     },
-    card: {
-        borderColor: '#e1e8ee',
-        borderWidth: 1,
-        ...Platform.select({
-            ios: {
-                shadowColor: 'rgba(0,0,0, .2)',
-                shadowOffset: {height: 0, width: 0},
-                shadowOpacity: 1,
-                shadowRadius: 1,
-            },
-            android: {
-                elevation: 1,
-            },
-        }),
-        padding: 8,
-        margin: 8,
-        backgroundColor: '#fff',
-    },
+    card: theme.card,
 });

src/modules/membership/Membership.js

@@ -1,6 +1,7 @@
 import React, {Component} from 'react';
 import {ScrollView, Text, View, Linking, StyleSheet, Platform} from "react-native";
 import {Button, Text as NBText} from "native-base";
+import theme from "../../theme";
 export default class Membership extends Component {
     render() {
         return (
@@ -31,24 +32,7 @@ export default class Membership extends Component {
 
 
 const styles = StyleSheet.create({
-    card: {
-        borderColor: '#e1e8ee',
-        borderWidth: 1,
-        ...Platform.select({
-            ios: {
-                shadowColor: 'rgba(0,0,0, .2)',
-                shadowOffset: {height: 0, width: 0},
-                shadowOpacity: 1,
-                shadowRadius: 1,
-            },
-            android: {
-                elevation: 1,
-            },
-        }),
-        padding: 8,
-        margin: 8,
-        backgroundColor: '#fff',
-    },
+    card: theme.card,
     paragraph: {
         textAlign: 'center',
         fontSize: 16,

src/modules/membership/Proof.js

@@ -1,7 +1,8 @@
 import React, {Component} from 'react';
-import {Image, StyleSheet, TouchableOpacity, View} from "react-native";
-import {Button, Body, Card, CardItem, Container, Content, Text} from 'native-base';
+import {Image, Platform, ScrollView, StyleSheet, Text, TouchableOpacity, View} from "react-native";
+import {Button, Text as NBText} from 'native-base';
 import Confetti from 'react-native-confetti';
+import theme from "../../theme";
 
 export default class Proof extends Component {
     CONFETTI_TIMEOUT = 15000;
@@ -48,57 +49,52 @@ export default class Proof extends Component {
         }
 
         return (
-            <CardItem>
-                <View style={{alignItems: 'center', flex: 1}}>
-                    <Text>Gyldig til: </Text>
-                    <Text style={styles.validToValue}>{validTo}</Text>
-                </View>
-            </CardItem>
+            <View style={{alignItems: 'center', flex: 1}}>
+                <Text>Gyldig til: </Text>
+                <Text style={styles.validToValue}>{validTo}</Text>
+            </View>
         )
     }
 
     membershipStatus() {
         if (!this.props.user.is_member) {
             if ( !this.props.user.last_membership ) {
-                return (
-                    <CardItem>
-                        <View style={styles.notMember}>
-                            <Text style={styles.notMemberText}>Ikke medlem</Text>
-                        </View>
-                    </CardItem>)
+                return;
             }
 
-            return <View style={styles.expired}><Text style={styles.expiredText}>Utløpt</Text></View>
+            return (
+                <View style={styles.expired}>
+                    <Text style={styles.expiredText}>Utløpt</Text>
+                </View>)
         }
 
-        let statusText = 'Medlem';
-        if (this.props.user.is_volunteer) {
-            statusText = 'Aktiv';
-        }
+        const statusText = this.props.user.is_volunteer ? 'Aktiv' : 'Medlem';
 
         return (
-            <CardItem>
+            <View>
                 <TouchableOpacity onPress={this.onMembershipPress} style={styles.valid}>
                     <Text style={styles.validText}>{statusText}</Text>
                 </TouchableOpacity>
-            </CardItem>);
+            </View>);
     }
 
     purchaseButton() {
         if (this.props.user.is_member) {
             return;
         }
-        return <CardItem>
-            <Body>
+        return (
+            <View>
                 <Button
                     onPress={this.props.onChargePress}
                     full
                     style={styles.purchaseButton}
                 >
-                    <Text>Kjøp medlemskap</Text>
+                    <NBText>Kjøp medlemskap (200 NOK)</NBText>
                 </Button>
-            </Body>
-        </CardItem>
+                <View style={styles.purchaseText}>
+                    <Text style={styles.purchaseTextInner}>Medlemskapet er gyldig i ett år</Text>
+                </View>
+            </View>)
     }
 
     confetti() {
@@ -123,21 +119,21 @@ export default class Proof extends Component {
 
     render() {
         return (
-            <Container>
+            <ScrollView>
                 {this.confetti()}
-                <Content style={{margin: 8}}>
-                    <Card>
-                        {this.membershipName()}
-                        {this.logo()}
-                        {this.membershipStatus()}
-                        {this.purchaseButton()}
-                        {this.membershipValidTo()}
-                    </Card>
+                <View style={styles.card}>
+                    {this.membershipName()}
+                    {this.logo()}
+                    {this.membershipStatus()}
+                    {this.purchaseButton()}
+                    {this.membershipValidTo()}
+                </View>
+                <View>
                     <Button onPress={this.props.onLogoutPress} style={styles.logoutButton} small>
-                        <Text>Logg ut</Text>
+                        <NBText>Logg ut</NBText>
                     </Button>
-                </Content>
-            </Container>
+                </View>
+            </ScrollView>
         )
     };
 
@@ -146,13 +142,14 @@ export default class Proof extends Component {
         if(name === ' ') {
             name = this.props.user.email;
         }
-        return <CardItem>
+        return <View>
             <Text style={styles.nameText}>{name}</Text>
-        </CardItem>
+        </View>
     }
 }
 
 const styles = StyleSheet.create({
+    card: theme.card,
     nameText: {
         flex: 1,
         textAlign: 'center',
@@ -203,4 +200,14 @@ const styles = StyleSheet.create({
         alignSelf: 'center',
         marginVertical: 20,
     },
+    purchaseText: {
+        alignItems: 'center'
+    },
+    purchaseTextInner: {
+        fontStyle: 'italic',
+        fontSize: 16,
+        textAlign: 'center',
+        paddingTop: 10,
+        paddingBottom: 8
+    }
 });

src/modules/register/UserRegister.js

@@ -3,6 +3,7 @@ import {Container, Header, Content, Form, Item, Input, Label, Spinner, Button, T
 import {Platform, StyleSheet, View} from "react-native";
 import EmailValidator from 'email-validator';
 import platform from "native-base/src/theme/variables/platform";
+import theme from "../../theme";
 
 export default class UserRegister extends Component {
     constructor(props) {
@@ -250,24 +251,7 @@ const styles = StyleSheet.create({
         color: platform.btnDangerBg,
         fontSize: 14,
     },
-    card: {
-        borderColor: '#e1e8ee',
-        borderWidth: 1,
-        ...Platform.select({
-            ios: {
-                shadowColor: 'rgba(0,0,0, .2)',
-                shadowOffset: {height: 0, width: 0},
-                shadowOpacity: 1,
-                shadowRadius: 1,
-            },
-            android: {
-                elevation: 1,
-            },
-        }),
-        padding: 8,
-        margin: 8,
-        backgroundColor: '#fff',
-    },
+    card: theme.card,
     errorText: {
         paddingTop: 2,
         paddingBottom: 12,

src/theme.js

@@ -0,0 +1,21 @@
+import { Platform } from "react-native";
+
+const card = {
+    borderColor: '#e1e8ee',
+    borderWidth: 1,
+    ...Platform.select({
+        ios: {
+            shadowColor: 'rgba(0,0,0, .2)',
+            shadowOffset: {height: 0, width: 0},
+            shadowOpacity: 1,
+            shadowRadius: 1,
+        },
+        android: {
+            elevation: 1,
+        },
+    }),
+    padding: 8,
+    margin: 8,
+    backgroundColor: '#fff',
+};
+export default {card};