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

refactor(site): set square elements' dimensions with size- classes (#27071)

Browse Source 
Finds all class combinations like `w-N h-N` and replaces them with
`size-N`.

- find: `/w-(\d+) h-\1(?=\s|")/g`, or `/h-(\d+) w-\1(?=\s|")/g`
- replace with: `size-$1`

The positive lookahead `/(?=\s|")/` matches whitespace or a double quote
character after the number, to prevent false matches where the numbers
aren't the same but share the same left digits:


https://github.com/coder/coder/blob/b3766d62be9487732c7e657cf737e739cc5413da/site/src/pages/WorkspacesPage/WorkspacesTable.tsx#L124

Unfortunately we don't have a way to automatically enforce this, since
there's no Biome equivalent for `eslint-plugin-tailwindcss`'s
[`enforces-shorthand`
rule](https://github.com/francoismassart/eslint-plugin-tailwindcss/blob/HEAD/docs/rules/enforces-shorthand.md)
This commit is contained in:
Andrew Aquino
2026-07-07 15:50:58 -07:00
committed by GitHub
parent 14767dfa8e
commit 94605fa193
48 changed files with 71 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files
site/src/components/Breadcrumb/Breadcrumb.tsx
+2 -2
View File
@@ -107,10 +107,10 @@ export const BreadcrumbEllipsis: React.FC<
<span
role="presentation"
aria-hidden="true"
className={cn("flex h-9 w-9 items-center justify-center", className)}
className={cn("flex size-9 items-center justify-center", className)}
{...props}
>
<MoreHorizontalIcon className="h-4 w-4" />
<MoreHorizontalIcon className="size-4" />
<span className="sr-only">More</span>
</span>
);
site/src/components/Checkbox/Checkbox.stories.tsx
+1 -1
View File
@@ -51,7 +51,7 @@ export const DisabledChecked: Story = {
export const CustomStyling: Story = {
args: {
className: "h-6 w-6 rounded-full",
className: "size-6 rounded-full",
},
};
site/src/components/CodeExample/CodeExample.tsx
+2 -2
View File
@@ -45,9 +45,9 @@ export const CodeExample: FC<CodeExampleProps> = ({
? "Hide sensitive data"
: "Show sensitive data";
const icon = showFullValue ? (
<EyeOffIcon className="h-4 w-4" />
<EyeOffIcon className="size-4" />
) : (
<EyeIcon className="h-4 w-4" />
<EyeIcon className="size-4" />
);
return (
site/src/components/Combobox/Combobox.tsx
+1 -1
View File
@@ -156,7 +156,7 @@ export const ComboboxItem = ({
{children}
<CheckIcon
className={cn(
"ml-2 h-4 w-4 min-w-0 flex-shrink-0",
"ml-2 size-4 min-w-0 flex-shrink-0",
isSelected ? "opacity-100" : "opacity-0",
)}
/>
site/src/components/Command/Command.tsx
+1 -1
View File
@@ -21,7 +21,7 @@ export const CommandInput: React.FC<
> = ({ className, ...props }) => {
return (
<div className="flex items-center border-b px-3" cmdk-input-wrapper="">
<SearchIcon className="mr-2 h-4 w-4 shrink-0 opacity-50" />
<SearchIcon className="mr-2 size-4 shrink-0 opacity-50" />
<CommandPrimitive.Input
className={cn(
`flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none border-none
site/src/components/Dialogs/ConfirmDeleteDialog/ConfirmDeleteDialog.tsx
+1 -1
View File
@@ -53,7 +53,7 @@ export const ConfirmDeleteDialog: FC<ConfirmDeleteDialogProps> = ({
Cancel
</Button>
<Button variant="destructive" onClick={onConfirm} disabled={isPending}>
{isPending && <Spinner className="h-4 w-4" loading />}
{isPending && <Spinner className="size-4" loading />}
Delete {entity}
</Button>
</DialogFooter>
site/src/components/DropdownMenu/DropdownMenu.tsx
+1 -1
View File
@@ -72,7 +72,7 @@ export const DropdownMenuRadioItem: React.FC<
{children}
<span className="absolute top-3.5 right-2 flex h-3.5 w-3.5 items-center justify-center">
<DropdownMenuPrimitive.ItemIndicator>
<CheckIcon className="h-4 w-4" />
<CheckIcon className="size-4" />
</DropdownMenuPrimitive.ItemIndicator>
</span>
</DropdownMenuPrimitive.RadioItem>
site/src/components/IconField/IconField.tsx
+1 -1
View File
@@ -43,7 +43,7 @@ export const IconField: FC<IconFieldProps> = ({
endAdornment: hasIcon ? (
<InputAdornment
position="end"
className="w-6 h-6 flex items-center justify-center [&_img]:max-w-full [&_img]:object-contain"
className="size-6 flex items-center justify-center [&_img]:max-w-full [&_img]:object-contain"
>
<ExternalImage
alt=""
site/src/components/MultiSelectCombobox/MultiSelectCombobox.tsx
+2 -2
View File
@@ -526,7 +526,7 @@ export const MultiSelectCombobox: React.FC<MultiSelectComboboxProps> = ({
}}
onClick={() => handleUnselect(option)}
>
<XIcon className="h-4 w-4 text-content-secondary hover:text-content-primary align-text-bottom" />
<XIcon className="size-4 text-content-secondary hover:text-content-primary align-text-bottom" />
</button>
</Badge>
);
@@ -593,7 +593,7 @@ export const MultiSelectCombobox: React.FC<MultiSelectComboboxProps> = ({
"hidden",
)}
>
<XIcon className="h-5 w-5" />
<XIcon className="size-5" />
</button>
<ChevronDownIcon
open={open}
site/src/components/RadioGroup/RadioGroup.tsx
+1 -1
View File
@@ -23,7 +23,7 @@ export const RadioGroupItem: React.FC<
return (
<RadioGroupPrimitive.Item
className={cn(
`relative aspect-square h-4 w-4 rounded-full border border-solid border-border text-content-primary bg-surface-primary
`relative aspect-square size-4 rounded-full border border-solid border-border text-content-primary bg-surface-primary
focus:outline-none focus-visible:ring-2 focus-visible:ring-content-link
focus-visible:ring-offset-4 focus-visible:ring-offset-surface-primary
disabled:cursor-not-allowed disabled:opacity-25 disabled:border-surface-invert-primary
site/src/components/Slider/Slider.tsx
+2 -2
View File
@@ -21,13 +21,13 @@ export const Slider: React.FC<
<SliderPrimitive.Range className="absolute h-full bg-content-primary" />
</SliderPrimitive.Track>
<SliderPrimitive.Thumb
className="block h-4 w-4 rounded-full border border-solid border-surface-invert-secondary bg-surface-primary shadow transition-colors
className="block size-4 rounded-full border border-solid border-surface-invert-secondary bg-surface-primary shadow transition-colors
focus-visible:outline-none hover:border-content-primary
focus-visible:ring-0 focus-visible:ring-content-primary focus-visible:ring-offset-surface-primary
disabled:pointer-events-none data-[disabled]:opacity-100 data-[disabled]:border-border"
/>
<SliderPrimitive.Thumb
className="block h-4 w-4 rounded-full border border-solid border-surface-invert-secondary bg-surface-primary shadow transition-colors
className="block size-4 rounded-full border border-solid border-surface-invert-secondary bg-surface-primary shadow transition-colors
focus-visible:outline-none hover:border-content-primary
focus-visible:ring-0 focus-visible:ring-content-primary focus-visible:ring-offset-surface-primary
disabled:pointer-events-none data-[disabled]:opacity-100 data-[disabled]:border-border"
site/src/components/Switch/Switch.tsx
+2 -2
View File
@@ -34,8 +34,8 @@ const thumbVariants = cva(
variants: {
size: {
default:
"h-4 w-4 data-[state=checked]:translate-x-2.5 data-[state=unchecked]:-translate-x-1.5",
sm: "h-3 w-3 data-[state=checked]:translate-x-1.5 data-[state=unchecked]:-translate-x-1.5",
"size-4 data-[state=checked]:translate-x-2.5 data-[state=unchecked]:-translate-x-1.5",
sm: "size-3 data-[state=checked]:translate-x-1.5 data-[state=unchecked]:-translate-x-1.5",
},
},
defaultVariants: {
site/src/modules/dashboard/Navbar/MobileMenu.tsx
+2 -2
View File
@@ -136,7 +136,7 @@ const ProxySettingsSub: FC<ProxySettingsSubProps> = ({ proxyContextValue }) => {
Workspace proxy settings:
<span className="leading-none flex items-center gap-1">
<ExternalImage
className="w-4 h-4"
className="size-4"
src={selectedProxy.icon_url}
alt={selectedProxy.name}
/>
@@ -173,7 +173,7 @@ const ProxySettingsSub: FC<ProxySettingsSubProps> = ({ proxyContextValue }) => {
}}
>
<ExternalImage
className="w-4 h-4"
className="size-4"
src={p.icon_url}
alt={p.name}
/>
site/src/modules/resources/VSCodeDesktopButton/VSCodeDesktopButton.tsx
+2 -2
View File
@@ -83,7 +83,7 @@ export const VSCodeDesktopButton: FC<VSCodeDesktopButtonProps> = (props) => {
selectVariant("vscode");
}}
>
<VSCodeIcon className="w-3 h-3" />
<VSCodeIcon className="size-3" />
{DisplayAppNameMap.vscode}
</MenuItem>
<MenuItem
@@ -92,7 +92,7 @@ export const VSCodeDesktopButton: FC<VSCodeDesktopButtonProps> = (props) => {
selectVariant("vscode-insiders");
}}
>
<VSCodeInsidersIcon className="w-3 h-3" />
<VSCodeInsidersIcon className="size-3" />
{DisplayAppNameMap.vscode_insiders}
</MenuItem>
</Menu>
site/src/modules/resources/VSCodeDevContainerButton/VSCodeDevContainerButton.tsx
+2 -2
View File
@@ -87,7 +87,7 @@ export const VSCodeDevContainerButton: FC<VSCodeDevContainerButtonProps> = (
selectVariant("vscode");
}}
>
<VSCodeIcon className="w-3 h-3" />
<VSCodeIcon className="size-3" />
{DisplayAppNameMap.vscode}
</MenuItem>
<MenuItem
@@ -96,7 +96,7 @@ export const VSCodeDevContainerButton: FC<VSCodeDevContainerButtonProps> = (
selectVariant("vscode-insiders");
}}
>
<VSCodeInsidersIcon className="w-3 h-3" />
<VSCodeInsidersIcon className="size-3" />
{DisplayAppNameMap.vscode_insiders}
</MenuItem>
</Menu>
site/src/modules/tasks/TasksSidebar/UserCombobox.tsx
+1 -1
View File
@@ -105,7 +105,7 @@ export const UserCombobox: FC<UserComboboxProps> = ({
<UserItem option={option} />
<CheckIcon
className={cn(
"ml-2 h-4 w-4",
"ml-2 size-4",
option.value === selectedOption?.value
? "opacity-100"
: "opacity-0",
site/src/modules/workspaces/DynamicParameter/DynamicParameter.tsx
+6 -6
View File
@@ -118,7 +118,7 @@ const ParameterLabel: FC<ParameterLabelProps> = ({
<div className="flex items-start gap-2">
{parameter.icon && (
<ExternalImage
className="w-5 h-5 mt-0.5 object-contain"
className="size-5 mt-0.5 object-contain"
alt="Parameter icon"
src={parameter.icon}
/>
@@ -528,9 +528,9 @@ const MaskableInput: FC<MaskableInputProps> = ({
disabled={disabled}
>
{showMaskedInput ? (
<EyeOffIcon className="h-4 w-4" />
<EyeOffIcon className="size-4" />
) : (
<EyeIcon className="h-4 w-4" />
<EyeIcon className="size-4" />
)}
</Button>
)}
@@ -582,9 +582,9 @@ const MaskableTextArea: FC<MaskableInputProps> = ({
disabled={disabled}
>
{showMaskedInput ? (
<EyeOffIcon className="h-4 w-4" />
<EyeOffIcon className="size-4" />
) : (
<EyeIcon className="h-4 w-4" />
<EyeIcon className="size-4" />
)}
</Button>
)}
@@ -626,7 +626,7 @@ const OptionDisplay: FC<OptionDisplayProps> = ({ option }) => {
<div className="flex items-center gap-2">
{option.icon && (
<ExternalImage
className="w-4 h-4 object-contain"
className="size-4 object-contain"
src={option.icon}
alt=""
/>
site/src/pages/AISettingsPage/CoderAgentsPage/components/AgentSettingLayout.tsx
+1 -1
View File
@@ -60,7 +60,7 @@ export const AgentSettingLayout: FC<AgentSettingLayoutProps> = ({
disabled={saveDisabled}
className="h-10 min-w-[88px]"
>
{isSaving && <Spinner loading className="h-4 w-4" />}
{isSaving && <Spinner loading className="size-4" />}
Save
</Button>
))}
site/src/pages/AISettingsPage/InstructionsPage/InstructionsPageView.tsx
+1 -1
View File
@@ -263,7 +263,7 @@ const InstructionsForm: FC<InstructionsFormProps> = ({
Cancel
</Button>
<Button type="submit" disabled={isDisabled || !form.dirty}>
{isSaving && <Spinner loading className="h-4 w-4" />}
{isSaving && <Spinner loading className="size-4" />}
Save
</Button>
</div>
site/src/pages/AISettingsPage/LifecyclePage/components/LifecycleSettingLayout.tsx
+1 -1
View File
@@ -65,7 +65,7 @@ export const LifecycleSettingLayout: FC<LifecycleSettingLayoutProps> = ({
disabled={saveDisabled}
className="h-10 min-w-[88px]"
>
{isSaving && <Spinner loading className="h-4 w-4" />}
{isSaving && <Spinner loading className="size-4" />}
Save
</Button>
))}
site/src/pages/AISettingsPage/SpendPage/SpendPageView.tsx
+1 -1
View File
@@ -263,7 +263,7 @@ export const SpendPageView: FC<SpendPageViewProps> = ({
<div className="space-y-8">
{isLoadingConfig ? (
<div className="flex items-center justify-center rounded-lg border border-border-default px-6 py-10">
<Spinner loading className="h-6 w-6" />
<Spinner loading className="size-6" />
</div>
) : configError ? (
<div className="space-y-4">
site/src/pages/AISettingsPage/SpendPage/components/LimitsTab/DefaultLimitSection.tsx
+1 -1
View File
@@ -109,7 +109,7 @@ export const DefaultLimitSection: FC<DefaultLimitSectionProps> = ({
onClick={onSave}
className="h-10 min-w-[88px]"
>
{isSaving && <Spinner loading className="h-4 w-4" />}
{isSaving && <Spinner loading className="size-4" />}
Save
</Button>
))}
site/src/pages/AISettingsPage/SpendPage/components/LimitsTab/GroupLimitDialog.tsx
+1 -1
View File
@@ -173,7 +173,7 @@ export const GroupLimitDialog: FC<GroupLimitDialogProps> = ({
Cancel
</Button>
<Button type="button" onClick={onSave} disabled={saveDisabled}>
{upsertPending ? <Spinner loading className="h-4 w-4" /> : null}
{upsertPending ? <Spinner loading className="size-4" /> : null}
{isEditing ? "Update budget" : "Add group"}
</Button>
</DialogFooter>
site/src/pages/AISettingsPage/SpendPage/components/LimitsTab/UserOverrideDialog.tsx
+1 -1
View File
@@ -147,7 +147,7 @@ export const UserOverrideDialog: FC<UserOverrideDialogProps> = ({
Cancel
</Button>
<Button type="button" onClick={onSave} disabled={saveDisabled}>
{upsertPending ? <Spinner loading className="h-4 w-4" /> : null}
{upsertPending ? <Spinner loading className="size-4" /> : null}
{isEditing ? "Update budget" : "Add user"}
</Button>
</DialogFooter>
site/src/pages/AgentsPage/AgentSettingsPersonalSkillsPageView.tsx
+2 -2
View File
@@ -142,7 +142,7 @@ const EditSkillDialog: FC<{
Close
</Button>
<Button onClick={state.onRetry} disabled={state.isRetrying}>
{state.isRetrying && <Spinner className="h-4 w-4" loading />}
{state.isRetrying && <Spinner className="size-4" loading />}
Retry
</Button>
</DialogFooter>
@@ -247,7 +247,7 @@ export const AgentSettingsPersonalSkillsPageView: FC<
onClick={onRetry}
disabled={isRetrying}
>
{isRetrying && <Spinner className="h-4 w-4" loading />}
{isRetrying && <Spinner className="size-4" loading />}
Retry
</Button>
</div>
site/src/pages/AgentsPage/DesktopPopoutPage.tsx
+2 -2
View File
@@ -95,7 +95,7 @@ export const DesktopPopoutPageView: FC<DesktopPopoutPageViewProps> = ({
return (
<div className="flex h-screen w-screen items-center justify-center bg-surface-primary">
<div className="flex flex-col items-center gap-2 text-content-secondary">
<Spinner loading className="h-6 w-6" />
<Spinner loading className="size-6" />
<span className="text-sm">
{status === "idle"
? "Initializing desktop..."
@@ -126,7 +126,7 @@ export const DesktopPopoutPageView: FC<DesktopPopoutPageViewProps> = ({
return (
<div className="flex h-screen w-screen items-center justify-center bg-surface-primary">
<div className="flex flex-col items-center gap-2 text-content-secondary">
<Spinner loading className="h-6 w-6" />
<Spinner loading className="size-6" />
<span className="text-sm">Desktop disconnected. Reconnecting...</span>
</div>
</div>
site/src/pages/AgentsPage/components/AttachmentPreview.tsx
+1 -1
View File
@@ -199,7 +199,7 @@ export const AttachmentPreview: FC<{
uploadState?.status === "processing" ||
uploadState?.status === "uploading") && (
<div className="absolute inset-0 flex items-center justify-center rounded-md bg-overlay">
<Spinner className="h-5 w-5 text-white" loading />
<Spinner className="size-5 text-white" loading />
</div>
)}
{uploadState?.status === "error" && (
site/src/pages/AgentsPage/components/ChatElements/tools/InlineDesktopPreview.tsx
+1 -1
View File
@@ -101,7 +101,7 @@ export const InlineDesktopPreview: React.FC<{
className="flex w-full items-center justify-center text-content-secondary"
style={{ aspectRatio: DEFAULT_ASPECT }}
>
<Spinner loading className="h-5 w-5" />
<Spinner loading className="size-5" />
</div>,
);
}
site/src/pages/AgentsPage/components/ChatsSidebar/chats/ChatsPanel.tsx
+1 -1
View File
@@ -438,7 +438,7 @@ export const ChatsPanel: FC<ChatsPanelProps> = ({
size="icon"
aria-label="Search chats"
onClick={onOpenSearchDialog}
className="h-7 w-7 sm:hidden"
className="size-7 sm:hidden"
>
<SearchIcon />
</Button>
site/src/pages/AgentsPage/components/ChatsSidebar/chats/LoadMoreSentinel.tsx
+1 -1
View File
@@ -37,7 +37,7 @@ export const LoadMoreSentinel: FC<{
return (
<div ref={sentinelRef} className="flex items-center justify-center py-2">
{isFetchingNextPage && (
<Spinner className="h-4 w-4 text-content-secondary" loading />
<Spinner className="size-4 text-content-secondary" loading />
)}
</div>
);
site/src/pages/AgentsPage/components/ChatsSidebar/dialogs/RenameChatDialog.tsx
+1 -1
View File
@@ -341,7 +341,7 @@ export const RenameChatDialog: FC<RenameChatDialogProps> = ({
isTypingGeneratedTitle
}
>
{isRenamingChat && <Spinner className="h-4 w-4" loading />}
{isRenamingChat && <Spinner className="size-4" loading />}
Save
</Button>
</DialogFooter>
site/src/pages/AgentsPage/components/ChatsSidebar/filters/FilterPopover.tsx
+1 -1
View File
@@ -260,7 +260,7 @@ export const FilterPopover: FC<FilterPopoverProps> = ({
size="icon"
aria-label="Filter agents"
className={cn(
"h-7 w-7 min-w-0 -mr-0.5 justify-end px-0 text-content-secondary hover:text-content-primary",
"size-7 min-w-0 -mr-0.5 justify-end px-0 text-content-secondary hover:text-content-primary",
hasActiveFilters(filters) && "text-content-primary",
)}
>
site/src/pages/AgentsPage/components/ChatsSidebar/tabs/SidebarTabView.tsx
+1 -1
View File
@@ -312,7 +312,7 @@ export const SidebarTabView: FC<SidebarTabViewProps> = ({
}}
aria-label={`Close ${tab.label} tab`}
className={cn(
"h-6 w-6 rounded-l-none rounded-r-md bg-surface-primary p-0 text-content-secondary hover:text-content-primary [&>svg]:size-3",
"size-6 rounded-l-none rounded-r-md bg-surface-primary p-0 text-content-secondary hover:text-content-primary [&>svg]:size-3",
isActive &&
"bg-surface-quaternary/25 text-content-primary hover:bg-surface-quaternary/50",
)}
site/src/pages/AgentsPage/components/PersonalInstructionsSettings.tsx
+1 -1
View File
@@ -113,7 +113,7 @@ export const PersonalInstructionsSettings: FC<
type="submit"
disabled={isAnyPromptSaving || !form.dirty}
>
{isSavingUserPrompt && <Spinner loading className="h-4 w-4" />}
{isSavingUserPrompt && <Spinner loading className="size-4" />}
Save
</Button>
</>
site/src/pages/AgentsPage/components/PersonalSkillEditor.tsx
+1 -1
View File
@@ -401,7 +401,7 @@ export const PersonalSkillEditor: FC<PersonalSkillEditorProps> = ({
type="submit"
disabled={isSubmitting || !form.isValid || !form.dirty}
>
{isSubmitting && <Spinner className="h-4 w-4" loading />}
{isSubmitting && <Spinner className="size-4" loading />}
{submitLabel}
</Button>
</DialogFooter>
site/src/pages/AgentsPage/components/RightPanel/DesktopPanel.tsx
+4 -4
View File
@@ -83,7 +83,7 @@ export const DesktopPanel: FC<DesktopPanelProps> = ({ chatId, isVisible }) => {
className="flex h-full flex-col items-center justify-center gap-3 text-content-secondary"
role="status"
>
<ExternalLinkIcon className="h-8 w-8" />
<ExternalLinkIcon className="size-8" />
<span className="text-sm">Desktop is open in a separate window.</span>
<Button variant="outline" size="sm" onClick={handleBringBack}>
Bring back
@@ -133,7 +133,7 @@ export const DesktopPanelView: FC<DesktopPanelViewProps> = ({
if (status === "connecting") {
return (
<div className="flex h-full flex-col items-center justify-center gap-2 text-content-secondary">
<Spinner loading className="h-6 w-6" />
<Spinner loading className="size-6" />
<span className="text-sm">Connecting to desktop...</span>
</div>
);
@@ -142,7 +142,7 @@ export const DesktopPanelView: FC<DesktopPanelViewProps> = ({
if (status === "disconnected") {
return (
<div className="flex h-full flex-col items-center justify-center gap-2 text-content-secondary">
<Spinner loading className="h-6 w-6" />
<Spinner loading className="size-6" />
<span className="text-sm">Desktop disconnected. Reconnecting...</span>
</div>
);
@@ -165,7 +165,7 @@ export const DesktopPanelView: FC<DesktopPanelViewProps> = ({
if (status === "idle") {
return (
<div className="flex h-full flex-col items-center justify-center gap-2 text-content-secondary">
<Spinner loading className="h-6 w-6" />
<Spinner loading className="size-6" />
<span className="text-sm">Initializing desktop...</span>
</div>
);
site/src/pages/AgentsPage/components/UserCompactionThresholdSettings.tsx
+3 -3
View File
@@ -209,7 +209,7 @@ export const UserCompactionThresholdSettings: FC<
<div className="flex flex-col gap-2">
<ContextCompactionHeader />
<div className="flex items-center gap-2 text-sm text-content-secondary">
<Spinner loading className="h-4 w-4" />
<Spinner loading className="size-4" />
Loading thresholds...
</div>
</div>
@@ -235,7 +235,7 @@ export const UserCompactionThresholdSettings: FC<
<ContextCompactionHeader />
{isLoadingModelConfigs ? (
<div className="flex items-center gap-2 text-sm text-content-secondary">
<Spinner loading className="h-4 w-4" />
<Spinner loading className="size-4" />
Loading models...
</div>
) : modelConfigsError ? (
@@ -420,7 +420,7 @@ export const UserCompactionThresholdSettings: FC<
onClick={handleSaveAll}
>
{hasAnyPending && (
<Spinner loading className="h-4 w-4" />
<Spinner loading className="size-4" />
)}
{hasAnyPending
? "Saving..."
site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx
+1 -1
View File
@@ -671,7 +671,7 @@ export const CreateWorkspacePageView: FC<CreateWorkspacePageViewProps> = ({
<ExternalImage
src={preset.icon}
alt={preset.label}
className="w-4 h-4"
className="size-4"
/>
)}
{preset.label}
site/src/pages/CreateWorkspacePage/ExternalAuthButton.tsx
+2 -2
View File
@@ -31,7 +31,7 @@ export const ExternalAuthButton: FC<ExternalAuthButtonProps> = ({
<span className="flex flex-row items-center gap-2">
{auth.display_icon && (
<ExternalImage
className="w-5 h-5"
className="size-5"
src={auth.display_icon}
alt={`${auth.display_name} Icon`}
/>
@@ -47,7 +47,7 @@ export const ExternalAuthButton: FC<ExternalAuthButtonProps> = ({
<span className="flex flex-row items-center gap-2">
{auth.authenticated ? (
<>
<CheckIcon className="w-4 h-4 text-content-success" />
<CheckIcon className="size-4 text-content-success" />
<p className="text-xs font-semibold text-content-secondary m-0">
Authenticated
</p>
site/src/pages/DeploymentSettingsPage/AppearanceSettingsPage/AppearanceSettingsPageView.tsx
+1 -1
View File
@@ -134,7 +134,7 @@ export const AppearanceSettingsPageView: FC<
<img
alt=""
src={logoForm.values.logo_url}
className="h-6 w-6 max-w-full object-contain"
className="size-6 max-w-full object-contain"
// Hide broken image icon while users type incomplete URLs.
onError={(e) => {
e.currentTarget.style.display = "none";
site/src/pages/HealthPage/WorkspaceProxyPage.tsx
+1 -1
View File
@@ -73,7 +73,7 @@ const WorkspaceProxyPage: FC = () => {
>
<header className="p-6 flex items-center justify-between gap-6">
<div className="flex items-center gap-6">
<div className="w-9 h-9 flex items-center justify-center">
<div className="size-9 flex items-center justify-center">
<ExternalImage
src={region.icon_url}
className="object-fill w-full h-full"
site/src/pages/StarterTemplatePage/StarterTemplatePageView.tsx
+1 -1
View File
@@ -56,7 +56,7 @@ export const StarterTemplatePageView: FC<StarterTemplatePageViewProps> = ({
}
>
<div className="flex flex-row gap-6 items-center">
<div className="h-12 w-12 flex items-center justify-center [&_img]:w-full">
<div className="size-12 flex items-center justify-center [&_img]:w-full">
<ExternalImage src={starterTemplate.icon} />
</div>
<div>
site/src/pages/TasksPage/UsersCombobox.tsx
+2 -2
View File
@@ -71,7 +71,7 @@ export const UsersCombobox: FC<UsersComboboxProps> = ({
) : (
<Skeleton variant="text" className="w-[120px] h-3" />
)}
<ChevronsUpDownIcon className="ml-2 h-4 w-4 shrink-0 opacity-50" />
<ChevronsUpDownIcon className="ml-2 size-4 shrink-0 opacity-50" />
</Button>
</PopoverTrigger>
<PopoverContent className="w-[280px] p-0">
@@ -100,7 +100,7 @@ export const UsersCombobox: FC<UsersComboboxProps> = ({
<UserItem option={option} />
<CheckIcon
className={cn(
"ml-2 h-4 w-4",
"ml-2 size-4",
option.value === selectedOption?.value
? "opacity-100"
: "opacity-0",
site/src/pages/TemplateBuilder/ModuleConfiguration.tsx
+1 -1
View File
@@ -68,7 +68,7 @@ export const ModuleConfiguration: React.FC<ModuleConfigurationProps> = ({
</CollapsibleSummary>
) : (
<div className="text-sm text-content-secondary flex items-center gap-2 mt-4">
<CheckIcon className="w-4 h-4" />
<CheckIcon className="size-4" />
No configuration required.
</div>
)}
site/src/pages/TemplateBuilder/SelectionSummary.tsx
+1 -1
View File
@@ -189,7 +189,7 @@ const ModuleSelection: React.FC<ModuleSelectionProps> = ({
onClick={() => onDeselectModule(module.id)}
aria-label="Deselect module"
>
<XIcon className="w-4 h-4" />
<XIcon className="size-4" />
</Button>
</div>
</div>
site/src/pages/TemplatePage/TemplateInsightsPage/TemplateInsightsPage.tsx
+2 -2
View File
@@ -452,7 +452,7 @@ const TemplateUsagePanel: FC<TemplateUsagePanelProps> = ({
return (
<div key={usage.slug} className="flex items-center gap-6">
<div className="flex items-center gap-2">
<div className="flex justify-center items-center w-5 h-5">
<div className="flex justify-center items-center size-5">
<ExternalImage
src={usage.icon}
alt=""
@@ -599,7 +599,7 @@ const ParameterUsageLabel: FC<ParameterUsageLabelProps> = ({
return (
<div className="flex items-center gap-4">
{icon && (
<div className="leading-none w-4 h-4">
<div className="leading-none size-4">
<ExternalImage
alt=""
src={icon}
site/src/pages/WorkspacePage/ResourcesSidebar.tsx
+1 -1
View File
@@ -45,7 +45,7 @@ export const ResourcesSidebar: FC<ResourcesSidebarProps> = ({
key={r.id}
className="leading-normal flex items-center gap-3"
>
<div className="flex items-center justify-center leading-none w-4 h-4 p-0.5">
<div className="flex items-center justify-center leading-none size-4 p-0.5">
<ExternalImage
className="w-full h-full object-contain"
src={getResourceIconPath(r.type)}
site/src/pages/WorkspacesPage/WorkspacesTable.tsx
+1 -1
View File
@@ -369,7 +369,7 @@ const TableLoader: FC = () => {
</TableCell>
<TableCell className="w-0 ">
<div className="flex gap-1 justify-end">
<Skeleton className="h-10 w-10" />
<Skeleton className="size-10" />
<Button size="icon-lg" variant="subtle" disabled>
<EllipsisVerticalIcon aria-hidden="true" />
</Button>