Fix selected template avatar

BrunoQuaresma · BrunoQuaresma · commit 730499962b3d · 2024-12-18T16:57:34.000Z
diff --git a/site/src/components/Avatar/Avatar.tsx b/site/src/components/Avatar/Avatar.tsx
@@ -1,3 +1,4 @@
+import { useTheme } from "@emotion/react";
 import * as AvatarPrimitive from "@radix-ui/react-avatar";
 import { type VariantProps, cva } from "class-variance-authority";
 /**
@@ -9,6 +10,7 @@ import { type VariantProps, cva } from "class-variance-authority";
  * @see {@link https://www.figma.com/design/WfqIgsTFXN2BscBSSyXWF8/Coder-kit?node-id=711-383&t=xqxOSUk48GvDsjGK-0}
  */
 import * as React from "react";
+import { getExternalImageStylesFromUrl } from "theme/externalImages";
 import { cn } from "utils/cn";
 
 const avatarVariants = cva(
@@ -67,13 +69,18 @@ Avatar.displayName = AvatarPrimitive.Root.displayName;
 const AvatarImage = React.forwardRef<
 	React.ElementRef<typeof AvatarPrimitive.Image>,
 	React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
->(({ className, ...props }, ref) => (
-	<AvatarPrimitive.Image
-		ref={ref}
-		className={cn("aspect-square h-full w-full object-contain", className)}
-		{...props}
-	/>
-));
+>(({ className, ...props }, ref) => {
+	const theme = useTheme();
+
+	return (
+		<AvatarPrimitive.Image
+			ref={ref}
+			className={cn("aspect-square h-full w-full object-contain", className)}
+			css={getExternalImageStylesFromUrl(theme.externalImages, props.src)}
+			{...props}
+		/>
+	);
+});
 AvatarImage.displayName = AvatarPrimitive.Image.displayName;
 
 const AvatarFallback = React.forwardRef<
diff --git a/site/src/pages/CreateWorkspacePage/SelectedTemplate.tsx b/site/src/pages/CreateWorkspacePage/SelectedTemplate.tsx
@@ -15,13 +15,8 @@ export interface SelectedTemplateProps {
 
 export const SelectedTemplate: FC<SelectedTemplateProps> = ({ template }) => {
 	return (
-		<Stack
-			direction="row"
-			spacing={3}
-			css={styles.template}
-			alignItems="center"
-		>
-			<Avatar variant="icon">
+		<Stack direction="row" spacing={2} css={styles.template}>
+			<Avatar variant="icon" size="lg">
 				<AvatarImage src={template.icon} />
 				<AvatarFallback>{avatarLetter(template.name)}</AvatarFallback>
 			</Avatar>
