ammar/cally
1
0
Fork 0
mirror of https://github.com/urosran/cally.git synced 2025-07-16 18:16:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

ui tweaks and fixes

Browse Source
This commit is contained in:
ivic00
2024-10-31 22:30:28 +01:00
parent 1b6a241bbe
commit f387f6c0e3
16 changed files with 301 additions and 147 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
app/(auth)/_layout.tsx
View File

@ -23,8 +23,9 @@ import NavToDosIcon from "@/assets/svgs/NavToDosIcon";
import NavBrainDumpIcon from "@/assets/svgs/NavBrainDumpIcon";
import NavCalendarIcon from "@/assets/svgs/NavCalendarIcon";
import NavSettingsIcon from "@/assets/svgs/NavSettingsIcon";
import {useAtom, useSetAtom} from "jotai";
import { useAtom, useSetAtom } from "jotai";
import {
isFamilyViewAtom,
settingsPageIndex,
toDosPageIndex,
userSettingsView,
@ -32,6 +33,7 @@ import {
export default function TabLayout() {
const { mutateAsync: signOut } = useSignOut();
const setIsFamilyView = useSetAtom(isFamilyViewAtom);
const setPageIndex = useSetAtom(settingsPageIndex);
const setUserView = useSetAtom(userSettingsView);
const setToDosIndex = useSetAtom(toDosPageIndex);
@ -79,6 +81,7 @@ export default function TabLayout() {
setPageIndex(0);
setToDosIndex(0);
setUserView(true);
setIsFamilyView(false);
}}
icon={<NavCalendarIcon />}
/>
@ -91,6 +94,7 @@ export default function TabLayout() {
setPageIndex(0);
setToDosIndex(0);
setUserView(true);
setIsFamilyView(false);
}}
icon={<NavGroceryIcon />}
/>
@ -118,6 +122,7 @@ export default function TabLayout() {
setPageIndex(0);
setToDosIndex(0);
setUserView(true);
setIsFamilyView(false);
}}
icon={<NavToDosIcon />}
/>
@ -130,6 +135,7 @@ export default function TabLayout() {
setPageIndex(0);
setToDosIndex(0);
setUserView(true);
setIsFamilyView(false);
}}
icon={<NavBrainDumpIcon />}
/>
@ -142,6 +148,7 @@ export default function TabLayout() {
setPageIndex(0);
setToDosIndex(0);
setUserView(true);
setIsFamilyView(false);
}}
label={"Manage Settings"}
labelStyle={styles.label}

3
assets/svgs/CloseXIcon.tsx
View File

