[HOLD for payment 2024-07-10] [HOLD for payment 2024-07-02] [$250] Context/popover menus have incorrect border radius

[m-natarajan]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Version Number: 1.4.76-4
Reproducible in staging?: y
Reproducible in production?: y
If this was caught during regression testing, add the test name, ID and link from TestRail:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Expensify/Expensify Issue URL:
Issue reported by: @dannymcclain
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1716913234239859

Action Performed:

1. Go to NewDot
2. Open context menu, Edit comment Global create (any context menu)

Expected Result:

Context/popover menus should use one of our predefined border radius variables. Not an engineer, but I would think componentBorderRadiusLarge (

App/src/styles/variables.ts

Line 28 in 95d328f

componentBorderRadiusLarge: 16,

), which is 16px.

Actual Result:

The border radius of context menus is 12px.

Workaround:

unknown

Platforms:

Which of our officially supported platforms is this issue occurring on?

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~015010f0cbb4319b2e
• Upwork Job ID: 1798225869486452736
• Last Price Increase: 2024-06-05
• Automatic offers:
• rojiphil | Reviewer | 102612211
• s77rt | Contributor | 102712893

Issue Owner

Current Issue Owner: @rojiphil

[melvin-bot]

Triggered auto assignment to @JmillsExpensify (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[Krishna2323]

Proposal

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

What is the root cause of that problem?

The default value is always 12px in the file below.

App/src/styles/utils/generators/ModalStyleUtils.ts

Line 47 in f5d28de

const createModalStyleUtils: StyleUtilGenerator<GetModalStylesStyleUtil> = ({theme, styles}) => ({

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

Update to the required number in all places where we use 12px.

What alternative solutions did you explore? (Optional)

[Nodebrute]

Proposal

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

Context/popover menus have incorrect border radius

What is the root cause of that problem?

We are using 12 px in these places

App/src/styles/utils/generators/ModalStyleUtils.ts

Line 78 in f5d28de

borderRadius: 12,

App/src/styles/utils/generators/ModalStyleUtils.ts

Line 132 in f5d28de

borderRadius: isSmallScreenWidth ? 0 : 12,

App/src/styles/utils/generators/ModalStyleUtils.ts

Line 154 in f5d28de

borderRadius: 12,

App/src/styles/utils/generators/ModalStyleUtils.ts

Line 200 in f5d28de

borderRadius: 12,

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

We should use 16 in all the above places

What alternative solutions did you explore? (Optional)

We can also use componentBorderRadiusLarge in all the above places

[dragnoir]

Proposal

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

Context/popover menus have incorrect border radius

What is the root cause of that problem?

Wrong border radius on

App/src/styles/utils/generators/ModalStyleUtils.ts

Line 200 in deb4c79

borderRadius: 12,

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

We need to update only this value to 16 componentBorderRadiusLarge

App/src/styles/utils/generators/ModalStyleUtils.ts

Line 200 in deb4c79

borderRadius: 12,

it's for case CONST.MODAL.MODAL_TYPE.POPOVER:

If we update the other value, it will effect other component and not Context/popover menus

[melvin-bot]

@JmillsExpensify Whoops! This issue is 2 days overdue. Let's get this updated quick!

[melvin-bot]

@JmillsExpensify Still overdue 6 days?! Let's take care of this!

[JmillsExpensify]

Opening up to the community given that we have proposals.

[melvin-bot]

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