Replace Unicode "←" with an SVG icon in cart's "Weiter einkaufen" links
Same font-fallback bug ArrowRightIcon.tsx already documents and fixed for "→" elsewhere (Tools.tsx, Blog.tsx, ProductGrid.tsx) — the site's custom web fonts don't cover U+2190, so it fell back to a system font whose vertical metrics sit visibly low on mobile. Missed in that earlier pass since CartContent.tsx uses the left-pointing twin.
This commit is contained in:
@@ -13,6 +13,7 @@ import { formatPrice, discountPercent } from "../../lib/format";
|
||||
import { Reveal } from "../../components/Reveal";
|
||||
import { VersandModal } from "../../components/VersandModal";
|
||||
import { VatBreakdown } from "../../components/VatBreakdown";
|
||||
import { ArrowLeftIcon } from "../../components/ArrowLeftIcon";
|
||||
import { FreeShippingBanner } from "./FreeShippingBanner";
|
||||
import type { TrustBadge, ShippingSettings } from "../../lib/payload";
|
||||
|
||||
@@ -163,7 +164,7 @@ export function CartContent({
|
||||
href="/shop"
|
||||
className="flex gap-2 items-center text-text-primary hover:text-brand transition-colors"
|
||||
>
|
||||
<span aria-hidden>←</span>
|
||||
<ArrowLeftIcon />
|
||||
<span className="font-bold text-body-sm">Weiter einkaufen</span>
|
||||
</Link>
|
||||
</Reveal>
|
||||
|
||||
@@ -0,0 +1,13 @@
|
||||
// Mirror of ArrowRightIcon.tsx — same reasoning applies here: the Unicode
|
||||
// "←" (U+2190) previously used inline in CartContent.tsx's "Weiter
|
||||
// einkaufen" links isn't covered by the site's custom web fonts, so it
|
||||
// fell back to a system font whose vertical metrics sit visibly low on
|
||||
// mobile relative to the label text next to it. An SVG has no
|
||||
// font-fallback path — renders identically everywhere.
|
||||
export function ArrowLeftIcon() {
|
||||
return (
|
||||
<svg aria-hidden width="16" height="12" viewBox="0 0 16 12" fill="none" className="shrink-0">
|
||||
<path d="M15 6H1M1 6L4 3M1 6L4 9" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user