change: [M3-8442] - Remove Double border on "Billing & Payment History" table with dark theme.

[hasyed-akamai]

Description 📝

Border for "Billing & Payment History" table was not properly styled for Cloud Manager's dark theme, resulting in double border for the table.

Changes 🔄

• based on the theme we have changed the border size.

Target release date 🗓️

Preview 📷

Before	After

How to test 🧪

Prerequisites

• Log into accounts which is having any "Billing & Payment History" table entry:

Reproduction steps

• Landing:
  • Observe the border of "Billing & Payment History" table is reduced.

Verification steps

• After changes, observe "Billing & Payment History" table border gets half.

As an Author I have considered 🤔

Check all that apply

• 👀 Doing a self review
• ❔ Our contribution guidelines
• 🤏 Splitting feature into small PRs
• ➕ Adding a changeset
• 🧪 Providing/Improving test coverage
• 🔐 Removing all sensitive information from the code and PR description
• 🚩 Using a feature flag to protect the release
• 👣 Providing comprehensive reproduction steps
• 📑 Providing or updating our documentation
• 🕛 Scheduling a pair reviewing session
• 📱 Providing mobile support
• ♿ Providing accessibility support

[jaalah-akamai]

I don't think this solves the root problem, it just overrides it. I would undo this change and I'll point out what should change.

[jaalah-akamai]

Since we're wrapping this entire section in a paper which has a border, we should be able to pass sx={{ border: 0 }} to this Table on L441.
https://github.com/linode/manager/blob/develop/packages/manager/src/features/Billing/BillingPanels/BillingActivityPanel/BillingActivityPanel.tsx#L441

The other issue on on L479 where that style is no longer relevant and can be removed.
https://github.com/linode/manager/blob/develop/packages/manager/src/features/Billing/BillingPanels/BillingActivityPanel/BillingActivityPanel.tsx#L479

Let me know if that fixes all the issues

[cpathipa]

Agreed with Jaalah's feedback.

[hasyed-akamai]

Since we're wrapping this entire section in a paper which has a border, we should be able to pass sx={{ border: 0 }} to this Table on L441. https://github.com/linode/manager/blob/develop/packages/manager/src/features/Billing/BillingPanels/BillingActivityPanel/BillingActivityPanel.tsx#L441

The other issue on on L479 where that style is no longer relevant and can be removed. https://github.com/linode/manager/blob/develop/packages/manager/src/features/Billing/BillingPanels/BillingActivityPanel/BillingActivityPanel.tsx#L479

Let me know if that fixes all the issues

I've implemented the changes as mentioned. however, I've encountered a new issue with an unexpected extra borderBottom that appears only in the dark theme.

I also attempted to add a style={{ border: 0 }} attribute to L524 to remove the extra borderBottom. However, this approach did not work effectively for multiple rows.

I feel like my current approach of adding borders based on the theme is functioning adequately, although it may not be the most appropriate long-term solution. I feel that customization for this component may be necessary. However, I am open to exploring other options and would appreciate any suggestions you might have.

[jaalah-akamai]

I think you're on the right approach. The way I would think about this is: We're generating rows via a map. So we're able to determine the last table row. So one way would be to allow an sx prop to be applied to the row from which we can target all the cells that have a border bottom.

return orderedPaginatedData.map((thisItem, idx) => {
        const lastItem = idx === orderedPaginatedData.length - 1;
        return (
          <ActivityFeedItem
            sxRow={
              lastItem
                ? {
                    '& .MuiTableCell-root': {
                      borderBottom: 0,
                    },
                  }
                : {}
            }
            ... other props
          />
        );
      });

<TableRow data-testid={`${type}-${id}`} sx={sxRow}>

Hope that helps... otherwise submit some commits so I can give feedback

[hasyed-akamai]

I've followed the steps you mentioned, and everything is working perfectly now! Thank you so much for your help!

[github-actions]

Coverage Report: ✅
Base Coverage: 87.01%
Current Coverage: 87.01%

[carrillo-erik]

Verified that the most recent changes remove the double border in dark mode, do not cause any unexpected regressions, and resolves the issue rather than override old styles.

[cypress]

Cloud Manager E2E    Run #6739

Run Properties:   Passed #6739  •  6c6f700858: change: [M3-8442] - Remove Double border on "Billing & Payment History" table wi...

Project	Cloud Manager E2E
Branch Review	develop
Run status	Passed #6739
Run duration	31m 43s
Commit	6c6f700858: change: [M3-8442] - Remove Double border on "Billing & Payment History" table wi...
Committer	hasyed-akamai
View all properties for this run ↗︎

---

Test results
Failures	0
Flaky	6
Pending	2
Skipped	0
Passing	445
View all changes introduced in this branch ↗︎