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:
@@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user