Merge pull request #1615 from ever-co/improve/team-settings-member-roles

created the members settings screen

apps/mobile/app/i18n/ar.ts

@@ -232,6 +232,9 @@ const ar: Translations = {
 			createButtonText: "Create",
 			updateButtonText: "Update",
 		},
+		membersSettingsScreen: {
+			mainTitle: "الأعضاء والأدوار",
+		},
 		changeFullName: {
 			firstNamePlaceholder: "First Name",
 			lastNamePlaholder: "Last Name",

apps/mobile/app/i18n/bg.ts

@@ -225,6 +225,9 @@ const bg = {
 			createButtonText: "Create",
 			updateButtonText: "Update",
 		},
+		membersSettingsScreen: {
+			mainTitle: "Members & Roles",
+		},
 		changeFullName: {
 			firstNamePlaceholder: "First Name",
 			lastNamePlaholder: "Last Name",

apps/mobile/app/i18n/en.ts

@@ -229,6 +229,9 @@ const en = {
 			createButtonText: "Create",
 			updateButtonText: "Update",
 		},
+		membersSettingsScreen: {
+			mainTitle: "Members & Roles",
+		},
 		changeFullName: {
 			firstNamePlaceholder: "First Name",
 			lastNamePlaholder: "Last Name",

apps/mobile/app/i18n/es.ts

@@ -225,6 +225,9 @@ const es = {
 			createButtonText: "Create",
 			updateButtonText: "Update",
 		},
+		membersSettingsScreen: {
+			mainTitle: "Members & Roles",
+		},
 		changeFullName: {
 			firstNamePlaceholder: "First Name",
 			lastNamePlaholder: "Last Name",

apps/mobile/app/i18n/fr.ts

@@ -229,6 +229,9 @@ const fr = {
 			createButtonText: "Create",
 			updateButtonText: "Update",
 		},
+		membersSettingsScreen: {
+			mainTitle: "Membres et rôles",
+		},
 		changeAvatar: {
 			recentPictures: "Photos récentes",
 			recentFiles: "Fichiers récents",

apps/mobile/app/i18n/he.ts

@@ -225,6 +225,9 @@ const he = {
 			createButtonText: "Create",
 			updateButtonText: "Update",
 		},
+		membersSettingsScreen: {
+			mainTitle: "Members & Roles",
+		},
 		changeFullName: {
 			firstNamePlaceholder: "First Name",
 			lastNamePlaholder: "Last Name",

apps/mobile/app/i18n/ko.ts

@@ -231,6 +231,9 @@ const ko: Translations = {
 			createButtonText: "Create",
 			updateButtonText: "Update",
 		},
+		membersSettingsScreen: {
+			mainTitle: "Members & Roles",
+		},
 		changeFullName: {
 			firstNamePlaceholder: "First Name",
 			lastNamePlaholder: "Last Name",

apps/mobile/app/i18n/ru.ts

@@ -225,6 +225,9 @@ const ru = {
 			createButtonText: "Create",
 			updateButtonText: "Update",
 		},
+		membersSettingsScreen: {
+			mainTitle: "Members & Roles",
+		},
 		changeFullName: {
 			firstNamePlaceholder: "First Name",
 			lastNamePlaholder: "Last Name",

apps/mobile/app/navigators/AuthenticatedNavigator.tsx

@@ -22,6 +22,7 @@ import {
 	TaskLabelScreen,
 	TaskSizeScreen,
 	TaskPriorityScreen,
+	MembersSettingsScreen,
 } from "../screens"
 
 // HELPERS
@@ -57,6 +58,7 @@ export type AuthenticatedDrawerParamList = {
 	TaskSizeScreen: undefined
 	TaskStatus: undefined
 	TaskPriority: undefined
+	MembersSettingsScreen: undefined
 }
 /**
  * Helper for automatically generating navigation prop types for each route.
@@ -236,6 +238,7 @@ export const AuthenticatedNavigator = observer(function AuthenticatedNavigator()
 			<drawer.Screen name="TaskLabelScreen" component={TaskLabelScreen} />
 			<drawer.Screen name="TaskSizeScreen" component={TaskSizeScreen} />
 			<drawer.Screen name="TaskPriority" component={TaskPriorityScreen} />
+			<drawer.Screen name="MembersSettingsScreen" component={MembersSettingsScreen} />
 		</drawer.Navigator>
 	)
 })

apps/mobile/app/screens/Authenticated/MembersSettingsScreen/index.tsx

@@ -0,0 +1,73 @@
+import { View, Text, ViewStyle, TouchableOpacity, StyleSheet } from "react-native"
+import React, { FC } from "react"
+import { AuthenticatedDrawerScreenProps } from "../../../navigators/AuthenticatedNavigator"
+import { Screen } from "../../../components"
+import Animated from "react-native-reanimated"
+import { typography, useAppTheme } from "../../../theme"
+import { AntDesign } from "@expo/vector-icons"
+import { translate } from "../../../i18n"
+
+export const MembersSettingsScreen: FC<AuthenticatedDrawerScreenProps<"MembersSettingsScreen">> = (
+	_props,
+) => {
+	const { colors } = useAppTheme()
+	const { navigation } = _props
+	const fall = new Animated.Value(1)
+
+	return (
+		<Screen
+			preset="scroll"
+			ScrollViewProps={{ bounces: false }}
+			contentContainerStyle={[$container, { backgroundColor: colors.background2 }]}
+			safeAreaEdges={["top"]}
+		>
+			<Animated.View style={{ opacity: Animated.add(0.1, Animated.multiply(fall, 1.0)) }}>
+				<View style={[$headerContainer, { backgroundColor: colors.background }]}>
+					<View style={[styles.container, { backgroundColor: colors.background }]}>
+						<TouchableOpacity onPress={() => navigation.navigate("Setting")}>
+							<AntDesign name="arrowleft" size={24} color={colors.primary} />
+						</TouchableOpacity>
+						<Text style={[styles.title, { color: colors.primary }]}>
+							{translate("settingScreen.membersSettingsScreen.mainTitle")}
+						</Text>
+					</View>
+				</View>
+				<Text>Members list will be here</Text>
+			</Animated.View>
+		</Screen>
+	)
+}
+
+const $container: ViewStyle = {
+	flex: 1,
+}
+
+const $headerContainer: ViewStyle = {
+	padding: 20,
+	paddingVertical: 16,
+	shadowColor: "rgba(0, 0, 0, 0.6)",
+	shadowOffset: {
+		width: 0,
+		height: 2,
+	},
+	shadowOpacity: 0.07,
+	shadowRadius: 1.0,
+	elevation: 1,
+	zIndex: 10,
+}
+
+const styles = StyleSheet.create({
+	container: {
+		alignItems: "center",
+		flexDirection: "row",
+		width: "100%",
+	},
+
+	title: {
+		alignSelf: "center",
+		fontFamily: typography.primary.semiBold,
+		fontSize: 16,
+		textAlign: "center",
+		width: "80%",
+	},
+})

apps/mobile/app/screens/Authenticated/SettingScreen/Team/index.tsx

@@ -76,7 +76,11 @@ const TeamSettings: FC<ITeamSettingProps> = observer(({ props, onOpenBottomSheet
 					}`}
 					onPress={() => navigation.navigate("TaskLabelScreen")}
 				/>
-				<SingleInfo title={translate("settingScreen.teamSection.teamRole")} value={"No"} />
+				<SingleInfo
+					title={translate("settingScreen.teamSection.teamRole")}
+					value={"No"}
+					onPress={() => navigation.navigate("MembersSettingsScreen")}
+				/>
 				<SingleInfo
 					title={translate("settingScreen.teamSection.workSchedule")}
 					value={translate("settingScreen.teamSection.workScheduleHint")}

apps/mobile/app/screens/index.ts

@@ -14,4 +14,5 @@ export * from "./Authenticated/SettingScreen"
 export * from "./Authenticated/TaskStatusScreen"
 export * from "./Authenticated/TaskPrioritiesScreen"
 export * from "./Authenticated/TaskLabelScreen"
-export * from "./Authenticated/TaskSizeScreen"
+export * from "./Authenticated/TaskSizeScreen"
+export * from "./Authenticated/MembersSettingsScreen"