diff options
| author | Maze Winther <mazewinther@gmail.com> | 2026-03-29 22:31:26 +0200 |
|---|---|---|
| committer | Maze Winther <mazewinther@gmail.com> | 2026-03-29 22:31:26 +0200 |
| commit | 5cc6abc3a44c9d046a1cb71a8c916f1d35827e8f (patch) | |
| tree | f82e242738058ed4b5f96c20a557ba9bd6005853 /apps/web | |
| parent | 77a14b1023eb5774d43becf2967b7ffdb4a51048 (diff) | |
| download | opencut-5cc6abc3a44c9d046a1cb71a8c916f1d35827e8f.tar.gz | |
style: swap ripple icon
Diffstat (limited to 'apps/web')
| -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>
+ );
+}
+
|