Skip to content

Commit 510bc37

Browse files
BrunoQuaresmaBrunoQuaresma
authored
refactor: update avatar sizes in groups, users and members (#17230)
We updated the template and workspace avatars to be "lg" so to keep it consistent we have to do the same for the other avatars too.
1 parent 3bfafe3 commit 510bc37

File tree

10 files changed

+110
-80
lines changed

10 files changed

+110
-80
lines changed

‎site/src/components/Avatar/Avatar.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -22,9 +22,9 @@ const avatarVariants = cva(
2222
{
2323
variants: {
2424
size: {
25-
lg: "h-[--avatar-lg] w-[--avatar-lg] rounded-[6px] text-sm font-medium",
26-
md: "h-[--avatar-default] w-[--avatar-default] text-2xs",
27-
sm: "h-[--avatar-sm] w-[--avatar-sm] text-[8px]",
25+
lg: "size-[--avatar-lg] rounded-[6px] text-sm font-medium",
26+
md: "size-[--avatar-default] text-2xs",
27+
sm: "size-[--avatar-sm] text-[8px]",
2828
},
2929
variant: {
3030
default: null,

‎site/src/components/Avatar/AvatarData.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,4 @@
1-
import { useTheme } from "@emotion/react";
21
import { Avatar } from "components/Avatar/Avatar";
3-
import { Stack } from "components/Stack/Stack";
42
import type { FC, ReactNode } from "react";
53

64
export interface AvatarDataProps {
@@ -26,10 +24,10 @@ export const AvatarData: FC<AvatarDataProps> = ({
2624
imgFallbackText,
2725
avatar,
2826
}) => {
29-
const theme = useTheme();
3027
if (!avatar) {
3128
avatar = (
3229
<Avatar
30+
size="lg"
3331
src={src}
3432
fallback={(typeof title === "string" ? title : imgFallbackText) || "-"}
3533
/>
@@ -41,7 +39,9 @@ export const AvatarData: FC<AvatarDataProps> = ({
4139
{avatar}
4240

4341
<div className="flex flex-col w-full">
44-
<span className="text-sm font-semibold">{title}</span>
42+
<span className="text-sm font-semibold text-content-primary">
43+
{title}
44+
</span>
4545
{subtitle && (
4646
<span className="text-content-secondary text-xs font-medium">
4747
{subtitle}

‎site/src/components/Avatar/AvatarDataSkeleton.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import type { FC } from "react";
55
export const AvatarDataSkeleton: FC = () => {
66
return (
77
<div className="flex items-center gap-3 w-full">
8-
<Skeleton variant="rectangular" className="size-10 rounded-sm" />
8+
<Skeleton variant="rectangular" className="size-10 rounded-sm shrink-0" />
99

1010
<div className="flex flex-col w-full">
1111
<Skeleton variant="text" width={100} />

‎site/src/components/LastSeen/LastSeen.tsx

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { useTheme } from "@emotion/react";
22
import dayjs from "dayjs";
33
import relativeTime from "dayjs/plugin/relativeTime";
44
import type { FC, HTMLAttributes } from "react";
5+
import { cn } from "utils/cn";
56

67
dayjs.extend(relativeTime);
78

@@ -11,7 +12,7 @@ interface LastSeenProps
1112
"data-chromatic"?: string; // prevents a type error in the stories
1213
}
1314

14-
export const LastSeen: FC<LastSeenProps> = ({ at, ...attrs }) => {
15+
export const LastSeen: FC<LastSeenProps> = ({ at, className, ...attrs }) => {
1516
const theme = useTheme();
1617
const t = dayjs(at);
1718
const now = dayjs();
@@ -35,7 +36,12 @@ export const LastSeen: FC<LastSeenProps> = ({ at, ...attrs }) => {
3536
}
3637

3738
return (
38-
<span data-chromatic="ignore" css={{ color }} {...attrs}>
39+
<span
40+
data-chromatic="ignore"
41+
css={{ color }}
42+
{...attrs}
43+
className={cn(["whitespace-nowrap", className])}
44+
>
3945
{message}
4046
</span>
4147
);

‎site/src/components/Table/Table.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -82,7 +82,7 @@ export const TableHead = React.forwardRef<
8282
<th
8383
ref={ref}
8484
className={cn(
85-
"py-2 px-4 text-left align-middle font-semibold",
85+
"p-3 text-left align-middle font-semibold",
8686
"[&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
8787
className,
8888
)}
@@ -98,7 +98,7 @@ export const TableCell = React.forwardRef<
9898
ref={ref}
9999
className={cn(
100100
"border-0 border-t border-border border-solid",
101-
"py-2 px-4 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
101+
"p-3 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
102102
className,
103103
)}
104104
{...props}

‎site/src/pages/GroupsPage/GroupPage.tsx

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -310,7 +310,13 @@ const GroupMemberRow: FC<GroupMemberRowProps> = ({
310310
<TableRow key={member.id}>
311311
<TableCell width="59%">
312312
<AvatarData
313-
avatar={<Avatar fallback={member.username} src={member.avatar_url} />}
313+
avatar={
314+
<Avatar
315+
size="lg"
316+
fallback={member.username}
317+
src={member.avatar_url}
318+
/>
319+
}
314320
title={member.username}
315321
subtitle={member.email}
316322
/>

‎site/src/pages/GroupsPage/GroupsPageView.tsx

Lines changed: 23 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
import type { Interpolation, Theme } from "@emotion/react";
22
import AddOutlined from "@mui/icons-material/AddOutlined";
33
import KeyboardArrowRight from "@mui/icons-material/KeyboardArrowRight";
4-
import AvatarGroup from "@mui/material/AvatarGroup";
54
import Skeleton from "@mui/material/Skeleton";
65
import type { Group } from "api/typesGenerated";
76
import { Avatar } from "components/Avatar/Avatar";
87
import { AvatarData } from "components/Avatar/AvatarData";
98
import { AvatarDataSkeleton } from "components/Avatar/AvatarDataSkeleton";
9+
import { Badge } from "components/Badge/Badge";
1010
import { Button } from "components/Button/Button";
1111
import { ChooseOne, Cond } from "components/Conditionals/ChooseOne";
1212
import { EmptyState } from "components/EmptyState/EmptyState";
@@ -115,13 +115,17 @@ const GroupRow: FC<GroupRowProps> = ({ group }) => {
115115
const rowProps = useClickableTableRow({
116116
onClick: () => navigate(group.name),
117117
});
118+
const memberAvatars = group.members.slice(0, 5);
119+
const remainingAvatars = group.members.length - memberAvatars.length;
118120

119121
return (
120122
<TableRow data-testid={`group-${group.id}`} {...rowProps}>
121123
<TableCell>
122124
<AvatarData
123125
avatar={
124126
<Avatar
127+
size="lg"
128+
variant="icon"
125129
fallback={group.display_name || group.name}
126130
src={group.avatar_url}
127131
/>
@@ -132,20 +136,24 @@ const GroupRow: FC<GroupRowProps> = ({ group }) => {
132136
</TableCell>
133137

134138
<TableCell>
135-
{group.members.length === 0 && "-"}
136-
<AvatarGroup
137-
max={10}
138-
total={group.members.length}
139-
css={{ justifyContent: "flex-end", gap: 8 }}
140-
>
141-
{group.members.map((member) => (
142-
<Avatar
143-
key={member.username}
144-
fallback={member.username}
145-
src={member.avatar_url}
146-
/>
147-
))}
148-
</AvatarGroup>
139+
{group.members.length > 0 ? (
140+
<div className="flex items-center gap-2">
141+
{memberAvatars.map((member) => (
142+
<Avatar
143+
key={member.username}
144+
fallback={member.username}
145+
src={member.avatar_url}
146+
/>
147+
))}
148+
{remainingAvatars > 0 && (
149+
<Badge className="h-[--avatar-default]">
150+
+{remainingAvatars}
151+
</Badge>
152+
)}
153+
</div>
154+
) : (
155+
"-"
156+
)}
149157
</TableCell>
150158

151159
<TableCell>

‎site/src/pages/OrganizationSettingsPage/OrganizationMembersPageView.tsx

Lines changed: 60 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import { ErrorAlert } from "components/Alert/ErrorAlert";
1111
import { Avatar } from "components/Avatar/Avatar";
1212
import { AvatarData } from "components/Avatar/AvatarData";
1313
import { displayError, displaySuccess } from "components/GlobalSnackbar/utils";
14+
import { Loader } from "components/Loader/Loader";
1415
import {
1516
MoreMenu,
1617
MoreMenuContent,
@@ -32,6 +33,7 @@ import {
3233
TableHeader,
3334
TableRow,
3435
} from "components/Table/Table";
36+
import { TableLoader } from "components/TableLoader/TableLoader";
3537
import { UserAutocomplete } from "components/UserAutocomplete/UserAutocomplete";
3638
import type { PaginationResultInfo } from "hooks/usePaginatedQuery";
3739
import { TriangleAlert } from "lucide-react";
@@ -125,58 +127,67 @@ export const OrganizationMembersPageView: FC<
125127
</TableRow>
126128
</TableHeader>
127129
<TableBody>
128-
{members?.map((member) => (
129-
<TableRow key={member.user_id} className="align-baseline">
130-
<TableCell>
131-
<AvatarData
132-
avatar={
133-
<Avatar
134-
fallback={member.username}
135-
src={member.avatar_url}
136-
/>
137-
}
138-
title={member.name || member.username}
139-
subtitle={member.email}
130+
{members ? (
131+
members.map((member) => (
132+
<TableRow key={member.user_id} className="align-baseline">
133+
<TableCell>
134+
<AvatarData
135+
avatar={
136+
<Avatar
137+
fallback={member.username}
138+
src={member.avatar_url}
139+
size="lg"
140+
/>
141+
}
142+
title={member.name || member.username}
143+
subtitle={member.email}
144+
/>
145+
</TableCell>
146+
<UserRoleCell
147+
inheritedRoles={member.global_roles}
148+
roles={member.roles}
149+
allAvailableRoles={allAvailableRoles}
150+
oidcRoleSyncEnabled={false}
151+
isLoading={isUpdatingMemberRoles}
152+
canEditUsers={canEditMembers}
153+
onEditRoles={async (roles) => {
154+
try {
155+
await updateMemberRoles(member, roles);
156+
displaySuccess("Roles updated successfully.");
157+
} catch (error) {
158+
displayError(
159+
getErrorMessage(error, "Failed to update roles."),
160+
);
161+
}
162+
}}
140163
/>
141-
</TableCell>
142-
<UserRoleCell
143-
inheritedRoles={member.global_roles}
144-
roles={member.roles}
145-
allAvailableRoles={allAvailableRoles}
146-
oidcRoleSyncEnabled={false}
147-
isLoading={isUpdatingMemberRoles}
148-
canEditUsers={canEditMembers}
149-
onEditRoles={async (roles) => {
150-
try {
151-
await updateMemberRoles(member, roles);
152-
displaySuccess("Roles updated successfully.");
153-
} catch (error) {
154-
displayError(
155-
getErrorMessage(error, "Failed to update roles."),
156-
);
157-
}
158-
}}
159-
/>
160-
<UserGroupsCell userGroups={member.groups} />
161-
<TableCell>
162-
{member.user_id !== me.id && canEditMembers && (
163-
<MoreMenu>
164-
<MoreMenuTrigger>
165-
<ThreeDotsButton />
166-
</MoreMenuTrigger>
167-
<MoreMenuContent>
168-
<MoreMenuItem
169-
danger
170-
onClick={() => removeMember(member)}
171-
>
172-
Remove
173-
</MoreMenuItem>
174-
</MoreMenuContent>
175-
</MoreMenu>
176-
)}
164+
<UserGroupsCell userGroups={member.groups} />
165+
<TableCell>
166+
{member.user_id !== me.id && canEditMembers && (
167+
<MoreMenu>
168+
<MoreMenuTrigger>
169+
<ThreeDotsButton />
170+
</MoreMenuTrigger>
171+
<MoreMenuContent>
172+
<MoreMenuItem
173+
danger
174+
onClick={() => removeMember(member)}
175+
>
176+
Remove
177+
</MoreMenuItem>
178+
</MoreMenuContent>
179+
</MoreMenu>
180+
)}
181+
</TableCell>
182+
</TableRow>
183+
))
184+
) : (
185+
<TableRow>
186+
<TableCell colSpan={999}>
187+
<Loader />
177188
</TableCell>
178189
</TableRow>
179-
))}
190+
)}
180191
</TableBody>
181192
</Table>
182193
</PaginationContainer>

‎site/src/pages/TemplateSettingsPage/TemplatePermissionsPage/TemplatePermissionsPageView.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -258,6 +258,7 @@ export const TemplatePermissionsPageView: FC<
258258
<AvatarData
259259
avatar={
260260
<Avatar
261+
size="lg"
261262
fallback={group.display_name || group.name}
262263
src={group.avatar_url}
263264
/>

‎site/src/pages/UsersPage/UsersTable/UsersTableBody.tsx

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -87,9 +87,7 @@ export const UsersTableBody: FC<UsersTableBodyProps> = ({
8787
<TableLoaderSkeleton>
8888
<TableRowSkeleton>
8989
<TableCell>
90-
<div css={{ display: "flex", alignItems: "center", gap: 8 }}>
91-
<AvatarDataSkeleton />
92-
</div>
90+
<AvatarDataSkeleton />
9391
</TableCell>
9492

9593
<TableCell>

0 commit comments

Comments
 (0)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy