Improve/manager member role screen

apps/mobile/app/components/ConfirmationModal.tsx

@@ -8,125 +8,145 @@ import {
 	TouchableWithoutFeedback,
 	ViewStyle,
 	Animated,
-	TouchableOpacity
-} from 'react-native';
-import React, { FC } from 'react';
-import { typography, useAppTheme } from '../theme';
-import { translate } from '../i18n';
+	TouchableOpacity,
+} from "react-native"
+import React, { FC } from "react"
+import { typography, useAppTheme } from "../theme"
+import { translate } from "../i18n"
+import { BlurView } from "expo-blur"
 
 interface IConfirmation {
-	onDismiss: () => void;
-	visible: boolean;
-	onConfirm: () => void;
-	confirmationText: string;
+	onDismiss: () => void
+	visible: boolean
+	onConfirm: () => void
+	confirmationText: string
 }
 
-const ConfirmationModal: FC<IConfirmation> = ({ onDismiss, visible, onConfirm, confirmationText }) => {
-	const { colors } = useAppTheme();
+const ConfirmationModal: FC<IConfirmation> = ({
+	onDismiss,
+	visible,
+	onConfirm,
+	confirmationText,
+}) => {
+	const { colors } = useAppTheme()
 	return (
 		<ModalPopUp visible={visible}>
 			<View style={[styles.container, { backgroundColor: colors.background2 }]}>
-				<Text style={{ color: colors.primary, fontSize: 17, textAlign: 'center' }}>{confirmationText}</Text>
+				<Text style={{ color: colors.primary, fontSize: 17, textAlign: "center" }}>
+					{confirmationText}
+				</Text>
 				<View style={styles.wrapButtons}>
 					<TouchableOpacity style={styles.cancelBtn} onPress={() => onDismiss()}>
-						<Text style={styles.cancelTxt}>{translate('settingScreen.statusScreen.cancelButtonText')}</Text>
+						<Text style={styles.cancelTxt}>
+							{translate("settingScreen.statusScreen.cancelButtonText")}
+						</Text>
 					</TouchableOpacity>
 					<TouchableOpacity
 						style={{
-							...styles.confirmBtn
+							...styles.confirmBtn,
 						}}
 						onPress={() => {
-							onConfirm();
-							onDismiss();
+							onConfirm()
+							onDismiss()
 						}}
 					>
 						<Text style={styles.confirmTxt}>Delete</Text>
 					</TouchableOpacity>
 				</View>
 			</View>
 		</ModalPopUp>
-	);
-};
+	)
+}
 
 const ModalPopUp = ({ visible, children }) => {
-	const [showModal, setShowModal] = React.useState(visible);
-	const scaleValue = React.useRef(new Animated.Value(0)).current;
+	const [showModal, setShowModal] = React.useState(visible)
+	const scaleValue = React.useRef(new Animated.Value(0)).current
 
 	React.useEffect(() => {
-		toggleModal();
-	}, [visible]);
+		toggleModal()
+	}, [visible])
 	const toggleModal = () => {
 		if (visible) {
-			setShowModal(true);
+			setShowModal(true)
 			Animated.spring(scaleValue, {
 				toValue: 1,
-				useNativeDriver: true
-			}).start();
+				useNativeDriver: true,
+			}).start()
 		} else {
-			setTimeout(() => setShowModal(false), 200);
+			setTimeout(() => setShowModal(false), 200)
 			Animated.timing(scaleValue, {
 				toValue: 0,
 				duration: 300,
-				useNativeDriver: true
-			}).start();
+				useNativeDriver: true,
+			}).start()
 		}
-	};
+	}
 	return (
 		<Modal animationType="fade" transparent visible={showModal}>
+			<BlurView
+				intensity={15}
+				tint="dark"
+				style={{
+					position: "absolute",
+					width: "100%",
+					height: "100%",
+				}}
+			/>
 			<TouchableWithoutFeedback>
 				<View style={$modalBackGround}>
-					<Animated.View style={{ transform: [{ scale: scaleValue }] }}>{children}</Animated.View>
+					<Animated.View style={{ transform: [{ scale: scaleValue }] }}>
+						{children}
+					</Animated.View>
 				</View>
 			</TouchableWithoutFeedback>
 		</Modal>
-	);
-};
+	)
+}
 
-export default ConfirmationModal;
+export default ConfirmationModal
 
 const $modalBackGround: ViewStyle = {
 	flex: 1,
-	backgroundColor: '#000000AA',
-	justifyContent: 'center'
-};
+	justifyContent: "center",
+}
 
 const styles = StyleSheet.create({
 	cancelBtn: {
-		alignItems: 'center',
-		backgroundColor: '#E6E6E9',
+		alignItems: "center",
+		backgroundColor: "#E6E6E9",
 		borderRadius: 12,
 		height: 56,
-		justifyContent: 'center',
-		width: '48%'
+		justifyContent: "center",
+		width: "48%",
 	},
 	cancelTxt: {
-		color: '#1A1C1E',
+		color: "#1A1C1E",
 		fontFamily: typography.primary.semiBold,
-		fontSize: 17
+		fontSize: 17,
 	},
 	confirmBtn: {
-		alignItems: 'center',
-		backgroundColor: '#DA5E5E',
+		alignItems: "center",
+		backgroundColor: "#DA5E5E",
 		borderRadius: 12,
 		height: 56,
-		justifyContent: 'center',
-		width: '48%'
+		justifyContent: "center",
+		width: "48%",
 	},
 	confirmTxt: {
-		color: '#FFF',
+		color: "#FFF",
 		fontFamily: typography.primary.semiBold,
-		fontSize: 17
+		fontSize: 17,
 	},
 	container: {
-		alignSelf: 'center',
+		alignSelf: "center",
 		borderRadius: 20,
 		padding: 20,
-		width: '90%'
+		width: "90%",
 	},
 	wrapButtons: {
-		flexDirection: 'row',
-		justifyContent: 'space-between',
+		flexDirection: "row",
+		justifyContent: "space-between",
 		marginTop: 20,
-		width: '100%'
-	}
-});
+		width: "100%",
+	},
+})

apps/mobile/app/components/svgs/icons.tsx

@@ -821,3 +821,30 @@ export const categoryIcon = `<svg width="9" height="9" viewBox="0 0 9 9" fill="n
 <path d="M1.875 8.25H2.625C3.375 8.25 3.75 7.875 3.75 7.125V6.375C3.75 5.625 3.375 5.25 2.625 5.25H1.875C1.125 5.25 0.75 5.625 0.75 6.375V7.125C0.75 7.875 1.125 8.25 1.875 8.25Z" stroke="#FFFFFF" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>
 `
+
+// Member & Roles Screen
+
+export const searchIconLight = `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.66671 13.9997C11.1645 13.9997 14 11.1641 14 7.66634C14 4.16854 11.1645 1.33301 7.66671 1.33301C4.1689 1.33301 1.33337 4.16854 1.33337 7.66634C1.33337 11.1641 4.1689 13.9997 7.66671 13.9997Z" stroke="#282048" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M14.6667 14.6663L13.3334 13.333" stroke="#282048" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
+`
+
+export const searchIconDark = `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.66671 13.9997C11.1645 13.9997 14 11.1641 14 7.66634C14 4.16854 11.1645 1.33301 7.66671 1.33301C4.1689 1.33301 1.33337 4.16854 1.33337 7.66634C1.33337 11.1641 4.1689 13.9997 7.66671 13.9997Z" stroke="#FFFFFF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M14.6667 14.6663L13.3334 13.333" stroke="#FFFFFF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
+`
+
+export const moreButtonLight = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5 10C3.9 10 3 10.9 3 12C3 13.1 3.9 14 5 14C6.1 14 7 13.1 7 12C7 10.9 6.1 10 5 10Z" stroke="#282048" stroke-width="1.5"/>
+<path d="M19 10C17.9 10 17 10.9 17 12C17 13.1 17.9 14 19 14C20.1 14 21 13.1 21 12C21 10.9 20.1 10 19 10Z" stroke="#282048" stroke-width="1.5"/>
+<path d="M12 10C10.9 10 10 10.9 10 12C10 13.1 10.9 14 12 14C13.1 14 14 13.1 14 12C14 10.9 13.1 10 12 10Z" stroke="#292D32" stroke-width="1.5"/>
+</svg>
+`
+export const moreButtonDark = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5 10C3.9 10 3 10.9 3 12C3 13.1 3.9 14 5 14C6.1 14 7 13.1 7 12C7 10.9 6.1 10 5 10Z" stroke="#FFFFFF" stroke-width="1.5"/>
+<path d="M19 10C17.9 10 17 10.9 17 12C17 13.1 17.9 14 19 14C20.1 14 21 13.1 21 12C21 10.9 20.1 10 19 10Z" stroke="#FFFFFF" stroke-width="1.5"/>
+<path d="M12 10C10.9 10 10 10.9 10 12C10 13.1 10.9 14 12 14C13.1 14 14 13.1 14 12C14 10.9 13.1 10 12 10Z" stroke="#FFFFFF" stroke-width="1.5"/>
+</svg>
+`

