From 92eee5f433c15203e37cf5c87ea57fd9a1664b3e Mon Sep 17 00:00:00 2001
From: Bernhard Owen Josephus <bernhard.josephus@gmail.com>
Date: Fri, 27 Sep 2024 12:37:26 +0800
Subject: [PATCH] fix title isn't aligned to the center of the avatar

---
 src/components/ReportActionItem/TaskPreview.tsx |  3 ++-
 src/styles/utils/index.ts                       | 16 ++++++++++------
 2 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/src/components/ReportActionItem/TaskPreview.tsx b/src/components/ReportActionItem/TaskPreview.tsx
index 032be0a00b14..95528286d1e1 100644
--- a/src/components/ReportActionItem/TaskPreview.tsx
+++ b/src/components/ReportActionItem/TaskPreview.tsx
@@ -81,6 +81,7 @@ function TaskPreview({taskReportID, action, contextMenuAnchor, chatReportID, che
     const avatarSize = CONST.AVATAR_SIZE.SMALL;
     const isDeletedParentAction = ReportUtils.isCanceledTaskReport(taskReport, action);
     const iconWrapperStyle = StyleUtils.getTaskPreviewIconWrapper(hasAssignee ? avatarSize : undefined);
+    const titleStyle = StyleUtils.getTaskPreviewTitleStyle(iconWrapperStyle.height, isTaskCompleted);
 
     const shouldShowGreenDotIndicator = ReportUtils.isOpenTaskReport(taskReport, action) && ReportUtils.isReportManager(taskReport);
     if (isDeletedParentAction) {
@@ -124,7 +125,7 @@ function TaskPreview({taskReportID, action, contextMenuAnchor, chatReportID, che
                             type={CONST.ICON_TYPE_AVATAR}
                         />
                     )}
-                    <Text style={[styles.flex1, styles.alignSelfCenter, isTaskCompleted ? [styles.textSupporting, styles.textLineThrough] : {}]}>{taskTitle}</Text>
+                    <Text style={titleStyle}>{taskTitle}</Text>
                 </View>
                 {shouldShowGreenDotIndicator && (
                     <View style={styles.ml2}>
diff --git a/src/styles/utils/index.ts b/src/styles/utils/index.ts
index 19feb9a0b81d..341f72aa64a2 100644
--- a/src/styles/utils/index.ts
+++ b/src/styles/utils/index.ts
@@ -1669,12 +1669,16 @@ const createStyleUtils = (theme: ThemeColors, styles: ThemeStyles) => ({
         justifyContent: 'center',
     }),
 
-    getTaskPreviewIconWrapper: (avatarSize?: AvatarSizeName) => {
-        return {
-            height: avatarSize ? getAvatarSize(avatarSize) : variables.fontSizeNormalHeight,
-            ...styles.justifyContentCenter,
-        };
-    },
+    getTaskPreviewIconWrapper: (avatarSize?: AvatarSizeName) => ({
+        height: avatarSize ? getAvatarSize(avatarSize) : variables.fontSizeNormalHeight,
+        ...styles.justifyContentCenter,
+    }),
+
+    getTaskPreviewTitleStyle: (iconHeight: number, isTaskCompleted: boolean): StyleProp<TextStyle> => [
+        styles.flex1,
+        isTaskCompleted ? [styles.textSupporting, styles.textLineThrough] : [],
+        {marginTop: (iconHeight - variables.fontSizeNormalHeight) / 2},
+    ],
 });
 
 type StyleUtilsType = ReturnType<typeof createStyleUtils>;