Redesign header icons/account-cart chip, light footer, fix sticky-footer gap
- New shared SVG icon set (src/components/ui/icons.tsx): Menu, User, Cart, Close, ChevronLeft — replaces emoji (☰ 👤 🛒 ✕) across the header, and the literal "←" text arrow on every "view more"-style link (SectionTitle's action, the mega-menu link, BlogCarousel's "ادامه مطلب"). - Header desktop account/cart area redesigned as a borderless chip: cart icon button (right) + divider + account icon-badge/two-line "حساب کاربری / ورود/ثبتنام" (left), matching a supplied reference. Got the RTL DOM order backwards on the first pass (cart needs to be first in DOM to render rightmost) and corrected it. - Header logo: -10px (was already doubled from an earlier request). - Footer: background is now bg-[#9a21291a] (exact hex given, not a token substitute) with black text throughout instead of solid dark-red/white; footer logo doubled; the meshkee-credit logo gets brightness-0 so the white source asset stays visible on the new light background. - Fixed a real layout bug: <main> had no flex-1, so on any page shorter than the viewport the footer stuck to the content instead of the bottom of the screen, leaving a gap of bare background beneath it. Standard sticky-footer flex fix. - CONTEXT.md: documented the icon set, the account/cart chip's RTL DOM ordering (to stop this regressing again), and the footer's new color scheme + the flex-1 fix. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
co-authored by
Claude Sonnet 5
parent
7a78adc7f3
commit
d090f57540
@@ -1,6 +1,7 @@
|
||||
"use client";
|
||||
|
||||
import { useCart } from "@/context/CartContext";
|
||||
import { CartIcon } from "@/components/ui/icons";
|
||||
|
||||
export function CartButton() {
|
||||
const { itemCount, openPopup } = useCart();
|
||||
@@ -9,12 +10,12 @@ export function CartButton() {
|
||||
<button
|
||||
type="button"
|
||||
onClick={openPopup}
|
||||
className="relative flex items-center gap-1.5 rounded-lg border border-border px-3 py-2 transition-colors hover:border-red hover:text-red"
|
||||
aria-label="سبد خرید"
|
||||
className="relative flex h-11 w-11 shrink-0 items-center justify-center rounded-xl bg-surface text-foreground transition-colors hover:text-red"
|
||||
>
|
||||
<span aria-hidden>🛒</span>
|
||||
<span className="hidden sm:inline">سبد خرید</span>
|
||||
<CartIcon className="h-5 w-5" />
|
||||
{itemCount > 0 && (
|
||||
<span className="absolute -top-1.5 -left-1.5 flex h-5 min-w-5 items-center justify-center rounded-full bg-red px-1 text-[10px] font-bold text-white">
|
||||
<span className="absolute -top-1.5 -right-1.5 flex h-5 min-w-5 items-center justify-center rounded-full bg-red px-1 text-[10px] font-bold text-white">
|
||||
{itemCount}
|
||||
</span>
|
||||
)}
|
||||
|
||||
Reference in New Issue
Block a user