fix: title styling

netguru · Apr 14, 2020 · a113156 · a113156
1 parent c79e707
commit a113156
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 43 deletions.
diff --git a/src/predefinedComponents/AvatarHeader/AvatarHeader.js b/src/predefinedComponents/AvatarHeader/AvatarHeader.js
@@ -66,20 +66,20 @@ class AvatarHeader extends React.Component {
 
     return (
       <View style={[styles.headerWrapper, styles.userModalHeader, { backgroundColor }]}>
-        <TouchableOpacity hitSlop={sizes.hitSlop} onPress={leftTopIconOnPress}>
-          <Image style={styles.icon} resizeMode="contain" source={leftTopIcon} />
-        </TouchableOpacity>
         <View style={styles.headerMenu}>
+          <TouchableOpacity hitSlop={sizes.hitSlop} onPress={leftTopIconOnPress} style={styles.leftHeaderButton}>
+            <Image style={styles.icon} resizeMode="contain" source={leftTopIcon} />
+          </TouchableOpacity>
           <View style={styles.headerTitleContainer}>
             <Animated.Image source={image} style={[styles.headerPic, { opacity: imageOpacity }]} />
-            <Animated.Text style={[styles.headerTitle, { opacity: nameOpacity }]}>
+            <Animated.Text numberOfLines={1} style={[styles.headerTitle, { opacity: nameOpacity }]}>
               {title}
             </Animated.Text>
           </View>
+          <TouchableOpacity hitSlop={sizes.hitSlop} onPress={rightTopIconOnPress} style={styles.rightHeaderBtn}>
+            <Image style={styles.icon} resizeMode="contain" source={rightTopIcon} />
+          </TouchableOpacity>
         </View>
-        <TouchableOpacity hitSlop={sizes.hitSlop} onPress={rightTopIconOnPress}>
-          <Image style={styles.icon} resizeMode="contain" source={rightTopIcon} />
-        </TouchableOpacity>
       </View>
     )
   }

