fix: increase spacing between step badges and title labels in auto-sync SVG

This commit is contained in:
MinaSaad1 2026-04-02 16:49:31 +02:00
parent 32aad78e5d
commit 2636bd5aae

View file

@ -19,9 +19,9 @@
<!-- Step 1: CLI Writes -->
<rect x="60" y="75" width="160" height="165" rx="10" fill="#161b22" stroke="#58a6ff" stroke-width="1.5"/>
<!-- Step badge -->
<circle cx="140" cy="100" r="14" fill="#58a6ff"/>
<text x="140" y="106" font-family="'Segoe UI', Arial, sans-serif" font-size="15" fill="#0d1117" text-anchor="middle" font-weight="bold">1</text>
<text x="140" y="128" font-family="'Segoe UI', Arial, sans-serif" font-size="14" fill="#58a6ff" text-anchor="middle" font-weight="bold">CLI Writes</text>
<circle cx="140" cy="92" r="14" fill="#58a6ff"/>
<text x="140" y="98" font-family="'Segoe UI', Arial, sans-serif" font-size="15" fill="#0d1117" text-anchor="middle" font-weight="bold">1</text>
<text x="140" y="134" font-family="'Segoe UI', Arial, sans-serif" font-size="14" fill="#58a6ff" text-anchor="middle" font-weight="bold">CLI Writes</text>
<!-- File icon -->
<g transform="translate(110, 140)">
<rect x="0" y="0" width="32" height="40" rx="3" fill="none" stroke="#58a6ff" stroke-width="1.5"/>
@ -42,9 +42,9 @@
<!-- Step 2: Snapshot -->
<rect x="258" y="75" width="160" height="165" rx="10" fill="#161b22" stroke="#F2C811" stroke-width="1.5"/>
<circle cx="338" cy="100" r="14" fill="#F2C811"/>
<text x="338" y="106" font-family="'Segoe UI', Arial, sans-serif" font-size="15" fill="#0d1117" text-anchor="middle" font-weight="bold">2</text>
<text x="338" y="128" font-family="'Segoe UI', Arial, sans-serif" font-size="14" fill="#F2C811" text-anchor="middle" font-weight="bold">Snapshot</text>
<circle cx="338" cy="92" r="14" fill="#F2C811"/>
<text x="338" y="98" font-family="'Segoe UI', Arial, sans-serif" font-size="15" fill="#0d1117" text-anchor="middle" font-weight="bold">2</text>
<text x="338" y="134" font-family="'Segoe UI', Arial, sans-serif" font-size="14" fill="#F2C811" text-anchor="middle" font-weight="bold">Snapshot</text>
<!-- Camera icon -->
<g transform="translate(308, 140)">
<rect x="0" y="10" width="50" height="34" rx="5" fill="none" stroke="#F2C811" stroke-width="1.5"/>
@ -61,9 +61,9 @@
<!-- Step 3: Desktop Saves -->
<rect x="456" y="75" width="160" height="165" rx="10" fill="#161b22" stroke="#06d6a0" stroke-width="1.5"/>
<circle cx="536" cy="100" r="14" fill="#06d6a0"/>
<text x="536" y="106" font-family="'Segoe UI', Arial, sans-serif" font-size="15" fill="#0d1117" text-anchor="middle" font-weight="bold">3</text>
<text x="536" y="128" font-family="'Segoe UI', Arial, sans-serif" font-size="14" fill="#06d6a0" text-anchor="middle" font-weight="bold">Desktop Saves</text>
<circle cx="536" cy="92" r="14" fill="#06d6a0"/>
<text x="536" y="98" font-family="'Segoe UI', Arial, sans-serif" font-size="15" fill="#0d1117" text-anchor="middle" font-weight="bold">3</text>
<text x="536" y="134" font-family="'Segoe UI', Arial, sans-serif" font-size="14" fill="#06d6a0" text-anchor="middle" font-weight="bold">Desktop Saves</text>
<!-- Save icon with checkmark -->
<g transform="translate(508, 140)">
<rect x="0" y="0" width="44" height="44" rx="5" fill="none" stroke="#06d6a0" stroke-width="1.5"/>
@ -81,9 +81,9 @@
<!-- Step 4: Re-apply + Reopen -->
<rect x="654" y="75" width="160" height="165" rx="10" fill="#161b22" stroke="#d97757" stroke-width="1.5"/>
<circle cx="734" cy="100" r="14" fill="#d97757"/>
<text x="734" y="106" font-family="'Segoe UI', Arial, sans-serif" font-size="15" fill="#0d1117" text-anchor="middle" font-weight="bold">4</text>
<text x="734" y="128" font-family="'Segoe UI', Arial, sans-serif" font-size="14" fill="#d97757" text-anchor="middle" font-weight="bold">Reopen</text>
<circle cx="734" cy="92" r="14" fill="#d97757"/>
<text x="734" y="98" font-family="'Segoe UI', Arial, sans-serif" font-size="15" fill="#0d1117" text-anchor="middle" font-weight="bold">4</text>
<text x="734" y="134" font-family="'Segoe UI', Arial, sans-serif" font-size="14" fill="#d97757" text-anchor="middle" font-weight="bold">Reopen</text>
<!-- Refresh/cycle icon -->
<g transform="translate(706, 140)">
<path d="M 24,2 A 22,22 0 1,1 2,24" fill="none" stroke="#d97757" stroke-width="2.5" stroke-linecap="round"/>

Before

Width:  |  Height:  |  Size: 8.7 KiB

After

Width:  |  Height:  |  Size: 8.7 KiB