Focus.tsx icons: match /todo-cards' actual icon style

Bold uniform-weight black outline, no fill, no circle badge — same
language as tool-icon-todo-karten.png / icon-step-2.png / icon-step-3.png,
not the brand-orange circle-badge treatment tried previously.
This commit is contained in:
Marco
2026-08-25 13:33:21 +00:00
parent 6debcd5a46
commit b59c9a0e4b
+7 -10
View File
@@ -1,18 +1,15 @@
import type { ReactNode } from "react";
import { Reveal, RevealGroup, RevealItem } from "../../components/Reveal";
// Circle-badge + brand-orange stroke — same treatment as
// todo-cards/HowItWorks.tsx's step-3 checkmark icon (a stroked circle
// around the glyph) and this page's own IconCheck (brand-orange #f6a701
// stroke), instead of the earlier plain black line icons, which read as a
// different, colder icon language than the rest of the site.
// Bold black outline, no fill, no container — matching /todo-cards' own
// icon language (tool-icon-todo-karten.png, icon-step-2.png/icon-step-3.png:
// thick uniform-weight black stroke, no color fill, no circle/badge
// wrapper), not the thinner colored-badge treatment tried first.
function IconBadge({ children }: { children: ReactNode }) {
return (
<div className="size-16 rounded-full border-2 border-brand flex items-center justify-center shrink-0">
<svg width="28" height="28" viewBox="0 0 28 28" fill="none" strokeWidth="1.6" stroke="#f6a701" strokeLinecap="round" strokeLinejoin="round">
{children}
</svg>
</div>
<svg width="56" height="56" viewBox="0 0 28 28" fill="none" strokeWidth="2.2" stroke="#231f20" strokeLinecap="round" strokeLinejoin="round" className="h-14 w-auto shrink-0">
{children}
</svg>
);
}