Verified Commit 2e7a947b authored by Sébastiaan Versteeg's avatar Sébastiaan Versteeg
Browse files

Use CardSection in Profile

parent cfee4808
...@@ -22,8 +22,8 @@ const styles = StyleSheet.create({ ...@@ -22,8 +22,8 @@ const styles = StyleSheet.create({
}, },
card: { card: {
backgroundColor: Colors.white, backgroundColor: Colors.white,
elevation: 2,
android: { android: {
elevation: 2,
borderRadius: 2, borderRadius: 2,
}, },
ios: { ios: {
......
...@@ -18,12 +18,12 @@ import { back } from '../../../actions/navigation'; ...@@ -18,12 +18,12 @@ import { back } from '../../../actions/navigation';
import { STATUSBAR_HEIGHT } from '../../components/standardHeader/style/StandardHeader'; import { STATUSBAR_HEIGHT } from '../../components/standardHeader/style/StandardHeader';
import styles, { HEADER_MIN_HEIGHT, HEADER_MAX_HEIGHT, HEADER_SCROLL_DISTANCE } from './style/Profile'; import styles, { HEADER_MIN_HEIGHT, HEADER_MAX_HEIGHT, HEADER_SCROLL_DISTANCE } from './style/Profile';
import CardSection from '../../components/cardSection/CardSection';
const getDescription = (profile, t) => ([ const getDescription = (profile, t) => (
<Text style={[styles.sectionHeader, styles.marginTop]} key="title"> <CardSection
{`${t('About')} ${profile.display_name}`} sectionHeader={`${t('About')} ${profile.display_name}`}
</Text>, >
<View style={styles.card} key="content">
<Text <Text
style={[ style={[
styles.data, styles.data,
...@@ -33,8 +33,8 @@ const getDescription = (profile, t) => ([ ...@@ -33,8 +33,8 @@ const getDescription = (profile, t) => ([
> >
{profile.profile_description || t('This member has not written a description yet.')} {profile.profile_description || t('This member has not written a description yet.')}
</Text> </Text>
</View>, </CardSection>
]); );
const getPersonalInfo = (profile, t) => { const getPersonalInfo = (profile, t) => {
const profileInfo = { const profileInfo = {
...@@ -67,11 +67,8 @@ const getPersonalInfo = (profile, t) => { ...@@ -67,11 +67,8 @@ const getPersonalInfo = (profile, t) => {
}).filter(n => n); }).filter(n => n);
if (profileData) { if (profileData) {
return [ return (
<Text style={styles.sectionHeader} key="title"> <CardSection sectionHeader={t('Personal information')}>
{t('Personal information')}
</Text>,
<View style={styles.card} key="content">
{profileData.map((item, i) => ( {profileData.map((item, i) => (
<View style={[styles.item, i !== 0 && styles.borderTop]} key={item.title}> <View style={[styles.item, i !== 0 && styles.borderTop]} key={item.title}>
<Text style={styles.description}> <Text style={styles.description}>
...@@ -85,19 +82,18 @@ const getPersonalInfo = (profile, t) => { ...@@ -85,19 +82,18 @@ const getPersonalInfo = (profile, t) => {
</Text> </Text>
</View> </View>
))} ))}
</View>, </CardSection>
]; );
} }
return <View />; return <View />;
}; };
const getAchievements = (profile, t) => { const getAchievements = (profile, t) => {
if (profile.achievements.length) { if (profile.achievements.length) {
return [ return (
<Text style={styles.sectionHeader} key="title"> <CardSection
{t('Achievements for Thalia')} sectionHeader={t('Achievements for Thalia')}
</Text>, >
<View style={styles.card} key="content">
{profile.achievements.map((achievement, i) => ( {profile.achievements.map((achievement, i) => (
<View style={[styles.item, i !== 0 && styles.borderTop]} key={achievement.name}> <View style={[styles.item, i !== 0 && styles.borderTop]} key={achievement.name}>
<Text style={styles.description}> <Text style={styles.description}>
...@@ -124,8 +120,8 @@ const getAchievements = (profile, t) => { ...@@ -124,8 +120,8 @@ const getAchievements = (profile, t) => {
})} })}
</View> </View>
))} ))}
</View>, </CardSection>
]; );
} }
return <View />; return <View />;
}; };
......
...@@ -11,23 +11,6 @@ const styles = StyleSheet.create({ ...@@ -11,23 +11,6 @@ const styles = StyleSheet.create({
backgroundColor: Colors.background, backgroundColor: Colors.background,
flex: 1, 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: { profileText: {
ios: { ios: {
borderRadius: 4, borderRadius: 4,
...@@ -67,34 +50,9 @@ const styles = StyleSheet.create({ ...@@ -67,34 +50,9 @@ const styles = StyleSheet.create({
url: { url: {
textDecorationLine: 'underline', 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: { italics: {
fontStyle: 'italic', fontStyle: 'italic',
}, },
header: {
position: 'absolute',
top: 0,
left: 0,
right: 0,
backgroundColor: Colors.magenta,
overflow: 'hidden',
elevation: 4,
},
appBar: { appBar: {
backgroundColor: Colors.transparent, backgroundColor: Colors.transparent,
flex: 1, flex: 1,
...@@ -113,6 +71,8 @@ const styles = StyleSheet.create({ ...@@ -113,6 +71,8 @@ const styles = StyleSheet.create({
}, },
content: { content: {
marginTop: HEADER_MAX_HEIGHT, marginTop: HEADER_MAX_HEIGHT,
padding: 8,
paddingTop: 0,
}, },
icon: { icon: {
fontSize: 24, fontSize: 24,
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment