Use CardSection in Profile

app/ui/components/cardSection/style/CardSection.js

@@ -22,8 +22,8 @@ const styles = StyleSheet.create({
   },
   card: {
     backgroundColor: Colors.white,
-    elevation: 2,
     android: {
+      elevation: 2,
       borderRadius: 2,
     },
     ios: {

app/ui/screens/user/Profile.js

@@ -18,12 +18,12 @@ import { back } from '../../../actions/navigation';
 
 import { STATUSBAR_HEIGHT } from '../../components/standardHeader/style/StandardHeader';
 import styles, { HEADER_MIN_HEIGHT, HEADER_MAX_HEIGHT, HEADER_SCROLL_DISTANCE } from './style/Profile';
+import CardSection from '../../components/cardSection/CardSection';
 
-const getDescription = (profile, t) => ([
-  <Text style={[styles.sectionHeader, styles.marginTop]} key="title">
-    {`${t('About')} ${profile.display_name}`}
-  </Text>,
-  <View style={styles.card} key="content">
+const getDescription = (profile, t) => (
+  <CardSection
+    sectionHeader={`${t('About')} ${profile.display_name}`}
+  >
     <Text
       style={[
         styles.data,
@@ -33,8 +33,8 @@ const getDescription = (profile, t) => ([
     >
       {profile.profile_description || t('This member has not written a description yet.')}
     </Text>
-  </View>,
-]);
+  </CardSection>
+);
 
 const getPersonalInfo = (profile, t) => {
   const profileInfo = {
@@ -67,11 +67,8 @@ const getPersonalInfo = (profile, t) => {
   }).filter(n => n);
 
   if (profileData) {
-    return [
-      <Text style={styles.sectionHeader} key="title">
-        {t('Personal information')}
-      </Text>,
-      <View style={styles.card} key="content">
+    return (
+      <CardSection sectionHeader={t('Personal information')}>
         {profileData.map((item, i) => (
           <View style={[styles.item, i !== 0 && styles.borderTop]} key={item.title}>
             <Text style={styles.description}>
@@ -85,19 +82,18 @@ const getPersonalInfo = (profile, t) => {
             </Text>
           </View>
         ))}
-      </View>,
-    ];
+      </CardSection>
+    );
   }
   return <View />;
 };
 
 const getAchievements = (profile, t) => {
   if (profile.achievements.length) {
-    return [
-      <Text style={styles.sectionHeader} key="title">
-        {t('Achievements for Thalia')}
-      </Text>,
-      <View style={styles.card} key="content">
+    return (
+      <CardSection
+        sectionHeader={t('Achievements for Thalia')}
+      >
         {profile.achievements.map((achievement, i) => (
           <View style={[styles.item, i !== 0 && styles.borderTop]} key={achievement.name}>
             <Text style={styles.description}>
@@ -124,8 +120,8 @@ const getAchievements = (profile, t) => {
             })}
           </View>
         ))}
-      </View>,
-    ];
+      </CardSection>
+    );
   }
   return <View />;
 };

app/ui/screens/user/style/Profile.js

@@ -11,23 +11,6 @@ const styles = StyleSheet.create({
     backgroundColor: Colors.background,
     flex: 1,
   },
-  card: {
-    backgroundColor: Colors.white,
-    marginLeft: 8,
-    marginRight: 8,
-    marginTop: 10,
-    marginBottom: 10,
-    ios: {
-      borderRadius: 4,
-      borderColor: Colors.lightGray,
-      borderStyle: 'solid',
-      borderWidth: 0.5,
-    },
-    android: {
-      elevation: 2,
-      borderRadius: 2,
-    },
-  },
   profileText: {
     ios: {
       borderRadius: 4,
@@ -67,34 +50,9 @@ const styles = StyleSheet.create({
   url: {
     textDecorationLine: 'underline',
   },
-  sectionHeader: {
-    backgroundColor: Colors.background,
-    fontSize: 14,
-    color: Colors.textColour,
-    marginLeft: 18,
-    android: {
-      fontFamily: 'sans-serif-medium',
-    },
-    ios: {
-      fontFamily: 'System',
-      fontWeight: '600',
-    },
-  },
-  marginTop: {
-    marginTop: 10,
-  },
   italics: {
     fontStyle: 'italic',
   },
-  header: {
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    right: 0,
-    backgroundColor: Colors.magenta,
-    overflow: 'hidden',
-    elevation: 4,
-  },
   appBar: {
     backgroundColor: Colors.transparent,
     flex: 1,
@@ -113,6 +71,8 @@ const styles = StyleSheet.create({
   },
   content: {
     marginTop: HEADER_MAX_HEIGHT,
+    padding: 8,
+    paddingTop: 0,
   },
   icon: {
     fontSize: 24,