Adjust home page to rwd (#5288)

* Adjust home page to rwd * Align sidebar width with cloud console * Add changeset * Small fixes
saleor · Nov 29, 2024 · 13f63c2 · 13f63c2
1 parent e48622c
commit 13f63c2
Show file tree

Hide file tree

Showing 7 changed files with 69 additions and 54 deletions.
diff --git a/.changeset/fluffy-teachers-check.md b/.changeset/fluffy-teachers-check.md
@@ -0,0 +1,5 @@
+---
+"saleor-dashboard": patch
+---
+
+New home page layout is now reponsive, it means that layout adjusts to desktop, tablet and mobile devices
diff --git a/src/components/Sidebar/Sidebar.tsx b/src/components/Sidebar/Sidebar.tsx
@@ -5,7 +5,11 @@ import { SidebarContent } from "./Content";
 
 export const Sidebar = () => (
   <>
-    <Box display={{ mobile: "none", tablet: "none", desktop: "block" }} height="100%">
+    <Box
+      __width="260px"
+      display={{ mobile: "none", tablet: "none", desktop: "block" }}
+      height="100%"
+    >
       <SidebarContent />
     </Box>
     <Box display={{ mobile: "block", tablet: "block", desktop: "none" }}>
@@ -25,6 +29,7 @@ export const Sidebar = () => (
           backgroundColor="default2"
           data-test-id="sidebar-drawer-content"
           paddingTop={0}
+          __width="260px"
         >
           <SidebarContent />
         </Drawer.Content>

diff --git a/src/welcomePage/WelcomePage.tsx b/src/welcomePage/WelcomePage.tsx
@@ -1,6 +1,5 @@
 import { useUser } from "@dashboard/auth";
 import useAppChannel from "@dashboard/components/AppLayout/AppChannelContext";
-import { DetailPageLayout } from "@dashboard/components/Layouts";
 import { hasPermissions } from "@dashboard/components/RequirePermissions";
 import { PermissionEnum } from "@dashboard/graphql";
 import { Box } from "@saleor/macaw-ui-next";
@@ -21,21 +20,40 @@ export const WelcomePage = () => {
   ]);
 
   return (
-    <DetailPageLayout withSavebar={false}>
-      <Box gridColumn="8" gridRowStart="1" />
-      <DetailPageLayout.Content paddingTop={6} paddingLeft={8}>
+    <Box
+      display="grid"
+      gap={7}
+      gridTemplateColumns={{
+        mobile: 1,
+        tablet: 1,
+        desktop: 3,
+      }}
+      paddingX={8}
+      paddingY={6}
+      paddingTop={9}
+      __gridTemplateRows="auto 1fr"
+    >
+      <Box gridRowStart="1" __grid-column="1/-1">
         <WelcomePageTitle />
+      </Box>
+      <Box
+        gridColumn={{
+          mobile: "1",
+          tablet: "1",
+          desktop: "2",
+        }}
+      >
         <WelcomePageOnboarding />
         <WelcomePageTilesContainer />
-      </DetailPageLayout.Content>
-      <DetailPageLayout.RightSidebar borderLeftStyle="none">
+      </Box>
+      <Box gridColumn="1">
         <WelcomePageSidebar
           channel={channel}
           setChannel={setChannel}
           channels={channels}
           hasPermissionToManageOrders={hasPermissionToManageOrders}
         />
-      </DetailPageLayout.RightSidebar>
-    </DetailPageLayout>
+      </Box>
+    </Box>
   );
 };
diff --git a/src/welcomePage/WelcomePageOnboarding/WelcomePageOnboarding.tsx b/src/welcomePage/WelcomePageOnboarding/WelcomePageOnboarding.tsx
@@ -30,14 +30,7 @@ export const WelcomePageOnboarding = () => {
   };
 
   return (
-    <DashboardCard
-      marginTop={6}
-      marginRight={6}
-      borderRadius={3}
-      borderColor="default1"
-      borderWidth={1}
-      borderStyle="solid"
-    >
+    <DashboardCard borderRadius={3} borderColor="default1" borderWidth={1} borderStyle="solid">
       <Accordion
         value={isOnboardingExpanded ? "onboarding" : ""}
         onValueChange={value => {
@@ -46,9 +39,16 @@ export const WelcomePageOnboarding = () => {
       >
         <Accordion.Item value="onboarding" data-test-id="onboarding-accordion-item">
           <DashboardCard.Header padding={6}>
-            <Title isOnboardingCompleted={isOnboardingCompleted} status={status} />
+            <Box
+              display="flex"
+              flexWrap="wrap"
+              justifyContent="space-between"
+              gap={3}
+              width="100%"
+              marginRight={4}
+            >
+              <Title isOnboardingCompleted={isOnboardingCompleted} status={status} />
 
-            <Box display="flex" flexDirection="row" alignItems="center" gap={4}>
               {!isOnboardingCompleted && (
                 <Button
                   variant="secondary"
@@ -62,24 +62,24 @@ export const WelcomePageOnboarding = () => {
                   />
                 </Button>
               )}
-              <Accordion.Trigger>
-                <Button
-                  display="flex"
-                  alignItems="center"
-                  transition="ease"
-                  __transform={`${isOnboardingExpanded ? "rotate(180deg)" : "none"}`}
-                  backgroundColor={{
-                    hover: "transparent",
-                    active: "transparent",
-                  }}
-                  variant="tertiary"
-                  size="small"
-                  data-test-id="onboarding-accordion-trigger"
-                >
-                  <ChervonDownIcon />
-                </Button>
-              </Accordion.Trigger>
             </Box>
+            <Accordion.Trigger>
+              <Button
+                display="flex"
+                alignItems="center"
+                transition="ease"
+                __transform={`${isOnboardingExpanded ? "rotate(180deg)" : "none"}`}
+                backgroundColor={{
+                  hover: "transparent",
+                  active: "transparent",
+                }}
+                variant="tertiary"
+                size="small"
+                data-test-id="onboarding-accordion-trigger"
+              >
+                <ChervonDownIcon />
+              </Button>
+            </Accordion.Trigger>
           </DashboardCard.Header>
 
           <Accordion.Content>

diff --git a/src/welcomePage/WelcomePageSidebar/WelcomePageSidebar.tsx b/src/welcomePage/WelcomePageSidebar/WelcomePageSidebar.tsx
@@ -1,5 +1,4 @@
 import AppChannelSelect from "@dashboard/components/AppLayout/AppChannelSelect";
-import { topBarHeight } from "@dashboard/components/AppLayout/consts";
 import { DashboardCard } from "@dashboard/components/Card";
 import RequirePermissions from "@dashboard/components/RequirePermissions";
 import { ChannelFragment, PermissionEnum } from "@dashboard/graphql";
@@ -22,15 +21,8 @@ interface HomeSidebarProps {
 export const WelcomePageSidebar = (props: HomeSidebarProps) => {
   return (
     <WelcomePageSidebarContextProvider {...props}>
-      <DashboardCard
-        borderRadius={3}
-        borderWidth={1}
-        borderStyle="solid"
-        borderColor="default1"
-        __marginTop={topBarHeight}
-        marginRight={5}
-      >
-        <DashboardCard.Header>
+      <DashboardCard borderRadius={3} borderWidth={1} borderStyle="solid" borderColor="default1">
+        <DashboardCard.Header gap={3} display="flex" flexWrap="wrap">
           <DashboardCard.Title>
             <Text size={8}>
               <FormattedMessage

diff --git a/src/welcomePage/WelcomePageTilesContainer/WelcomePageTilesContainer.tsx b/src/welcomePage/WelcomePageTilesContainer/WelcomePageTilesContainer.tsx
@@ -13,14 +13,9 @@ export const WelcomePageTilesContainer = () => {
   return (
     <Box
       display="grid"
-      gridTemplateColumns={{
-        mobile: 1,
-        desktop: 2,
-      }}
+      __gridTemplateColumns="repeat(auto-fill, minmax(min(100%, 400px), 1fr))"
       gap={6}
-      marginRight={6}
-      marginY={6}
-      paddingBottom={6}
+      marginTop={7}
     >
       {tiles.map(tile => (
         <WelcomePageInfoTile key={tile.id} {...tile} />

diff --git a/src/welcomePage/WelcomePageTitle.tsx b/src/welcomePage/WelcomePageTitle.tsx
@@ -9,7 +9,7 @@ export const WelcomePageTitle = () => {
   const userName = getUserName(user, true);
 
   return (
-    <Text as="h1" size={8}>
+    <Text as="h1" size={9}>
       <FormattedMessage
         defaultMessage="Hello {userName}, welcome to your Store Dashboard"
         id="0+zatS"