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

The Above Extra Border is removed by removing the L479 where that style is no longer relevant
https://github.com/linode/manager/blob/develop/packages/manager/src/features/Billing/BillingPanels/BillingActivityPanel/BillingActivityPanel.tsx#L479

The Extra Side Border is Removed by using the extra syntax of sx={{border:0}} in table section
https://github.com/linode/manager/blob/develop/packages/manager/src/features/Billing/BillingPanels/BillingActivityPanel/BillingActivityPanel.tsx#L441

The lower Extra Border is able to remove by removing the borderBottom from the table cell component
https://github.com/linode/manager/blob/develop/packages/manager/src/components/TableCell/TableCell.tsx#L34

After Following all the above results are as expected :

but @jaalah-akamaiCould you please let me know if changes to the global component might cause any regression issues ?