fix title isn't aligned to the center of the avatar

Expensify · Sep 27, 2024 · 92eee5f · 92eee5f
1 parent 112cf4d
commit 92eee5f
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 7 deletions.
diff --git 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
@@ -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>;