ui tweaks and fixes

components/pages/settings/user_settings_views/MyGroup.tsx

@@ -15,7 +15,7 @@ import {
   View,
 } from "react-native-ui-lib";
 import React, { useEffect, useRef, useState } from "react";
-import { ImageBackground, ScrollView, StyleSheet } from "react-native";
+import { ImageBackground, Platform, StyleSheet } from "react-native";
 import { PickerSingleValue } from "react-native-ui-lib/src/components/picker/types";
 import { useCreateSubUser } from "@/hooks/firebase/useCreateSubUser";
 import { ProfileType, useAuthContext } from "@/contexts/AuthContext";
@@ -28,11 +28,18 @@ import CircledXIcon from "@/assets/svgs/CircledXIcon";
 import ProfileIcon from "@/assets/svgs/ProfileIcon";
 import NavToDosIcon from "@/assets/svgs/NavToDosIcon";
 import Ionicons from "@expo/vector-icons/Ionicons";
-import KeyboardManager, { PreviousNextView } from "react-native-keyboard-manager";
+import KeyboardManager, {
+  PreviousNextView,
+} from "react-native-keyboard-manager";
+import { ScrollView } from "react-native-gesture-handler";
 
-const MyGroup = () => {
+type MyGroupProps = {
+  onNewUserClick: boolean;
+  setOnNewUserClick: React.Dispatch<React.SetStateAction<boolean>>;
+};
+
+const MyGroup: React.FC<MyGroupProps> = ({ onNewUserClick, setOnNewUserClick }) => {
   const [showAddUserDialog, setShowAddUserDialog] = useState(false);
-  const [showNewUserInfoDialog, setShowNewUserInfoDialog] = useState(false);
   const [selectedStatus, setSelectedStatus] = useState<
     string | PickerSingleValue
   >(ProfileType.CHILD);
@@ -90,7 +97,7 @@ const MyGroup = () => {
     console.log(res);
 
     if (!isError) {
-      setShowNewUserInfoDialog(false);
+      setOnNewUserClick(false);
 
       if (res?.data?.userId) {
         setTimeout(() => {
@@ -101,8 +108,8 @@ const MyGroup = () => {
   };
 
   useEffect(() => {
-    KeyboardManager.setEnableAutoToolbar(true);
-  },[])
+    if (Platform.OS === "ios") KeyboardManager.setEnableAutoToolbar(true);
+  }, []);
 
   useEffect(() => {
     setFirstName("");
@@ -110,12 +117,11 @@ const MyGroup = () => {
     setEmail("");
   }, []);
 
-
   // @ts-ignore
   return (
-    <View style={{ flex: 1, minHeight: 500 }}>
-      <View>
-        <ScrollView style={styles.card}>
+    <View marginB-70>
+      <ScrollView>
+        <View>
           {!parents.length && !children.length && !caregivers.length && (
             <Text text70 marginV-10>
               {isLoading ? "Loading...." : "No user devices added"}
@@ -123,7 +129,7 @@ const MyGroup = () => {
           )}
 
           {(!!parents.length || !!children.length) && (
-            <>
+            <View style={styles.card}>
               <Text style={styles.subTit} marginB-10>
                 Family
               </Text>
@@ -144,7 +150,9 @@ const MyGroup = () => {
                       source={{ uri: member.pfp || undefined }}
                     />
                   ) : (
-                    <View style={[styles.pfp, {backgroundColor: "#ea156d"}]} />
+                    <View
+                      style={[styles.pfp, { backgroundColor: "#ea156d" }]}
+                    />
                   )}
                   <View row marginL-10 centerV>
                     <Text style={styles.name}>
@@ -155,9 +163,7 @@ const MyGroup = () => {
                   <View row centerV gap-10>
                     <Text style={styles.userType}>
                       {member.userType === ProfileType.PARENT
-                        ? `Admin${
-                            member.uid === user?.uid ? " (You)" : ""
-                          }`
+                        ? `Admin${member.uid === user?.uid ? " (You)" : ""}`
                         : "Child"}
                     </Text>
                     <UserMenu
@@ -168,11 +174,11 @@ const MyGroup = () => {
                   </View>
                 </Card>
               ))}
-            </>
+            </View>
           )}
 
           {!!caregivers.length && (
-            <>
+            <View style={styles.card}>
               <Text style={styles.subTit} marginB-10 marginT-15>
                 Caregivers
               </Text>
@@ -209,7 +215,7 @@ const MyGroup = () => {
                   />
                 </Card>
               ))}
-            </>
+            </View>
           )}
 
           {!!familyDevices.length && (
@@ -250,19 +256,8 @@ const MyGroup = () => {
               ))}
             </>
           )}
-        </ScrollView>
-      </View>
-
-      <FloatingButton
-        fullWidth
-        hideBackgroundOverlay
-        visible
-        button={{
-          label: "+ Add a user device",
-          onPress: () => setShowNewUserInfoDialog(true),
-          style: styles.bottomButton,
-        }}
-      />
+        </View>
+      </ScrollView>
 
       <Dialog
         visible={showAddUserDialog}
@@ -315,8 +310,8 @@ const MyGroup = () => {
 
       <Dialog
         panDirection={PanningProvider.Directions.DOWN}
-        visible={showNewUserInfoDialog}
-        onDismiss={() => setShowNewUserInfoDialog(false)}
+        visible={onNewUserClick}
+        onDismiss={() => setOnNewUserClick(false)}
       >
         <PreviousNextView>
           <KeyboardAwareScrollView>
@@ -327,7 +322,7 @@ const MyGroup = () => {
                 </Text>
                 <TouchableOpacity
                   onPress={() => {
-                    setShowNewUserInfoDialog(false);
+                    setOnNewUserClick(false);
                   }}
                 >
                   <CircledXIcon />
@@ -498,7 +493,8 @@ const styles = StyleSheet.create({
   },
   bottomButton: {
     position: "absolute",
-    bottom: 80,
+    bottom: 50,
+    backgroundColor: "#e8156c",
     width: "100%",
   },
   familyCard: {