feat: add animations to each <ChevronDown /> (#22068)

This pull-request implement animations for each of our `<ChevronDown />`
(and a few other chevrons) so that everything is uniform with
`<Autocomplete />`.

site/src/components/AnimatedIcons/ChevronDown.tsx

@@ -0,0 +1,29 @@
+import { ChevronDown as LucideChevronDown } from "lucide-react";
+import { cn } from "utils/cn";
+
+interface ChevronDownIconProps
+	extends React.ComponentProps<typeof LucideChevronDown> {
+	/**
+	 * Explicitly control rotation state. When omitted, rotation is
+	 * driven by Radix's data-state attribute on a parent element
+	 * with className="group".
+	 */
+	open?: boolean;
+}
+
+export const ChevronDownIcon: React.FC<ChevronDownIconProps> = ({
+	open,
+	className,
+	...props
+}) => (
+	<LucideChevronDown
+		className={cn(
+			"transition-transform",
+			open !== undefined
+				? open && "rotate-180"
+				: "group-data-[state=open]:rotate-180",
+			className,
+		)}
+		{...props}
+	/>
+);

site/src/components/Autocomplete/Autocomplete.tsx

@@ -1,3 +1,4 @@
+import { ChevronDownIcon } from "components/AnimatedIcons/ChevronDown";
 import {
 	Command,
 	CommandEmpty,
@@ -12,7 +13,7 @@ import {
 	PopoverTrigger,
 } from "components/Popover/Popover";
 import { Spinner } from "components/Spinner/Spinner";
-import { Check, ChevronDown, X } from "lucide-react";
+import { Check, X } from "lucide-react";
 import {
 	type KeyboardEvent,
 	type ReactNode,
@@ -187,11 +188,9 @@ export function Autocomplete<TOption>({
 							</span>
 						)}
 						<span className="flex items-center justify-center size-5">
-							<ChevronDown
-								className={cn(
-									"size-icon-lg text-content-secondary transition-transform p-0.5",
-									isOpen && "rotate-180",
-								)}
+							<ChevronDownIcon
+								open={isOpen}
+								className="size-4 text-content-secondary"
 							/>
 						</span>
 					</span>

site/src/components/Button/Button.tsx

@@ -10,7 +10,7 @@ import { cn } from "utils/cn";
 // because they can override the styles from other components like Avatar.
 const buttonVariants = cva(
 	`
-	inline-flex items-center justify-center gap-1 whitespace-nowrap font-sans
+	group inline-flex items-center justify-center gap-1 whitespace-nowrap font-sans
 	border-solid rounded-md transition-colors shrink-0
 	text-sm font-medium cursor-pointer no-underline
 	focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-content-link

site/src/components/Combobox/Combobox.tsx

@@ -1,3 +1,4 @@
+import { ChevronDownIcon } from "components/AnimatedIcons/ChevronDown";
 import { Button } from "components/Button/Button";
 import {
 	Command,
@@ -12,7 +13,7 @@ import {
 	PopoverContent,
 	PopoverTrigger,
 } from "components/Popover/Popover";
-import { CheckIcon, ChevronDownIcon } from "lucide-react";
+import { CheckIcon } from "lucide-react";
 import type React from "react";
 import { createContext, useContext, useState } from "react";
 import { cn } from "utils/cn";

site/src/components/DropdownArrow/DropdownArrow.stories.tsx

@@ -1,16 +0,0 @@
-import { chromatic } from "testHelpers/chromatic";
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { DropdownArrow } from "./DropdownArrow";
-
-const meta: Meta<typeof DropdownArrow> = {
-	title: "components/DropdownArrow",
-	parameters: { chromatic },
-	component: DropdownArrow,
-	args: {},
-};
-
-export default meta;
-type Story = StoryObj<typeof DropdownArrow>;
-
-export const Open: Story = {};
-export const Close: Story = { args: { close: true } };

site/src/components/DropdownArrow/DropdownArrow.tsx

@@ -1,19 +0,0 @@
-import { ChevronDownIcon, ChevronUpIcon } from "lucide-react";
-import type { FC } from "react";
-import { cn } from "utils/cn";
-
-interface ArrowProps {
-	margin?: boolean;
-	close?: boolean;
-}
-
-export const DropdownArrow: FC<ArrowProps> = ({ margin = true, close }) => {
-	const Arrow = close ? ChevronUpIcon : ChevronDownIcon;
-
-	return (
-		<Arrow
-			aria-label={close ? "close-dropdown" : "open-dropdown"}
-			className={cn("text-current", margin && "ml-2")}
-		/>
-	);
-};

site/src/components/Expander/Expander.tsx

@@ -1,7 +1,9 @@
-import type { Interpolation, Theme } from "@emotion/react";
-import Collapse from "@mui/material/Collapse";
-import Link from "@mui/material/Link";
-import { DropdownArrow } from "components/DropdownArrow/DropdownArrow";
+import { ChevronDownIcon } from "components/AnimatedIcons/ChevronDown";
+import {
+	Collapsible,
+	CollapsibleContent,
+	CollapsibleTrigger,
+} from "components/Collapsible/Collapsible";
 import type { FC, ReactNode } from "react";
 
 interface ExpanderProps {
@@ -15,48 +17,19 @@ export const Expander: FC<ExpanderProps> = ({
 	setExpanded,
 	children,
 }) => {
-	const toggleExpanded = () => setExpanded(!expanded);
-
 	return (
-		<>
-			{!expanded && (
-				<Link onClick={toggleExpanded} css={styles.expandLink}>
-					<span css={styles.text}>
-						Click here to learn more
-						<DropdownArrow margin={false} />
-					</span>
-				</Link>
-			)}
-			<Collapse in={expanded}>
-				<div css={styles.text}>{children}</div>
-			</Collapse>
-			{expanded && (
-				<Link
-					onClick={toggleExpanded}
-					css={[styles.expandLink, styles.collapseLink]}
-				>
-					<span css={styles.text}>
-						Click here to hide
-						<DropdownArrow margin={false} close />
-					</span>
-				</Link>
-			)}
-		</>
+		<Collapsible open={expanded} onOpenChange={setExpanded}>
+			<CollapsibleContent>
+				<p className="flex items-center text-content-secondary text-xs">
+					{children}
+				</p>
+			</CollapsibleContent>
+			<CollapsibleTrigger className="cursor-pointer text-content-secondary hover:underline">
+				<span className="flex items-center text-xs">
+					{expanded ? "Click here to hide" : "Click here to learn more"}
+					<ChevronDownIcon open={expanded} className="size-4" />
+				</span>
+			</CollapsibleTrigger>
+		</Collapsible>
 	);
 };
-
-const styles = {
-	expandLink: (theme) => ({
-		cursor: "pointer",
-		color: theme.palette.text.secondary,
-	}),
-	collapseLink: {
-		marginTop: 16,
-	},
-	text: (theme) => ({
-		display: "flex",
-		alignItems: "center",
-		color: theme.palette.text.secondary,
-		fontSize: theme.typography.caption.fontSize,
-	}),
-} satisfies Record<string, Interpolation<Theme>>;

site/src/components/IconField/IconField.tsx

@@ -1,6 +1,7 @@
 import { css, Global, useTheme } from "@emotion/react";
 import InputAdornment from "@mui/material/InputAdornment";
 import TextField, { type TextFieldProps } from "@mui/material/TextField";
+import { ChevronDownIcon } from "components/AnimatedIcons/ChevronDown";
 import { Button } from "components/Button/Button";
 import { ExternalImage } from "components/ExternalImage/ExternalImage";
 import { Loader } from "components/Loader/Loader";
@@ -9,7 +10,6 @@ import {
 	PopoverContent,
 	PopoverTrigger,
 } from "components/Popover/Popover";
-import { ChevronDownIcon } from "lucide-react";
 import { type FC, lazy, Suspense, useState } from "react";
 
 type IconFieldProps = TextFieldProps & {
@@ -84,7 +84,7 @@ export const IconField: FC<IconFieldProps> = ({
 			/>
 			<Popover open={open} onOpenChange={setOpen}>
 				<PopoverTrigger asChild>
-					<Button variant="outline" size="lg" className="flex-shrink-0">
+					<Button variant="outline" size="lg" className="group flex-shrink-0">
 						Emoji
 						<ChevronDownIcon />
 					</Button>

site/src/components/MultiSelectCombobox/MultiSelectCombobox.tsx

@@ -3,6 +3,7 @@
  * @see {@link https://shadcnui-expansions.typeart.cc/docs/multiple-selector}
  */
 import { Command as CommandPrimitive, useCommandState } from "cmdk";
+import { ChevronDownIcon } from "components/AnimatedIcons/ChevronDown";
 import { Avatar } from "components/Avatar/Avatar";
 import { Badge } from "components/Badge/Badge";
 import {
@@ -17,7 +18,7 @@ import {
 	TooltipTrigger,
 } from "components/Tooltip/Tooltip";
 import { useDebouncedValue } from "hooks/debounce";
-import { ChevronDown, Info, X } from "lucide-react";
+import { Info, X } from "lucide-react";
 import {
 	type ComponentPropsWithoutRef,
 	type KeyboardEvent,
@@ -594,7 +595,10 @@ export const MultiSelectCombobox: React.FC<MultiSelectComboboxProps> = ({
 						>
 							<X className="h-5 w-5" />
 						</button>
-						<ChevronDown className="cursor-pointer text-content-secondary hover:text-content-primary p-0.5" />
+						<ChevronDownIcon
+							open={open}
+							className="size-icon-sm cursor-pointer text-content-secondary hover:text-content-primary"
+						/>
 					</div>
 				</div>
 			</div>

site/src/components/Select/Select.tsx

@@ -3,7 +3,12 @@
  * @see {@link https://ui.shadcn.com/docs/components/select}
  */
 import * as SelectPrimitive from "@radix-ui/react-select";
-import { Check, ChevronDown, ChevronUp } from "lucide-react";
+import { ChevronDownIcon } from "components/AnimatedIcons/ChevronDown";
+import {
+	Check,
+	ChevronUp,
+	ChevronDown as LucideChevronDown,
+} from "lucide-react";
 import { cn } from "utils/cn";
 
 export const Select = SelectPrimitive.Root;
@@ -27,14 +32,14 @@ export const SelectTrigger: React.FC<SelectTriggerProps> = ({
 			border border-border border-solid bg-transparent px-3 py-2 text-sm shadow-sm
 			ring-offset-background text-content-secondary placeholder:text-content-secondary focus:outline-none,
 			focus:ring-2 focus:ring-content-link disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1
-			focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-content-link`,
+			focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-content-link group`,
 			className,
 		)}
 		{...props}
 	>
 		{children}
 		<SelectPrimitive.Icon asChild>
-			<ChevronDown className="cursor-pointer text-content-secondary hover:text-content-primary p-0.5" />
+			<ChevronDownIcon className="size-icon-sm cursor-pointer text-content-secondary hover:text-content-primary" />
 		</SelectPrimitive.Icon>
 	</SelectPrimitive.Trigger>
 );
@@ -64,7 +69,7 @@ const SelectScrollDownButton: React.FC<
 			)}
 			{...props}
 		>
-			<ChevronDown className="size-icon-sm cursor-pointer text-content-secondary hover:text-content-primary" />
+			<LucideChevronDown className="size-icon-sm cursor-pointer text-content-secondary hover:text-content-primary" />
 		</SelectPrimitive.ScrollDownButton>
 	);
 };

site/src/components/SelectMenu/SelectMenu.tsx

@@ -1,5 +1,6 @@
 import MenuItem, { type MenuItemProps } from "@mui/material/MenuItem";
 import MenuList, { type MenuListProps } from "@mui/material/MenuList";
+import { ChevronDownIcon } from "components/AnimatedIcons/ChevronDown";
 import { Button, type ButtonProps } from "components/Button/Button";
 import {
 	Popover,
@@ -12,7 +13,7 @@ import {
 	SearchField,
 	type SearchFieldProps,
 } from "components/SearchField/SearchField";
-import { CheckIcon, ChevronDownIcon } from "lucide-react";
+import { CheckIcon } from "lucide-react";
 import {
 	Children,
 	type FC,

site/src/modules/dashboard/Navbar/DeploymentDropdown.tsx

@@ -1,3 +1,4 @@
+import { ChevronDownIcon } from "components/AnimatedIcons/ChevronDown";
 import { Button } from "components/Button/Button";
 import {
 	DropdownMenu,
@@ -5,7 +6,6 @@ import {
 	DropdownMenuItem,
 	DropdownMenuTrigger,
 } from "components/DropdownMenu/DropdownMenu";
-import { ChevronDownIcon } from "lucide-react";
 import { linkToAuditing } from "modules/navigation";
 import type { FC } from "react";
 import { Link } from "react-router";

site/src/modules/dashboard/Navbar/ProxyMenu.tsx

@@ -1,6 +1,7 @@
 import Skeleton from "@mui/material/Skeleton";
 import type * as TypesGen from "api/typesGenerated";
 import { Abbr } from "components/Abbr/Abbr";
+import { ChevronDownIcon } from "components/AnimatedIcons/ChevronDown";
 import { Button } from "components/Button/Button";
 import {
 	DropdownMenu,
@@ -15,7 +16,6 @@ import { displayError } from "components/GlobalSnackbar/utils";
 import { Latency } from "components/Latency/Latency";
 import type { ProxyContextValue } from "contexts/ProxyContext";
 import { useAuthenticated } from "hooks";
-import { ChevronDownIcon } from "lucide-react";
 import { type FC, useState } from "react";
 import { Link } from "react-router";
 import { sortProxiesByLatency } from "./proxyUtils";

site/src/modules/management/OrganizationSidebarView.tsx

@@ -1,4 +1,5 @@
 import type { Organization } from "api/typesGenerated";
+import { ChevronDownIcon } from "components/AnimatedIcons/ChevronDown";
 import { Avatar } from "components/Avatar/Avatar";
 import { Button } from "components/Button/Button";
 import {
@@ -16,7 +17,7 @@ import {
 	PopoverTrigger,
 } from "components/Popover/Popover";
 import { SettingsSidebarNavItem } from "components/Sidebar/Sidebar";
-import { Check, ChevronDown, Plus } from "lucide-react";
+import { Check, Plus } from "lucide-react";
 import type { Permissions } from "modules/permissions";
 import type { OrganizationPermissions } from "modules/permissions/organizations";
 import { type FC, useState } from "react";
@@ -78,7 +79,7 @@ export const OrganizationSidebarView: FC<
 						) : (
 							<span className="truncate">No organization selected</span>
 						)}
-						<ChevronDown className="ml-auto" />
+						<ChevronDownIcon className="ml-auto !size-icon-sm" />
 					</Button>
 				</PopoverTrigger>
 				<PopoverContent align="start" className="w-60">

site/src/modules/resources/AgentRow.tsx

@@ -8,8 +8,8 @@ import type {
 	WorkspaceAgent,
 	WorkspaceAgentMetadata,
 } from "api/typesGenerated";
+import { ChevronDownIcon } from "components/AnimatedIcons/ChevronDown";
 import { Button } from "components/Button/Button";
-import { DropdownArrow } from "components/DropdownArrow/DropdownArrow";
 import { useProxy } from "contexts/ProxyContext";
 import { SquareCheckBigIcon } from "lucide-react";
 import { useFeatureVisibility } from "modules/dashboard/useFeatureVisibility";
@@ -184,7 +184,7 @@ export const AgentRow: FC<AgentRowProps> = ({
 							onClick={() => setShowParentApps((show) => !show)}
 						>
 							Show parent apps
-							<DropdownArrow close={showParentApps} margin={false} />
+							<ChevronDownIcon open={showParentApps} />
 						</Button>
 					)}
 
@@ -342,7 +342,7 @@ export const AgentRow: FC<AgentRowProps> = ({
 							variant="subtle"
 							onClick={() => setShowLogs((v) => !v)}
 						>
-							<DropdownArrow close={showLogs} margin={false} />
+							<ChevronDownIcon open={showLogs} />
 							Logs
 						</Button>
 						<Divider orientation="vertical" variant="middle" flexItem />

site/src/modules/resources/PortForwardButton.tsx

@@ -21,6 +21,7 @@ import {
 	type WorkspaceAgentPortShareProtocol,
 	WorkspaceAppSharingLevels,
 } from "api/typesGenerated";
+import { ChevronDownIcon } from "components/AnimatedIcons/ChevronDown";
 import { Button } from "components/Button/Button";
 import {
 	HelpTooltipLink,
@@ -41,7 +42,6 @@ import {
 import { useFormik } from "formik";
 import {
 	BuildingIcon,
-	ChevronDownIcon,
 	ExternalLinkIcon,
 	LockIcon,
 	LockOpenIcon,

site/src/modules/resources/ResourceCard.tsx

@@ -1,8 +1,8 @@
 import type { Interpolation, Theme } from "@emotion/react";
 import IconButton from "@mui/material/IconButton";
 import type { WorkspaceAgent, WorkspaceResource } from "api/typesGenerated";
+import { ChevronDownIcon } from "components/AnimatedIcons/ChevronDown";
 import { CopyableValue } from "components/CopyableValue/CopyableValue";
-import { DropdownArrow } from "components/DropdownArrow/DropdownArrow";
 import { MemoizedInlineMarkdown } from "components/Markdown/Markdown";
 import { Stack } from "components/Stack/Stack";
 import {
@@ -174,10 +174,7 @@ export const ResourceCard: FC<ResourceCardProps> = ({ resource, agentRow }) => {
 								}}
 								size="large"
 							>
-								<DropdownArrow
-									margin={false}
-									close={shouldDisplayAllMetadata}
-								/>
+								<ChevronDownIcon open={shouldDisplayAllMetadata} />
 							</IconButton>
 						</TooltipTrigger>
 						<TooltipContent side="bottom">

site/src/modules/resources/Resources.tsx

@@ -1,6 +1,6 @@
 import type { WorkspaceAgent, WorkspaceResource } from "api/typesGenerated";
+import { ChevronDownIcon } from "components/AnimatedIcons/ChevronDown";
 import { Button } from "components/Button/Button";
-import { DropdownArrow } from "components/DropdownArrow/DropdownArrow";
 import { Stack } from "components/Stack/Stack";
 import { type FC, type JSX, useState } from "react";
 import { ResourceCard } from "./ResourceCard";
@@ -43,7 +43,10 @@ export const Resources: FC<ResourcesProps> = ({ resources, agentRow }) => {
 						onClick={() => setShouldDisplayHideResources((v) => !v)}
 					>
 						{shouldDisplayHideResources ? "Hide" : "Show hidden"} resources
-						<DropdownArrow close={shouldDisplayHideResources} />
+						<ChevronDownIcon
+							open={shouldDisplayHideResources}
+							className="ml-2"
+						/>
 					</Button>
 				</div>
 			)}

site/src/modules/resources/SSHButton/SSHButton.tsx

@@ -1,4 +1,5 @@
 import { deploymentSSHConfig } from "api/queries/deployment";
+import { ChevronDownIcon } from "components/AnimatedIcons/ChevronDown";
 import { Button } from "components/Button/Button";
 import { CodeExample } from "components/CodeExample/CodeExample";
 import {
@@ -12,7 +13,6 @@ import {
 	PopoverTrigger,
 } from "components/Popover/Popover";
 import { Stack } from "components/Stack/Stack";
-import { ChevronDownIcon } from "lucide-react";
 import type { FC } from "react";
 import { useQuery } from "react-query";
 import { docs } from "utils/docs";

site/src/modules/resources/VSCodeDesktopButton/VSCodeDesktopButton.tsx

@@ -2,9 +2,9 @@ import Menu from "@mui/material/Menu";
 import MenuItem from "@mui/material/MenuItem";
 import { API } from "api/api";
 import type { DisplayApp } from "api/typesGenerated";
+import { ChevronDownIcon } from "components/AnimatedIcons/ChevronDown";
 import { VSCodeIcon } from "components/Icons/VSCodeIcon";
 import { VSCodeInsidersIcon } from "components/Icons/VSCodeInsidersIcon";
-import { ChevronDownIcon } from "lucide-react";
 import { getVSCodeHref } from "modules/apps/apps";
 import { type FC, useRef, useState } from "react";
 import { AgentButton } from "../AgentButton";
@@ -63,7 +63,7 @@ export const VSCodeDesktopButton: FC<VSCodeDesktopButtonProps> = (props) => {
 					}}
 					size="icon-lg"
 				>
-					<ChevronDownIcon />
+					<ChevronDownIcon open={isVariantMenuOpen} />
 				</AgentButton>
 			</div>
 

site/src/modules/resources/VSCodeDevContainerButton/VSCodeDevContainerButton.tsx

@@ -2,9 +2,9 @@ import Menu from "@mui/material/Menu";
 import MenuItem from "@mui/material/MenuItem";
 import { API } from "api/api";
 import type { DisplayApp } from "api/typesGenerated";
+import { ChevronDownIcon } from "components/AnimatedIcons/ChevronDown";
 import { VSCodeIcon } from "components/Icons/VSCodeIcon";
 import { VSCodeInsidersIcon } from "components/Icons/VSCodeInsidersIcon";
-import { ChevronDownIcon } from "lucide-react";
 import { type FC, useRef, useState } from "react";
 import { AgentButton } from "../AgentButton";
 import { DisplayAppNameMap } from "../AppLink/AppLink";
@@ -67,7 +67,7 @@ export const VSCodeDevContainerButton: FC<VSCodeDevContainerButtonProps> = (
 					}}
 					size="icon-lg"
 				>
-					<ChevronDownIcon />
+					<ChevronDownIcon open={isVariantMenuOpen} />
 				</AgentButton>
 			</div>
 

site/src/modules/workspaces/WorkspaceTiming/WorkspaceTimings.tsx

@@ -6,10 +6,10 @@ import type {
 	AgentScriptTiming,
 	ProvisionerTiming,
 } from "api/typesGenerated";
+import { ChevronDownIcon } from "components/AnimatedIcons/ChevronDown";
 import { Button } from "components/Button/Button";
 import sortBy from "lodash/sortBy";
 import uniqBy from "lodash/uniqBy";
-import { ChevronDownIcon, ChevronUpIcon } from "lucide-react";
 import { type FC, useState } from "react";
 import {
 	calcDuration,
@@ -107,7 +107,7 @@ export const WorkspaceTimings: FC<WorkspaceTimingsProps> = ({
 				css={styles.collapseTrigger}
 				onClick={() => setIsOpen((o) => !o)}
 			>
-				{isOpen ? <ChevronUpIcon /> : <ChevronDownIcon />}
+				<ChevronDownIcon open={isOpen} className="size-4 mr-4" />
 				<span>Build timeline</span>
 				<span
 					css={(theme) => ({

site/src/pages/AIBridgePage/RequestLogsPage/RequestLogsRow/RequestLogsRow.tsx

@@ -8,12 +8,7 @@ import {
 	TooltipProvider,
 	TooltipTrigger,
 } from "components/Tooltip/Tooltip";
-import {
-	ArrowDownIcon,
-	ArrowUpIcon,
-	ChevronDownIcon,
-	ChevronRightIcon,
-} from "lucide-react";
+import { ArrowDownIcon, ArrowUpIcon, ChevronRightIcon } from "lucide-react";
 import { type FC, Fragment, useState } from "react";
 import { cn } from "utils/cn";
 import { formatDate, humanDuration } from "utils/time";
@@ -143,7 +138,9 @@ export const RequestLogsRow: FC<RequestLogsRowProps> = ({ interception }) => {
 							isOpen && "text-content-primary",
 						])}
 					>
-						{isOpen ? <ChevronDownIcon /> : <ChevronRightIcon />}
+						<ChevronRightIcon
+							className={cn("mr-4 transition-transform", isOpen && "rotate-90")}
+						/>
 						<span className="sr-only">({isOpen ? "Hide" : "Show more"})</span>
 						{formatDate(new Date(interception.started_at))}
 					</div>

site/src/pages/AuditPage/AuditLogRow/AuditLogRow.tsx

@@ -1,10 +1,10 @@
 import type { AuditLog, BuildReason } from "api/typesGenerated";
+import { ChevronDownIcon } from "components/AnimatedIcons/ChevronDown";
 import { Avatar } from "components/Avatar/Avatar";
 import {
 	Collapsible,
 	CollapsibleContent,
 } from "components/Collapsible/Collapsible";
-import { DropdownArrow } from "components/DropdownArrow/DropdownArrow";
 import { Link } from "components/Link/Link";
 import { StatusPill } from "components/StatusPill/StatusPill";
 import { TableCell } from "components/Table/Table";
@@ -238,7 +238,7 @@ export const AuditLogRow: FC<AuditLogRowProps> = ({
 
 						{shouldDisplayDiff ? (
 							<div>
-								<DropdownArrow close={isDiffOpen} />
+								<ChevronDownIcon open={isDiffOpen} className="ml-2" />
 							</div>
 						) : (
 							<div className="ml-6" />

site/src/pages/OrganizationSettingsPage/OrganizationProvisionerJobsPage/JobRow.tsx

@@ -3,11 +3,7 @@ import { Avatar } from "components/Avatar/Avatar";
 import { Badge } from "components/Badge/Badge";
 import { Button } from "components/Button/Button";
 import { TableCell, TableRow } from "components/Table/Table";
-import {
-	ChevronDownIcon,
-	ChevronRightIcon,
-	TriangleAlertIcon,
-} from "lucide-react";
+import { ChevronRightIcon, TriangleAlertIcon } from "lucide-react";
 import { JobStatusIndicator } from "modules/provisioners/JobStatusIndicator";
 import {
 	ProvisionerTag,
@@ -48,7 +44,9 @@ export const JobRow: FC<JobRowProps> = ({ job, defaultIsOpen = false }) => {
 							setIsOpen((v) => !v);
 						}}
 					>
-						{isOpen ? <ChevronDownIcon /> : <ChevronRightIcon />}
+						<ChevronRightIcon
+							className={cn("mr-4 transition-transform", isOpen && "rotate-90")}
+						/>
 						<span className="sr-only">({isOpen ? "Hide" : "Show more"})</span>
 						<span className="block first-letter:uppercase">
 							{relativeTime(new Date(job.created_at))}

site/src/pages/OrganizationSettingsPage/OrganizationProvisionerKeysPage/ProvisionerKeyRow.tsx

@@ -2,7 +2,7 @@ import type { ProvisionerDaemon, ProvisionerKey } from "api/typesGenerated";
 import { Badge } from "components/Badge/Badge";
 import { Button } from "components/Button/Button";
 import { TableCell, TableRow } from "components/Table/Table";
-import { ChevronDownIcon, ChevronRightIcon } from "lucide-react";
+import { ChevronRightIcon } from "lucide-react";
 import {
 	ProvisionerTag,
 	ProvisionerTags,
@@ -39,7 +39,9 @@ export const ProvisionerKeyRow: FC<ProvisionerKeyRowProps> = ({
 						])}
 						onClick={() => setIsOpen((v) => !v)}
 					>
-						{isOpen ? <ChevronDownIcon /> : <ChevronRightIcon />}
+						<ChevronRightIcon
+							className={cn("mr-4 transition-transform", isOpen && "rotate-90")}
+						/>
 						<span className="sr-only">({isOpen ? "Hide" : "Show more"})</span>
 						{provisionerKey.name}
 					</Button>

site/src/pages/OrganizationSettingsPage/OrganizationProvisionersPage/ProvisionerRow.tsx

@@ -9,7 +9,7 @@ import {
 	type StatusIndicatorProps,
 } from "components/StatusIndicator/StatusIndicator";
 import { TableCell, TableRow } from "components/Table/Table";
-import { ChevronDownIcon, ChevronRightIcon } from "lucide-react";
+import { ChevronRightIcon } from "lucide-react";
 import { JobStatusIndicator } from "modules/provisioners/JobStatusIndicator";
 import {
 	ProvisionerTag,
@@ -60,7 +60,9 @@ export const ProvisionerRow: FC<ProvisionerRowProps> = ({
 							setIsOpen((v) => !v);
 						}}
 					>
-						{isOpen ? <ChevronDownIcon /> : <ChevronRightIcon />}
+						<ChevronRightIcon
+							className={cn("mr-4 transition-transform", isOpen && "rotate-90")}
+						/>
 						<span className="sr-only">({isOpen ? "Hide" : "Show more"})</span>
 						{provisioner.name}
 					</Button>

site/src/pages/TemplatePage/TemplateInsightsPage/IntervalMenu.tsx

@@ -1,3 +1,4 @@
+import { ChevronDownIcon } from "components/AnimatedIcons/ChevronDown";
 import { Button } from "components/Button/Button";
 import {
 	DropdownMenu,
@@ -6,7 +7,6 @@ import {
 	DropdownMenuRadioItem,
 	DropdownMenuTrigger,
 } from "components/DropdownMenu/DropdownMenu";
-import { ChevronDownIcon } from "lucide-react";
 import type { FC } from "react";
 
 const insightsIntervals = {

site/src/pages/TemplatePage/TemplateInsightsPage/WeekPicker.tsx

@@ -1,3 +1,4 @@
+import { ChevronDownIcon } from "components/AnimatedIcons/ChevronDown";
 import { Button } from "components/Button/Button";
 import {
 	DropdownMenu,
@@ -7,7 +8,6 @@ import {
 	DropdownMenuTrigger,
 } from "components/DropdownMenu/DropdownMenu";
 import dayjs from "dayjs";
-import { ChevronDownIcon } from "lucide-react";
 import type { FC } from "react";
 import type { DateRangeValue } from "./DateRange";
 import { lastWeeks } from "./utils";

site/src/pages/TemplateVersionEditorPage/ProvisionerTagsPopover.tsx

@@ -1,6 +1,7 @@
 import Link from "@mui/material/Link";
 import useTheme from "@mui/system/useTheme";
 import type { ProvisionerDaemon } from "api/typesGenerated";
+import { ChevronDownIcon } from "components/AnimatedIcons/ChevronDown";
 import { FormSection } from "components/Form/Form";
 import { TopbarButton } from "components/FullPageLayout/Topbar";
 import {
@@ -8,7 +9,6 @@ import {
 	PopoverContent,
 	PopoverTrigger,
 } from "components/Popover/Popover";
-import { ChevronDownIcon } from "lucide-react";
 import { ProvisionerTagsField } from "modules/provisioners/ProvisionerTagsField";
 import type { FC } from "react";
 import { docs } from "utils/docs";
@@ -28,7 +28,7 @@ export const ProvisionerTagsPopover: FC<ProvisionerTagsPopoverProps> = ({
 		<Popover>
 			<PopoverTrigger asChild>
 				<TopbarButton color="neutral" size="icon">
-					<ChevronDownIcon />
+					<ChevronDownIcon className="size-icon-xs" />
 					<span className="sr-only">Expand provisioner tags</span>
 				</TopbarButton>
 			</PopoverTrigger>

site/src/pages/WorkspacePage/AppStatuses.tsx

@@ -4,6 +4,7 @@ import type {
 	WorkspaceAgent,
 	WorkspaceApp,
 } from "api/typesGenerated";
+import { ChevronDownIcon } from "components/AnimatedIcons/ChevronDown";
 import { Button } from "components/Button/Button";
 import { ExternalImage } from "components/ExternalImage/ExternalImage";
 import { ScrollArea } from "components/ScrollArea/ScrollArea";
@@ -13,13 +14,7 @@ import {
 	TooltipTrigger,
 } from "components/Tooltip/Tooltip";
 import capitalize from "lodash/capitalize";
-import {
-	ChevronDownIcon,
-	ChevronUpIcon,
-	ExternalLinkIcon,
-	FileIcon,
-	LayoutGridIcon,
-} from "lucide-react";
+import { ExternalLinkIcon, FileIcon, LayoutGridIcon } from "lucide-react";
 import { AppStatusStateIcon } from "modules/apps/AppStatusStateIcon";
 import { useAppLink } from "modules/apps/useAppLink";
 import { type FC, useState } from "react";
@@ -122,7 +117,7 @@ export const AppStatuses: FC<AppStatusesProps> = ({
 									setDisplayStatuses((display) => !display);
 								}}
 							>
-								{displayStatuses ? <ChevronUpIcon /> : <ChevronDownIcon />}
+								<ChevronDownIcon />
 							</Button>
 						</TooltipTrigger>
 						<TooltipContent>

site/src/pages/WorkspacePage/WorkspaceActions/BuildParametersPopover.tsx

@@ -6,6 +6,7 @@ import type {
 	Workspace,
 	WorkspaceBuildParameter,
 } from "api/typesGenerated";
+import { ChevronDownIcon } from "components/AnimatedIcons/ChevronDown";
 import { Button } from "components/Button/Button";
 import { FormFields } from "components/Form/Form";
 import { TopbarButton } from "components/FullPageLayout/Topbar";
@@ -24,7 +25,6 @@ import {
 } from "components/Popover/Popover";
 import { RichParameterInput } from "components/RichParameterInput/RichParameterInput";
 import { useFormik } from "formik";
-import { ChevronDownIcon } from "lucide-react";
 import { type FC, useState } from "react";
 import { useQuery } from "react-query";
 import { docs } from "utils/docs";

site/src/pages/WorkspacesPage/WorkspacesButton.tsx

@@ -1,5 +1,6 @@
 import Link from "@mui/material/Link";
 import type { Template } from "api/typesGenerated";
+import { ChevronDownIcon } from "components/AnimatedIcons/ChevronDown";
 import { Avatar } from "components/Avatar/Avatar";
 import { Button } from "components/Button/Button";
 import { Loader } from "components/Loader/Loader";
@@ -11,7 +12,7 @@ import {
 	PopoverTrigger,
 } from "components/Popover/Popover";
 import { SearchEmpty } from "components/Search/Search";
-import { ChevronDownIcon, ExternalLinkIcon } from "lucide-react";
+import { ExternalLinkIcon } from "lucide-react";
 import { linkToTemplate, useLinks } from "modules/navigation";
 import { type FC, type ReactNode, useState } from "react";
 import type { UseQueryResult } from "react-query";

site/src/pages/WorkspacesPage/WorkspacesPageView.tsx

@@ -1,6 +1,7 @@
 import { hasError, isApiValidationError } from "api/errors";
 import type { Template, Workspace } from "api/typesGenerated";
 import { ErrorAlert } from "components/Alert/ErrorAlert";
+import { ChevronDownIcon } from "components/AnimatedIcons/ChevronDown";
 import { Button } from "components/Button/Button";
 import {
 	DropdownMenu,
@@ -17,13 +18,7 @@ import { PaginationWidgetBase } from "components/PaginationWidget/PaginationWidg
 import { Spinner } from "components/Spinner/Spinner";
 import { Stack } from "components/Stack/Stack";
 import { TableToolbar } from "components/TableToolbar/TableToolbar";
-import {
-	ChevronDownIcon,
-	CloudIcon,
-	PlayIcon,
-	SquareIcon,
-	TrashIcon,
-} from "lucide-react";
+import { CloudIcon, PlayIcon, SquareIcon, TrashIcon } from "lucide-react";
 import { WorkspacesTable } from "pages/WorkspacesPage/WorkspacesTable";
 import type { FC } from "react";
 import type { UseQueryResult } from "react-query";