From d090f57540e991eb2300f9af88b8ecb842b70cc1 Mon Sep 17 00:00:00 2001 From: "amirhosein.ashourloo" Date: Tue, 15 Sep 2026 19:31:00 +0330 Subject: [PATCH] Redesign header icons/account-cart chip, light footer, fix sticky-footer gap MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 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:
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 --- CONTEXT.md | 41 +++++++++++++++ src/app/layout.tsx | 2 +- src/components/cart/CartButton.tsx | 9 ++-- src/components/home/BlogCarousel.tsx | 6 ++- src/components/home/Footer.tsx | 38 +++++++------- src/components/home/Header.tsx | 49 +++++++++++------- src/components/ui/SectionTitle.tsx | 7 ++- src/components/ui/icons.tsx | 76 ++++++++++++++++++++++++++++ 8 files changed, 183 insertions(+), 45 deletions(-) create mode 100644 src/components/ui/icons.tsx diff --git a/CONTEXT.md b/CONTEXT.md index e52753d..b9298fb 100644 --- a/CONTEXT.md +++ b/CONTEXT.md @@ -180,6 +180,28 @@ persistent memory as "for all the user's sites", not just this one) in the array — first DOM child renders rightmost under `dir="rtl"`). - Category tile images: 110px, no border, no border-radius (`FeaturedCategories.tsx`). +- **No emoji as icons** — `src/components/ui/icons.tsx` has the shared + light/outline SVG set (`MenuIcon`, `UserIcon`, `CartIcon`, `CloseIcon`, + `ChevronLeftIcon`), 24x24 viewBox, `stroke="currentColor"`. Use these + instead of characters like "☰"/"👤"/"🛒"/"✕". Every "view more"-style + link/button (`SectionTitle`'s `action`, the mega-menu's "مشاهده همه", + `BlogCarousel`'s "ادامه مطلب") uses `ChevronLeftIcon`, not a literal "←" + character — keep new ones consistent with that. +- **Header account/cart cluster** (`Header.tsx`, desktop only — + `hidden ... sm:flex`): a borderless `bg-surface` chip holding, in this + exact DOM order, `CartButton`, a divider, then the login link. That DOM + order is deliberate and easy to get backwards: under `dir="rtl"` the + first DOM child renders rightmost, so cart-first-in-DOM is what actually + puts the cart icon on the visual **right** and the login block on the + **left** (this was built backwards once and corrected). Same rule inside + the login link itself — the icon badge comes before the two-line text in + DOM so the icon renders right of the text. Neither `CartButton` nor this + wrapper has a border (removed on request — don't reintroduce one). + `CartButton` is a fixed 44px (`h-11 w-11`) icon-only square everywhere it + renders (also stands alone, un-wrapped, below `sm`); its unread-count + badge sits at `-top-1.5 -right-1.5`, not the product-card cart badge's + `-left-1.5` — don't copy that positioning between the two, they're + intentionally different corners for different-looking buttons. ## Static-image slots @@ -274,6 +296,25 @@ render a `` and browsers aren't guaranteed to prefer the second one, so keeping both was silently serving the stale static icon. Don't add `app/favicon.ico` (or `public/favicon.ico`) back. +## Footer: light background, black text, sticky to viewport bottom + +The footer is `bg-[#9a21291a]` (a ~10%-opacity red-tint, given as an exact +hex by the user — not swapped for the closest design-token color) with +black text throughout (`text-black`, `/70`, `/50`, `/10`, `/20` opacity +steps) — it used to be a solid dark-red block with white text; don't revert +to that. The footer logo (`logoDarkUrl ?? logoUrl`) is `h-[72px]`, doubled +from its original size on request. Because `public/images/meshkee-logo- +white.png` (the credit-widget logo below) is a solid-white asset, it gets +`brightness-0` on this light background to render as a black silhouette +instead of invisible white-on-near-white — the same `opacity-60 → +group-hover:opacity-100` fade still applies on top of that. + +`
` has `flex-1` in `layout.tsx` (`body` is `flex flex-col`) so the +footer sits flush at the bottom of the viewport on short pages instead of +leaving a gap of bare `background` color beneath it — this is the standard +sticky-footer flex pattern. Don't remove `flex-1` from `main` without +re-checking a short page (e.g. `/contact`) for that gap coming back. + ## Footer: Meshkee credit widget The footer's bottom-right link ("Designed And Developed By Meshkee diff --git a/src/app/layout.tsx b/src/app/layout.tsx index d5910ad..d56df75 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -53,7 +53,7 @@ export default async function RootLayout({ children }: LayoutProps<"/">) {
-
{children}
+
{children}