Font size and color fix for sale product

Author: w3bdesign

src/components/Product/DisplayProducts.component.tsx

@@ -108,7 +108,7 @@ const DisplayProducts = ({ products }: IDisplayProductsProps) => (
                 >
                   <span>
                     <div className="mt-4">
-                      <p className="text-base font-bold text-center cursor-pointer hover:text-gray-600 transition-colors">
+                      <p className="text-2xl font-bold text-center cursor-pointer hover:text-gray-600 transition-colors">
                         {name}
                       </p>
                     </div>
@@ -117,17 +117,17 @@ const DisplayProducts = ({ products }: IDisplayProductsProps) => (
                 <div className="mt-2 text-center">
                   {onSale ? (
                     <div className="flex justify-center items-center space-x-2">
-                      <span className="text-red-600">
+                      <span className="text-xl font-bold text-red-600">
                         {variations && filteredVariantPrice(price, '')}
                         {!variations && salePrice}
                       </span>
-                      <span className="text-gray-500 text-sm line-through">
+                      <span className="text-lg text-gray-500 line-through">
                         {variations && filteredVariantPrice(price, 'right')}
                         {!variations && regularPrice}
                       </span>
                     </div>
                   ) : (
-                    <span className="text-gray-900">
+                    <span className="text-lg text-gray-900">
                       {price}
                     </span>
                   )}

src/components/Product/ProductCard.component.tsx

@@ -1,10 +1,14 @@
 import Link from 'next/link';
 import Image from 'next/image';
+import { paddedPrice } from '@/utils/functions/functions';
 
 interface ProductCardProps {
   databaseId: number;
   name: string;
   price: string;
+  regularPrice: string;
+  salePrice?: string;
+  onSale: boolean;
   slug: string;
   image?: {
     sourceUrl?: string;
@@ -15,9 +19,17 @@ const ProductCard = ({
   databaseId,
   name,
   price,
+  regularPrice,
+  salePrice,
+  onSale,
   slug,
   image,
 }: ProductCardProps) => {
+  // Add padding/empty character after currency symbol
+  const formattedPrice = price ? paddedPrice(price, 'kr') : price;
+  const formattedRegularPrice = regularPrice ? paddedPrice(regularPrice, 'kr') : regularPrice;
+  const formattedSalePrice = salePrice ? paddedPrice(salePrice, 'kr') : salePrice;
+
   return (
     <div className="group">
       <div className="aspect-[3/4] overflow-hidden bg-gray-100 relative">
@@ -41,13 +53,20 @@ const ProductCard = ({
 
       <Link href={`/produkt/${slug}?id=${databaseId}`}>
         <div className="mt-4">
-          <p className="text-base font-bold text-center cursor-pointer hover:text-gray-600 transition-colors">
+          <p className="text-2xl font-bold text-center cursor-pointer hover:text-gray-600 transition-colors">
             {name}
           </p>
         </div>
       </Link>
       <div className="mt-2 text-center">
-        <span className="text-gray-900">{price}</span>
+        {onSale ? (
+          <div className="flex items-center justify-center gap-2">
+            <span className="text-xl font-bold text-red-600">{formattedSalePrice}</span>
+            <span className="text-lg text-gray-500 line-through">{formattedRegularPrice}</span>
+          </div>
+        ) : (
+          <span className="text-lg text-gray-900">{formattedPrice}</span>
+        )}
       </div>
     </div>
   );

src/components/Product/ProductList.component.tsx

@@ -71,6 +71,9 @@ const ProductList = ({ products, title }: ProductListProps) => {
               databaseId={product.databaseId}
               name={product.name}
               price={product.price}
+              regularPrice={product.regularPrice}
+              salePrice={product.salePrice}
+              onSale={product.onSale}
               slug={product.slug}
               image={product.image}
             />

src/components/Product/SingleProduct.component.tsx

@@ -83,7 +83,7 @@ const SingleProduct = ({ product }: IProductRootObject) => {
               <div className="text-center md:text-left mb-6">
                 {onSale ? (
                   <div className="flex flex-col md:flex-row items-center md:items-start gap-2">
-                    <p className="text-2xl font-bold text-gray-900">
+                    <p className="text-2xl font-bold text-red-600">
                       {product.variations
                         ? filteredVariantPrice(price, '')
                         : salePrice}