diff --git a/src/predefinedComponents/AvatarHeader/AvatarHeader.styles.js b/src/predefinedComponents/AvatarHeader/AvatarHeader.styles.js
@@ -17,20 +17,22 @@ export default StyleSheet.create({
     alignItems: 'center'
   },
   headerTitleContainer: {
+    flex: 8,
     flexDirection: 'row',
     alignItems: 'center',
-    marginLeft: -(constants.deviceWidth / 3)
+    marginRight: 24
   },
   headerTitle: {
     fontSize: 16,
     lineHeight: 20,
     color: colors.white,
     marginLeft: 12,
-    fontFamily: 'AvertaStd-Semibold'
+    marginRight: 12
   },
   infoContainer: {
+    flex: 1,
     flexDirection: 'row',
-    paddingBottom: 32
+    marginBottom: 16
   },
   iconContainer: {
     flexDirection: 'row',
@@ -42,8 +44,7 @@ export default StyleSheet.create({
   infoText: {
     color: colors.white,
     fontSize: constants.normalizedFontSize(16),
-    lineHeight: 24,
-    fontFamily: 'AvertaStd-Regular'
+    lineHeight: 24
   },
   icon: {
     width: 16,
@@ -61,6 +62,15 @@ export default StyleSheet.create({
     borderRadius: 8
   },
   userModalMessageContainer: {
+    marginTop: 12,
+    flex: 5,
     paddingBottom: 8
+  },
+  rightHeaderButton: { 
+    flex: 1,
+    alignItems: 'flex-end' 
+  },
+  leftHeaderButton: {
+    flex: 1,
   }
 })
diff --git a/src/predefinedComponents/DetailsHeader/DetailsHeader.js b/src/predefinedComponents/DetailsHeader/DetailsHeader.js
@@ -20,7 +20,7 @@ class DetailsHeader extends React.Component {
     this.scrollY = new ValueXY()
   }
 
-  setHeaderSize = headerLayout => this.setState({ headerLayout })
+  setHeaderSize = (headerLayout) => this.setState({ headerLayout })
 
   scrollPosition = (value) => {
     const { headerLayout } = this.state
@@ -29,13 +29,7 @@ class DetailsHeader extends React.Component {
   }
 
   renderHeader = (user) => {
-    const {
-      backgroundColor,
-      leftTopIconOnPress,
-      rightTopIconOnPress,
-      leftTopIcon,
-      rightTopIcon
-    } = this.props
+    const { backgroundColor, leftTopIconOnPress, rightTopIconOnPress, leftTopIcon, rightTopIcon } = this.props
 
     const opacity = this.scrollY.y.interpolate({
       inputRange: [0, this.scrollPosition(60), this.scrollPosition(90)],
@@ -52,10 +46,10 @@ class DetailsHeader extends React.Component {
           <Animated.View style={[styles.headerTitleContainer, { opacity }]}>
             <Text style={styles.headerTitle}>{user.label}</Text>
           </Animated.View>
+          <TouchableOpacity hitSlop={sizes.hitSlop} onPress={rightTopIconOnPress}>
+            <Image style={styles.icon} resizeMode="contain" source={rightTopIcon} />
+          </TouchableOpacity>
         </View>
-        <TouchableOpacity hitSlop={sizes.hitSlop} onPress={rightTopIconOnPress}>
-          <Image style={styles.icon} resizeMode="contain" source={rightTopIcon} />
-        </TouchableOpacity>
       </View>
     )
   }
@@ -106,8 +100,9 @@ class DetailsHeader extends React.Component {
     const {
       headerLayout: { height }
     } = this.state
-    const headerBorderRadius = hasBorderRadius
-      && this.scrollY.y.interpolate({
+    const headerBorderRadius =
+      hasBorderRadius &&
+      this.scrollY.y.interpolate({
         inputRange: [0, height],
         outputRange: [80, 0],
         extrapolate: 'extend'
@@ -128,14 +123,7 @@ class DetailsHeader extends React.Component {
 
   render() {
     const user = Brandon
-    const {
-      backgroundColor,
-      backgroundImage,
-      renderBody,
-      headerHeight,
-      snapToEdge,
-      bounces
-    } = this.props
+    const { backgroundColor, backgroundImage, renderBody, headerHeight, snapToEdge, bounces } = this.props
 
     return (
       <React.Fragment>

diff --git a/src/predefinedComponents/DetailsHeader/DetailsHeader.styles.js b/src/predefinedComponents/DetailsHeader/DetailsHeader.styles.js
@@ -5,16 +5,14 @@ export default StyleSheet.create({
   ...screenStyles,
   foregroundText: {
     color: colors.white,
-    fontFamily: 'AvertaStd-Semibold',
     paddingHorizontal: 12
   },
   foregroundTitle: {
     height: 36,
     alignSelf: 'flex-start',
     borderRadius: 18,
     alignItems: 'center',
-    justifyContent: 'center',
-    fontFamily: 'AvertaStd-Semibold'
+    justifyContent: 'center'
   },
   infoContainer: {
     flexDirection: 'row',
@@ -36,10 +34,10 @@ export default StyleSheet.create({
     color: colors.black,
     paddingLeft: 4,
     fontSize: 16,
-    lineHeight: 20,
-    fontFamily: 'AvertaStd-Semibold'
+    lineHeight: 20
   },
   footerContainer: {
+    flex: 1,
     flexDirection: 'row',
     justifyContent: 'flex-start',
     alignItems: 'center',
@@ -54,20 +52,18 @@ export default StyleSheet.create({
     fontSize: 16,
     lineHeight: 20,
     color: colors.white,
-    paddingLeft: 12,
-    fontFamily: 'AvertaStd-Semibold'
+    paddingLeft: 12
   },
   headerMenu: {
     flexDirection: 'row',
     alignItems: 'center'
   },
   headerTitleContainer: {
-    marginLeft: 24
+    flex: 8
   },
   headerTitle: {
     fontSize: 16,
     lineHeight: 20,
-    color: colors.white,
-    fontFamily: 'AvertaStd-Semibold'
+    color: colors.white
   }
 })