first phase finalized

Author: Kashishjain04

app.json

@@ -1,6 +1,6 @@
 {
   "expo": {
-    "name": "Bahi-Book",
+    "name": "Bahi Book",
     "slug": "Bahi-Book",
     "version": "1.0.0",
     "orientation": "portrait",

src/components/AddButton.js

@@ -1,16 +1,25 @@
 import React from "react";
-import { View, Text, TouchableOpacity } from "react-native";
+import { Text, TouchableOpacity } from "react-native";
 import { Icon } from "react-native-elements";
 import tw from "tailwind-react-native-classnames";
 
-const AddButton = ({ fun, text, onPress }) => {
+const AddButton = ({ text, onPress, style }) => {
   return (
     <TouchableOpacity
       onPress={onPress}
-      style={tw`bg-white rounded-lg w-11/12 mx-auto p-1 mt-4 items-center justify-center flex-row shadow-lg`}
+      style={[
+        tw`bg-green-500 rounded-lg w-11/12 mx-auto p-1 mt-4 items-center justify-center flex-row shadow-lg`,
+        style,
+      ]}
     >
-      <Icon name="plus" type="feather" size={40} style={tw`mx-2`} />
-      <Text style={tw`text-xl mx-2`}>{text}</Text>
+      <Icon
+        name="checkbox-marked-circle-outline"
+        type="material-community"
+        size={40}
+        style={tw`mx-2`}
+        color="#fff"
+      />
+      <Text style={tw`text-xl mx-2 text-white font-semibold`}>{text}</Text>
     </TouchableOpacity>
   );
 };

src/components/AddCustomerModal.js

@@ -31,6 +31,7 @@ const AddCustomerModal = ({ visible, setVisible, fun }) => {
       onRequestClose={() => setVisible(false)}
     >
       <TouchableOpacity
+        activeOpacity={1}
         onPress={() => setVisible(false)}
         style={[
           tw`h-full w-full absolute justify-center items-center`,

src/components/AddTransactionModal.js

@@ -95,6 +95,7 @@ const AddTransactionModal = ({
       onRequestClose={() => setVisible(false)}
     >
       <TouchableOpacity
+        activeOpacity={1}
         onPress={() => setVisible(false)}
         style={[
           tw`h-full w-full absolute justify-center items-center`,

src/screens/CustomerScreen.js

@@ -12,7 +12,7 @@ import { selectUser } from "../redux/slices/userSlice";
 import firebase from "../firebase";
 import Dashboard from "../components/Dashboard";
 import { useNavigation } from "@react-navigation/native";
-import { Avatar } from "react-native-elements";
+import { Avatar, FAB } from "react-native-elements";
 import tw from "tailwind-react-native-classnames";
 import TransactionListItem from "../components/TransactionListItem";
 import Loader from "../components/Loader";
@@ -162,14 +162,18 @@ const CustomerScreen = ({ route }) => {
           setLoading={setLoading}
         />
       )}
+      <FAB
+        onPress={() => setModalVisible(true)}
+        title="Add Transaction"
+        color="rgb(153,27,27)"
+        style={tw`z-10`}
+        placement="right"
+      />
       <FlatList
         ListHeaderComponent={() => (
           <View>
             <Dashboard data={{ sent: gave || 0, received: got || 0 }} />
-            <AddButton
-              text="Add Transaction"
-              onPress={() => setModalVisible(true)}
-            />
+            <AddButton text="Settle Up" onPress={() => setModalVisible(true)} />
           </View>
         )}
         ListHeaderComponentStyle={tw`mb-4`}

src/screens/HomeScreen.js

@@ -1,6 +1,7 @@
 import { StatusBar } from "expo-status-bar";
 import React, { useEffect, useState } from "react";
 import { SafeAreaView, FlatList, View, Text, Alert } from "react-native";
+import { FAB } from "react-native-elements";
 import { useSelector } from "react-redux";
 import tw from "tailwind-react-native-classnames";
 import AddButton from "../components/AddButton";
@@ -78,7 +79,7 @@ const HomeScreen = () => {
         });
       setModalVisible(false);
       setLoading(false);
-      // // //ALL THIS IS NOW DONE USING CLOUD FUNCTIONS // // // // //
+      // // //ALL THIS WAS BEING DONE USING CLOUD FUNCTIONS // // // // //
       //                                                             //
       db().collection("users").doc(id).set({}, { merge: true });
       db()
@@ -104,6 +105,13 @@ const HomeScreen = () => {
         />
       )}
       <StatusBar style="light" />
+      <FAB
+        onPress={() => setModalVisible(true)}
+        title="Add Customer"
+        color="rgb(153,27,27)"
+        style={tw`z-10`}
+        placement="right"
+      />
       <FlatList
         ListHeaderComponent={() => (
           <View>
@@ -113,10 +121,6 @@ const HomeScreen = () => {
                 received: userDoc?.received || 0,
               }}
             />
-            <AddButton
-              onPress={() => setModalVisible(true)}
-              text="Add Customer"
-            />
           </View>
         )}
         ItemSeparatorComponent={() => (