[$100] Increase size of checkbox to default size of `20px`

[blimpich]

Problem

Coming from this thread, we currently have checkboxes that are at a reduced size (16px) for tasks inside DMs. We recently added avatars to our checkboxes and realized that we would actually prefer for those checkboxes to be our standard size.

Solution

Lets increase the size of the checkboxes to our standard size, which is 20px.

cc: @Expensify/design

Example (16px on left, 20px on the right)

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021833257022819149664
• Upwork Job ID: 1833257022819149664
• Last Price Increase: 2024-09-09
• Automatic offers:
• DylanDylann | Reviewer | 103898533
• ChavdaSachin | Contributor | 103898534

Issue Owner

Current Issue Owner: @DylanDylann

[melvin-bot[bot]]

Job added to Upwork: https://www.upwork.com/jobs/~021833257022819149664

[melvin-bot[bot]]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @DylanDylann (External)

[melvin-bot[bot]]

Upwork job price has been updated to $100

[blimpich]

Decreased job price since this is probably a simple and small css change. Will change if that ends up not being the case.

[melvin-bot[bot]]

Triggered auto assignment to @puneetlath (NewFeature), see https://stackoverflowteams.com/c/expensify/questions/14418#:~:text=BugZero%20process%20steps%20for%20feature%20requests for more details. Please add this Feature request to a GH project, as outlined in the SO.

[melvin-bot[bot]]

:warning: It looks like this issue is labelled as a New Feature but not tied to any GitHub Project. Keep in mind that all new features should be tied to GitHub Projects in order to properly track external CAP software time :warning:

[melvin-bot[bot]]

Current assignee @dannymcclain is eligible for the NewFeature assigner, not assigning anyone new.

[Nodebrute]

Proposal

Please re-state the problem that we are trying to solve in this issue.

Increase size of checkbox to default size of 20px

What is the root cause of that problem?

We are using 16 here https://github.com/Expensify/App/blob/4d250acb0fe1a54088c4f761d054e6c9c174fc97/src/styles/index.ts#L4113-L4114

What changes do you think we should make in order to solve the problem?

We should change both value to 20 https://github.com/Expensify/App/blob/4d250acb0fe1a54088c4f761d054e6c9c174fc97/src/styles/index.ts#L4113-L4114

    taskCheckbox: {
            height: 20,
            width: 20,
        },

What alternative solutions did you explore? (Optional)

[ChavdaSachin]

Proposal

Please re-state the problem that we are trying to solve in this issue.

• Change Task checkbox size to default.

What is the root cause of that problem?

• A custom style for task checkbox size is included here

  What changes do you think we should make in order to solve the problem?

• To change task checkbox style to default - remove the custom styling.
• Remove taskCheckBox style https://github.com/Expensify/App/blob/063cc10e7dc28ab99a2e659728202b1ea184db88/src/styles/index.ts#L4112-L4115
• And, remove containerStyle prop https://github.com/Expensify/App/blob/063cc10e7dc28ab99a2e659728202b1ea184db88/src/components/ReportActionItem/TaskPreview.tsx#L101

Now checkbox has default size which is 20px

Result

What alternative solutions did you explore? (Optional)

[DylanDylann]

@ChavdaSachin's proposal looks good to me

🎀 👀 🎀 C+ reviewed

[melvin-bot[bot]]

Current assignees @puneetlath and @blimpich are eligible for the choreEngineerContributorManagement assigner, not assigning anyone new.

[melvin-bot[bot]]

📣 @DylanDylann 🎉 An offer has been automatically sent to your Upwork account for the Reviewer role 🎉 Thanks for contributing to the Expensify app!

Offer link Upwork job

[melvin-bot[bot]]

📣 @ChavdaSachin 🎉 An offer has been automatically sent to your Upwork account for the Contributor role 🎉 Thanks for contributing to the Expensify app!

Offer link Upwork job Please accept the offer and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻 Keep in mind: Code of Conduct | Contributing 📖

[ChavdaSachin]

Thanks for accepting my Proposal. I will raise PR within an Hour.

[ChavdaSachin]

PR is ready for review.

cc. @DylanDylann