Skip to content

Commit 9fdb4fd

Browse files
BrunoQuaresmaBrunoQuaresma
committed
Adjust components for the new Avatar
1 parent 7304999 commit 9fdb4fd

File tree

25 files changed

+127
-180
lines changed

25 files changed

+127
-180
lines changed

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -34,17 +34,17 @@ const avatarVariants = cva(
3434
{
3535
size: "lg",
3636
variant: "icon",
37-
className: "p-[9px]",
37+
className: "p-2",
3838
},
3939
{
4040
size: "default",
4141
variant: "icon",
42-
className: "p-[3px]",
42+
className: "p-1",
4343
},
4444
{
4545
size: "sm",
4646
variant: "icon",
47-
className: "p-[2px]",
47+
className: "p-[3px]",
4848
},
4949
],
5050
},

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -75,7 +75,7 @@ export const AvatarCard: FC<AvatarCardProps> = ({
7575
)}
7676
</div>
7777

78-
<Avatar>
78+
<Avatar size="lg">
7979
<AvatarImage src={imgUrl} alt={altText} />
8080
<AvatarFallback>{avatarLetter(header)}</AvatarFallback>
8181
</Avatar>

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

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -47,9 +47,8 @@ export const AvatarData: FC<AvatarDataProps> = ({
4747

4848
return (
4949
<Stack
50-
spacing={1.5}
50+
spacing={1}
5151
direction="row"
52-
alignItems="center"
5352
css={{
5453
minHeight: 40, // Make it predictable for the skeleton
5554
width: "100%",

‎site/src/components/FullPageLayout/Topbar.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -95,7 +95,7 @@ export const TopbarDivider: FC<HTMLAttributes<HTMLSpanElement>> = (props) => {
9595

9696
export const TopbarAvatar: FC<{ src: string }> = ({ src }) => {
9797
return (
98-
<Avatar variant="icon">
98+
<Avatar variant="icon" size="sm">
9999
<AvatarImage src={src} />
100100
</Avatar>
101101
);

‎site/src/components/Sidebar/Sidebar.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ export const SidebarHeader: FC<SidebarHeaderProps> = ({
2727
linkTo,
2828
}) => {
2929
return (
30-
<Stack direction="row" alignItems="center" css={styles.info}>
30+
<Stack direction="row" spacing={1} css={styles.info}>
3131
{avatar}
3232
<div
3333
css={{

‎site/src/modules/builds/BuildAvatar/BuildAvatar.tsx

Lines changed: 9 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -15,38 +15,18 @@ export interface BuildAvatarProps {
1515

1616
export const BuildAvatar: FC<BuildAvatarProps> = ({ build, size }) => {
1717
const theme = useTheme();
18-
const { status, type } = getDisplayWorkspaceBuildStatus(theme, build);
19-
const badgeType = useClassName(
20-
(css, theme) => css({ backgroundColor: theme.roles[type].fill.solid }),
18+
const { type } = getDisplayWorkspaceBuildStatus(theme, build);
19+
const iconColor = useClassName(
20+
(css, theme) => css({ color: theme.roles[type].fill.solid }),
2121
[type],
2222
);
2323

2424
return (
25-
<Badge
26-
role="status"
27-
aria-label={status}
28-
title={status}
29-
overlap="circular"
30-
anchorOrigin={{ vertical: "bottom", horizontal: "right" }}
31-
badgeContent={<div></div>}
32-
classes={{ badge: cx(classNames.badge, badgeType) }}
33-
>
34-
<Avatar size={size}>
35-
<BuildIcon transition={build.transition} className="w-full h-full" />
36-
</Avatar>
37-
</Badge>
25+
<Avatar size={size} variant="icon">
26+
<BuildIcon
27+
transition={build.transition}
28+
className={`w-full h-full ${iconColor}`}
29+
/>
30+
</Avatar>
3831
);
3932
};
40-
41-
const classNames = {
42-
badge: css({
43-
borderRadius: "100%",
44-
width: 8,
45-
minWidth: 8,
46-
height: 8,
47-
display: "block",
48-
padding: 0,
49-
right: 0,
50-
bottom: 0,
51-
}),
52-
};

‎site/src/modules/dashboard/Navbar/UserDropdown/UserDropdown.tsx

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,6 @@ export const UserDropdown: FC<UserDropdownProps> = ({
3535
<div css={styles.badgeContainer}>
3636
<Badge overlap="circular">
3737
<UserAvatar
38-
size="sm"
3938
username={user.username}
4039
avatarURL={user.avatar_url}
4140
/>

‎site/src/modules/groups/GroupAvatar/GroupAvatar.tsx

Lines changed: 4 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,9 @@
1-
import Group from "@mui/icons-material/Group";
2-
import Badge from "@mui/material/Badge";
31
import {
42
Avatar,
53
AvatarFallback,
64
AvatarImage,
75
avatarLetter,
86
} from "components/Avatar/Avatar";
9-
import { type ClassName, useClassName } from "hooks/useClassName";
107
import type { FC } from "react";
118

129
export interface GroupAvatarProps {
@@ -15,38 +12,10 @@ export interface GroupAvatarProps {
1512
}
1613

1714
export const GroupAvatar: FC<GroupAvatarProps> = ({ name, avatarURL }) => {
18-
const badge = useClassName(classNames.badge, []);
19-
2015
return (
21-
<Badge
22-
overlap="circular"
23-
anchorOrigin={{ vertical: "bottom", horizontal: "right" }}
24-
badgeContent={<Group />}
25-
classes={{ badge }}
26-
>
27-
<Avatar size="lg">
28-
<AvatarImage src={avatarURL} />
29-
<AvatarFallback>{avatarLetter(name)}</AvatarFallback>
30-
</Avatar>
31-
</Badge>
16+
<Avatar>
17+
<AvatarImage src={avatarURL} />
18+
<AvatarFallback>{avatarLetter(name)}</AvatarFallback>
19+
</Avatar>
3220
);
3321
};
34-
35-
const classNames = {
36-
badge: (css, theme) =>
37-
css({
38-
backgroundColor: theme.palette.background.paper,
39-
border: `1px solid ${theme.palette.divider}`,
40-
borderRadius: "100%",
41-
width: 24,
42-
height: 24,
43-
display: "flex",
44-
alignItems: "center",
45-
justifyContent: "center",
46-
47-
"& svg": {
48-
width: 14,
49-
height: 14,
50-
},
51-
}),
52-
} satisfies Record<string, ClassName>;

‎site/src/modules/management/SidebarView.tsx

Lines changed: 12 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,12 @@ import type { Interpolation, Theme } from "@emotion/react";
33
import AddIcon from "@mui/icons-material/Add";
44
import SettingsIcon from "@mui/icons-material/Settings";
55
import type { AuthorizationResponse, Organization } from "api/typesGenerated";
6+
import {
7+
Avatar,
8+
AvatarFallback,
9+
AvatarImage,
10+
avatarLetter,
11+
} from "components/Avatar/Avatar";
612
import { FeatureStageBadge } from "components/FeatureStageBadge/FeatureStageBadge";
713
import { Loader } from "components/Loader/Loader";
814
import { Sidebar as BaseSidebar } from "components/Sidebar/Sidebar";
@@ -259,12 +265,12 @@ const OrganizationSettingsNavigation: FC<
259265
active={active}
260266
href={urlForSubpage(organization.name)}
261267
icon={
262-
<UserAvatar
263-
key={organization.id}
264-
size="sm"
265-
username={organization.display_name}
266-
avatarURL={organization.icon}
267-
/>
268+
<Avatar variant="icon">
269+
<AvatarImage src={organization.icon} />
270+
<AvatarFallback>
271+
{avatarLetter(organization.display_name)}
272+
</AvatarFallback>
273+
</Avatar>
268274
}
269275
>
270276
{organization.display_name}

‎site/src/modules/resources/AgentRowPreview.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -158,12 +158,12 @@ const styles = {
158158
backgroundColor: theme.palette.divider,
159159
position: "absolute",
160160
top: 0,
161-
left: 49,
161+
left: 43,
162162
},
163163
}),
164164

165165
agentStatusWrapper: {
166-
width: 36,
166+
width: 24,
167167
display: "flex",
168168
justifyContent: "center",
169169
flexShrink: 0,

‎site/src/modules/resources/ResourceCard.tsx

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -99,11 +99,7 @@ export const ResourceCard: FC<ResourceCardProps> = ({ resource, agentRow }) => {
9999
css={styles.resourceCardHeader}
100100
spacing={10}
101101
>
102-
<Stack
103-
direction="row"
104-
alignItems="center"
105-
css={styles.resourceCardProfile}
106-
>
102+
<Stack direction="row" spacing={1} css={styles.resourceCardProfile}>
107103
<div>
108104
<ResourceAvatar resource={resource} />
109105
</div>

‎site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -152,7 +152,7 @@ export const CreateWorkspacePageView: FC<CreateWorkspacePageViewProps> = ({
152152
return (
153153
<Margins size="medium">
154154
<PageHeader actions={<Button onClick={onCancel}>Cancel</Button>}>
155-
<Stack direction="row" spacing={3} alignItems="center">
155+
<Stack direction="row">
156156
<Avatar variant="icon" size="lg">
157157
<AvatarImage src={template.icon} />
158158
<AvatarFallback>{avatarLetter(template.name)}</AvatarFallback>

‎site/src/pages/CreateWorkspacePage/SelectedTemplate.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ export interface SelectedTemplateProps {
1515

1616
export const SelectedTemplate: FC<SelectedTemplateProps> = ({ template }) => {
1717
return (
18-
<Stack direction="row" spacing={2} css={styles.template}>
18+
<Stack direction="row" css={styles.template}>
1919
<Avatar variant="icon" size="lg">
2020
<AvatarImage src={template.icon} />
2121
<AvatarFallback>{avatarLetter(template.name)}</AvatarFallback>

‎site/src/pages/DeploymentSettingsPage/OAuth2AppsSettingsPage/OAuth2AppsSettingsPageView.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -102,7 +102,7 @@ const OAuth2AppRow: FC<OAuth2AppRowProps> = ({ app }) => {
102102
title={app.name}
103103
avatar={
104104
Boolean(app.icon) && (
105-
<Avatar variant="icon">
105+
<Avatar variant="icon" size="lg">
106106
<AvatarImage src={app.icon} />
107107
</Avatar>
108108
)

‎site/src/pages/ExternalAuthPage/ExternalAuthPageView.tsx

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -81,7 +81,10 @@ const ExternalAuthPageView: FC<ExternalAuthPageViewProps> = ({
8181
</p>
8282

8383
{externalAuth.installations.length > 0 && (
84-
<div css={styles.authorizedInstalls}>
84+
<div
85+
css={styles.authorizedInstalls}
86+
className="flex gap-2 items-center"
87+
>
8588
{externalAuth.installations.map((install) => {
8689
if (!install.account) {
8790
return;
@@ -93,7 +96,7 @@ const ExternalAuthPageView: FC<ExternalAuthPageViewProps> = ({
9396
target="_blank"
9497
rel="noreferrer"
9598
>
96-
<Avatar size="sm">
99+
<Avatar>
97100
<AvatarImage src={install.account.avatar_url} />
98101
<AvatarFallback>
99102
{avatarLetter(install.account.login)}

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -132,7 +132,7 @@ export const GroupsPageView: FC<GroupsPageViewProps> = ({
132132
<AvatarGroup
133133
max={10}
134134
total={group.members.length}
135-
css={{ justifyContent: "flex-end" }}
135+
css={{ justifyContent: "flex-end", gap: 4 }}
136136
>
137137
{group.members.map((member) => (
138138
<UserAvatar

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -139,7 +139,7 @@ const GroupRow: FC<GroupRowProps> = ({ group }) => {
139139
<AvatarGroup
140140
max={10}
141141
total={group.members.length}
142-
css={{ justifyContent: "flex-end" }}
142+
css={{ justifyContent: "flex-end", gap: 8 }}
143143
>
144144
{group.members.map((member) => (
145145
<UserAvatar

‎site/src/pages/ManagementSettingsPage/OrganizationSummaryPageView.tsx

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
1+
import { AvatarFallback, AvatarImage } from "@radix-ui/react-avatar";
12
import type { Organization } from "api/typesGenerated";
3+
import { Avatar } from "components/Avatar/Avatar";
24
import {
35
PageHeader,
46
PageHeaderSubtitle,
@@ -23,13 +25,13 @@ export const OrganizationSummaryPageView: FC<
2325
paddingTop: 0,
2426
}}
2527
>
26-
<Stack direction="row" spacing={3} alignItems="center">
27-
<UserAvatar
28-
key={organization.id}
29-
size="lg"
30-
username={organization.display_name || organization.name}
31-
avatarURL={organization.icon}
32-
/>
28+
<Stack direction="row">
29+
<Avatar key={organization.id} size="lg" variant="icon">
30+
<AvatarImage src={organization.icon} />
31+
<AvatarFallback>
32+
{organization.display_name || organization.name}
33+
</AvatarFallback>
34+
</Avatar>
3335
<div>
3436
<PageHeaderTitle>
3537
{organization.display_name || organization.name}

‎site/src/pages/TemplatePage/TemplatePageHeader.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -206,7 +206,7 @@ export const TemplatePageHeader: FC<TemplatePageHeaderProps> = ({
206206
</>
207207
}
208208
>
209-
<Stack direction="row" spacing={3} alignItems="center">
209+
<Stack direction="row">
210210
<Avatar size="lg" variant="icon">
211211
<AvatarImage src={template.icon} />
212212
<AvatarFallback>{avatarLetter(template.name)}</AvatarFallback>

0 commit comments

Comments
 (0)