ui developer

src/screens/home/Home.tsx

@@ -11,6 +11,7 @@ import {
   FlatList,
   ListRenderItem,
   ToastAndroid,
+  ScrollView,
 } from "react-native";
 import AppView from "../../components/AppView";
 import colors from "../../components/colors";
@@ -182,7 +183,8 @@ const Home: React.FC = () => {
   };
 
   return (
-    <AppView barStyle="dark-content" style={styles.container}>
+    // <AppView barStyle="dark-content" style={styles.container}>
+    <ScrollView style={styles.container}>
       <View style={styles.header}>
         <View>
           <Text style={styles.greeting}>Hello,</Text>
@@ -196,7 +198,12 @@ const Home: React.FC = () => {
 
       <UserProfileStatus profileImage={getProfileImageUri()} />
 
+      <View style={{ justifyContent: 'space-between', flexDirection: 'row', alignItems: 'center', marginTop: 20, marginBottom: 10 }}>
         <Text style={styles.sectionTitle}>Quick Actions</Text>
+        <TouchableOpacity style={{ padding: 8 , backgroundColor: colors.primary , marginRight: 15}} onPress={() => Alert.alert('Info', 'This will allow you to pay all pending contributions in your groups.')}>
+          <Text style={{ fontSize: 14, color: '#fff', fontWeight: 'bold' }}>Pay All</Text>
+        </TouchableOpacity>
+      </View>
 
       <FlatList
         data={actions}
@@ -205,14 +212,7 @@ const Home: React.FC = () => {
         numColumns={2}
         contentContainerStyle={{ paddingHorizontal: 8 }}
       />
-      {/* <CustomAlert
-        visible={alartVisible}
-        title={alartAction?.title as string}
-        buttons={alartAction?.buttons}
-        message={alartAction?.message as string}
-        alertType={'error'}
-      /> */}
-    </AppView>
+    </ScrollView>
   );
 };
 
@@ -222,6 +222,8 @@ const styles = StyleSheet.create({
   container: {
     flex: 1,
     backgroundColor: colors.white, // Set background to white
+    marginBottom: 100,
+    padding:10
   },
   header: {
     flexDirection: "row",