fix(storefront): align category-page filter + product-count styling

Author: treoden

packages/evershop/src/components/frontStore/catalog/CategoryProducts.tsx

@@ -22,7 +22,7 @@ export function CategoryProducts() {
           gridColumns={3}
           showAddToCart={true}
         />
-        <span className="product-count italic block mt-5">
+        <span className="product-count mt-5 block text-sm text-muted-foreground">
           {_('${count} products', { count: products.total.toString() })}
         </span>
       </div>

packages/evershop/src/components/frontStore/catalog/DefaultFilterWrapperRender.tsx

@@ -5,7 +5,7 @@ export const DefaultFilterWrapperRender: React.FC<{
   children: React.ReactNode;
 }> = ({ title, children }) => (
   <div className="filter__section">
-    <div className="filter__title font-medium mb-3">{title}</div>
+    <div className="filter__title text-sm font-semibold mb-3">{title}</div>
     <div className="filter__content">{children}</div>
   </div>
 );

packages/evershop/src/components/frontStore/catalog/DefaultPriceFilterRender.tsx

@@ -74,7 +74,7 @@ export const DefaultPriceFilterRender: React.FC<{
 
   return (
     <DefaultFilterWrapperRender title={_('Price')}>
-      <div className="price__filter border-b border-border pb-2 mb-2">
+      <div className="price__filter border-b border-border pb-8 mb-8">
         <div className="price__slider mb-4">
           <Slider
             min={priceRange.min}
@@ -84,7 +84,7 @@ export const DefaultPriceFilterRender: React.FC<{
           />
         </div>
 
-        <div className="flex justify-between text-small text-muted-foreground mt-2">
+        <div className="flex justify-between text-sm text-muted-foreground mt-2">
           <span>{priceRange.minText}</span>
           <span>{priceRange.maxText}</span>
         </div>