use colors from branding profile

src/modules/about/About.js

@@ -77,11 +77,11 @@ const About = () => (
       <Text style={styles.header}>Følg oss på</Text>
       <View style={[styles.section, { flex: 1, flexDirection: 'row' }]}>
         <TouchableOpacity style={styles.someBtn} onPress={openFacebook}>
-          <FAIcon name="facebook" size={40} color="black" />
+          <FAIcon name="facebook" size={40} color={theme.colors.neufBlack} />
           <Text>Facebook</Text>
         </TouchableOpacity>
         <TouchableOpacity style={styles.someBtn} onPress={openInstagram}>
-          <FAIcon name="instagram" size={40} color="black" />
+          <FAIcon name="instagram" size={40} color={theme.colors.neufBlack} />
           <Text>Instagram</Text>
         </TouchableOpacity>
       </View>
@@ -155,12 +155,12 @@ const styles = StyleSheet.create({
   header: {
     fontSize: 20,
     fontWeight: 'bold',
-    color: '#000',
+    color: theme.colors.neufBlack,
     textAlign: 'center',
   },
   paragraph: {
     fontSize: 16,
-    color: '#000',
+    color: theme.colors.neufBlack,
     paddingBottom: 10,
     lineHeight: 25,
   },

src/modules/events/EventDetail.js

@@ -223,7 +223,7 @@ const styles = StyleSheet.create({
   title: {
     fontSize: 20,
     fontWeight: 'bold',
-    color: '#000',
+    color: theme.colors.neufBlack,
   },
   card: theme.card,
   image: {
@@ -232,7 +232,7 @@ const styles = StyleSheet.create({
   },
   time: {
     fontSize: 14,
-    color: '#666',
+    color: theme.colors.lightText,
   },
   metaInner: {
     flexDirection: 'row',
@@ -245,14 +245,14 @@ const styles = StyleSheet.create({
     marginVertical: 8,
   },
   metaText: {
-    color: '#000',
+    color: theme.colors.neufBlack,
   },
   metaSubtitle: {
-    color: '#666',
+    color: theme.colors.neufBlack,
   },
   content: {
     borderTopWidth: StyleSheet.hairlineWidth,
-    borderColor: '#ccc',
+    borderColor: theme.colors.neufGray,
     marginTop: 8,
     paddingTop: 10,
   },
@@ -269,7 +269,7 @@ const styles = StyleSheet.create({
   day: {
     paddingTop: 5,
     fontSize: 20,
-    color: '#000',
+    color: theme.colors.neufBlack,
     textAlign: 'center',
   },
   month: {
@@ -278,8 +278,8 @@ const styles = StyleSheet.create({
   },
   year: {
     fontSize: 9,
-    color: '#fff',
-    backgroundColor: '#f58220',
+    color: theme.colors.neufWhite,
+    backgroundColor: theme.colors.neufOrange,
     textAlign: 'center',
     paddingRight: 20,
     paddingBottom: 3,

src/modules/events/EventList.js

@@ -40,7 +40,7 @@ const EventList = () => {
           <Text style={styles.listItemTime}>{_formatTime(item.start_time)}</Text>
         </View>
         <View style={styles.arrow}>
-          <ArrowForwardIcon size={4} color="#999999" marginTop={3} />
+          <ArrowForwardIcon size={4} color={theme.colors.neufBlack} marginTop={3} />
         </View>
       </HStack>
     </TouchableOpacity>
@@ -51,7 +51,7 @@ const EventList = () => {
   const Footer = () =>
     !loading && (
       <View style={{ paddingVertical: 20 }}>
-        <Spinner color="#f58220" />
+        <Spinner color={theme.colors.neufOrange} />
       </View>
     );
 
@@ -93,23 +93,23 @@ export default EventList;
 
 const styles = StyleSheet.create({
   listItem: {
-    backgroundColor: 'white',
+    backgroundColor: theme.colors.neufWhite,
     paddingTop: 8,
     paddingBottom: 12,
     paddingLeft: 12,
     paddingRight: 12,
     borderBottomWidth: 1,
-    borderBottomColor: '#ccc',
+    borderBottomColor: theme.colors.neufGray,
   },
   listItemTitle: {
     fontSize: 16,
   },
   listItemTime: {
     fontSize: 14,
-    color: '#666',
+    color: theme.colors.lightText,
   },
   sectionHeader: {
-    backgroundColor: 'white',
+    backgroundColor: theme.colors.neufWhite,
     ...Platform.select({
       ios: { marginBottom: -8 },
     }),

src/modules/login/Login.js

@@ -50,7 +50,7 @@ const Login = () => {
         >
           <Text>Glemt passord?</Text>
         </Button>
-        {isLoggingIn && <ActivityIndicator color="#f58220" />}
+        {isLoggingIn && <ActivityIndicator color={theme.colors.neufOrange} />}
       </View>
     </ScrollView>
   );

src/modules/membership/Membership.js

@@ -13,7 +13,7 @@ const Membership = () => {
   if (isFetchingUserData) {
     return (
       <View style={styles.card}>
-        <ActivityIndicator color="#f58220" />
+        <ActivityIndicator color={theme.colors.neufOrange} />
       </View>
     );
   }
@@ -33,7 +33,7 @@ const styles = StyleSheet.create({
   paragraph: {
     textAlign: 'center',
     fontSize: 16,
-    color: '#000',
+    color: theme.colors.neufBlack,
     paddingBottom: 10,
     lineHeight: 25,
   },
@@ -43,7 +43,7 @@ const styles = StyleSheet.create({
   },
   em: {
     fontSize: 16,
-    color: '#000',
+    color: theme.colors.neufBlack,
     fontStyle: 'italic',
     textAlign: 'center',
     marginVertical: 10,
@@ -52,14 +52,14 @@ const styles = StyleSheet.create({
     textAlign: 'center',
     fontWeight: 'bold',
     fontSize: 20,
-    color: '#000',
+    color: theme.colors.neufBlack,
     paddingVertical: 10,
     lineHeight: 25,
   },
   header: {
     fontSize: 16,
     fontWeight: 'bold',
-    color: '#000',
+    color: theme.colors.neufBlack,
     lineHeight: 25,
     paddingLeft: 2,
   },

src/modules/membership/MembershipInfo.js

@@ -38,7 +38,7 @@ const styles = StyleSheet.create({
   paragraph: {
     textAlign: 'center',
     fontSize: 16,
-    color: '#000',
+    color: theme.colors.neufBlack,
     paddingBottom: 10,
     lineHeight: 25,
   },
@@ -48,7 +48,7 @@ const styles = StyleSheet.create({
   },
   em: {
     fontSize: 16,
-    color: '#000',
+    color: theme.colors.neufBlack,
     fontStyle: 'italic',
     textAlign: 'center',
     marginVertical: 10,
@@ -57,14 +57,14 @@ const styles = StyleSheet.create({
     textAlign: 'center',
     fontWeight: 'bold',
     fontSize: 20,
-    color: '#000',
+    color: theme.colors.neufBlack,
     paddingVertical: 10,
     lineHeight: 25,
   },
   header: {
     fontSize: 16,
     fontWeight: 'bold',
-    color: '#000',
+    color: theme.colors.neufBlack,
     lineHeight: 25,
     paddingLeft: 2,
   },

src/modules/membership/Proof.js

@@ -64,7 +64,7 @@ const PurchaseButton = ({ user, isChargingMembership, isLoadingMembershipType, o
 
   return (
     <View>
-      {isChargingMembership && <ActivityIndicator color="#f58220" />}
+      {isChargingMembership && <ActivityIndicator color={theme.colors.neufOrange} />}
       <Button
         onPress={onChargePress}
         fullWidth
@@ -203,37 +203,37 @@ const styles = StyleSheet.create({
     fontWeight: 'bold',
   },
   valid: {
-    backgroundColor: '#5cb85c',
+    backgroundColor: theme.colors.success,
     flex: 1,
     marginHorizontal: -16,
     padding: 16,
   },
   validText: {
-    color: 'white',
+    color: theme.colors.neufWhite,
     textAlign: 'center',
     fontSize: 30,
     fontWeight: '800',
   },
   expired: {
-    backgroundColor: '#d9534f',
+    backgroundColor: theme.colors.danger,
     flex: 1,
     marginHorizontal: -16,
     padding: 16,
     marginVertical: 16,
   },
   expiredText: {
-    color: 'white',
+    color: theme.colors.neufWhite,
     textAlign: 'center',
     fontSize: 24,
   },
   notMember: {
-    backgroundColor: '#62B1F6',
+    backgroundColor: theme.colors.neufBlue,
     flex: 1,
     marginHorizontal: -16,
     padding: 16,
   },
   notMemberText: {
-    color: 'white',
+    color: theme.colors.neufWhite,
     textAlign: 'center',
     fontSize: 24,
   },

src/modules/register/UserRegister.js

@@ -73,7 +73,7 @@ const UserRegister = () => {
         <Button fullWidth disabled={isDisabled} onPress={onSubmit} style={styles.registerButton}>
           <Text>Registrer meg</Text>
         </Button>
-        {isRegisteringUser && <ActivityIndicator color="#f58220" />}
+        {isRegisteringUser && <ActivityIndicator color={theme.colors.neufOrange} />}
       </View>
     </ScrollView>
   );

src/theme.js

@@ -2,8 +2,17 @@ import { Platform } from 'react-native';
 import { Colors } from 'react-native-ui-lib';
 
 const colors = {
-  primary: '#f58220',
   danger: '#d9534f',
+  success: '#5cb85c',
+  lightText: '#666',
+  neufPurple: '#720328',
+  neufPink: '#CD96AB',
+  neufGray: '#E5E2D7',
+  neufOrange: '#f58220',
+  neufBeige: '#F8BC90',
+  neufBlue: '#0A0F6D',
+  neufWhite: '#FFFFFF',
+  neufBlack: '#161516',
 };
 
 const card = {
@@ -20,11 +29,11 @@ const card = {
   }),
   padding: 8,
   margin: 8,
-  backgroundColor: '#fff',
+  backgroundColor: colors.neufWhite,
 };
 
 export function loadTheme() {
-  Colors.loadDesignTokens({ primaryColor: colors.primary });
+  Colors.loadDesignTokens({ primaryColor: colors.neufOrange });
 }
 
 export default { card, colors };