style: swap ripple icon

apps/web/src/components/editor/panels/timeline/timeline-toolbar.tsx

@@ -37,6 +37,7 @@ import {
 	Chart03Icon,
 } from "@hugeicons/core-free-icons";
 import { HugeiconsIcon } from "@hugeicons/react";
+import { OcRippleIcon } from "@/components/icons";
 
 export function TimelineToolbar({
 	zoomLevel,
@@ -216,7 +217,7 @@ function ToolbarRightSection({
 				/>
 
 				<ToolbarButton
-					icon={<HugeiconsIcon icon={Link04Icon} className="scale-110" />}
+					icon={<OcRippleIcon size={24} className="scale-110" />}
 					isActive={rippleEditingEnabled}
 					tooltip="Ripple editing"
 					onClick={() => toggleRippleEditing()}

apps/web/src/components/icons/ui.tsx

@@ -354,3 +354,51 @@ export function OcSquarePlusIcon({
 	);
 }
 
+export function OcRippleIcon({
+	className = "",
+	size = 24,
+	strokeWidth = 1.5,
+}: IconProps) {
+	return (
+		<svg
+			width={size}
+			height={size}
+			viewBox="0 0 24 24"
+			fill="none"
+			xmlns="http://www.w3.org/2000/svg"
+			aria-hidden
+			className={className}
+		>
+			<title>Ripple</title>
+			<path
+				d="M5 9C4.39316 9.58984 2 11.1597 2 12C2 12.8403 4.39316 14.4102 5 15"
+				stroke="currentColor"
+				strokeWidth={strokeWidth}
+				strokeLinecap="round"
+				strokeLinejoin="round"
+			/>
+			<path
+				d="M19 9C19.6068 9.58984 22 11.1597 22 12C22 12.8403 19.6068 14.4102 19 15"
+				stroke="currentColor"
+				strokeWidth={strokeWidth}
+				strokeLinecap="round"
+				strokeLinejoin="round"
+			/>
+			<path
+				d="M2.42285 11.9795H21.868"
+				stroke="currentColor"
+				strokeWidth={strokeWidth}
+				strokeLinecap="round"
+				strokeLinejoin="round"
+			/>
+			<path
+				d="M12.1454 21.7021L12.1454 2.25692"
+				stroke="currentColor"
+				strokeWidth={strokeWidth}
+				strokeLinecap="round"
+				strokeLinejoin="round"
+			/>
+		</svg>
+	);
+}
+