diff options
| -rw-r--r-- | apps/web/src/components/editor/panels/timeline/timeline-toolbar.tsx | 3 | ||||
| -rw-r--r-- | apps/web/src/components/icons/ui.tsx | 48 |
2 files changed, 50 insertions, 1 deletions
diff --git a/apps/web/src/components/editor/panels/timeline/timeline-toolbar.tsx b/apps/web/src/components/editor/panels/timeline/timeline-toolbar.tsx index fc038d7a..f398264c 100644 --- a/apps/web/src/components/editor/panels/timeline/timeline-toolbar.tsx +++ b/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()} diff --git a/apps/web/src/components/icons/ui.tsx b/apps/web/src/components/icons/ui.tsx index e5ba731e..e5787027 100644 --- a/apps/web/src/components/icons/ui.tsx +++ b/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>
+ );
+}
+
|