style(studio): make the auto-keyframe toggle icon a diamond with a record dot

Reuses the same diamond outline as the Add-keyframe icon next to it, with a
small dot inside carrying the on/off state (filled = auto-recording, hollow
= manual edits won't be keyframed) — pairs the two icons visually instead of
an unrelated circle/slash glyph.
This commit is contained in:
Miguel Angel Simon Sierra
2026-07-01 19:41:10 -07:00
parent 636d5dd6c5
commit ae50327bdb
@@ -194,26 +194,19 @@ export function TimelineToolbar({
: "text-neutral-600 hover:text-neutral-400"
}`}
>
<svg width="14" height="14" viewBox="0 0 14 14" fill="none">
<svg width="18" height="18" viewBox="0 0 10 10" fill="none">
{/* Same diamond outline as the Add-keyframe icon, with a
record-style dot inside: filled = auto-recording,
hollow = manual edits won't be keyframed. */}
<path d="M5 0.7L9.3 5L5 9.3L0.7 5Z" stroke="currentColor" strokeWidth="1" />
<circle
cx="7"
cy="7"
r="5"
cx="5"
cy="5"
r="1.8"
fill={autoKeyframeEnabled ? "currentColor" : "none"}
stroke="currentColor"
strokeWidth="1.4"
strokeWidth="1"
/>
{!autoKeyframeEnabled && (
<line
x1="2.2"
y1="11.8"
x2="11.8"
y2="2.2"
stroke="currentColor"
strokeWidth="1.4"
strokeLinecap="round"
/>
)}
</svg>
</button>
</Tooltip>