Button Refactoring

components/organisms/Buttons/ThemedTextButton.js

@@ -0,0 +1,94 @@
+import { StyleSheet, Text, View } from 'react-native'
+import React from 'react'
+import colors from '../../../theme/colors';
+import Button from '../../atoms/Button';
+import fonts from '../../../theme/fonts';
+
+const ThemedTextButton = ({ theme, onPress, title, titleStyle, buttonStyle}) => {
+
+    let style = {};
+    switch (theme) {
+        case 'primary-outline':
+            style = {
+
+                buttonStyle: {
+                    backgroundColor: colors.white,
+                    maxWidth: '100%',
+                    width: '100%',
+                    alignItems: 'center',
+                    borderColor: colors.primaryColor,
+                    borderRadius: 6,
+                    borderWidth: 1
+                },
+                buttonTextStyle: {
+                    fontFamily: fonts.type.medium,
+                    color: colors.secondaryColor,
+                }
+            }
+            break;
+        case 'secondary-outline':
+            style = {
+                buttonStyle: {
+                    backgroundColor: colors.white,
+                    maxWidth: '100%',
+                    width: '100%',
+                    alignItems: 'center',
+                    borderColor: colors.secondaryColor,
+                    borderRadius: 6,
+                    borderWidth: 1
+                },
+                buttonTextStyle: {
+                    fontFamily: fonts.type.medium,
+                    color: colors.primaryColor,
+                }
+            }
+            break;
+        case 'secondary-contained':
+            style = {
+                buttonStyle: {
+                    backgroundColor: colors.secondaryColor,
+                    maxWidth: '100%',
+                    width: '100%',
+                    alignItems: 'center'
+                },
+                buttonTextStyle: {
+                    fontFamily: fonts.type.medium,
+                    color: colors.white,
+                }
+
+            }
+            break;
+        case 'primary-contained':
+        default:
+            style = {
+                buttonStyle: {
+                    backgroundColor: colors.primaryColor,
+                    maxWidth: '100%',
+                    width: '100%',
+                    alignItems: 'center'
+                },
+                buttonTextStyle: {
+                    fontFamily: fonts.type.medium,
+                    color: colors.white,
+                }
+
+            }
+            break;
+    }
+
+    const styles = StyleSheet.create(style)
+
+    return (
+        <Button
+            onPress={onPress}
+            style={[styles.buttonStyle, buttonStyle]}
+        >
+            <Text style={[styles.buttonTextStyle, titleStyle]}>
+                {title}
+            </Text>
+        </Button>
+    )
+}
+
+export default ThemedTextButton
+

screens/EditProfilePage.js

@@ -7,6 +7,7 @@ import colors from '../theme/colors';
 import FormTextInput from '../components/molecules/FormTextInput';
 import {capitalize} from '../utils/Constants/functions';
 import SecondaryButton from '../components/organisms/Buttons/SecondaryButton';
+import ThemedTextButton from '../components/organisms/Buttons/ThemedTextButton';
 
 const PROFILE_SIZE = 128;
 
@@ -44,9 +45,10 @@ const EditProfilePage = props => {
               }
             />
           ))}
-          <SecondaryButton 
+          <ThemedTextButton
             title={'Continue'} 
             onPress={true}
+            theme={'secondary-contained'}
             buttonStyle={{
               marginVertical: 16,
               width:'auto'

screens/SecurityPage.js

@@ -4,6 +4,7 @@ import PrimaryOutlineButton from '../components/organisms/Buttons/PrimaryOutline
 import NewscoutTitleHeader from '../components/organisms/Headers/NewscoutTitleHeader';
 import {List, Switch} from 'react-native-paper';
 import fonts from '../theme/fonts';
+import ThemedTextButton from '../components/organisms/Buttons/ThemedTextButton';
 
 const SecurityPage = props => {
   const {navigation} = props;
@@ -55,7 +56,7 @@ const SecurityPage = props => {
         style={{
           paddingHorizontal: 16,
         }}>
-        <PrimaryOutlineButton title={'Change Password'}  />
+        <ThemedTextButton title="Change Password" theme="primary-outline"/>
       </View>
     </View>
   );

screens/UnsignedLandingPage.js

@@ -7,6 +7,7 @@ import { Portal, ToggleButton, Modal, PaperProvider, IconButton } from 'react-na
 import HorizontalNewsCardVariant from '../components/organisms/Cards/HorizontalNewsCardVariant'
 import NewscoutHomeHeader from '../components/organisms/Headers/NewscoutHomeHeader'
 import SecondaryButton from '../components/organisms/Buttons/SecondaryButton'
+import ThemedTextButton from '../components/organisms/Buttons/ThemedTextButton'
 
 const UnsignedLandingPage = ({ navigation }) => {
 
@@ -45,7 +46,7 @@ const UnsignedLandingPage = ({ navigation }) => {
                         >
                             You are not logged in. Log in to bookmark news, leave comment and to explore more!
                         </Text>
-                        <SecondaryButton title="Login" onPress={homePageNavigation} />
+                        <ThemedTextButton title="Login" onPress={homePageNavigation} theme={"secondary-contained"}/>
                         <View style={{ flexDirection: 'row', justifyContent:'center',alignItems:'center',paddingVertical:fonts.getSize(16)}}>
                             <Text 
                                 style={{