fix: refacto & style modification in CreateGroupFinalize, add testID …

…for test purposes

Signed-off-by: Lucas De Curtis <lucas.de-curtis@epitech.eu>

js/packages/components/InfosChat.tsx

@@ -96,6 +96,7 @@ const ContactRequestBox: React.FC<{ contact: beapi.messenger.IContact; isAccepte
 						{t('chat.one-to-one.contact-request-box.refuse-button')}
 					</TertiaryButtonIconLeft>
 					<SecondaryButtonIconLeft
+						testID={t('chat.one-to-one.contact-request-box.accept-button')}
 						disabled={acceptDisabled}
 						loading={accepting}
 						onPress={async () => {

js/packages/components/create-group/CreateGroupFooterWithIcon.tsx

@@ -1,8 +1,8 @@
 import React from 'react'
+import { View } from 'react-native'
 
 import { SecondaryButtonIconRight } from '@berty/components'
-
-import { CreateGroupFooterPriv } from './CreateGroupFooter.priv'
+import { useStyles } from '@berty/contexts/styles'
 
 interface CreateGroupFooterWithIconProps {
 	title: string
@@ -17,11 +17,20 @@ export const CreateGroupFooterWithIcon = ({
 	action,
 	testID,
 }: CreateGroupFooterWithIconProps) => {
+	const { padding, margin } = useStyles()
+
 	return (
-		<CreateGroupFooterPriv>
+		<View
+			style={[
+				padding.horizontal.huge,
+				padding.vertical.large,
+				margin.bottom.small,
+				{ backgroundColor: '#F2F2F2' },
+			]}
+		>
 			<SecondaryButtonIconRight testID={testID} name={icon} onPress={action}>
 				{title}
 			</SecondaryButtonIconRight>
-		</CreateGroupFooterPriv>
+		</View>
 	)
 }

js/packages/components/create-group/CreateGroupHeader.tsx

@@ -1,81 +1,41 @@
-import { Icon } from '@ui-kitten/components'
 import React from 'react'
-import { StyleProp, TouchableWithoutFeedback, View, ViewStyle } from 'react-native'
+import { StyleProp, View, ViewStyle } from 'react-native'
 
-import { useAppDimensions } from '@berty/contexts/app-dimensions.context'
 import { useStyles } from '@berty/contexts/styles'
 import { useThemeColor } from '@berty/hooks'
 
 import { UnifiedText } from '../shared-components/UnifiedText'
 
 export const CreateGroupHeader: React.FC<{
 	title: string
-	icon?: string
-	iconPack?: string
-	first?: boolean
-	disabled?: boolean
-	onPress?: () => void
 	style?: StyleProp<ViewStyle>
-}> = ({
-	children,
-	title,
-	icon,
-	iconPack,
-	first = false,
-	disabled = false,
-	onPress = null,
-	style = null,
-}) => {
-	const { height, border, margin, row, padding, text, column, opacity } = useStyles()
-	const { scaleHeight } = useAppDimensions()
+}> = ({ title, style = null }) => {
+	const { height, border, margin, row, padding, text, column } = useStyles()
 	const colors = useThemeColor()
 
 	return (
-		<View style={[!first && { backgroundColor: '#F2F2F2' }]}>
-			<TouchableWithoutFeedback onPress={() => onPress?.()}>
+		<View style={[border.radius.top.scale(30), { backgroundColor: '#F2F2F2' }, style]}>
+			<View style={[height(90)]}>
 				<View
 					style={[
-						border.radius.top.scale(30),
-						!first && border.shadow.big,
-						!first && { shadowColor: colors.shadow },
-						disabled && opacity(0.5),
-						{ backgroundColor: '#F2F2F2' },
-						style,
+						margin.top.medium,
+						row.item.justify,
+						border.radius.scale(4),
+						{
+							backgroundColor: `${colors['secondary-text']}70`,
+							height: 5,
+							width: 60,
+						},
 					]}
-				>
-					<View style={[height(90)]}>
-						<View
-							style={[
-								margin.top.medium,
-								row.item.justify,
-								border.radius.scale(4),
-								{
-									backgroundColor: `${colors['secondary-text']}70`,
-									height: 5 * scaleHeight,
-									width: 60 * scaleHeight,
-								},
-							]}
-						/>
-						<View style={[margin.top.small]}>
-							<View style={[row.fill, padding.horizontal.medium, padding.top.small]}>
-								<UnifiedText style={[text.bold, text.size.scale(25), column.item.center]}>
-									{title}
-								</UnifiedText>
-								{icon && (
-									<Icon
-										name={icon}
-										pack={iconPack}
-										width={30}
-										height={30}
-										fill={colors['main-text']}
-									/>
-								)}
-							</View>
-						</View>
+				/>
+				<View style={[margin.top.small]}>
+					<View style={[row.fill, padding.horizontal.medium, padding.top.small]}>
+						<UnifiedText style={[text.bold, text.size.scale(25), column.item.center]}>
+							{title}
+						</UnifiedText>
 					</View>
-					{children && <View>{children}</View>}
 				</View>
-			</TouchableWithoutFeedback>
+			</View>
 		</View>
 	)
 }

js/packages/components/create-group/CreateGroupMemberList.tsx

@@ -1,9 +1,8 @@
 import { Icon } from '@ui-kitten/components'
 import React from 'react'
-import { ScrollView, TouchableOpacity, View } from 'react-native'
+import { ScrollView, StyleSheet, TouchableOpacity, View } from 'react-native'
 
 import beapi from '@berty/api'
-import { useAppDimensions } from '@berty/contexts/app-dimensions.context'
 import { useStyles } from '@berty/contexts/styles'
 import { useAppDispatch, useAppSelector, useThemeColor } from '@berty/hooks'
 import {
@@ -18,14 +17,13 @@ const MemberItem: React.FC<{
 	member: beapi.messenger.IContact
 }> = ({ member }) => {
 	const { padding, column, text, row, maxWidth, border } = useStyles()
-	const { scaleSize } = useAppDimensions()
 	const colors = useThemeColor()
 	const dispatch = useAppDispatch()
 
 	return (
 		<View style={[padding.horizontal.medium, maxWidth(100)]}>
 			<View style={[column.top, padding.top.small]}>
-				<ContactAvatar size={70 * scaleSize} publicKey={member.publicKey} />
+				<ContactAvatar size={70} publicKey={member.publicKey} />
 				<UnifiedText
 					numberOfLines={1}
 					style={[
@@ -44,12 +42,8 @@ const MemberItem: React.FC<{
 					border.shadow.medium,
 					border.radius.medium,
 					column.justify,
+					styles.closeButton,
 					{
-						height: 25 * scaleSize,
-						width: 25 * scaleSize,
-						position: 'absolute',
-						top: 5 * scaleSize,
-						right: 9 * scaleSize,
 						backgroundColor: colors['main-background'],
 						shadowColor: colors.shadow,
 					},
@@ -58,8 +52,8 @@ const MemberItem: React.FC<{
 			>
 				<Icon
 					name='close-outline'
-					width={20 * scaleSize}
-					height={20 * scaleSize}
+					width={20}
+					height={20}
 					fill={colors['warning-asset']}
 					style={row.item.justify}
 				/>
@@ -86,3 +80,13 @@ export const CreateGroupMemberList = () => {
 		</View>
 	)
 }
+
+const styles = StyleSheet.create({
+	closeButton: {
+		height: 25,
+		width: 25,
+		position: 'absolute',
+		top: 5,
+		right: 9,
+	},
+})

js/packages/components/create-group/index.ts

@@ -1,4 +1,3 @@
-export { CreateGroupFooter } from './CreateGroupFooter'
 export { CreateGroupFooterWithIcon } from './CreateGroupFooterWithIcon'
 export { CreateGroupHeader } from './CreateGroupHeader'
 export { CreateGroupMemberList } from './CreateGroupMemberList'

js/packages/components/shared-components/ContactPicker.tsx

@@ -53,6 +53,7 @@ const ContactItem: React.FC<ContactItemProps> = ({ contact, added, separateBar =
 	return (
 		<View>
 			<TouchableOpacity
+				testID={contact.displayName ?? undefined}
 				onPress={() => {
 					if (added) {
 						dispatch(removeMemberFromInvitationListById(contact.publicKey!))

js/packages/components/shared-components/SettingsButtons.tsx

@@ -727,14 +727,14 @@ export const ButtonSettingItem: React.FC<ButtonSettingItem> = ({
 	styleText = {},
 }) => {
 	const _styles = useStylesButtonSettingItem()
-	const { row, padding, text } = useStyles()
+	const { row, text } = useStyles()
 	const colors = useThemeColor()
 
 	if (!color) {
 		color = colors['reverted-main-text']
 	}
 	return (
-		<View style={[row.left, padding.left.small, { alignItems: 'center' }, styleContainer]}>
+		<View style={[row.left, { alignItems: 'center', paddingLeft: 5 }, styleContainer]}>
 			<Icon
 				name={icon}
 				width={iconSize}

js/packages/screens/chat/CreateGroupAddMembers/CreateGroupAddMembers.tsx

@@ -9,14 +9,12 @@ import {
 	CreateGroupMemberList,
 } from '@berty/components'
 import { ContactPicker } from '@berty/components/shared-components'
-import { useAppDimensions } from '@berty/contexts/app-dimensions.context'
 import { useStyles } from '@berty/contexts/styles'
 import { useAllContacts, useThemeColor } from '@berty/hooks'
 import { ScreenFC, useNavigation } from '@berty/navigation'
 
 export const CreateGroupAddMembers: ScreenFC<'Chat.CreateGroupAddMembers'> = () => {
 	const { flex, margin } = useStyles()
-	const { scaleHeight } = useAppDimensions()
 	const colors = useThemeColor()
 	const navigation = useNavigation()
 	const { t } = useTranslation()
@@ -29,16 +27,16 @@ export const CreateGroupAddMembers: ScreenFC<'Chat.CreateGroupAddMembers'> = ()
 				<CreateGroupMemberList />
 			</View>
 			<View style={{ flex: 1, backgroundColor: '#F2F2F2' }}>
-				<View style={{ top: -30 * scaleHeight, flex: 1 }}>
+				<View style={{ top: -30, flex: 1 }}>
 					<CreateGroupHeader
 						title={t('main.home.create-group.add-members')}
-						first
 						style={[margin.bottom.scale(-1)]}
 					/>
 					<ContactPicker accountContacts={accountContacts} />
 				</View>
 			</View>
 			<CreateGroupFooterWithIcon
+				testID={t('main.home.create-group.continue')}
 				title={t('main.home.create-group.continue')}
 				icon='arrow-forward-outline'
 				action={() => navigation.navigate('Chat.CreateGroupFinalize')}