feat(FN-1212): update header with circular Fusion logo
- Replace the header SVG mark with a circular outline and filled path-based glyph using currentColor - Keep logo semantics and ordering intact while modernizing the visual treatment - Update Header tests to assert currentColor-based geometry and verify the stroked outer circle
This commit is contained in:
@@ -272,10 +272,17 @@ export function Header({
|
|||||||
aria-label="Fusion logo"
|
aria-label="Fusion logo"
|
||||||
role="img"
|
role="img"
|
||||||
>
|
>
|
||||||
<circle cx="44" cy="44" r="20" fill="currentColor" />
|
<circle
|
||||||
<circle cx="84" cy="44" r="20" fill="currentColor" />
|
cx="64"
|
||||||
<circle cx="44" cy="84" r="20" fill="currentColor" />
|
cy="64"
|
||||||
<circle cx="84" cy="84" r="20" fill="currentColor" />
|
r="52"
|
||||||
|
stroke="currentColor"
|
||||||
|
strokeWidth="8"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
d="M26 101C44 82 62 64 82 45C90 37 98 30 104 24C96 35 89 47 81 60C70 79 57 95 43 108C38 112 32 108 26 101Z"
|
||||||
|
fill="currentColor"
|
||||||
|
/>
|
||||||
</svg>
|
</svg>
|
||||||
<h1 className="logo">Fusion</h1>
|
<h1 className="logo">Fusion</h1>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -49,9 +49,16 @@ describe("Header", () => {
|
|||||||
const logo = screen.getByLabelText("Fusion logo");
|
const logo = screen.getByLabelText("Fusion logo");
|
||||||
expect(logo).toBeDefined();
|
expect(logo).toBeDefined();
|
||||||
expect(logo.tagName.toLowerCase()).toBe("svg");
|
expect(logo.tagName.toLowerCase()).toBe("svg");
|
||||||
// The SVG should have the currentColor" fill
|
|
||||||
const circles = logo.querySelectorAll("circle");
|
// The SVG should expose currentColor-driven geometry for theme-aware coloring
|
||||||
expect(circles).toHaveLength(4);
|
const currentColorShapes = logo.querySelectorAll(
|
||||||
|
'[fill="currentColor"], [stroke="currentColor"]'
|
||||||
|
);
|
||||||
|
expect(currentColorShapes.length).toBeGreaterThan(0);
|
||||||
|
|
||||||
|
// The new logo keeps a single outer circle boundary
|
||||||
|
const outerCircle = logo.querySelector("circle[stroke='currentColor']");
|
||||||
|
expect(outerCircle).not.toBeNull();
|
||||||
});
|
});
|
||||||
|
|
||||||
it("renders the logo before the h1 element", () => {
|
it("renders the logo before the h1 element", () => {
|
||||||
|
|||||||
Reference in New Issue
Block a user