change: [M3-9433] - Update styles to match CDS for Entity Header & Action Panel

packages/manager/.changeset/pr-11857-changed-1741982641599.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Changed
+---
+
+ Update styles to match CDS for Entity Header & Action Panel ([#11857](https://github.com/linode/manager/pull/11857))

packages/manager/src/MainContent.tsx

@@ -333,14 +333,14 @@ export const MainContent = () => {
                       margin: '0 auto',
                       maxWidth: `${theme.breakpoints.values.lg}px !important`,
                       pt: {
-                        md: 1.5,
+                        md: theme.spacingFunction(24),
                         xs: theme.spacing(2),
                       },
                       px: {
-                        md: theme.spacing(2),
+                        md: theme.spacing(3),
                         xs: 0,
                       },
-                      py: 1.5,
+                      py: theme.spacing(3),
                       transition: theme.transitions.create('opacity'),
                       width: isNarrowViewport
                         ? '100%'

packages/manager/src/components/Breadcrumb/Breadcrumb.styles.tsx

@@ -4,7 +4,7 @@ export const StyledPreContainerDiv = styled('div', { label: 'StyledDiv' })({
   alignItems: 'center',
   display: 'flex',
   flexWrap: 'wrap',
-  minHeight: 48,
+  height: 34,
 });
 
 export const StyledRootDiv = styled('div', { label: 'StyledRootDiv' })(

packages/manager/src/components/LandingHeader/LandingHeader.tsx

@@ -1,6 +1,6 @@
 import { Button } from '@linode/ui';
-import { styled, useTheme } from '@mui/material/styles';
 import Grid from '@mui/material/Grid2';
+import { styled, useTheme } from '@mui/material/styles';
 import useMediaQuery from '@mui/material/useMediaQuery';
 import * as React from 'react';
 
@@ -76,13 +76,14 @@ export const LandingHeader = ({
 
   return (
     <Grid
-      container
-      data-qa-entity-header
-      sx={{
+      sx={(theme) => ({
         alignItems: 'center',
         justifyContent: 'space-between',
+        marginBottom: theme.spacing(3),
         width: '100%',
-      }}
+      })}
+      container
+      data-qa-entity-header
     >
       <Grid>
         <Breadcrumb
@@ -102,10 +103,10 @@ export const LandingHeader = ({
             sx={{
               alignItems: 'center',
               display: 'flex',
+              flex: '1 1 auto',
               flexWrap: xsDown ? 'wrap' : 'nowrap',
               gap: 3,
               justifyContent: 'flex-end',
-              flex: '1 1 auto',
 
               marginLeft: customSmMdBetweenBreakpoint
                 ? theme.spacing(2)

packages/manager/src/components/MaintenanceBanner/MaintenanceBanner.tsx

@@ -8,6 +8,7 @@ import { formatDate } from 'src/utilities/formatDate';
 import { isPast } from 'src/utilities/isPast';
 
 import type { AccountMaintenance } from '@linode/api-v4/lib/account';
+import type { NoticeProps } from '@linode/ui';
 
 interface Props {
   maintenanceEnd?: null | string;
@@ -16,8 +17,10 @@ interface Props {
   type?: AccountMaintenance['type'];
 }
 
-export const MaintenanceBanner = React.memo((props: Props) => {
-  const { maintenanceEnd, maintenanceStart, type } = props;
+interface MaintenanceBannerProps extends Props, Partial<NoticeProps> {}
+
+export const MaintenanceBanner = React.memo((props: MaintenanceBannerProps) => {
+  const { maintenanceEnd, maintenanceStart, type, ...rest } = props;
 
   const { data: accountMaintenanceData } = useAllAccountMaintenanceQuery(
     {},
@@ -68,7 +71,7 @@ export const MaintenanceBanner = React.memo((props: Props) => {
   }
 
   return (
-    <Notice important variant="warning">
+    <Notice important variant="warning" {...rest}>
       <Typography lineHeight="20px">
         {generateIntroText(type, maintenanceStart, maintenanceEnd)}
       </Typography>