Style dashboard header on mobile (#3411)

vivid-planet · Feb 25, 2025 · 46ab330 · 46ab330
1 parent 908ddda
commit 46ab330
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 13 deletions.
diff --git a/.changeset/sharp-trains-taste.md 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
@@ -30,7 +30,7 @@ type RootProps = {
 
 const Root = styled("div")<RootProps>`
     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")<RootProps>`
                 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
@@ -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;
+    }
 `;