Skip to content

Commit

Permalink
change: [M3-8442] - Remove Double border on "Billing & Payment Histor…
Browse files Browse the repository at this point in the history
…y" table with dark theme. (linode#11111)

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

* Added changeset: Remove Double border on Billing

* Remove the use of useTheme Hook

* refactor: [M3-8442] - Remove Double border on "Billing & Payment History" table without using theme.
  • Loading branch information
hasyed-akamai authored Oct 28, 2024
1 parent d3b927a commit 6c6f700
Show file tree
Hide file tree
Showing 2 changed files with 36 additions and 18 deletions.
5 changes: 5 additions & 0 deletions packages/manager/.changeset/pr-11111-changed-1729082750525.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@linode/manager": Changed
---

Remove Double border on "Billing & Payment History" table with dark theme. ([#11111](https://github.com/linode/manager/pull/11111))
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@ import { getAll } from 'src/utilities/getAll';
import { getTaxID } from '../../billingUtils';

import type { Invoice, InvoiceItem, Payment } from '@linode/api-v4/lib/account';
import type { Theme } from '@mui/material/styles';
import type { Theme, SxProps } from '@mui/material/styles';

const useStyles = makeStyles()((theme: Theme) => ({
activeSince: {
Expand Down Expand Up @@ -354,19 +354,31 @@ export const BillingActivityPanel = React.memo((props: Props) => {
);
}
if (orderedPaginatedData.length > 0) {
return orderedPaginatedData.map((thisItem) => (
<ActivityFeedItem
downloadPDF={
thisItem.type === 'invoice'
? downloadInvoicePDF
: downloadPaymentPDF
}
hasError={pdfErrors.has(`${thisItem.type}-${thisItem.id}`)}
isLoading={pdfLoading.has(`${thisItem.type}-${thisItem.id}`)}
key={`${thisItem.type}-${thisItem.id}`}
{...thisItem}
/>
));
return orderedPaginatedData.map((thisItem, idx) => {
const lastItem = idx === orderedPaginatedData.length - 1;
return (
<ActivityFeedItem
sxRow={
lastItem
? {
'& .MuiTableCell-root': {
borderBottom: 0,
},
}
: {}
}
downloadPDF={
thisItem.type === 'invoice'
? downloadInvoicePDF
: downloadPaymentPDF
}
hasError={pdfErrors.has(`${thisItem.type}-${thisItem.id}`)}
isLoading={pdfLoading.has(`${thisItem.type}-${thisItem.id}`)}
key={`${thisItem.type}-${thisItem.id}`}
{...thisItem}
/>
);
});
}

return null;
Expand Down Expand Up @@ -438,7 +450,7 @@ export const BillingActivityPanel = React.memo((props: Props) => {
/>
</div>
</StyledBillingAndPaymentHistoryHeader>
<Table aria-label="List of Invoices and Payments">
<Table aria-label="List of Invoices and Payments" sx={{ border: 0 }}>
<TableHead>
<TableRow>
<TableCell className={classes.descriptionColumn}>
Expand Down Expand Up @@ -475,8 +487,7 @@ export const BillingActivityPanel = React.memo((props: Props) => {

const StyledBillingAndPaymentHistoryHeader = styled('div', {
name: 'BillingAndPaymentHistoryHeader',
})(({ theme }) => ({
border: theme.name === 'dark' ? `1px solid ${theme.borderColors.divider}` : 0,
})(() => ({
borderBottom: 0,
padding: `15px 0px 15px 20px`,
}));
Expand All @@ -488,12 +499,14 @@ interface ActivityFeedItemProps extends ActivityFeedItem {
downloadPDF: (id: number) => void;
hasError: boolean;
isLoading: boolean;
sxRow: SxProps<Theme>;
}

export const ActivityFeedItem = React.memo((props: ActivityFeedItemProps) => {
const { classes } = useStyles();

const {
sxRow,
date,
downloadPDF,
hasError,
Expand All @@ -520,7 +533,7 @@ export const ActivityFeedItem = React.memo((props: ActivityFeedItemProps) => {
};

return (
<TableRow data-testid={`${type}-${id}`}>
<TableRow data-testid={`${type}-${id}`} sx={sxRow}>
<TableCell>
{type === 'invoice' ? (
<Link to={`/account/billing/invoices/${id}`}>{label}</Link>
Expand Down

0 comments on commit 6c6f700

Please sign in to comment.