Fix staff avatars (#3314)
This commit is contained in:
Krzysztof Żuraw
GitHub
parent
d33db9f2f5
commit
48fb75423a
4 changed files with 39 additions and 67 deletions
|
|
@ -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)}
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
<Box display="flex" flexDirection="column">
|
||||
<Text>{getUserName(staffMember) || <Skeleton />}</Text>
|
||||
<Text
|
||||
variant="caption"
|
||||
data-test-id="staffStatusText"
|
||||
color="textNeutralSubdued"
|
||||
>
|
||||
{maybe<React.ReactNode>(
|
||||
() =>
|
||||
staffMember.isActive
|
||||
{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>
|
||||
),
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
Loading…
Reference in a new issue