Fix Details Header (#356)

* fix: Remove redundant space in HeaderBar when leftTopIcon or rightTopIcon doesn't provider * fix: eslint * Update size text in avatar header
netguru · Sep 13, 2022 · 5c43b30 · 5c43b30
1 parent df462cd
commit 5c43b30
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 44 deletions.
diff --git a/src/constants/commonStyles.ts b/src/constants/commonStyles.ts
@@ -37,8 +37,8 @@ const commonStyles = StyleSheet.create({
   },
   message: {
     color: colors.white,
-    fontSize: 72,
-    lineHeight: 85,
+    fontSize: 48,
+    lineHeight: 55,
     letterSpacing: -1,
     textAlign: 'left',
   },

diff --git a/src/predefinedComponents/AvatarHeader/components/HeaderBar.tsx b/src/predefinedComponents/AvatarHeader/components/HeaderBar.tsx
@@ -103,19 +103,17 @@ export const HeaderBar: React.FC<HeaderProps> = ({
     <AnimatedSafeAreaView
       edges={safeAreaEdges}
       style={[commonStyles.headerWrapper, wrapperAnimatedStyle]}>
-      {
-        leftTopIcon ? (
+      {leftTopIcon ? (
         <Pressable
-          accessibilityLabel={ leftTopIconAccessibilityLabel }
+          accessibilityLabel={leftTopIconAccessibilityLabel}
           accessibilityRole="button"
-          hitSlop={ HIT_SLOP }
-          onPress={ leftTopIconOnPress }
-          style={ styles.leftHeaderButton }
-          testID={ leftTopIconTestID }>
-          <IconRenderer icon={ leftTopIcon }/>
+          hitSlop={HIT_SLOP}
+          onPress={leftTopIconOnPress}
+          style={styles.leftHeaderButton}
+          testID={leftTopIconTestID}>
+          <IconRenderer icon={leftTopIcon} />
         </Pressable>
-        ) : null
-      }
+      ) : null}
 
       <View style={[styles.headerTitleContainer, headerTitleContainerRTLStyle]}>
         <Animated.Image
@@ -129,20 +127,17 @@ export const HeaderBar: React.FC<HeaderProps> = ({
           {title}
         </Animated.Text>
       </View>
-      {
-        rightTopIcon ?
-        (
-          <Pressable
-            accessibilityLabel={ rightTopIconAccessibilityLabel }
-            accessibilityRole="button"
-            hitSlop={ HIT_SLOP }
-            onPress={ rightTopIconOnPress }
-            style={ styles.rightHeaderButton }
-            testID={ rightTopIconTestID }>
-            <IconRenderer icon={ rightTopIcon }/>
-          </Pressable>
-        ) : null
-      }
+      {rightTopIcon ? (
+        <Pressable
+          accessibilityLabel={rightTopIconAccessibilityLabel}
+          accessibilityRole="button"
+          hitSlop={HIT_SLOP}
+          onPress={rightTopIconOnPress}
+          style={styles.rightHeaderButton}
+          testID={rightTopIconTestID}>
+          <IconRenderer icon={rightTopIcon} />
+        </Pressable>
+      ) : null}
     </AnimatedSafeAreaView>
   );
 };

diff --git a/src/predefinedComponents/DetailsHeader/components/HeaderBar.tsx b/src/predefinedComponents/DetailsHeader/components/HeaderBar.tsx
@@ -60,29 +60,33 @@ export const HeaderBar: React.FC<HeaderBarProps> = ({
     <AnimatedSafeAreaView
       edges={safeAreaEdges}
       style={[commonStyles.headerWrapper, wrapperAnimatedStyle]}>
-      <Pressable
-        accessibilityLabel={leftTopIconAccessibilityLabel}
-        accessibilityRole="button"
-        hitSlop={HIT_SLOP}
-        onPress={leftTopIconOnPress}
-        style={styles.leftHeaderButton}
-        testID={leftTopIconTestID}>
-        <IconRenderer icon={leftTopIcon} />
-      </Pressable>
+      {leftTopIcon ? (
+        <Pressable
+          accessibilityLabel={leftTopIconAccessibilityLabel}
+          accessibilityRole="button"
+          hitSlop={HIT_SLOP}
+          onPress={leftTopIconOnPress}
+          style={styles.leftHeaderButton}
+          testID={leftTopIconTestID}>
+          <IconRenderer icon={leftTopIcon} />
+        </Pressable>
+      ) : null}
       <Animated.View style={[styles.headerTitleContainer, headerTitleContainerAnimatedStyle]}>
         <Animated.Text style={[styles.headerTitle, titleStyle]} testID={titleTestID}>
           {title}
         </Animated.Text>
       </Animated.View>
-      <Pressable
-        accessibilityLabel={rightTopIconAccessibilityLabel}
-        accessibilityRole="button"
-        hitSlop={HIT_SLOP}
-        onPress={rightTopIconOnPress}
-        style={styles.rightHeaderButton}
-        testID={rightTopIconTestID}>
-        <IconRenderer icon={rightTopIcon} />
-      </Pressable>
+      {rightTopIcon ? (
+        <Pressable
+          accessibilityLabel={rightTopIconAccessibilityLabel}
+          accessibilityRole="button"
+          hitSlop={HIT_SLOP}
+          onPress={rightTopIconOnPress}
+          style={styles.rightHeaderButton}
+          testID={rightTopIconTestID}>
+          <IconRenderer icon={rightTopIcon} />
+        </Pressable>
+      ) : null}
     </AnimatedSafeAreaView>
   );
 };