diff --git a/.changeset/sharp-trains-taste.md b/.changeset/sharp-trains-taste.md new file mode 100644 index 0000000000..cc8ad7d756 --- /dev/null +++ b/.changeset/sharp-trains-taste.md @@ -0,0 +1,5 @@ +--- +"@comet/cms-admin": patch +--- + +Adapt styling of the dashboard header to match the Comet DXP design diff --git a/packages/admin/cms-admin/src/dashboard/DashboardHeader.tsx b/packages/admin/cms-admin/src/dashboard/DashboardHeader.tsx index 020c0f819d..2b7ac763ce 100644 --- a/packages/admin/cms-admin/src/dashboard/DashboardHeader.tsx +++ b/packages/admin/cms-admin/src/dashboard/DashboardHeader.tsx @@ -30,7 +30,7 @@ type RootProps = { const Root = styled("div")` position: relative; - height: 300px; + height: 230px; color: ${({ textColor }) => (textColor === "light" ? "white" : textColor === "dark" ? "black" : "inherit")}; background-color: ${({ theme }) => theme.palette.grey[700]}; @@ -45,13 +45,25 @@ const Root = styled("div")` background-image: url(${backgroundImageUrl["2x"]}); } `} + + ${({ theme }) => theme.breakpoints.up("sm")} { + height: 300px; + } `; const Greeting = styled(Typography)` position: absolute; - left: ${({ theme }) => theme.spacing(8)}; - bottom: ${({ theme }) => theme.spacing(8)}; - font-size: 55px; - line-height: 64px; - font-weight: 200; + left: ${({ theme }) => theme.spacing(4)}; + bottom: 12px; + font-size: 30px; + line-height: 38px; + font-weight: 160; + + ${({ theme }) => theme.breakpoints.up("sm")} { + left: ${({ theme }) => theme.spacing(8)}; + bottom: ${({ theme }) => theme.spacing(8)}; + font-size: 55px; + line-height: 64px; + font-weight: 200; + } `; diff --git a/packages/admin/cms-admin/src/dashboard/DateTime.tsx b/packages/admin/cms-admin/src/dashboard/DateTime.tsx index ba09030d63..6ffa15e1f3 100644 --- a/packages/admin/cms-admin/src/dashboard/DateTime.tsx +++ b/packages/admin/cms-admin/src/dashboard/DateTime.tsx @@ -29,18 +29,34 @@ export const DateTime = () => { const Root = styled("div")` position: absolute; - top: ${({ theme }) => theme.spacing(4)}; - right: ${({ theme }) => theme.spacing(8)}; - font-weight: 200; + top: 16px; + right: ${({ theme }) => theme.spacing(4)}; text-align: right; + + ${({ theme }) => theme.breakpoints.up("sm")} { + top: ${({ theme }) => theme.spacing(4)}; + right: ${({ theme }) => theme.spacing(8)}; + } `; const DateContainer = styled("div")` - font-size: 33px; - line-height: 39px; + font-size: 24px; + line-height: 28px; + font-weight: 150; + + ${({ theme }) => theme.breakpoints.up("sm")} { + font-size: 33px; + line-height: 39px; + } `; const TimeContainer = styled("div")` - font-size: 55px; - line-height: 64px; + font-size: 36px; + line-height: 42px; + font-weight: 170; + + ${({ theme }) => theme.breakpoints.up("sm")} { + font-size: 55px; + line-height: 64px; + } `;