From eefad5387cfb5582a67a2debab402afaa57f07a9 Mon Sep 17 00:00:00 2001
From: Arda Samadi <arda.samadi2010@gmail.com>
Date: Sat, 27 Jun 2026 14:08:32 +0330
Subject: [PATCH] feat(home): clean discount pill on product cards
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Restyle the discount badge to the redesign's pill: ٪ + rounded Persian
digits on a translucent white rounded-full chip, no icon. Drops the raw
decimal percent (e.g. "12.7" -> "٪۱۳") and the discount-red icon import.
Applied in both the discounts rail and the for-you masonry.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 app/components/HorizontalProductList.tsx | 16 ++++++----------
 app/components/MondrianProductList.tsx   | 16 ++++++----------
 2 files changed, 12 insertions(+), 20 deletions(-)

diff --git a/app/components/HorizontalProductList.tsx b/app/components/HorizontalProductList.tsx
index 58cd66a..419f38e 100644
--- a/app/components/HorizontalProductList.tsx
+++ b/app/components/HorizontalProductList.tsx
@@ -4,7 +4,6 @@ import { motion } from "framer-motion";
 import { ChevronLeft, ChevronRight, Images } from "lucide-react";
 import { Skeleton } from "./ui/skeleton";
 import { ErrorState } from "./UiProvider";
-import discountRed from "~/assets/icons/product/discount-red.svg";
 import placeholderImage from "~/assets/icons/product.png";
 
 interface HorizontalProduct {
@@ -250,16 +249,13 @@ const ProductThumbnail = ({
 };
 
 const DiscountBadge = ({ discountPercent }: { discountPercent?: number }) => {
+  if (!discountPercent) return null;
   return (
-    <div className="absolute items-center gap-1 flex top-1 right-1 z-10 bg-[#FDFDFD]/75 text-[#FF3B30] py-[2px] px-2 rounded-[15px]">
-      <p
-        className="text-B14 font-bold leading-[20px]"
-        dir="ltr"
-        style={{ fontFamily: "Arial, sans-serif" }}
-      >
-        {discountPercent}
-      </p>
-      <img src={discountRed} alt="discount-red" className="w-5 h-5" />
+    <div
+      dir="ltr"
+      className="absolute top-2 right-2 z-10 bg-WHITE/90 text-RED font-extrabold text-[12px] px-2 py-[3px] rounded-full backdrop-blur-sm"
+    >
+      ٪{Math.round(discountPercent).toLocaleString("fa-IR")}
     </div>
   );
 };
diff --git a/app/components/MondrianProductList.tsx b/app/components/MondrianProductList.tsx
index c5ada16..1306d0a 100644
--- a/app/components/MondrianProductList.tsx
+++ b/app/components/MondrianProductList.tsx
@@ -10,7 +10,6 @@ import { useDeleteInstagramPost } from "~/requestHandler/use-instagram-hooks";
 import placeholderImage from "~/assets/icons/product.png";
 import placeholderImageDark from "~/assets/icons/product-dark.png";
 import { useRootData } from "~/hooks/use-root-data";
-import discountRed from "~/assets/icons/product/discount-red.svg";
 
 interface MondrianList {
   id?: string;
@@ -429,16 +428,13 @@ const ProductCard = ({
   );
 };
 const DiscountBadge = ({ discountPercent }: { discountPercent?: number }) => {
+  if (!discountPercent) return null;
   return (
-    <div className="absolute items-center gap-1 flex top-1 right-1 z-10 bg-[#FDFDFD]/75 text-[#FF3B30] py-[2px] px-2 rounded-[15px]">
-      <p
-        className="text-B14 font-bold leading-[20px]"
-        dir="ltr"
-        style={{ fontFamily: "Arial, sans-serif" }}
-      >
-        {discountPercent}
-      </p>
-      <img src={discountRed} alt="discount-red" className="w-5 h-5" />
+    <div
+      dir="ltr"
+      className="absolute top-2 right-2 z-10 bg-WHITE/90 text-RED font-extrabold text-[12px] px-2 py-[3px] rounded-full backdrop-blur-sm"
+    >
+      ٪{Math.round(discountPercent).toLocaleString("fa-IR")}
     </div>
   );
 };