Merge pull request Expensify#43646 from bernhardoj/fix/42934-align-ce…

…nter-task-checkbox-to-first-line Align the task checkbox center vertically on the task title's first line
iusegithub · Jun 18, 2024 · 7063ca0 · 7063ca0
2 parents f6085d2 + 01baaa3
commit 7063ca0
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 16 deletions.
diff --git a/src/components/ReportActionItem/TaskPreview.tsx b/src/components/ReportActionItem/TaskPreview.tsx
@@ -72,9 +72,9 @@ function TaskPreview({taskReport, taskReportID, action, contextMenuAnchor, chatR
         ? taskReport?.stateNum === CONST.REPORT.STATE_NUM.APPROVED && taskReport.statusNum === CONST.REPORT.STATUS_NUM.APPROVED
         : action?.childStateNum === CONST.REPORT.STATE_NUM.APPROVED && action?.childStatusNum === CONST.REPORT.STATUS_NUM.APPROVED;
     const taskTitle = Str.htmlEncode(TaskUtils.getTaskTitle(taskReportID, action?.childReportName ?? ''));
-    const taskAssigneeAccountID = Task.getTaskAssigneeAccountID(taskReport) ?? action?.childManagerAccountID ?? '-1';
+    const taskAssigneeAccountID = Task.getTaskAssigneeAccountID(taskReport) ?? action?.childManagerAccountID ?? -1;
     const htmlForTaskPreview =
-        taskAssigneeAccountID !== 0 ? `<comment><mention-user accountid="${taskAssigneeAccountID}"></mention-user> ${taskTitle}</comment>` : `<comment>${taskTitle}</comment>`;
+        taskAssigneeAccountID > 0 ? `<comment><mention-user accountid="${taskAssigneeAccountID}"></mention-user> ${taskTitle}</comment>` : `<comment>${taskTitle}</comment>`;
     const isDeletedParentAction = ReportUtils.isCanceledTaskReport(taskReport, action);
 
     if (isDeletedParentAction) {
@@ -94,20 +94,22 @@ function TaskPreview({taskReport, taskReportID, action, contextMenuAnchor, chatR
                 accessibilityLabel={translate('task.task')}
             >
                 <View style={[styles.flex1, styles.flexRow, styles.alignItemsStart]}>
-                    <Checkbox
-                        style={[styles.mr2]}
-                        containerStyle={[styles.taskCheckbox]}
-                        isChecked={isTaskCompleted}
-                        disabled={!Task.canModifyTask(taskReport, currentUserPersonalDetails.accountID)}
-                        onPress={Session.checkIfActionIsAllowed(() => {
-                            if (isTaskCompleted) {
-                                Task.reopenTask(taskReport);
-                            } else {
-                                Task.completeTask(taskReport);
-                            }
-                        })}
-                        accessibilityLabel={translate('task.task')}
-                    />
+                    <View style={[styles.taskCheckboxWrapper]}>
+                        <Checkbox
+                            style={[styles.mr2]}
+                            containerStyle={[styles.taskCheckbox]}
+                            isChecked={isTaskCompleted}
+                            disabled={!Task.canModifyTask(taskReport, currentUserPersonalDetails.accountID)}
+                            onPress={Session.checkIfActionIsAllowed(() => {
+                                if (isTaskCompleted) {
+                                    Task.reopenTask(taskReport);
+                                } else {
+                                    Task.completeTask(taskReport);
+                                }
+                            })}
+                            accessibilityLabel={translate('task.task')}
+                        />
+                    </View>
                     <RenderHTML html={isTaskCompleted ? `<completed-task>${htmlForTaskPreview}</completed-task>` : htmlForTaskPreview} />
                 </View>
                 <Icon

diff --git a/src/styles/index.ts b/src/styles/index.ts
@@ -4022,6 +4022,11 @@ const styles = (theme: ThemeColors) =>
             width: 1,
         },
 
+        taskCheckboxWrapper: {
+            height: variables.fontSizeNormalHeight,
+            ...flex.justifyContentCenter,
+        },
+
         taskCheckbox: {
             height: 16,
             width: 16,