Homepage alignments (#3421)

* Home alignments

* Set paddings

* Messages

* Center cheviron

* Center cheviron

locale/defaultMessages.json

@@ -4847,6 +4847,9 @@
     "context": "title",
     "string": "Reserved stock"
   },
+  "X7jl6w": {
+    "string": "Orders"
+  },
   "X8qjg3": {
     "context": "inactive",
     "string": "Inactive"

src/home/components/HomeAnalyticsCard/HomeAnalyticsCard.tsx

@@ -1,92 +1,39 @@
-import { Card, CardContent, Typography } from "@material-ui/core";
+import { Box, Text } from "@saleor/macaw-ui/next";
-import { IconProps } from "@material-ui/core/Icon";
-import { makeStyles } from "@saleor/macaw-ui";
-import { vars } from "@saleor/macaw-ui/next";
 import React from "react";
 import { FormattedMessage } from "react-intl";
 
-const useStyles = makeStyles(
-  theme => ({
-    cardContent: {
-      display: "grid",
-      gridColumnGap: theme.spacing(3),
-      gridTemplateColumns: "1fr 64px",
-      border: `1px solid ${vars.colors.border.neutralPlain}`,
-      borderRadius: vars.borderRadius[3],
-    },
-    cardSpacing: {
-      [theme.breakpoints.down("sm")]: {
-        marginBottom: theme.spacing(1),
-      },
-      marginBottom: theme.spacing(3),
-    },
-    cardSubtitle: {
-      fontSize: 12,
-      height: "20px",
-      lineHeight: 0.9,
-    },
-    cardTitle: {
-      fontSize: 20,
-      fontWeight: 500 as 500,
-    },
-    icon: {
-      color: theme.palette.primary.contrastText,
-      fontSize: 54,
-      margin: ".5rem .3rem",
-    },
-    iconBackground: {
-      backgroundColor: theme.palette.background.default,
-      borderRadius: "8px",
-      color: "white",
-      fontSize: "54px",
-      height: "100%",
-      padding: "10px 5px 0px 5px",
-      width: "100%",
-    },
-    value: {
-      textAlign: "right",
-    },
-  }),
-  { name: "HomeAnalyticsCard" },
-);
-
 interface HomeAnalyticsCardProps {
   testId?: string;
-  icon: React.ReactElement<IconProps>;
   title: string;
   children?: React.ReactNode;
 }
 
 const HomeAnalyticsCard: React.FC<HomeAnalyticsCardProps> = props => {
-  const { children, title, icon, testId } = props;
+  const { children, title, testId } = props;
-
-  const classes = useStyles(props);
 
   return (
-    <Card className={classes.cardSpacing}>
+    <Box
-      <CardContent className={classes.cardContent} data-test-id={testId}>
+      borderWidth={1}
-        <div>
+      borderStyle="solid"
-          <Typography className={classes.cardTitle} variant="subtitle1">
+      borderColor="neutralPlain"
+      borderRadius={3}
+      padding={8}
+      display="flex"
+      justifyContent="space-between"
+      data-test-id={testId}
+    >
+      <Box display="flex" flexDirection="column" gap={2}>
+        <Text size="large" variant="body">
           {title}
-          </Typography>
+        </Text>
-          <Typography
+        <Text size="medium" variant="caption" color="iconNeutralPlain">
-            className={classes.cardSubtitle}
-            variant="caption"
-            color="textSecondary"
-          >
           <FormattedMessage id="zWgbGg" defaultMessage="Today" />
-          </Typography>
+        </Text>
-          <Typography
+      </Box>
-            className={classes.value}
+      <Text as="h4" variant="heading">
-            color="textPrimary"
-            variant="h4"
-          >
         {children}
-          </Typography>
+      </Text>
-        </div>
+    </Box>
-        <div className={classes.iconBackground}>{icon}</div>
-      </CardContent>
-    </Card>
   );
 };
 HomeAnalyticsCard.displayName = "HomeAnalyticsCard";

src/home/components/HomeNotificationTable/HomeNotificationTable.tsx

@@ -12,6 +12,7 @@ import {
 } from "@material-ui/core";
 import KeyboardArrowRight from "@material-ui/icons/KeyboardArrowRight";
 import { makeStyles } from "@saleor/macaw-ui";
+import { vars } from "@saleor/macaw-ui/next";
 import React from "react";
 import { useIntl } from "react-intl";
 
@@ -21,13 +22,22 @@ const useStyles = makeStyles(
   () => ({
     arrowIcon: {
       textAlign: "right",
-      width: 100,
+      width: "100%",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "flex-end",
     },
     tableCard: {
       overflow: "hidden",
+      borderRadius: 0,
     },
     tableRow: {
       cursor: "pointer",
+      /* Table to be replaced with Box */
+      "& .MuiTableCell-root": {
+        paddingLeft: `${vars.space[8]} !important`,
+        paddingRight: `${vars.space[8]} !important`,
+      },
     },
     cardContent: {
       padding: 0,

src/home/components/HomePage/HomePage.tsx

@@ -6,39 +6,16 @@ import RequirePermissions from "@dashboard/components/RequirePermissions";
 import Skeleton from "@dashboard/components/Skeleton";
 import { HomeQuery, PermissionEnum } from "@dashboard/graphql";
 import { RelayToFlat } from "@dashboard/types";
-import { makeStyles } from "@saleor/macaw-ui";
 import { Box } from "@saleor/macaw-ui/next";
 import React from "react";
+import { useIntl } from "react-intl";
 
-import Orders from "../../../icons/Orders";
-import Sales from "../../../icons/Sales";
 import HomeActivityCard from "../HomeActivityCard";
 import HomeAnalyticsCard from "../HomeAnalyticsCard";
 import HomeHeader from "../HomeHeader";
 import HomeNotificationTable from "../HomeNotificationTable/HomeNotificationTable";
 import HomeProductListCard from "../HomeProductListCard";
-
+import { homePageMessages } from "./messages";
-const useStyles = makeStyles(
-  theme => ({
-    cardContainer: {
-      display: "grid",
-      gridColumnGap: theme.spacing(3),
-      gridTemplateColumns: "1fr 1fr",
-      [theme.breakpoints.down("sm")]: {
-        gridColumnGap: theme.spacing(1),
-      },
-      [theme.breakpoints.down("xs")]: {
-        gridTemplateColumns: "1fr",
-      },
-    },
-    icon: {
-      "& path": {
-        fill: theme.palette.primary.main,
-      },
-    },
-  }),
-  { name: "HomePage" },
-);
 
 export interface HomePageProps {
   activities: RelayToFlat<HomeQuery["activities"]>;
@@ -72,8 +49,7 @@ const HomePage: React.FC<HomePageProps> = props => {
     productsOutOfStock = 0,
     noChannel,
   } = props;
-
+  const intl = useIntl();
-  const classes = useStyles(props);
 
   return (
     <DetailPageLayout withSavebar={false}>
@@ -84,17 +60,15 @@ const HomePage: React.FC<HomePageProps> = props => {
           <RequirePermissions
             requiredPermissions={[PermissionEnum.MANAGE_ORDERS]}
           >
-            <div className={classes.cardContainer}>
+            <Box
+              display="grid"
+              __gridTemplateColumns="repeat(2, 1fr)"
+              gap={8}
+              marginBottom={8}
+            >
               <HomeAnalyticsCard
-                title={"Sales"}
+                title={intl.formatMessage(homePageMessages.salesCardTitle)}
                 testId="sales-analytics"
-                icon={
-                  <Sales
-                    className={classes.icon}
-                    fontSize={"inherit"}
-                    viewBox="0 0 64 64"
-                  />
-                }
               >
                 {noChannel ? (
                   0
@@ -105,15 +79,8 @@ const HomePage: React.FC<HomePageProps> = props => {
                 )}
               </HomeAnalyticsCard>
               <HomeAnalyticsCard
-                title={"Orders"}
+                title={intl.formatMessage(homePageMessages.ordersCardTitle)}
                 testId="orders-analytics"
-                icon={
-                  <Orders
-                    className={classes.icon}
-                    fontSize={"inherit"}
-                    viewBox="0 0 64 64"
-                  />
-                }
               >
                 {noChannel ? (
                   0
@@ -123,7 +90,7 @@ const HomePage: React.FC<HomePageProps> = props => {
                   <Skeleton style={{ width: "5em" }} />
                 )}
               </HomeAnalyticsCard>
-            </div>
+            </Box>
           </RequirePermissions>
           <HomeNotificationTable
             createNewChannelHref={createNewChannelHref}

src/home/components/HomePage/messages.ts

@@ -0,0 +1,12 @@
+import { defineMessages } from "react-intl";
+
+export const homePageMessages = defineMessages({
+  salesCardTitle: {
+    defaultMessage: "Sales",
+    id: "c8nvms",
+  },
+  ordersCardTitle: {
+    defaultMessage: "Orders",
+    id: "X7jl6w",
+  },
+});

src/home/components/HomeProductListCard/HomeProductListCard.tsx

@@ -15,6 +15,7 @@ import {
   Typography,
 } from "@material-ui/core";
 import { makeStyles } from "@saleor/macaw-ui";
+import { vars } from "@saleor/macaw-ui/next";
 import clsx from "clsx";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
@@ -46,6 +47,11 @@ const useStyles = makeStyles(
     },
     tableRow: {
       cursor: "pointer",
+      /* Table to be replaced with Box */
+      "& .MuiTableCell-root": {
+        paddingLeft: `${vars.space[8]} !important`,
+        paddingRight: `${vars.space[8]} !important`,
+      },
     },
     cardContent: {
       padding: 0,