Fix LogoTextSVG eye cutouts to match brand mark

Author: Rieranthony

apps/web/src/app/promo-video/promo-video-page.tsx

@@ -425,10 +425,7 @@ export function PromoLogoEndScene({
 								type: "spring",
 							}}
 						>
-							<LogoTextSVG
-								className="w-[min(78%,980px)] text-primary"
-								eyeFill="var(--background)"
-							/>
+							<LogoTextSVG className="w-[min(78%,980px)] text-primary" />
 						</motion.div>
 					) : null}
 				</AnimatePresence>

apps/web/src/components/ui/logo.test.tsx

@@ -4,18 +4,10 @@ import { renderToStaticMarkup } from "react-dom/server";
 import { LogoTextSVG } from "./logo";
 
 describe("LogoTextSVG", () => {
-	it("keeps the eye cutouts transparent by default", () => {
+	it("renders the logo mark as a single punched-out shape", () => {
 		const html = renderToStaticMarkup(<LogoTextSVG />);
 
-		expect(html).toContain('fill="transparent"');
-	});
-
-	it("supports overriding the eye fill for promo scenes", () => {
-		const html = renderToStaticMarkup(
-			<LogoTextSVG eyeFill="var(--background)" />
-		);
-
-		expect(html).toContain('fill="var(--background)"');
-		expect(html).not.toContain('fill="transparent"');
+		expect(html.match(/<path/g)?.length).toBe(2);
+		expect(html).toContain('fill-rule="evenodd"');
 	});
 });

apps/web/src/components/ui/logo.tsx

@@ -1,8 +1,9 @@
+"use client";
+import { usePathname } from "next/navigation";
 import { cn } from "@/lib/utils";
 
 type Props = {
 	className?: string;
-	eyeFill?: string;
 };
 
 export function Logo({ className }: Props) {
@@ -25,6 +26,8 @@ export function Logo({ className }: Props) {
 }
 
 export function LogoText({ className }: Props) {
+	const pathname = usePathname() ?? "";
+	const isDocs = pathname.startsWith("/docs");
 	return (
 		<span
 			className={cn(
@@ -33,12 +36,12 @@ export function LogoText({ className }: Props) {
 			)}
 		>
 			<Logo className="mt-1 h-4.5" />
-			cossistant
+			cossistant {isDocs ? "docs" : ""}
 		</span>
 	);
 }
 
-export function LogoTextSVG({ className, eyeFill = "transparent" }: Props) {
+export function LogoTextSVG({ className }: Props) {
 	return (
 		<svg
 			className={className}
@@ -54,16 +57,10 @@ export function LogoTextSVG({ className, eyeFill = "transparent" }: Props) {
 				fill="currentColor"
 			/>
 			<path
-				d="M0.268813 91.3819L34.5395 59.2561L149.718 59.2561L183.988 91.3819L183.988 210L149.718 210L34.5395 210L0.268809 178.228L0.268813 91.3819Z"
+				clipRule="evenodd"
+				d="M0.268813 91.3819L34.5395 59.2561L149.718 59.2561L183.988 91.3819L183.988 210L149.718 210L34.5395 210L0.268809 178.228L0.268813 91.3819ZM95.6992 124.672L95.7955 138.043H108.954L108.836 130.956C108.836 125.777 110.07 124.799 115.556 124.799H127.599C133.086 124.799 133.903 125.777 133.903 131.364V138.043H147.195V124.669C147.195 122.757 146.451 120.92 145.12 119.547L139.06 113.295C137.674 111.865 135.767 111.057 133.775 111.057H108.992C106.983 111.057 105.062 111.878 103.674 113.33L97.7406 119.532C96.4177 120.914 95.6854 122.758 95.6992 124.672ZM29.4619 124.672L29.5581 138.043H42.7162L42.5985 130.956C42.5985 125.777 43.8328 124.799 49.3191 124.799H61.362C66.8483 124.799 67.6657 125.777 67.6657 131.364V138.043H80.9576V124.669C80.9576 122.757 80.2134 120.92 78.8827 119.547L72.8228 113.295C71.4366 111.865 69.5299 111.057 67.5381 111.057H42.7545C40.746 111.057 38.8248 111.878 37.4364 113.33L31.5033 119.532C30.1804 120.914 29.4481 122.758 29.4619 124.672Z"
 				fill="currentColor"
-			/>
-			<path
-				d="M95.6992 124.672L95.7955 138.043H108.954L108.836 130.956C108.836 125.777 110.07 124.799 115.556 124.799H127.599C133.086 124.799 133.903 125.777 133.903 131.364V138.043H147.195V124.669C147.195 122.757 146.451 120.92 145.12 119.547L139.06 113.295C137.674 111.865 135.767 111.057 133.775 111.057H108.992C106.983 111.057 105.062 111.878 103.674 113.33L97.7406 119.532C96.4177 120.914 95.6854 122.758 95.6992 124.672Z"
-				fill={eyeFill}
-			/>
-			<path
-				d="M29.4619 124.672L29.5581 138.043H42.7162L42.5985 130.956C42.5985 125.777 43.8328 124.799 49.3191 124.799H61.362C66.8483 124.799 67.6657 125.777 67.6657 131.364V138.043H80.9576V124.669C80.9576 122.757 80.2134 120.92 78.8827 119.547L72.8228 113.295C71.4366 111.865 69.5299 111.057 67.5381 111.057H42.7545C40.746 111.057 38.8248 111.878 37.4364 113.33L31.5033 119.532C30.1804 120.914 29.4481 122.758 29.4619 124.672Z"
-				fill={eyeFill}
+				fillRule="evenodd"
 			/>
 		</svg>
 	);