Marco
4f95a347dc
Matches the original icon-arrow-connector.svg's own default color, just bolder (strokeWidth 2.5 vs. 1.5) and better-shaped than the original.
27 lines
1.3 KiB
TypeScript
27 lines
1.3 KiB
TypeScript
// Shared "how it works" step connector — used by Challenge's, /todo-cards's,
|
|
// and /newsletter's ("Impulse & Tipps") step sections. Used to be
|
|
// /icon-arrow-connector.svg (a thin gray line+chevron) loaded via next/image;
|
|
// replaced 2026-07-24 for two reasons that both needed an inline SVG to fix:
|
|
// 1. It read as a faint gray line, not a real arrow, even after the
|
|
// object-contain aspect-ratio fix — too thin/subtle at these sizes.
|
|
// 2. Its color lives in a `var(--stroke-0, #C9C9C9)` CSS custom property
|
|
// that's scoped to the SVG file's own document when loaded via <img
|
|
// src>/next/image — un-recolorable from the host page's CSS. Inline SVG
|
|
// sidesteps that entirely. Stroke color: tried brand orange, then
|
|
// near-black, settled on the same light gray (#C9C9C9) the original
|
|
// asset's own fallback used, per feedback the same day — just bolder
|
|
// (strokeWidth 2.5 vs. the original's thin 1.5) and better-shaped.
|
|
export function StepArrow({ className }: { className?: string }) {
|
|
return (
|
|
<svg width="40" height="16" viewBox="0 0 40 16" fill="none" aria-hidden="true" className={className}>
|
|
<path
|
|
d="M1 8H33M26 14.5L34.5 8L26 1.5"
|
|
stroke="#C9C9C9"
|
|
strokeWidth="2.5"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
/>
|
|
</svg>
|
|
);
|
|
}
|