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/src/pages/TemplateBuilder): display Avatar instead of img in BaseTemplateCard/SelectionSummary (#26951)

Browse Source 
fixes DEVEX-576

## before

<img width="230" height="159" alt="image"
src="https://github.com/user-attachments/assets/d77b1343-f13b-472d-96ba-0b91baa8b17f"
/>

<img width="202" height="254" alt="image"
src="https://github.com/user-attachments/assets/458c5ea8-91cc-4ffe-8a49-132f186a9482"
/>

## after

<img width="232" height="161" alt="image"
src="https://github.com/user-attachments/assets/620ec315-4b95-44cc-90c0-2b24f8cb073e"
/>

<img width="205" height="252" alt="image"
src="https://github.com/user-attachments/assets/4268d12c-a37f-4dff-8c08-73b5a348d082"
/>
This commit is contained in:
Andrew Aquino
2026-07-07 09:21:21 -07:00
committed by GitHub
parent 6af0f4d698
commit e5990a9143
2 changed files with 5 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
site/src/pages/TemplateBuilder/SelectionSummary.tsx
+3 -10
View File
@@ -1,6 +1,7 @@
import { cva } from "class-variance-authority";
import { XIcon } from "lucide-react";
import { createContext, type PropsWithChildren, useContext } from "react";
import { Avatar } from "#/components/Avatar/Avatar";
import { Button } from "#/components/Button/Button";
import { cn } from "#/utils/cn";
@@ -149,11 +150,7 @@ const BaseTemplateSelection: React.FC<BaseTemplateSelectionProps> = ({
return (
<StepDivider>
<div className="flex items-center p-1">
<img
src={template.iconUrl}
alt={`${template.name} icon`}
className="w-6 h-6 p-1 rounded-sm border border-border border-solid bg-surface-secondary"
/>
<Avatar src={template.iconUrl} size="sm" variant="icon" />
<span className="ml-2 text-content-secondary">{template.name}</span>
</div>
</StepDivider>
@@ -177,11 +174,7 @@ const ModuleSelection: React.FC<ModuleSelectionProps> = ({
className="group flex items-start justify-between p-1 mb-1 rounded-sm hover:bg-surface-secondary"
>
<div className="h-[1lh] content-center">
<img
src={module.iconUrl}
alt={`${module.name} icon`}
className="block w-6 h-6 p-1 rounded-sm border border-border border-solid bg-surface-secondary"
/>
<Avatar src={module.iconUrl} size="sm" variant="icon" />
</div>
<span className="flex-1 ml-2 text-content-secondary">
{module.name}
site/src/pages/TemplateBuilder/TemplateCustomizationsStep.tsx
+2 -5
View File
@@ -6,6 +6,7 @@ import {
} from "#/api/queries/organizations";
import type { Organization } from "#/api/typesGenerated";
import { Alert } from "#/components/Alert/Alert";
import { Avatar } from "#/components/Avatar/Avatar";
import { IconField } from "#/components/IconField/IconField";
import { Input } from "#/components/Input/Input";
import { Label } from "#/components/Label/Label";
@@ -179,11 +180,7 @@ const ProvisionerWarning: FC = () => {
const BaseTemplateCard: FC<{ base: SelectedBaseMeta }> = ({ base }) => {
return (
<div className="w-56 shrink-0 rounded-lg bg-surface-secondary p-4 self-start">
{base.iconUrl && (
<div className="w-10 h-10 rounded-md bg-surface-tertiary flex items-center justify-center mb-3">
<img src={base.iconUrl} alt="" className="w-6 h-6" />
</div>
)}
{base.iconUrl && <Avatar src={base.iconUrl} size="lg" variant="icon" />}
<p className="text-sm font-medium text-content-primary">{base.name}</p>
<p className="text-xs text-content-secondary mt-1">
Preset based on base template