change: [M3-8343] - Change VPC expanded header background color

linode · Dec 4, 2024 · 8f06ce4 · 8f06ce4
1 parent 6be3f6b
commit 8f06ce4
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 3 deletions.
diff --git a/packages/manager/src/features/VPCs/VPCDetail/SubnetLinodeRow.tsx b/packages/manager/src/features/VPCs/VPCDetail/SubnetLinodeRow.tsx
@@ -328,7 +328,14 @@ const getFirewallLinks = (data: Firewall[]): JSX.Element => {
 };
 
 export const SubnetLinodeTableRowHead = (
-  <TableRow>
+  <TableRow
+    sx={(theme) => ({
+      '& .MuiTableCell-root': {
+        backgroundColor:
+          theme.name == 'dark' ? theme.tokens.color.Neutrals[80] : undefined,
+      },
+    })}
+  >
     <StyledTableHeadCell>Linode Label</StyledTableHeadCell>
     <StyledTableHeadCell sx={{ width: '14%' }}>Status</StyledTableHeadCell>
     <Hidden smDown>

diff --git a/packages/manager/src/features/VPCs/VPCDetail/VPCSubnetsTable.tsx b/packages/manager/src/features/VPCs/VPCDetail/VPCSubnetsTable.tsx
@@ -174,7 +174,15 @@ export const VPCSubnetsTable = (props: Props) => {
   }
 
   const SubnetTableRowHead = (
-    <TableRow>
+    <TableRow
+      sx={(theme) => ({
+        '& .MuiTableCell-root': {
+          backgroundColor:
+            theme.name == 'light' ? theme.color.black : undefined,
+          color: theme.name == 'light' ? `${theme.color.white}` : undefined,
+        },
+      })}
+    >
       <StyledTableSortCell
         sx={(theme) => ({
           [theme.breakpoints.down('sm')]: {
@@ -204,7 +212,7 @@ export const VPCSubnetsTable = (props: Props) => {
       <Hidden smDown>
         <StyledTableCell sx={{ width: '10%' }}>Linodes</StyledTableCell>
       </Hidden>
-      <StyledTableCell></StyledTableCell>
+      <StyledTableCell />
     </TableRow>
   );
 
@@ -364,6 +372,10 @@ const StyledTableCell = styled(TableCell, {
 const StyledTableSortCell = styled(TableSortCell, {
   label: 'StyledTableSortCell',
 })(({ theme }) => ({
+  '& .Mui-active': {
+    color: theme.name == 'light' ? `${theme.color.white}` : undefined,
+  },
   borderBottom: `1px solid ${theme.borderColors.borderTable} !important`,
+  color: theme.name == 'light' ? `${theme.color.white}` : undefined,
   whiteSpace: 'nowrap',
 }));