Skip to content

Commit fd12d43

Browse files
aslilacaslilac
committed
fix a bunch of icons
1 parent 0d4ad6b commit fd12d43

File tree

18 files changed

+164
-75
lines changed

18 files changed

+164
-75
lines changed

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

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,9 @@ import MuiAvatar, {
44
type AvatarProps as MuiAvatarProps,
55
} from "@mui/material/Avatar";
66
import { type FC, useId } from "react";
7-
import { css, type Interpolation, type Theme } from "@emotion/react";
7+
import { css, type Interpolation, type Theme, useTheme } from "@emotion/react";
88
import { visuallyHidden } from "@mui/utils";
9+
import { getExternalImageStylesFromUrl } from "theme/externalImages";
910

1011
export type AvatarProps = MuiAvatarProps & {
1112
size?: "xs" | "sm" | "md" | "xl";
@@ -67,6 +68,17 @@ export const Avatar: FC<AvatarProps> = ({
6768
);
6869
};
6970

71+
export const ExternalAvatar: FC<AvatarProps> = (props) => {
72+
const theme = useTheme();
73+
74+
return (
75+
<Avatar
76+
css={getExternalImageStylesFromUrl(theme.externalImages, props.src)}
77+
{...props}
78+
/>
79+
);
80+
};
81+
7082
type AvatarIconProps = {
7183
src: string;
7284
alt: string;

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { type ReactNode } from "react";
1+
import { type FC, type ReactNode } from "react";
22
import { Avatar } from "components/Avatar/Avatar";
33
import { type CSSObject, useTheme } from "@emotion/react";
44

@@ -12,14 +12,14 @@ type AvatarCardProps = {
1212
maxWidth?: number | "none";
1313
};
1414

15-
export function AvatarCard({
15+
export const AvatarCard: FC<AvatarCardProps> = ({
1616
header,
1717
imgUrl,
1818
altText,
1919
background,
2020
subtitle,
2121
maxWidth = "none",
22-
}: AvatarCardProps) {
22+
}) => {
2323
const theme = useTheme();
2424

2525
return (
@@ -77,4 +77,4 @@ export function AvatarCard({
7777
</Avatar>
7878
</div>
7979
);
80-
}
80+
};

‎site/src/components/ExternalIcon/ExternalIcon.tsx

Lines changed: 0 additions & 36 deletions
This file was deleted.

‎site/src/components/ExternalImage/ExternalImage.tsx

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import { useTheme } from "@emotion/react";
2+
import { type ImgHTMLAttributes, forwardRef } from "react";
3+
import { getExternalImageStylesFromUrl } from "theme/externalImages";
4+
5+
export const ExternalImage = forwardRef<
6+
HTMLImageElement,
7+
ImgHTMLAttributes<HTMLImageElement>
8+
>((attrs, ref) => {
9+
const theme = useTheme();
10+
11+
return (
12+
<img
13+
ref={ref}
14+
alt=""
15+
css={getExternalImageStylesFromUrl(theme.externalImages, attrs.src)}
16+
{...attrs}
17+
/>
18+
);
19+
});

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

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -2,17 +2,17 @@ import { css } from "@emotion/css";
22
import Button, { ButtonProps } from "@mui/material/Button";
33
import IconButton, { IconButtonProps } from "@mui/material/IconButton";
44
import { useTheme } from "@mui/material/styles";
5-
import { Avatar, AvatarProps } from "components/Avatar/Avatar";
5+
import { AvatarProps, ExternalAvatar } from "components/Avatar/Avatar";
66
import {
7-
ForwardedRef,
8-
HTMLAttributes,
9-
PropsWithChildren,
10-
ReactElement,
7+
type FC,
8+
type ForwardedRef,
9+
type HTMLAttributes,
10+
type ReactElement,
1111
cloneElement,
1212
forwardRef,
1313
} from "react";
1414

15-
export const Topbar = (props: HTMLAttributes<HTMLDivElement>) => {
15+
export const Topbar: FC<HTMLAttributes<HTMLElement>> = (props) => {
1616
const theme = useTheme();
1717

1818
return (
@@ -70,7 +70,7 @@ export const TopbarButton = forwardRef<HTMLButtonElement, ButtonProps>(
7070
},
7171
);
7272

73-
export const TopbarData = (props: HTMLAttributes<HTMLDivElement>) => {
73+
export const TopbarData: FC<HTMLAttributes<HTMLDivElement>> = (props) => {
7474
return (
7575
<div
7676
{...props}
@@ -84,7 +84,7 @@ export const TopbarData = (props: HTMLAttributes<HTMLDivElement>) => {
8484
);
8585
};
8686

87-
export const TopbarDivider = (props: HTMLAttributes<HTMLSpanElement>) => {
87+
export const TopbarDivider: FC<HTMLAttributes<HTMLSpanElement>> = (props) => {
8888
const theme = useTheme();
8989
return (
9090
<span {...props} css={{ color: theme.palette.divider }}>
@@ -93,9 +93,9 @@ export const TopbarDivider = (props: HTMLAttributes<HTMLSpanElement>) => {
9393
);
9494
};
9595

96-
export const TopbarAvatar = (props: AvatarProps) => {
96+
export const TopbarAvatar: FC<AvatarProps> = (props) => {
9797
return (
98-
<Avatar
98+
<ExternalAvatar
9999
{...props}
100100
variant="square"
101101
fitImage
@@ -104,7 +104,7 @@ export const TopbarAvatar = (props: AvatarProps) => {
104104
);
105105
};
106106

107-
type TopbarIconProps = PropsWithChildren<HTMLAttributes<HTMLOrSVGElement>>;
107+
type TopbarIconProps = HTMLAttributes<HTMLOrSVGElement>;
108108

109109
export const TopbarIcon = forwardRef<HTMLOrSVGElement, TopbarIconProps>(
110110
(props: TopbarIconProps, ref) => {

‎site/src/components/GroupAvatar/GroupAvatar.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ export const GroupAvatar: FC<GroupAvatarProps> = ({ name, avatarURL }) => {
1919
badgeContent={<Group />}
2020
classes={{ badge }}
2121
>
22-
<Avatar src={avatarURL} background>
22+
<Avatar background src={avatarURL}>
2323
{name}
2424
</Avatar>
2525
</Badge>

‎site/src/components/IconField/IconField.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import {
1212
PopoverContent,
1313
PopoverTrigger,
1414
} from "components/Popover/Popover";
15+
import { ExternalImage } from "components/ExternalImage/ExternalImage";
1516

1617
// See: https://github.com/missive/emoji-mart/issues/51#issuecomment-287353222
1718
const urlFromUnifiedCode = (unified: string) =>
@@ -60,7 +61,7 @@ export const IconField: FC<IconFieldProps> = ({
6061
},
6162
}}
6263
>
63-
<img
64+
<ExternalImage
6465
alt=""
6566
src={textFieldProps.value}
6667
// This prevent browser to display the ugly error icon if the

‎site/src/components/Resources/ResourceAvatar.tsx

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
1-
import { type FC } from "react";
1+
import { type FC, useId } from "react";
2+
import { visuallyHidden } from "@mui/utils";
23
import type { WorkspaceResource } from "api/typesGenerated";
34
import { Avatar, AvatarIcon } from "components/Avatar/Avatar";
5+
import { ExternalImage } from "components/ExternalImage/ExternalImage";
46

57
const FALLBACK_ICON = "/icon/widgets.svg";
68

@@ -27,10 +29,18 @@ export type ResourceAvatarProps = { resource: WorkspaceResource };
2729

2830
export const ResourceAvatar: FC<ResourceAvatarProps> = ({ resource }) => {
2931
const avatarSrc = resource.icon || getIconPathResource(resource.type);
32+
const altId = useId();
3033

3134
return (
3235
<Avatar background>
33-
<AvatarIcon src={avatarSrc} alt={resource.name} />
36+
<ExternalImage
37+
src={avatarSrc}
38+
css={{ maxWidth: "50%" }}
39+
aria-labelledby={altId}
40+
/>
41+
<div id={altId} css={{ ...visuallyHidden }}>
42+
{resource.name}
43+
</div>
3444
</Avatar>
3545
);
3646
};

‎site/src/components/TemplateExampleCard/TemplateExampleCard.stories.tsx

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
import type { Meta, StoryObj } from "@storybook/react";
2+
import { chromatic } from "testHelpers/chromatic";
3+
import {
4+
MockTemplateExample,
5+
MockTemplateExample2,
6+
} from "testHelpers/entities";
7+
import { TemplateExampleCard } from "./TemplateExampleCard";
8+
9+
const meta: Meta<typeof TemplateExampleCard> = {
10+
title: "components/TemplateExampleCard",
11+
parameters: { chromatic },
12+
component: TemplateExampleCard,
13+
args: {
14+
example: MockTemplateExample,
15+
},
16+
};
17+
18+
export default meta;
19+
type Story = StoryObj<typeof TemplateExampleCard>;
20+
21+
export const Example: Story = {};
22+
23+
export const ByTag: Story = {
24+
args: {
25+
activeTag: "cloud",
26+
},
27+
};
28+
29+
export const LotsOfTags: Story = {
30+
args: {
31+
example: {
32+
...MockTemplateExample2,
33+
tags: ["omg", "so many tags", "look at all these", "so cool"],
34+
},
35+
},
36+
};

‎site/src/components/TemplateExampleCard/TemplateExampleCard.tsx

Lines changed: 21 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,22 @@
1+
import { type Interpolation, type Theme } from "@emotion/react";
12
import Button from "@mui/material/Button";
23
import Link from "@mui/material/Link";
34
import type { TemplateExample } from "api/typesGenerated";
5+
import { ExternalImage } from "components/ExternalImage/ExternalImage";
46
import { Pill } from "components/Pill/Pill";
5-
import { HTMLProps } from "react";
7+
import { type FC, type HTMLAttributes } from "react";
68
import { Link as RouterLink } from "react-router-dom";
79

8-
type TemplateExampleCardProps = {
10+
type TemplateExampleCardProps = HTMLAttributes<HTMLDivElement> & {
911
example: TemplateExample;
1012
activeTag?: string;
11-
} & HTMLProps<HTMLDivElement>;
13+
};
1214

13-
export const TemplateExampleCard = (props: TemplateExampleCardProps) => {
14-
const { example, activeTag, ...divProps } = props;
15+
export const TemplateExampleCard: FC<TemplateExampleCardProps> = ({
16+
example,
17+
activeTag,
18+
...divProps
19+
}) => {
1520
return (
1621
<div
1722
css={(theme) => ({
@@ -43,14 +48,20 @@ export const TemplateExampleCard = (props: TemplateExampleCardProps) => {
4348
height: 32,
4449
}}
4550
>
46-
<img
51+
<ExternalImage
4752
src={example.icon}
48-
alt=""
4953
css={{ width: "100%", height: "100%", objectFit: "contain" }}
5054
/>
5155
</div>
5256

53-
<div css={{ display: "flex", flexWrap: "wrap", gap: 8 }}>
57+
<div
58+
css={{
59+
display: "flex",
60+
flexWrap: "wrap",
61+
gap: 8,
62+
justifyContent: "end",
63+
}}
64+
>
5465
{example.tags.map((tag) => {
5566
const isActive = activeTag === tag;
5667

@@ -122,3 +133,5 @@ export const TemplateExampleCard = (props: TemplateExampleCardProps) => {
122133
</div>
123134
);
124135
};
136+
137+
const styles = {} satisfies Record<string, Interpolation<Theme>>;

‎site/src/pages/StarterTemplatePage/StarterTemplatePageView.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ import { Stack } from "components/Stack/Stack";
1515
import { Link } from "react-router-dom";
1616
import { ErrorAlert } from "components/Alert/ErrorAlert";
1717
import type { TemplateExample } from "api/typesGenerated";
18+
import { ExternalImage } from "components/ExternalImage/ExternalImage";
1819

1920
export interface StarterTemplatePageViewProps {
2021
starterTemplate?: TemplateExample;
@@ -78,7 +79,7 @@ export const StarterTemplatePageView: FC<StarterTemplatePageViewProps> = ({
7879
},
7980
}}
8081
>
81-
<img src={starterTemplate.icon} alt="" />
82+
<ExternalImage src={starterTemplate.icon} />
8283
</div>
8384
<div>
8485
<PageHeaderTitle>{starterTemplate.name}</PageHeaderTitle>

‎site/src/pages/TemplateSettingsPage/Sidebar.tsx

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import {
1010
SidebarHeader,
1111
SidebarNavItem,
1212
} from "components/Sidebar/Sidebar";
13+
import { ExternalImage } from "components/ExternalImage/ExternalImage";
1314

1415
interface SidebarProps {
1516
template: Template;
@@ -19,7 +20,11 @@ export const Sidebar: FC<SidebarProps> = ({ template }) => {
1920
return (
2021
<BaseSidebar>
2122
<SidebarHeader
22-
avatar={<Avatar src={template.icon} variant="square" fitImage />}
23+
avatar={
24+
<Avatar variant="square" fitImage>
25+
<ExternalImage src={template.icon} css={{ width: "100%" }} />
26+
</Avatar>
27+
}
2328
title={template.display_name || template.name}
2429
linkTo={`/templates/${template.name}`}
2530
subtitle={template.name}

‎site/src/pages/TemplatesPage/TemplatesPageView.tsx

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -39,12 +39,13 @@ import { EmptyTemplates } from "./EmptyTemplates";
3939
import { useClickableTableRow } from "hooks/useClickableTableRow";
4040
import type { Template, TemplateExample } from "api/typesGenerated";
4141
import ArrowForwardOutlined from "@mui/icons-material/ArrowForwardOutlined";
42-
import { Avatar } from "components/Avatar/Avatar";
42+
import { ExternalAvatar } from "components/Avatar/Avatar";
4343
import { ErrorAlert } from "components/Alert/ErrorAlert";
4444
import { docs } from "utils/docs";
4545
import Skeleton from "@mui/material/Skeleton";
4646
import { AvatarDataSkeleton } from "components/AvatarData/AvatarDataSkeleton";
4747
import { DeprecatedBadge } from "components/Badges/Badges";
48+
import { ExternalImage } from "components/ExternalImage/ExternalImage";
4849

4950
export const Language = {
5051
developerCount: (activeCount: number): string => {
@@ -108,7 +109,11 @@ const TemplateRow: FC<TemplateRowProps> = ({ template }) => {
108109
}
109110
subtitle={template.description}
110111
avatar={
111-
hasIcon && <Avatar src={template.icon} variant="square" fitImage />
112+
hasIcon && (
113+
<ExternalAvatar variant="square" fitImage>
114+
<ExternalImage src={template.icon} css={{ maxWidth: "100%" }} />
115+
</ExternalAvatar>
116+
)
112117
}
113118
/>
114119
</TableCell>

0 commit comments

Comments
 (0)