coder · aslilac · Jan 8, 2024 · Jan 5, 2024 · Jan 5, 2024 · Jan 8, 2024
diff --git a/examples/examples.gen.json b/examples/examples.gen.json
@@ -5,7 +5,7 @@
     "url": "",
     "name": "AWS EC2 (Devcontainer)",
     "description": "Provision AWS EC2 VMs with a devcontainer as Coder workspaces",
-    "icon": "/icon/aws.png",
+    "icon": "/icon/aws.svg",
     "tags": [
       "vm",
       "linux",
@@ -20,7 +20,7 @@
     "url": "",
     "name": "AWS EC2 (Linux)",
     "description": "Provision AWS EC2 VMs as Coder workspaces",
-    "icon": "/icon/aws.png",
+    "icon": "/icon/aws.svg",
     "tags": [
       "vm",
       "linux",
@@ -34,7 +34,7 @@
     "url": "",
     "name": "AWS EC2 (Windows)",
     "description": "Provision AWS EC2 VMs as Coder workspaces",
-    "icon": "/icon/aws.png",
+    "icon": "/icon/aws.svg",
     "tags": [
       "vm",
       "windows",

diff --git a/examples/templates/aws-devcontainer/README.md b/examples/templates/aws-devcontainer/README.md
@@ -1,7 +1,7 @@
 ---
 display_name: AWS EC2 (Devcontainer)
 description: Provision AWS EC2 VMs with a devcontainer as Coder workspaces
-icon: ../../../site/static/icon/aws.png
+icon: ../../../site/static/icon/aws.svg
 maintainer_github: coder
 verified: true
 tags: [vm, linux, aws, persistent, devcontainer]

diff --git a/examples/templates/aws-linux/README.md b/examples/templates/aws-linux/README.md
@@ -1,7 +1,7 @@
 ---
 display_name: AWS EC2 (Linux)
 description: Provision AWS EC2 VMs as Coder workspaces
-icon: ../../../site/static/icon/aws.png
+icon: ../../../site/static/icon/aws.svg
 maintainer_github: coder
 verified: true
 tags: [vm, linux, aws, persistent-vm]

diff --git a/examples/templates/aws-windows/README.md b/examples/templates/aws-windows/README.md
@@ -1,7 +1,7 @@
 ---
 display_name: AWS EC2 (Windows)
 description: Provision AWS EC2 VMs as Coder workspaces
-icon: ../../../site/static/icon/aws.png
+icon: ../../../site/static/icon/aws.svg
 maintainer_github: coder
 verified: true
 tags: [vm, windows, aws]

diff --git a/site/src/AppRouter.tsx b/site/src/AppRouter.tsx
@@ -21,8 +21,6 @@ import WorkspacesPage from "./pages/WorkspacesPage/WorkspacesPage";
 import UserSettingsLayout from "./pages/UserSettingsPage/Layout";
 import { TemplateSettingsLayout } from "./pages/TemplateSettingsPage/TemplateSettingsLayout";
 import { WorkspaceSettingsLayout } from "./pages/WorkspaceSettingsPage/WorkspaceSettingsLayout";
-import { ThemeOverride } from "contexts/ThemeProvider";
-import themes from "theme";
 
 // Lazy load pages
 // - Pages that are secondary, not in the main navigation or not usually accessed
@@ -421,11 +419,7 @@ export const AppRouter: FC = () => {
             />
             <Route
               path="/:username/:workspace/terminal"
-              element={
-                <ThemeOverride theme={themes.dark}>
-                  <TerminalPage />
-                </ThemeOverride>
-              }
+              element={<TerminalPage />}
             />
             <Route path="/cli-auth" element={<CliAuthenticationPage />} />
             <Route path="/icons" element={<IconsPage />} />

diff --git a/site/src/__mocks__/react-markdown.tsx b/site/src/__mocks__/react-markdown.tsx
@@ -1,6 +1,6 @@
 import { FC, PropsWithChildren } from "react";
 
-const ReactMarkdown: FC<PropsWithChildren<unknown>> = ({ children }) => {
+const ReactMarkdown: FC<PropsWithChildren> = ({ children }) => {
   return <div data-testid="markdown">{children}</div>;
 };
 

diff --git a/site/src/api/queries/users.ts b/site/src/api/queries/users.ts
@@ -131,6 +131,7 @@ export const me = (): UseQueryOptions<User> & {
     queryKey: meKey,
     initialData: initialUserData,
     queryFn: API.getAuthenticatedUser,
+    refetchOnWindowFocus: true,
   };
 };
 

diff --git a/site/src/components/Avatar/Avatar.tsx b/site/src/components/Avatar/Avatar.tsx
@@ -4,8 +4,9 @@ import MuiAvatar, {
   type AvatarProps as MuiAvatarProps,
 } from "@mui/material/Avatar";
 import { type FC, useId } from "react";
-import { css, type Interpolation, type Theme } from "@emotion/react";
+import { css, type Interpolation, type Theme, useTheme } from "@emotion/react";
 import { visuallyHidden } from "@mui/utils";
+import { getExternalImageStylesFromUrl } from "theme/externalImages";
 
 export type AvatarProps = MuiAvatarProps & {
   size?: "xs" | "sm" | "md" | "xl";
@@ -67,6 +68,17 @@ export const Avatar: FC<AvatarProps> = ({
   );
 };
 
+export const ExternalAvatar: FC<AvatarProps> = (props) => {
+  const theme = useTheme();
+
+  return (
+    <Avatar
+      css={getExternalImageStylesFromUrl(theme.externalImages, props.src)}
+      {...props}
+    />
+  );
+};
+
 type AvatarIconProps = {
   src: string;
   alt: string;

diff --git a/site/src/components/AvatarCard/AvatarCard.tsx b/site/src/components/AvatarCard/AvatarCard.tsx
@@ -1,4 +1,4 @@
-import { type ReactNode } from "react";
+import { type FC, type ReactNode } from "react";
 import { Avatar } from "components/Avatar/Avatar";
 import { type CSSObject, useTheme } from "@emotion/react";
 
@@ -12,14 +12,14 @@ type AvatarCardProps = {
   maxWidth?: number | "none";
 };
 
-export function AvatarCard({
+export const AvatarCard: FC<AvatarCardProps> = ({
   header,
   imgUrl,
   altText,
   background,
   subtitle,
   maxWidth = "none",
-}: AvatarCardProps) {
+}) => {
   const theme = useTheme();
 
   return (
@@ -77,4 +77,4 @@ export function AvatarCard({
       </Avatar>
     </div>
   );
-}
+};
diff --git a/site/src/components/ExternalIcon/ExternalIcon.tsx b/site/src/components/ExternalIcon/ExternalIcon.tsx
diff --git a/site/src/components/ExternalImage/ExternalImage.tsx b/site/src/components/ExternalImage/ExternalImage.tsx
@@ -0,0 +1,19 @@
+import { useTheme } from "@emotion/react";
+import { type ImgHTMLAttributes, forwardRef } from "react";
+import { getExternalImageStylesFromUrl } from "theme/externalImages";
+
+export const ExternalImage = forwardRef<
+  HTMLImageElement,
+  ImgHTMLAttributes<HTMLImageElement>
+>((attrs, ref) => {
+  const theme = useTheme();
+
+  return (
+    <img
+      ref={ref}
+      alt=""
+      css={getExternalImageStylesFromUrl(theme.externalImages, attrs.src)}
+      {...attrs}
+    />
+  );
+});
diff --git a/site/src/components/FullPageLayout/Topbar.tsx b/site/src/components/FullPageLayout/Topbar.tsx
@@ -2,17 +2,17 @@ import { css } from "@emotion/css";
 import Button, { ButtonProps } from "@mui/material/Button";
 import IconButton, { IconButtonProps } from "@mui/material/IconButton";
 import { useTheme } from "@mui/material/styles";
-import { Avatar, AvatarProps } from "components/Avatar/Avatar";
+import { AvatarProps, ExternalAvatar } from "components/Avatar/Avatar";
 import {
-  ForwardedRef,
-  HTMLAttributes,
-  PropsWithChildren,
-  ReactElement,
+  type FC,
+  type ForwardedRef,
+  type HTMLAttributes,
+  type ReactElement,
   cloneElement,
   forwardRef,
 } from "react";
 
-export const Topbar = (props: HTMLAttributes<HTMLDivElement>) => {
+export const Topbar: FC<HTMLAttributes<HTMLElement>> = (props) => {
   const theme = useTheme();
 
   return (
@@ -70,7 +70,7 @@ export const TopbarButton = forwardRef<HTMLButtonElement, ButtonProps>(
   },
 );
 
-export const TopbarData = (props: HTMLAttributes<HTMLDivElement>) => {
+export const TopbarData: FC<HTMLAttributes<HTMLDivElement>> = (props) => {
   return (
     <div
       {...props}
@@ -84,7 +84,7 @@ export const TopbarData = (props: HTMLAttributes<HTMLDivElement>) => {
   );
 };
 
-export const TopbarDivider = (props: HTMLAttributes<HTMLSpanElement>) => {
+export const TopbarDivider: FC<HTMLAttributes<HTMLSpanElement>> = (props) => {
   const theme = useTheme();
   return (
     <span {...props} css={{ color: theme.palette.divider }}>
@@ -93,9 +93,9 @@ export const TopbarDivider = (props: HTMLAttributes<HTMLSpanElement>) => {
   );
 };
 
-export const TopbarAvatar = (props: AvatarProps) => {
+export const TopbarAvatar: FC<AvatarProps> = (props) => {
   return (
-    <Avatar
+    <ExternalAvatar
       {...props}
       variant="square"
       fitImage
@@ -104,7 +104,7 @@ export const TopbarAvatar = (props: AvatarProps) => {
   );
 };
 
-type TopbarIconProps = PropsWithChildren<HTMLAttributes<HTMLOrSVGElement>>;
+type TopbarIconProps = HTMLAttributes<HTMLOrSVGElement>;
 
 export const TopbarIcon = forwardRef<HTMLOrSVGElement, TopbarIconProps>(
   (props: TopbarIconProps, ref) => {

diff --git a/site/src/components/GroupAvatar/GroupAvatar.tsx b/site/src/components/GroupAvatar/GroupAvatar.tsx
@@ -19,7 +19,7 @@ export const GroupAvatar: FC<GroupAvatarProps> = ({ name, avatarURL }) => {
       badgeContent={<Group />}
       classes={{ badge }}
     >
-      <Avatar src={avatarURL} background>
+      <Avatar background src={avatarURL}>
         {name}
       </Avatar>
     </Badge>

diff --git a/site/src/components/IconField/IconField.tsx b/site/src/components/IconField/IconField.tsx
@@ -12,6 +12,7 @@ import {
   PopoverContent,
   PopoverTrigger,
 } from "components/Popover/Popover";
+import { ExternalImage } from "components/ExternalImage/ExternalImage";
 
 // See: https://github.com/missive/emoji-mart/issues/51#issuecomment-287353222
 const urlFromUnifiedCode = (unified: string) =>
@@ -60,7 +61,7 @@ export const IconField: FC<IconFieldProps> = ({
                 },
               }}
             >
-              <img
+              <ExternalImage
                 alt=""
                 src={textFieldProps.value}
                 // This prevent browser to display the ugly error icon if the

diff --git a/site/src/components/Resources/ResourceAvatar.tsx b/site/src/components/Resources/ResourceAvatar.tsx
@@ -1,16 +1,26 @@
-import { type FC } from "react";
+import { type FC, useId } from "react";
+import { visuallyHidden } from "@mui/utils";
 import type { WorkspaceResource } from "api/typesGenerated";
-import { Avatar, AvatarIcon } from "components/Avatar/Avatar";
+import { Avatar } from "components/Avatar/Avatar";
+import { ExternalImage } from "components/ExternalImage/ExternalImage";
 import { getResourceIconPath } from "utils/workspace";
 
 export type ResourceAvatarProps = { resource: WorkspaceResource };
 
 export const ResourceAvatar: FC<ResourceAvatarProps> = ({ resource }) => {
   const avatarSrc = resource.icon || getResourceIconPath(resource.type);
+  const altId = useId();
 
   return (
     <Avatar background>
-      <AvatarIcon src={avatarSrc} alt={resource.name} />
+      <ExternalImage
+        src={avatarSrc}
+        css={{ maxWidth: "50%" }}
+        aria-labelledby={altId}
+      />
+      <div id={altId} css={{ ...visuallyHidden }}>
+        {resource.name}
+      </div>
     </Avatar>
   );
 };
diff --git a/site/src/components/RichParameterInput/RichParameterInput.stories.tsx b/site/src/components/RichParameterInput/RichParameterInput.stories.tsx
@@ -96,7 +96,7 @@ export const Options: Story = {
           name: "Third option",
           value: "third_option",
           description: "",
-          icon: "/icon/aws.png",
+          icon: "/icon/aws.svg",
         },
       ],
     }),
@@ -138,7 +138,7 @@ Very big.
 
 > Wow, that description is straight up large. –Some guy, probably
 `,
-          icon: "/icon/aws.png",
+          icon: "/icon/aws.svg",
         },
       ],
     }),

diff --git a/site/src/components/RichParameterInput/RichParameterInput.tsx b/site/src/components/RichParameterInput/RichParameterInput.tsx
@@ -9,6 +9,7 @@ import { TemplateVersionParameter } from "api/typesGenerated";
 import { MemoizedMarkdown } from "components/Markdown/Markdown";
 import { Stack } from "components/Stack/Stack";
 import { MultiTextField } from "./MultiTextField";
+import { ExternalImage } from "components/ExternalImage/ExternalImage";
 
 const isBoolean = (parameter: TemplateVersionParameter) => {
   return parameter.type === "bool";
@@ -106,7 +107,7 @@ const ParameterLabel: FC<ParameterLabelProps> = ({ parameter }) => {
       <Stack direction="row" alignItems="center">
         {parameter.icon && (
           <span css={styles.labelIconWrapper}>
-            <img
+            <ExternalImage
               css={styles.labelIcon}
               alt="Parameter icon"
               src={parameter.icon}
@@ -213,7 +214,7 @@ const RichParameterField: FC<RichParameterInputProps> = ({
             label={
               <Stack direction="row" alignItems="center">
                 {option.icon && (
-                  <img
+                  <ExternalImage
                     css={styles.optionIcon}
                     src={option.icon}
                     alt="Parameter icon"