opensource/coder
3
0
Fork 0
mirror of https://github.com/coder/coder.git synced 2026-09-24 15:04:27 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(site): restore missing avatar padding from TemplateBuilderAvatarData (#26884)

Browse Source 
fixes DEVEX-568

The `Avatar` variant I actually wanted for `TemplateBuilderAvatarData`
during #26776 was the compound one with both `size="lg" variant="icon"`,
which includes padding:


https://github.com/coder/coder/blob/2be540e469677e716d48612a5f5d078a8eb35bce/site/src/components/Avatar/Avatar.tsx#L35-L40

Using `Avatar` for `TemplateCard`/`ModuleCard` also ensures that those
components display a theme-appropriate icon image, i.e., light on dark /
dark on light.
This commit is contained in:
Andrew Aquino
2026-06-30 12:08:58 -07:00
committed by GitHub
parent 3c889fb384
commit 7baf0d4a9a
3 changed files with 5 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
site/src/pages/TemplateBuilder/ModuleCard.tsx
+2 -7
View File
@@ -1,5 +1,6 @@
import { BadgeCheckIcon, CheckIcon } from "lucide-react";
import { useId } from "react";
import { Avatar } from "#/components/Avatar/Avatar";
import { Link } from "#/components/Link/Link";
import { cn } from "#/utils/cn";
@@ -45,13 +46,7 @@ export const ModuleCard: React.FC<ModuleCardProps> = ({
}}
>
<div className="flex items-start justify-between mb-3">
<div className="flex items-center justify-center p-1 rounded-md size-10 shrink-0 bg-surface-secondary border border-solid border-border">
{iconUrl ? (
<img src={iconUrl} alt="" className="size-7 object-contain" />
) : (
<div className="size-7 rounded bg-surface-primary" />
)}
</div>
<Avatar src={iconUrl} size="lg" variant="icon" />
<div
aria-hidden="true"
className={cn(
site/src/pages/TemplateBuilder/TemplateBuilderAvatarData.tsx
+1 -1
View File
@@ -18,7 +18,7 @@ export const TemplateBuilderAvatarData: FC<TemplateBuilderAvatarDataProps> = ({
}) => {
return (
<AvatarData
avatar={<Avatar src={iconUrl} size="lg" />}
avatar={<Avatar src={iconUrl} size="lg" variant="icon" />}
title={<h3 className="m-0 text-xl font-semibold">{name}</h3>}
subtitle={
<>
site/src/pages/TemplateBuilder/TemplateCard.tsx
+2 -7
View File
@@ -1,5 +1,6 @@
import { BadgeCheckIcon } from "lucide-react";
import { useId } from "react";
import { Avatar } from "#/components/Avatar/Avatar";
import { Link } from "#/components/Link/Link";
import { cn } from "#/utils/cn";
@@ -45,13 +46,7 @@ export const TemplateCard: React.FC<TemplateCardProps> = ({
}}
>
<div className="flex items-start justify-between mb-3">
<div className="flex items-center justify-center p-1 rounded-md size-10 shrink-0 bg-surface-secondary border border-solid border-border">
{iconUrl ? (
<img src={iconUrl} alt="" className="size-7 object-contain" />
) : (
<div className="size-7 rounded bg-surface-primary" />
)}
</div>
<Avatar src={iconUrl} size="lg" variant="icon" />
<div
aria-hidden="true"
className={cn(