From 1b278c170ac12c2fb84a29630bdf9402919588e0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Krzysztof=20=C5=BBuraw?=
 <9116238+krzysztofzuraw@users.noreply.github.com>
Date: Mon, 22 May 2023 11:12:20 +0200
Subject: [PATCH] Fix font in customer history login data (#3669)

---
 .../CustomerStats/CustomerStats.tsx           | 55 +++++++------------
 1 file changed, 20 insertions(+), 35 deletions(-)

diff --git a/src/customers/components/CustomerStats/CustomerStats.tsx b/src/customers/components/CustomerStats/CustomerStats.tsx
index 0e7c2eec0..9e9855d14 100644
--- a/src/customers/components/CustomerStats/CustomerStats.tsx
+++ b/src/customers/components/CustomerStats/CustomerStats.tsx
@@ -1,69 +1,54 @@
-import CardTitle from "@dashboard/components/CardTitle";
+import { DashboardCard } from "@dashboard/components/Card";
 import { DateTime } from "@dashboard/components/Date";
-import { Hr } from "@dashboard/components/Hr";
 import RequirePermissions from "@dashboard/components/RequirePermissions";
 import Skeleton from "@dashboard/components/Skeleton";
 import { CustomerDetailsQuery, PermissionEnum } from "@dashboard/graphql";
-import { Card, CardContent, Typography } from "@material-ui/core";
-import { makeStyles } from "@saleor/macaw-ui";
+import { Divider, Text } from "@saleor/macaw-ui/next";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 
-const useStyles = makeStyles(
-  theme => ({
-    label: {
-      marginBottom: theme.spacing(1),
-    },
-    value: {
-      fontSize: 24,
-    },
-  }),
-  { name: "CustomerStats" },
-);
-
 export interface CustomerStatsProps {
   customer: CustomerDetailsQuery["user"];
 }
 
 const CustomerStats: React.FC<CustomerStatsProps> = props => {
   const { customer } = props;
-  const classes = useStyles(props);
 
   const intl = useIntl();
 
   return (
-    <Card>
-      <CardTitle
-        title={intl.formatMessage({
+    <DashboardCard>
+      <DashboardCard.Title>
+        {intl.formatMessage({
           id: "e7Nyu7",
           defaultMessage: "Customer History",
           description: "section header",
         })}
-      />
-      <CardContent>
-        <Typography className={classes.label} variant="caption">
+      </DashboardCard.Title>
+      <DashboardCard.Content display="flex" flexDirection="column">
+        <Text variant="caption">
           <FormattedMessage id="FNAZoh" defaultMessage="Last login" />
-        </Typography>
+        </Text>
         {customer ? (
-          <Typography variant="h6" className={classes.value}>
+          <Text>
             {customer.lastLogin === null ? (
               "-"
             ) : (
               <DateTime date={customer.lastLogin} plain />
             )}
-          </Typography>
+          </Text>
         ) : (
           <Skeleton />
         )}
-      </CardContent>
+      </DashboardCard.Content>
       <RequirePermissions requiredPermissions={[PermissionEnum.MANAGE_ORDERS]}>
-        <Hr />
-        <CardContent>
-          <Typography className={classes.label} variant="caption">
+        <Divider />
+        <DashboardCard.Content display="flex" flexDirection="column">
+          <Text variant="caption">
             <FormattedMessage id="HMD+ib" defaultMessage="Last order" />
-          </Typography>
+          </Text>
           {customer && customer.lastPlacedOrder ? (
-            <Typography variant="h6" className={classes.value}>
+            <Text>
               {customer.lastPlacedOrder.edges.length === 0 ? (
                 "-"
               ) : (
@@ -72,13 +57,13 @@ const CustomerStats: React.FC<CustomerStatsProps> = props => {
                   plain
                 />
               )}
-            </Typography>
+            </Text>
           ) : (
             <Skeleton />
           )}
-        </CardContent>
+        </DashboardCard.Content>
       </RequirePermissions>
-    </Card>
+    </DashboardCard>
   );
 };
 CustomerStats.displayName = "CustomerStats";