apps/mobile/app/i18n/ar.ts

@@ -265,6 +265,9 @@ const ar: Translations = {
 		},
 		membersSettingsScreen: {
 			mainTitle: "الأعضاء والأدوار",
+			deleteUserConfirmation: "هل أنت متأكد من رغبتك في إزالة المستخدم المحدد؟",
+			changeRole: "تغيير الدور",
+			delete: "حذف",
 		},
 		changeFullName: {
 			firstNamePlaceholder: "First Name",

apps/mobile/app/i18n/bg.ts

@@ -258,6 +258,9 @@ const bg = {
 		},
 		membersSettingsScreen: {
 			mainTitle: "Members & Roles",
+			deleteUserConfirmation: "Are you sure you want to remove selected user?",
+			changeRole: "Change Role",
+			delete: "Delete",
 		},
 		changeFullName: {
 			firstNamePlaceholder: "First Name",

apps/mobile/app/i18n/en.ts

@@ -262,6 +262,9 @@ const en = {
 		},
 		membersSettingsScreen: {
 			mainTitle: "Members & Roles",
+			deleteUserConfirmation: "Are you sure you want to remove selected user?",
+			changeRole: "Change Role",
+			delete: "Delete",
 		},
 		changeFullName: {
 			firstNamePlaceholder: "First Name",

apps/mobile/app/i18n/es.ts

@@ -258,6 +258,9 @@ const es = {
 		},
 		membersSettingsScreen: {
 			mainTitle: "Members & Roles",
+			deleteUserConfirmation: "Are you sure you want to remove selected user?",
+			changeRole: "Change Role",
+			delete: "Delete",
 		},
 		changeFullName: {
 			firstNamePlaceholder: "First Name",

apps/mobile/app/i18n/fr.ts

@@ -263,6 +263,9 @@ const fr = {
 		},
 		membersSettingsScreen: {
 			mainTitle: "Membres et rôles",
+			deleteUserConfirmation: "Êtes-vous sûr de vouloir supprimer l'utilisateur sélectionné?",
+			changeRole: "Changer le rôle",
+			delete: "Supprimer",
 		},
 		changeAvatar: {
 			recentPictures: "Photos récentes",

apps/mobile/app/i18n/he.ts

@@ -258,6 +258,9 @@ const he = {
 		},
 		membersSettingsScreen: {
 			mainTitle: "Members & Roles",
+			deleteUserConfirmation: "Are you sure you want to remove selected user?",
+			changeRole: "Change Role",
+			delete: "Delete",
 		},
 		changeFullName: {
 			firstNamePlaceholder: "First Name",

apps/mobile/app/i18n/ko.ts

@@ -264,6 +264,9 @@ const ko: Translations = {
 		},
 		membersSettingsScreen: {
 			mainTitle: "Members & Roles",
+			deleteUserConfirmation: "선택한 사용자를 삭제하시겠습니까?",
+			changeRole: "역할 변경",
+			delete: "삭제",
 		},
 		changeFullName: {
 			firstNamePlaceholder: "First Name",

apps/mobile/app/i18n/ru.ts

@@ -258,6 +258,9 @@ const ru = {
 		},
 		membersSettingsScreen: {
 			mainTitle: "Members & Roles",
+			deleteUserConfirmation: "Are you sure you want to remove selected user?",
+			changeRole: "Change Role",
+			delete: "Delete",
 		},
 		changeFullName: {
 			firstNamePlaceholder: "First Name",