modstagram/modstagram-next
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(ui): shared filter-chip/toggle radius matches CTA button (rounded-2xl)

Browse Source 
btnFilterChip/btnFilterChipActive/toggleBtnClass rendered rounded-3xl (full
pill) at h-9, while primary/default buttons (apply/clear filter, etc.) use
rounded-2xl. Aligning the shared radius fixes this across every screen that
uses filterChipClass/toggleBtnClass (shop settings buyer/seller toggle and
order sub-tabs, expertise filters, project role modal, etc.) in one place.

Reverted the earlier per-button className override in FilterModal.tsx since
the shared class now already outputs rounded-2xl.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
payacom
2026-09-16 17:07:49 +03:30
parent 1b8eadbf19
commit e484b85bf5
2 changed files with 9 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/models/FilterModal.tsx
View File

@@ -232,7 +232,7 @@ function FilterModal({
<div className="flex flex-wrap justify-center gap-2">
<button
type="button"
className={filterChipClass(!selectedExpertise, "rounded-2xl")}
className={filterChipClass(!selectedExpertise)}
onClick={() => handleExpertiseSelect("")}
>
{t("filters.all")}
@@ -243,7 +243,7 @@ function FilterModal({
<button
key={item._id}
type="button"
className={filterChipClass(isActive, "rounded-2xl")}
className={filterChipClass(isActive)}
onClick={() =>
handleExpertiseSelect(isActive ? "" : item.expertise)
}

11
src/lib/ui/buttonStyles.ts
View File

@@ -27,17 +27,20 @@ export const btnSecondary = cn(btnDefault, "font-medium text-foreground/90");
// h-9 اضافه شد تا دقیقاً هم‌ارتفاعِ toggleBtnClass باشه (اونجا صریح h-9 پاس داده
// می‌شه) — قبلاً ارتفاعِ این چیپ‌ها فقط از py-1.5 می‌اومد و کوتاه‌تر از دکمه‌های
// toggle/تایید بود، با اینکه هر دو rounded-3xl (کاملاً pill) بودن
// toggle/تایید بود
// گردی rounded-2xl — استانداردِ اپ برای هر دکمه/چیپ (عینِ RN: Button/GridChip/
// FilterChip همه radius:16)، قبلاً rounded-3xl بود که در ارتفاعِ کم (h-9) کاملاً
// pill می‌شد و با دکمه‌های تایید/اعمال فیلتر (btnPrimary/btnDefault: rounded-2xl) فرق داشت
export const btnFilterChip = cn(
btnBase,
"flex h-9 items-center justify-center rounded-3xl bg-white/90 px-4 text-xs font-semibold",
"flex h-9 items-center justify-center rounded-2xl bg-white/90 px-4 text-xs font-semibold",
BTN_BORDER,
"dark:bg-neutral-900/90"
);
export const btnFilterChipActive = cn(
btnBase,
"btn-modern--selected flex h-9 items-center justify-center rounded-3xl px-4 text-xs font-semibold text-white",
"btn-modern--selected flex h-9 items-center justify-center rounded-2xl px-4 text-xs font-semibold text-white",
BTN_BORDER
);
@@ -48,7 +51,7 @@ export function filterChipClass(active: boolean, className?: string) {
export function toggleBtnClass(active: boolean, className?: string) {
return cn(
btnBase,
"rounded-3xl px-4",
"rounded-2xl px-4",
BTN_BORDER,
active ? "btn-modern--selected text-white" : "bg-white/90 text-foreground dark:bg-neutral-900/90",
className