Merge pull request #1871 from ever-co/bug/card-shadow-and-estimate-ti…

…me-edit-mode fixed profile screen card shadow for androids, also fixed estimate mo…
ever-co · Nov 24, 2023 · 5e9a962 · 5e9a962
2 parents 36e1ae4 + b0cc238
commit 5e9a962
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 47 deletions.
diff --git a/apps/mobile/app/screens/Authenticated/ProfileScreen/components/ListCardItem.tsx b/apps/mobile/app/screens/Authenticated/ProfileScreen/components/ListCardItem.tsx
@@ -315,7 +315,7 @@ export default ListCardItem;
 const styles = StyleSheet.create({
 	cardContainer: {
 		borderRadius: 14,
-		elevation: 24,
+		elevation: 5,
 		shadowColor: '#000',
 		shadowOffset: { width: 0, height: 12 },
 		shadowOpacity: 0.05,

diff --git a/apps/mobile/app/screens/Authenticated/TeamScreen/components/ListCardItem.tsx b/apps/mobile/app/screens/Authenticated/TeamScreen/components/ListCardItem.tsx
@@ -2,7 +2,7 @@
 /* eslint-disable react-native/no-color-literals */
 /* eslint-disable react-native/no-inline-styles */
 import React, { useState } from 'react';
-import { View, ViewStyle, TouchableOpacity, StyleSheet, TouchableWithoutFeedback } from 'react-native';
+import { View, ViewStyle, TouchableOpacity, StyleSheet, TouchableWithoutFeedback, Platform } from 'react-native';
 import { Ionicons, Entypo } from '@expo/vector-icons';
 
 // COMPONENTS
@@ -32,6 +32,7 @@ import { translate } from '../../../../i18n';
 import { useTimer } from '../../../../services/hooks/useTimer';
 import { SettingScreenNavigationProp } from '../../../../navigators/AuthenticatedNavigator';
 import { getTimerStatusValue } from '../../../../helpers/get-timer-status';
+import { useClickOutside } from 'react-native-click-outside';
 
 export type ListItemProps = {
 	member: OT_Member;
@@ -54,6 +55,7 @@ export interface Props extends ListItemProps {
 export const ListItemContent: React.FC<IcontentProps> = observer(({ memberInfo, taskEdition, onPressIn }) => {
 	// HOOKS
 	const { colors, dark } = useAppTheme();
+	const clickOutsideTaskEstimationInputRef = useClickOutside<View>(() => taskEdition.setEstimateEditMode(false));
 	return (
 		<TouchableWithoutFeedback>
 			<View
@@ -85,38 +87,48 @@ export const ListItemContent: React.FC<IcontentProps> = observer(({ memberInfo,
 					</View>
 				</View>
 				<View style={[styles.times, { borderTopColor: colors.divider }]}>
-					<View
-						style={{
-							flexDirection: 'row',
-							justifyContent: 'space-between',
-							alignItems: 'center',
-							height: 48,
-							width: '100%'
+					<TouchableWithoutFeedback
+						onPress={(event) => {
+							if (Platform.OS === 'android' && taskEdition.estimateEditMode) {
+								event.stopPropagation();
+								taskEdition.setEstimateEditMode(false);
+							}
 						}}
 					>
-						<View style={{ ...GS.alignCenter }}>
-							<WorkedOnTask period="Daily" memberInfo={memberInfo} />
-						</View>
+						<View
+							style={{
+								flexDirection: 'row',
+								justifyContent: 'space-between',
+								alignItems: 'center',
+								height: 48,
+								width: '100%',
+								gap: 10
+							}}
+						>
+							<View style={{ ...GS.alignCenter }}>
+								<WorkedOnTask period="Daily" memberInfo={memberInfo} />
+							</View>
 
-						<View style={{ ...GS.alignCenter }}>
-							<WorkedOnTask period="Total" memberInfo={memberInfo} />
-						</View>
+							<View style={{ ...GS.alignCenter }}>
+								<WorkedOnTask period="Total" memberInfo={memberInfo} />
+							</View>
 
-						{memberInfo.memberTask && taskEdition.estimateEditMode ? (
-							<View style={styles.estimate}>
-								<EstimateTime
-									setEditEstimate={taskEdition.setEstimateEditMode}
-									currentTask={memberInfo.memberTask}
+							{memberInfo.memberTask && taskEdition.estimateEditMode ? (
+								<View style={styles.estimate} ref={clickOutsideTaskEstimationInputRef}>
+									<EstimateTime
+										setEditEstimate={taskEdition.setEstimateEditMode}
+										currentTask={memberInfo.memberTask}
+									/>
+								</View>
+							) : (
+								<TimeProgressBar
+									isAuthUser={memberInfo.isAuthUser}
+									memberInfo={memberInfo}
+									onPress={() => taskEdition.setEstimateEditMode(true)}
 								/>
-							</View>
-						) : (
-							<TimeProgressBar
-								isAuthUser={memberInfo.isAuthUser}
-								memberInfo={memberInfo}
-								onPress={() => taskEdition.setEstimateEditMode(true)}
-							/>
-						)}
-					</View>
+							)}
+						</View>
+					</TouchableWithoutFeedback>
 				</View>
 			</View>
 		</TouchableWithoutFeedback>
@@ -353,7 +365,6 @@ const styles = StyleSheet.create({
 	},
 	estimate: {
 		alignItems: 'center',
-		backgroundColor: '#E8EBF8',
 		borderRadius: 5,
 		flexDirection: 'row',
 		justifyContent: 'space-between',

diff --git a/apps/mobile/app/screens/Authenticated/TimerScreen/components/EstimateTime.tsx b/apps/mobile/app/screens/Authenticated/TimerScreen/components/EstimateTime.tsx
@@ -174,15 +174,7 @@ const EstimateTime: FC<Props> = ({ setEditEstimate, currentTask, setEstimateTime
 				</View>
 			</View>
 			<Text style={[styles.suffix, { color: colors.primary }]}>{' m'}</Text>
-			{showCheckIcon && (
-				<Feather
-					style={styles.thickIconStyle}
-					size={25}
-					color={'green'}
-					name="check"
-					onPress={() => handleSubmit()}
-				/>
-			)}
+			{showCheckIcon && <Feather size={25} color={'green'} name="check" onPress={() => handleSubmit()} />}
 			{isLoading ? <ActivityIndicator size={14} color="#1B005D" style={styles.loading} /> : null}
 		</View>
 	);
@@ -197,8 +189,8 @@ const styles = StyleSheet.create({
 		borderRadius: 8,
 		flexDirection: 'row',
 		justifyContent: 'space-between',
-		marginLeft: 'auto',
-		marginRight: 10
+		marginLeft: 'auto'
+		// marginRight: 10
 	},
 	estimateInput: {
 		fontFamily: typography.fonts.PlusJakartaSans.semiBold,
@@ -207,16 +199,11 @@ const styles = StyleSheet.create({
 		textAlign: 'center'
 	},
 	loading: {
-		position: 'absolute',
-		right: -18
+		marginLeft: 2
 	},
 	suffix: {
 		fontFamily: typography.fonts.PlusJakartaSans.semiBold,
 		fontSize: 14
 	},
-	thickIconStyle: {
-		position: 'absolute',
-		right: -26
-	},
 	wrapDash: { flexDirection: 'row', justifyContent: 'space-between', paddingLeft: 2 }
 });