@ -5,13 +5,14 @@ const CloseXIcon: React.FC<SvgProps> = (props) => (
width={15}
height={15}
fill="none"
viewBox="0 0 15 15"
{...props}
>
<Path
stroke="#AAA"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={1.394}
strokeWidth={props.strokeWidth || 1.394}
d="m1.573 1.543 12.544 12.544M1.573 14.087 14.117 1.543"
/>
</Svg>

1
assets/svgs/PlusIcon.tsx
View File

@ -4,6 +4,7 @@ const PlusIcon = (props: SvgProps) => (
<Svg
width={props.width || 14}
height={props.height || 15}
viewBox="0 0 14 15"
fill="none"
{...props}
>

20
components/pages/brain_dump/AddBrainDump.tsx
View File

@ -9,13 +9,12 @@ import {
import React, { useEffect, useState, useRef } from "react";
import { Dialog } from "react-native-ui-lib";
import { PanningDirectionsEnum } from "react-native-ui-lib/src/incubator/panView";
import { Dimensions, Keyboard, StyleSheet } from "react-native";
import { Dimensions, Keyboard, Platform, StyleSheet } from "react-native";
import DropModalIcon from "@/assets/svgs/DropModalIcon";
import { useBrainDumpContext } from "@/contexts/DumpContext";
import KeyboardManager from "react-native-keyboard-manager";
interface IAddBrainDumpProps {
isVisible: boolean;
setIsVisible: (value: boolean) => void;
@ -31,7 +30,6 @@ const AddBrainDump = ({
const [dumpDesc, setDumpDesc] = useState<string>("");
const { width } = Dimensions.get("screen");
// Refs for the two TextFields
const descriptionRef = useRef<TextFieldRef>(null);
const titleRef = useRef<TextFieldRef>(null);
@ -43,13 +41,13 @@ const AddBrainDump = ({
useEffect(() => {
setTimeout(() => {
titleRef?.current?.focus()
}, 500)
titleRef?.current?.focus();
}, 500);
}, []);
useEffect(() => {
KeyboardManager.setEnableAutoToolbar(false);
},[])
if (Platform.OS === "ios") KeyboardManager.setEnableAutoToolbar(false);
}, []);
return (
<Dialog
@ -78,7 +76,11 @@ const AddBrainDump = ({
label="Save"
style={styles.topBtn}
onPress={() => {
addBrainDump({ id: 99, title: dumpTitle.trimEnd().trimStart(), description: dumpDesc.trimEnd().trimStart() });
addBrainDump({
id: 99,
title: dumpTitle.trimEnd().trimStart(),
description: dumpDesc.trimEnd().trimStart(),
});
addBrainDumpProps.setIsVisible(false);
}}
/>
@ -144,7 +146,7 @@ const styles = StyleSheet.create({
description: {
fontFamily: "Manrope_400Regular",
fontSize: 14,
textAlignVertical: 'top'
textAlignVertical: "top",
},
});

1
components/pages/calendar/CalendarPage.tsx
View File

@ -13,6 +13,7 @@ export default function CalendarPage() {
<HeaderTemplate
message={"Let's get your week started!"}
isWelcome
isCalendar={true}
/>
<InnerCalendar/>
</View>

158
components/pages/calendar/CalendarViewSwitch.tsx
View File

@ -1,90 +1,92 @@
import {Text, TouchableOpacity, View} from "react-native-ui-lib";
import React, {useState} from "react";
import {StyleSheet} from "react-native";
import {useSetAtom} from "jotai";
import {isFamilyViewAtom} from "@/components/pages/calendar/atoms";
import { Text, TouchableOpacity, View } from "react-native-ui-lib";
import React from "react";
import { StyleSheet } from "react-native";
import { useAtom } from "jotai";
import { isFamilyViewAtom } from "@/components/pages/calendar/atoms";
const CalendarViewSwitch = () => {
const [calView, setCalView] = useState<boolean>(false);
const viewSwitch = useSetAtom(isFamilyViewAtom)
const [isFamilyView, setIsFamilyView] = useAtom(isFamilyViewAtom);
return (
return (
<View
row
spread
style={{
position: "absolute",
bottom: 20,
left: 20,
borderRadius: 30,
backgroundColor: "white",
alignItems: "center",
justifyContent: "center",
// iOS shadow
shadowColor: "#000",
shadowOffset: { width: 0, height: 2 },
shadowOpacity: 0.25,
shadowRadius: 3.84,
// Android shadow (elevation)
elevation: 6,
}}
centerV
>
<TouchableOpacity
onPress={() => {
setIsFamilyView(true);
}}
>
<View
row
spread
style={{
position: "absolute",
bottom: 20,
left: 20,
borderRadius: 30,
backgroundColor: "white",
alignItems: "center",
justifyContent: "center",
// iOS shadow
shadowColor: "#000",
shadowOffset: {width: 0, height: 2},
shadowOpacity: 0.25,
shadowRadius: 3.84,
// Android shadow (elevation)
elevation: 6,
}}
centerV
centerV
centerH
height={40}
paddingH-15
style={isFamilyView ? styles.switchBtnActive : styles.switchBtn}
>
<TouchableOpacity
onPress={() => {
setCalView(true);
viewSwitch(true);
}}
>
<View
centerV
centerH
height={40}
paddingH-15
style={calView ? styles.switchBtnActive : styles.switchBtn}
>
<Text color={calView ? "white" : "#a1a1a1"} style={styles.switchTxt}>
Family View
</Text>
</View>
</TouchableOpacity>
<TouchableOpacity
onPress={() => {
setCalView(false);
viewSwitch(false);
}}
>
<View
centerV
centerH
height={40}
paddingH-15
style={!calView ? styles.switchBtnActive : styles.switchBtn}
>
<Text color={!calView ? "white" : "#a1a1a1"} style={styles.switchTxt}>
My View
</Text>
</View>
</TouchableOpacity>
<Text
color={isFamilyView ? "white" : "#a1a1a1"}
style={styles.switchTxt}
>
Family View
</Text>
</View>
);
</TouchableOpacity>
<TouchableOpacity
onPress={() => {
setIsFamilyView(false);
}}
>
<View
centerV
centerH
height={40}
paddingH-15
style={!isFamilyView ? styles.switchBtnActive : styles.switchBtn}
>
<Text
color={!isFamilyView ? "white" : "#a1a1a1"}
style={styles.switchTxt}
>
My View
</Text>
</View>
</TouchableOpacity>
</View>
);
};
export default CalendarViewSwitch;
const styles = StyleSheet.create({
switchBtnActive: {
backgroundColor: "#a1a1a1",
borderRadius: 50,
},
switchBtn: {
backgroundColor: "white",
borderRadius: 50,
},
switchTxt: {
fontSize: 16,
fontFamily: 'Manrope_600SemiBold'
}
switchBtnActive: {
backgroundColor: "#a1a1a1",
borderRadius: 50,
},
switchBtn: {
backgroundColor: "white",
borderRadius: 50,
},
switchTxt: {
fontSize: 16,
fontFamily: "Manrope_600SemiBold",
},
});

19
components/pages/grocery/GroceryItem.tsx
View File

@ -73,6 +73,8 @@ const GroceryItem = ({
marginVertical: 5,
paddingHorizontal: isEditingTitle ? 0 : 13,
paddingVertical: isEditingTitle ? 0 : 10,
height: 44.64,
backgroundColor: item.bought ? "#cbcbcb" : "white",
}}
backgroundColor="white"
centerV
@ -103,12 +105,25 @@ const GroceryItem = ({
<View>
{isParent ? (
<TouchableOpacity onPress={() => setIsEditingTitle(true)}>
<Text text70T black style={styles.title}>
<Text
text70T
black
style={[
styles.title,
{
textDecorationLine: item.bought ? "line-through" : "none",
},
]}
>
{item.title}
</Text>
</TouchableOpacity>
) : (
<Text text70T black style={styles.title}>
<Text
text70T
black
style={[styles.title, { color: item.bought ? "red" : "black" }]}
>
{item.title}
</Text>
)}

1
components/pages/grocery/GroceryList.tsx
View File

@ -78,6 +78,7 @@ const GroceryList = ({onInputFocus}: {onInputFocus: (y: number) => void}) => {
<HeaderTemplate
message={"Welcome to your grocery list"}
isWelcome={false}
isGroceries={true}
>
<View row centerV>
<View

35
components/pages/settings/UserSettings.tsx
View File

@ -1,4 +1,9 @@
import { Text, TouchableOpacity, View } from "react-native-ui-lib";
import {
FloatingButton,
Text,
TouchableOpacity,
View,
} from "react-native-ui-lib";
import React, { useState } from "react";
import { Ionicons } from "@expo/vector-icons";
import { ScrollView, StyleSheet } from "react-native";
@ -7,10 +12,12 @@ import MyGroup from "./user_settings_views/MyGroup";
import { useAtom } from "jotai";
import { settingsPageIndex, userSettingsView } from "../calendar/atoms";
import { AuthContextProvider } from "@/contexts/AuthContext";
import PlusIcon from "@/assets/svgs/PlusIcon";
const UserSettings = () => {
const [pageIndex, setPageIndex] = useAtom(settingsPageIndex);
const [userView, setUserView] = useAtom(userSettingsView);
const [onNewUserClick, setOnNewUserClick] = useState<(boolean)>(false);
return (
<AuthContextProvider>
<View flexG>
@ -73,14 +80,22 @@ const UserSettings = () => {
</TouchableOpacity>
</View>
{userView && <MyProfile />}
{!userView && <MyGroup />}
{!userView && <MyGroup onNewUserClick={onNewUserClick} setOnNewUserClick={setOnNewUserClick}/>}
</View>
</ScrollView>
{!userView && (
<View>
<Text>selview</Text>
</View>
<FloatingButton
fullWidth
hideBackgroundOverlay
visible
button={{
label: " Add a user device",
iconSource: () => <PlusIcon height={13} width={14} />,
onPress: () => setOnNewUserClick(true),
style: styles.bottomButton,
labelStyle: { fontFamily: "Manrope_600SemiBold", fontSize: 15 },
}}
/>
)}
</View>
</AuthContextProvider>
@ -88,6 +103,14 @@ const UserSettings = () => {
};
const styles = StyleSheet.create({
bottomButton: {
position: "absolute",
bottom: 15,
marginHorizontal: 28,
width: 337,
backgroundColor: "#e8156c",
height: 53.26,
},
buttonSwitch: {
borderRadius: 50,
width: "100%",

68
components/pages/settings/user_settings_views/MyGroup.tsx
View File

@ -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: {

10
components/pages/todos/ToDoItem.tsx
View File

@ -1,12 +1,13 @@
import {
View,
Text,
Checkbox,
TouchableOpacity,
Dialog,
Button,
ButtonSize,
Checkbox,
} from "react-native-ui-lib";
import React, { useState } from "react";
import { useToDosContext } from "@/contexts/ToDosContext";
import { Ionicons } from "@expo/vector-icons";
@ -60,15 +61,14 @@ const ToDoItem = (props: {
return (
<View
key={props.item.id}
key={props.item.id}
centerV
paddingV-10
paddingH-13
marginV-10
style={{
borderRadius: 17,
backgroundColor: props.item.done ? "#e0e0e0" : "white",
opacity: props.item.done ? 0.3 : 1,
backgroundColor: "white",
}}
>
{visible && (
@ -84,6 +84,7 @@ const ToDoItem = (props: {
style={{
textDecorationLine: props.item.done ? "line-through" : "none",
fontFamily: "Manrope_500Medium",
color: props.item.done? "#a09f9f": "black",
fontSize: 15,
}}
onPress={() => {
@ -96,6 +97,7 @@ const ToDoItem = (props: {
value={props.item.done}
containerStyle={[styles.checkbox, { borderRadius: 50 }]}
style={styles.checked}
size={26.64}
borderRadius={50}
color="#fd1575"
onValueChange={(value) => {

1
components/pages/todos/ToDosPage.tsx
View File

@ -42,6 +42,7 @@ const ToDosPage = () => {
message="Here are your To Do's"
isWelcome={true}
link={profileData?.userType == ProfileType.PARENT && pageLink}
isToDos={true}
/>
{profileData?.userType == ProfileType.CHILD && (
<View marginB-25>

16
components/pages/todos/family-chores/FamilyChoresProgress.tsx
View File

@ -3,6 +3,7 @@ import React from "react";
import { ImageBackground, StyleSheet } from "react-native";
import FamilyChart from "./FamilyChart";
import { TouchableOpacity } from "react-native-ui-lib/src/incubator";
import { Ionicons } from "@expo/vector-icons";
const FamilyChoresProgress = ({
setPageIndex,
@ -12,7 +13,20 @@ const FamilyChoresProgress = ({
return (
<View marginT-20 marginH-5>
<TouchableOpacity onPress={() => setPageIndex(0)}>
<Text style={{ fontFamily: "Manrope_200", fontSize: 12 }}>Back to ToDos</Text>
<View row marginT-4 marginB-10 centerV>
<Ionicons
name="chevron-back"
size={14}
color="#979797"
style={{ paddingBottom: 3 }}
/>
<Text
style={{ fontFamily: "Poppins_400Regular", fontSize: 14.71 }}
color="#979797"
>
Return to To Do's
</Text>
</View>
</TouchableOpacity>
<View centerH>
<Text style={{ fontFamily: "Manrope_700Bold", fontSize: 19 }}>

17
components/pages/todos/user-chores/UserChoresProgress.tsx
View File

@ -30,8 +30,21 @@ const UserChoresProgress = ({
showsHorizontalScrollIndicator={false}
>
<TouchableOpacity onPress={() => setPageIndex(0)}>
<Text style={{ fontSize: 14 }}>Back to ToDos</Text>
</TouchableOpacity>
<View row marginT-4 marginB-10 centerV>
<Ionicons
name="chevron-back"
size={14}
color="#979797"
style={{ paddingBottom: 3 }}
/>
<Text
style={{ fontFamily: "Poppins_400Regular", fontSize: 14.71 }}
color="#979797"
>
Return to To Do's
</Text>
</View>
</TouchableOpacity>
<View>
<Text style={{ fontFamily: "Manrope_700Bold", fontSize: 20 }}>
Your To Do's Progress Report

87
components/shared/HeaderTemplate.tsx
View File

@ -1,18 +1,36 @@
import { Image, Text, View } from "react-native-ui-lib";
import React from "react";
import { useAuthContext } from "@/contexts/AuthContext";
import React, { useEffect, useState } from "react";
import { ProfileType, useAuthContext } from "@/contexts/AuthContext";
import { StyleSheet } from "react-native";
import { colorMap } from "@/constants/colorMap";
import { useAtom } from "jotai";
import { isFamilyViewAtom } from "../pages/calendar/atoms";
import { useGetChildrenByParentId } from "@/hooks/firebase/useGetChildrenByParentId";
import { useGetFamilyMembers } from "@/hooks/firebase/useGetFamilyMembers";
import { UserProfile } from "@/hooks/firebase/types/profileTypes";
import { child } from "@react-native-firebase/storage";
const HeaderTemplate = (props: {
message: string;
isWelcome: boolean;
children?: React.ReactNode;
link?: React.ReactNode;
isCalendar?: boolean;
isToDos?: boolean;
isBrainDump?: boolean;
isGroceries?: boolean;
}) => {
const { user, profileData } = useAuthContext();
const headerHeight: number = 72;
const { data: members } = useGetFamilyMembers();
const [children, setChildren] = useState<UserProfile[]>([]);
const [isFamilyView] = useAtom(isFamilyViewAtom);
const headerHeight: number =
(props.isCalendar && 65.54) ||
(props.isToDos && 84) ||
(props.isGroceries && 72.09) ||
65.54;
const styles = StyleSheet.create({
pfp: {
@ -26,14 +44,71 @@ const HeaderTemplate = (props: {
pfpTxt: {
fontFamily: "Manrope_500Medium",
fontSize: 30,
color: 'white',
color: "white",
},
childrenPfpArr: {
width: 65.54,
position: "absolute",
bottom: -12.44,
left: (children.length > 3 && -9) || 0,
height: 27.32,
},
childrenPfp: {
aspectRatio: 1,
width: 27.32,
backgroundColor: "#fd1575",
borderRadius: 50,
position: "absolute",
borderWidth: 2,
borderColor: "#f2f2f2",
},
bottomMarg: {
marginBottom: isFamilyView ? 30 : 15,
},
});
useEffect(() => {
if (members) {
const childrenMembers = members.filter(
(member) => member.userType === ProfileType.CHILD
);
setChildren(childrenMembers);
}
}, []);
return (
<View row centerV marginV-15>
<View row centerV marginV-15 style={styles.bottomMarg}>
{profileData?.pfp ? (
<Image source={{ uri: profileData.pfp }} style={styles.pfp} />
<View>
<Image source={{ uri: profileData.pfp }} style={styles.pfp} />
{isFamilyView && props.isCalendar && (
<View style={styles.childrenPfpArr} row>
{children?.slice(0, 3).map((child, index) => {
return child.pfp ? (
<Image
source={{ uri: child.pfp }}
style={[styles.childrenPfp, { left: index * 19 }]}
/>
) : (
<View
style={[styles.childrenPfp, { left: index * 19 }]}
center
>
<Text style={{ color: "white" }}>
{child?.firstName?.at(0)}
{child?.firstName?.at(1)}
</Text>
</View>
);
})}
{children?.length > 3 && (
<View style={[styles.childrenPfp, { left: 3 * 19 }]} center>
<Text style={{ color: "white", fontFamily: "Manrope_600SemiBold", fontSize: 12 }}>+{children.length - 3}</Text>
</View>
)}
</View>
)}
</View>
) : (
<View style={styles.pfp} center>
<Text style={styles.pfpTxt}>

2
components/shared/RemoveAssigneeBtn.tsx
View File

@ -6,7 +6,7 @@ import { View } from "react-native-ui-lib";
const RemoveAssigneeBtn = () => {
return (
<View style={styles.removeBtn} center>
<CloseXIcon />
<CloseXIcon width={9} height={9} strokeWidth={2} />
</View>
);
};