Fixing spacing and alignment of confirmation modal buttons

src/app/components/ConfirmationModal.js

@@ -4,16 +4,16 @@ import colors from "../config/colors";
 import { dimensions } from "../config/dimensions";
 import { Ionicons } from "@expo/vector-icons";
 
-function Btn({ label, onPress, bgColor, txtColor }) {
+function Btn({ label, onPress, bgColor, txtColor, style={} }) {
   return (
     <TouchableOpacity style={{marginTop: 15}} onPress={onPress}>
       <View
-        style={{
+        style={[style, {
           paddingHorizontal: 40,
           paddingVertical: 7,
           backgroundColor: bgColor,
           borderRadius: 6,
-        }}
+        }]}
       >
         <Text style={{ color: txtColor, fontWeight: "bold" }}>{label}</Text>
       </View>
@@ -67,12 +67,13 @@ export default function ConfirmationModal({
             <View
               style={{
                 flexDirection: "row",
-                justifyContent: "space-evenly",
+                justifyContent: "flex-end",
                 marginTop: 24,
               }}
             >
               {onConfirm && confirmationLabel && (
                 <Btn
+                  style={{marginRight: 16}}
                   label={confirmationLabel}
                   onPress={onConfirm}
                   bgColor={colors.primary}
@@ -105,7 +106,7 @@ const styles = StyleSheet.create({
     borderWidth: 2,
     borderRadius: 12,
     paddingVertical: 16,
-    paddingHorizontal: 12,
+    paddingHorizontal: 16,
   },
   text: {
     fontSize: dimensions.text.default,