Fix staff avatars (#3314)

src/components/Sidebar/user/Info.tsx

@@ -21,11 +21,11 @@ export const UserInfo = () => {
       justifyContent="space-between"
     >
       <Box display="flex" gap={6} alignItems="center">
-        <Avatar.User
-          initials={getUserInitials(user)}
-          scheme="decorative2"
-          src={user?.avatar?.url}
-        />
+        {user?.avatar?.url ? (
+          <Avatar.User scheme="decorative3" src={user.avatar.url} />
+        ) : (
+          <Avatar.User initials={getUserInitials(user)} scheme="decorative3" />
+        )}
         <Box __width={128} className="ellipsis">
           <Text variant="bodyStrong" size="small">
             {getUserName(user, true)}

src/index.css

@@ -11,6 +11,7 @@ html {
 body {
   color: var(--mu-colors-foreground-text-neutral-plain) !important;
   overscroll-behavior-y: none;
+  -webkit-font-smoothing: subpixel-antialiased;
 }
 
 .hide-scrollbar::-webkit-scrollbar {

src/staff/components/StaffList/StaffList.tsx

@@ -7,7 +7,6 @@ import { StaffListQuery } from "@dashboard/graphql";
 import {
   getUserInitials,
   getUserName,
-  maybe,
   renderCollection,
 } from "@dashboard/misc";
 import {
@@ -21,53 +20,26 @@ import {
   TableCell,
   TableFooter,
   TableHead,
-  Typography,
 } from "@material-ui/core";
 import { makeStyles } from "@saleor/macaw-ui";
+import { Avatar, Box, Text } from "@saleor/macaw-ui/next";
 import clsx from "clsx";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 
 const useStyles = makeStyles(
-  theme => ({
-    avatar: {
-      alignItems: "center",
-      borderRadius: "100%",
-      display: "grid",
-      float: "left",
-      height: 47,
-      justifyContent: "center",
-      marginRight: theme.spacing(1),
-      overflow: "hidden",
-      width: 47,
-    },
-    avatarDefault: {
-      "& div": {
-        color: theme.palette.primary.contrastText,
-        lineHeight: "47px",
-      },
-      background: theme.palette.primary.main,
-      height: 47,
-      textAlign: "center",
-      width: 47,
-    },
-    avatarImage: {
-      pointerEvents: "none",
-      width: "100%",
-    },
+  {
     colEmail: {
       width: 400,
     },
-    statusText: {
-      color: "#9E9D9D",
-    },
+
     tableRow: {
       cursor: "pointer",
     },
     wideColumn: {
       width: "80%",
     },
-  }),
+  },
   { name: "StaffList" },
 );
 
@@ -149,29 +121,28 @@ const StaffList: React.FC<StaffListProps> = props => {
               key={staffMember ? staffMember.id : "skeleton"}
             >
               <TableCell>
-                <div className={classes.avatar} data-test-id="staffAvatar">
-                  {maybe(() => staffMember.avatar.url) ? (
-                    <img
-                      className={classes.avatarImage}
-                      src={maybe(() => staffMember.avatar.url)}
+                <Box display="flex" alignItems="center" gap={5}>
+                  {staffMember?.avatar?.url ? (
+                    <Avatar.User
+                      scheme="decorative3"
+                      src={staffMember.avatar.url}
+                      size="large"
                     />
                   ) : (
-                    <div className={classes.avatarDefault}>
-                      <Typography>{getUserInitials(staffMember)}</Typography>
-                    </div>
+                    <Avatar.User
+                      initials={getUserInitials(staffMember)}
+                      scheme="decorative3"
+                      size="large"
+                    />
                   )}
-                </div>
-                <Typography>
-                  {getUserName(staffMember) || <Skeleton />}
-                </Typography>
-                <Typography
-                  variant={"caption"}
-                  className={classes.statusText}
-                  data-test-id="staffStatusText"
-                >
-                  {maybe<React.ReactNode>(
-                    () =>
-                      staffMember.isActive
+                  <Box display="flex" flexDirection="column">
+                    <Text>{getUserName(staffMember) || <Skeleton />}</Text>
+                    <Text
+                      variant="caption"
+                      data-test-id="staffStatusText"
+                      color="textNeutralSubdued"
+                    >
+                      {staffMember?.isActive
                         ? intl.formatMessage({
                             id: "9Zlogd",
                             defaultMessage: "Active",
@@ -181,13 +152,13 @@ const StaffList: React.FC<StaffListProps> = props => {
                             id: "7WzUxn",
                             defaultMessage: "Inactive",
                             description: "staff member status",
-                          }),
-                    <Skeleton />,
-                  )}
-                </Typography>
+                          })}
+                    </Text>
+                  </Box>
+                </Box>
               </TableCell>
               <TableCell>
-                {maybe<React.ReactNode>(() => staffMember.email, <Skeleton />)}
+                <Text size="small">{staffMember?.email}</Text>
               </TableCell>
             </TableRowLink>
           ),

src/staff/components/StaffProperties/StaffProperties.tsx

@@ -6,16 +6,16 @@ import {
   UserFragment,
 } from "@dashboard/graphql";
 import { commonMessages } from "@dashboard/intl";
+import { getUserInitials } from "@dashboard/misc";
 import { getFormErrors } from "@dashboard/utils/errors";
 import getStaffErrorMessage from "@dashboard/utils/errors/staff";
 import { Card, CardContent, TextField, Typography } from "@material-ui/core";
 import { makeStyles } from "@saleor/macaw-ui";
+import { vars } from "@saleor/macaw-ui/next";
 import React from "react";
 import SVG from "react-inlinesvg";
 import { FormattedMessage, useIntl } from "react-intl";
 
-import { getUserInitials } from "../../../misc";
-
 const useStyles = makeStyles(
   theme => ({
     avatar: {
@@ -44,12 +44,12 @@ const useStyles = makeStyles(
     },
     avatarDefault: {
       "& div": {
-        color: theme.palette.primary.contrastText,
+        color: vars.colors.foreground.textNeutralContrasted,
         fontSize: 35,
-        fontWeight: "bold",
+        fontWeight: 580,
         lineHeight: "120px",
       },
-      background: theme.palette.primary.main,
+      background: vars.colors.background.decorativeSurfacePlain3,
       height: 120,
       textAlign: "center",
       width: 120,