Adjusted buttons + CSS

kiwigrid · Dec 14, 2021 · e83ebe7 · e83ebe7
1 parent 83c45ec
commit e83ebe7
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 31 deletions.
diff --git a/src/components/header/HeaderComponent.tsx b/src/components/header/HeaderComponent.tsx
@@ -1,11 +1,11 @@
+import { DrawerActions } from '@react-navigation/native';
 import { Icon } from 'native-base';
 import React from 'react';
-import { View, TouchableOpacity, Text } from 'react-native';
+import { Text, TouchableOpacity, View } from 'react-native';
 
 import FilterModalContainerComponent from '../../components/search/filter/containers/FilterModalContainerComponent';
 import BaseProps from '../../types/BaseProps';
 import computeStyleSheet from './HeaderComponentStyles';
-import { DrawerActions } from '@react-navigation/native';
 
 export interface Props extends BaseProps {
   title: string;
@@ -80,23 +80,21 @@ export default class HeaderComponent extends React.Component<Props, State> {
             </TouchableOpacity>
           ) : (
             backArrow && (
-              <TouchableOpacity style={style.leftIcon} onPress={backAction ?? (() => navigation.goBack())}>
-                <Icon style={style.icon} type={'Feather'} name={'arrow-left'} />
+              <TouchableOpacity
+                style={style.leftIcon}
+                onPress={backAction ?? (() => navigation.goBack())}>
+                <Icon style={style.icon} type={'Feather'} name={'chevron-left'} />
               </TouchableOpacity>
             )
           )}
         </View>
-        <View style={style.titlesContainer}>
-          <View style={style.titleContainer}>
-            <Text numberOfLines={1} ellipsizeMode={'tail'} style={style.title}>
-              {title}
-            </Text>
-          </View>
-          <View>
-            <Text numberOfLines={1}  style={style.subTitle}>
-              {subTitle}
-            </Text>
-          </View>
+        <View style={style.titleContainer}>
+          <Text numberOfLines={1} ellipsizeMode={'tail'} style={style.title}>
+            {title}
+          </Text>
+          <Text numberOfLines={1} style={style.subTitle}>
+            {subTitle}
+          </Text>
         </View>
         <View style={style.actionsContainer}>
           {actions?.map((action, index) => (
@@ -106,11 +104,13 @@ export default class HeaderComponent extends React.Component<Props, State> {
           ))}
           {this.filterModalContainerComponent && (
             <TouchableOpacity
+              style={style.rightIcon} 
               onPress={() => {
                 this.filterModalContainerComponent.setVisible(true);
                 return true;
               }}>
               <Icon
+                style={style.icon} 
                 type={'MaterialCommunityIcons'}
                 name={this.filterModalContainerComponent.getNumberOfFilters() > 0 ? 'filter' : 'filter-outline'}
               />

diff --git a/src/components/header/HeaderComponentStyles.tsx b/src/components/header/HeaderComponentStyles.tsx
@@ -1,10 +1,10 @@
 import deepmerge from 'deepmerge';
 import { StyleSheet } from 'react-native';
 import ResponsiveStylesSheet from 'react-native-responsive-stylesheet';
-import { scale, ScaledSheet } from 'react-native-size-matters';
+import { ScaledSheet, scale } from 'react-native-size-matters';
+import { getStatusBarHeight } from 'react-native-status-bar-height';
 
 import Utils from '../../utils/Utils';
-import { getStatusBarHeight } from 'react-native-status-bar-height';
 
 export default function computeStyleSheet(): StyleSheet.NamedStyles<any> {
   const commonColor = Utils.getCurrentCommonColor();
@@ -24,13 +24,17 @@ export default function computeStyleSheet(): StyleSheet.NamedStyles<any> {
     },
     icon: {
       color: commonColor.textColor,
-      fontSize: '20@s',
+      fontSize: '30@s',
       paddingTop: '2@s'
     },
     leftIcon: {
       marginLeft: '2.5%',
       marginRight: '13@s'
     },
+    rightIcon: {
+      marginLeft: '13@s',
+      marginRight: '2.5%'
+    },
     modalHeader: {
       paddingTop: '10@s'
     },
@@ -39,28 +43,22 @@ export default function computeStyleSheet(): StyleSheet.NamedStyles<any> {
       alignItems: 'center',
       justifyContent: 'flex-start'
     },
-    titlesContainer: {
+    titleContainer: {
       flex: 1,
       flexDirection: 'row',
       flexWrap: 'wrap',
-      alignItems: 'flex-start',
-      justifyContent: 'flex-start'
-    },
-    titleContainer: {
-      maxWidth: '100%',
-      marginRight: '5@s'
+      alignItems: 'center',
+      alignContent: 'stretch',
+      justifyContent: 'flex-start',
     },
     title: {
-      color: commonColor.textColor,
       fontSize: '17@s',
-      textAlign: 'left',
-      width: '100%'
+      color: commonColor.textColor,
+      marginRight: '5@s',
     },
     subTitle: {
-      width: '100%',
-      color: commonColor.textColor,
       fontSize: '17@s',
-      textAlign: 'left',
+      color: commonColor.textColor,
     },
     actionsContainer: {
       flexDirection: 'row',