From fc28ba3b2adc3b281861613b6dd68e0b592986fa Mon Sep 17 00:00:00 2001 From: Julia Wegmayr Date: Wed, 12 Feb 2025 09:34:25 +0100 Subject: [PATCH 1/4] style dashboard header on mobile --- .../src/dashboard/DashboardHeader.tsx | 22 ++++++++++---- .../cms-admin/src/dashboard/DateTime.tsx | 30 ++++++++++++++----- 2 files changed, 40 insertions(+), 12 deletions(-) diff --git a/packages/admin/cms-admin/src/dashboard/DashboardHeader.tsx b/packages/admin/cms-admin/src/dashboard/DashboardHeader.tsx index 020c0f819d..0e70ec1db5 100644 --- a/packages/admin/cms-admin/src/dashboard/DashboardHeader.tsx +++ b/packages/admin/cms-admin/src/dashboard/DashboardHeader.tsx @@ -45,13 +45,25 @@ const Root = styled("div")` background-image: url(${backgroundImageUrl["2x"]}); } `} + + ${({ theme }) => theme.breakpoints.down("sm")} { + height: 230px; + } `; 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: ${({ theme }) => theme.spacing(2.4)}; + 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..36730716fd 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: ${({ theme }) => theme.spacing(3.2)}; + 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; + } `; From 88e96cc9ad83dec2a67bd92c46bd8e3c340c15fc Mon Sep 17 00:00:00 2001 From: Julia Wegmayr Date: Wed, 12 Feb 2025 09:39:21 +0100 Subject: [PATCH 2/4] add changeset --- .changeset/sharp-trains-taste.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/sharp-trains-taste.md 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 From 432ffe8a2adf088a6d34462f64c4497bb273195c Mon Sep 17 00:00:00 2001 From: Julia Wegmayr Date: Thu, 13 Feb 2025 10:00:30 +0100 Subject: [PATCH 3/4] use px instead of spacing --- packages/admin/cms-admin/src/dashboard/DashboardHeader.tsx | 2 +- packages/admin/cms-admin/src/dashboard/DateTime.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/admin/cms-admin/src/dashboard/DashboardHeader.tsx b/packages/admin/cms-admin/src/dashboard/DashboardHeader.tsx index 0e70ec1db5..e046b765de 100644 --- a/packages/admin/cms-admin/src/dashboard/DashboardHeader.tsx +++ b/packages/admin/cms-admin/src/dashboard/DashboardHeader.tsx @@ -54,7 +54,7 @@ const Root = styled("div")` const Greeting = styled(Typography)` position: absolute; left: ${({ theme }) => theme.spacing(4)}; - bottom: ${({ theme }) => theme.spacing(2.4)}; + bottom: 12px; font-size: 30px; line-height: 38px; font-weight: 160; diff --git a/packages/admin/cms-admin/src/dashboard/DateTime.tsx b/packages/admin/cms-admin/src/dashboard/DateTime.tsx index 36730716fd..6ffa15e1f3 100644 --- a/packages/admin/cms-admin/src/dashboard/DateTime.tsx +++ b/packages/admin/cms-admin/src/dashboard/DateTime.tsx @@ -29,7 +29,7 @@ export const DateTime = () => { const Root = styled("div")` position: absolute; - top: ${({ theme }) => theme.spacing(3.2)}; + top: 16px; right: ${({ theme }) => theme.spacing(4)}; text-align: right; From 01020ebb65527bb4f28c7077cd813b224dd6a2b0 Mon Sep 17 00:00:00 2001 From: Julia Wegmayr Date: Wed, 19 Feb 2025 11:08:17 +0100 Subject: [PATCH 4/4] set mobile styling as default in DashboardHeader --- packages/admin/cms-admin/src/dashboard/DashboardHeader.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/admin/cms-admin/src/dashboard/DashboardHeader.tsx b/packages/admin/cms-admin/src/dashboard/DashboardHeader.tsx index e046b765de..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]}; @@ -46,8 +46,8 @@ const Root = styled("div")` } `} - ${({ theme }) => theme.breakpoints.down("sm")} { - height: 230px; + ${({ theme }) => theme.breakpoints.up("sm")} { + height: 300px; } `;