Skip to content

Commit 9f5a59d

Browse files
authored
feat(site): improve icon compatibility across themes (#11457)
1 parent 427afe1 commit 9f5a59d

File tree

45 files changed

+722
-196
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

45 files changed

+722
-196
lines changed

examples/examples.gen.json

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
"url": "",
66
"name": "AWS EC2 (Devcontainer)",
77
"description": "Provision AWS EC2 VMs with a devcontainer as Coder workspaces",
8-
"icon": "/icon/aws.png",
8+
"icon": "/icon/aws.svg",
99
"tags": [
1010
"vm",
1111
"linux",
@@ -20,7 +20,7 @@
2020
"url": "",
2121
"name": "AWS EC2 (Linux)",
2222
"description": "Provision AWS EC2 VMs as Coder workspaces",
23-
"icon": "/icon/aws.png",
23+
"icon": "/icon/aws.svg",
2424
"tags": [
2525
"vm",
2626
"linux",
@@ -34,7 +34,7 @@
3434
"url": "",
3535
"name": "AWS EC2 (Windows)",
3636
"description": "Provision AWS EC2 VMs as Coder workspaces",
37-
"icon": "/icon/aws.png",
37+
"icon": "/icon/aws.svg",
3838
"tags": [
3939
"vm",
4040
"windows",

examples/templates/aws-devcontainer/README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
---
22
display_name: AWS EC2 (Devcontainer)
33
description: Provision AWS EC2 VMs with a devcontainer as Coder workspaces
4-
icon: ../../../site/static/icon/aws.png
4+
icon: ../../../site/static/icon/aws.svg
55
maintainer_github: coder
66
verified: true
77
tags: [vm, linux, aws, persistent, devcontainer]

examples/templates/aws-linux/README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
---
22
display_name: AWS EC2 (Linux)
33
description: Provision AWS EC2 VMs as Coder workspaces
4-
icon: ../../../site/static/icon/aws.png
4+
icon: ../../../site/static/icon/aws.svg
55
maintainer_github: coder
66
verified: true
77
tags: [vm, linux, aws, persistent-vm]

examples/templates/aws-windows/README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
---
22
display_name: AWS EC2 (Windows)
33
description: Provision AWS EC2 VMs as Coder workspaces
4-
icon: ../../../site/static/icon/aws.png
4+
icon: ../../../site/static/icon/aws.svg
55
maintainer_github: coder
66
verified: true
77
tags: [vm, windows, aws]

site/src/AppRouter.tsx

Lines changed: 1 addition & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -21,8 +21,6 @@ import WorkspacesPage from "./pages/WorkspacesPage/WorkspacesPage";
2121
import UserSettingsLayout from "./pages/UserSettingsPage/Layout";
2222
import { TemplateSettingsLayout } from "./pages/TemplateSettingsPage/TemplateSettingsLayout";
2323
import { WorkspaceSettingsLayout } from "./pages/WorkspaceSettingsPage/WorkspaceSettingsLayout";
24-
import { ThemeOverride } from "contexts/ThemeProvider";
25-
import themes from "theme";
2624

2725
// Lazy load pages
2826
// - Pages that are secondary, not in the main navigation or not usually accessed
@@ -421,11 +419,7 @@ export const AppRouter: FC = () => {
421419
/>
422420
<Route
423421
path="/:username/:workspace/terminal"
424-
element={
425-
<ThemeOverride theme={themes.dark}>
426-
<TerminalPage />
427-
</ThemeOverride>
428-
}
422+
element={<TerminalPage />}
429423
/>
430424
<Route path="/cli-auth" element={<CliAuthenticationPage />} />
431425
<Route path="/icons" element={<IconsPage />} />

site/src/__mocks__/react-markdown.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { FC, PropsWithChildren } from "react";
22

3-
const ReactMarkdown: FC<PropsWithChildren<unknown>> = ({ children }) => {
3+
const ReactMarkdown: FC<PropsWithChildren> = ({ children }) => {
44
return <div data-testid="markdown">{children}</div>;
55
};
66

site/src/api/queries/users.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -131,6 +131,7 @@ export const me = (): UseQueryOptions<User> & {
131131
queryKey: meKey,
132132
initialData: initialUserData,
133133
queryFn: API.getAuthenticatedUser,
134+
refetchOnWindowFocus: true,
134135
};
135136
};
136137

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.

0 commit comments

Comments
 (0)