Header Refactoring

components/atoms/Header.js

@@ -1,12 +1,15 @@
-import { StyleSheet, Text, View } from 'react-native'
+import { StyleSheet, Text, View, TouchableOpacity } from 'react-native'
 import React from 'react'
 import fonts from '../../theme/fonts'
 import colors from '../../theme/colors'
+import FeatherIcon from 'react-native-vector-icons/dist/Feather'
 
-
-const Header = ({style,children}) => {
+const Header = ({ style, children, backButtonShown, onBackClick }) => {
   return (
-    <View style={[styles.headerContainer,style]}>
+    <View style={[styles.headerContainer, style]}>
+      {backButtonShown === true && backButtonShown !== undefined ? <TouchableOpacity onPress={onBackClick}>
+        <FeatherIcon name={'chevron-left'} size={24} color={colors.black} />
+      </TouchableOpacity> : <></>}
       {children}
     </View>
   )
@@ -15,13 +18,13 @@ const Header = ({style,children}) => {
 export default Header
 
 const styles = StyleSheet.create({
-    headerContainer:{
-        paddingHorizontal: fonts.getSize(20),
-        flexDirection: 'row',
-        alignItems:'center',
-        justifyContent:'space-between',
-        height: 60,
-        maxHeight: 60,
-        backgroundColor: colors.white
-    }
+  headerContainer: {
+    paddingHorizontal: fonts.getSize(20),
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    height: 60,
+    maxHeight: 60,
+    backgroundColor: colors.white
+  }
 })

components/organisms/Headers/NewscoutCenteredTitleHeader.js

@@ -0,0 +1,33 @@
+import { StyleSheet, Text, View, TouchableOpacity} from 'react-native'
+import React from 'react'
+import Header from '../../atoms/Header'
+import fonts from '../../../theme/fonts'
+import colors from '../../../theme/colors'
+
+
+
+const NewscoutCenteredTitleHeader = ({children, backButtonShown, onBackClick, title, titleStyle }) => {
+    return (
+        <Header onBackClick={onBackClick} backButtonShown>
+            
+            <Text style={[styles.title, titleStyle]}>{title ?? "Title"}</Text>
+            {children}
+        </Header>
+    )
+}
+
+export default NewscoutCenteredTitleHeader
+
+const styles = StyleSheet.create({
+    title: {
+        fontFamily: fonts.type.semibold,
+        fontSize: fonts.getSize(16),
+        color: colors.black,
+    },
+    titleContainer:{
+        flexDirection:'row',
+        alignItems:'center',
+        gap: 8
+
+    }
+})

screens/LoginPage.js

@@ -5,6 +5,7 @@ import fonts from '../theme/fonts'
 import NewscoutTextLogo from '../components/molecules/NewscoutTextLogo'
 import images from '../assets/images/images'
 import SecondaryButton from '../components/organisms/Buttons/SecondaryButton'
+import ThemedTextButton from '../components/organisms/Buttons/ThemedTextButton'
 
 
 const LoginPage = ({ navigation }) => {
@@ -25,8 +26,9 @@ const LoginPage = ({ navigation }) => {
                 <Text style={[styles.tagline,{color:colors.black}]}> Get the latest news from </Text>
                 <Text style={[styles.tagline,{color:colors.topColor}]}> reliable sources. </Text>
             </View>
-            <SecondaryButton
+            <ThemedTextButton 
                 title="Next"
+                theme={"secondary-contained"}
                 onPress={homePageNavigation}
             />
         </View>