From 40ced6e81b979d916486575e4eb0d56875b98482 Mon Sep 17 00:00:00 2001 From: Apar Agarwal Date: Fri, 10 Oct 2025 12:05:03 +0530 Subject: [PATCH] refactor: update component styles and structure for improved consistency and responsiveness --- src/components/CollectionSection.jsx | 8 +- src/components/Products/ProductCard.jsx | 93 ++++++++++---------- src/components/Products/ProductGrid.jsx | 2 +- src/components/Products/SortDropdown.jsx | 17 ++-- src/components/RecentlyViewed.jsx | 36 ++++---- src/components/SupplementForGoalsSection.jsx | 2 +- src/components/WhyChoose.jsx | 8 +- src/components/collection.css | 41 --------- src/index.css | 24 ----- src/pages/Products/Products.jsx | 38 ++++---- 10 files changed, 107 insertions(+), 162 deletions(-) diff --git a/src/components/CollectionSection.jsx b/src/components/CollectionSection.jsx index 951c9ec4..0ea7aeea 100644 --- a/src/components/CollectionSection.jsx +++ b/src/components/CollectionSection.jsx @@ -61,10 +61,10 @@ const CollectionSection = () => { return (
-

- SHOP{' '} - BY{' '} - COLLECTION +

+ SHOP + BY + COLLECTION

diff --git a/src/components/Products/ProductCard.jsx b/src/components/Products/ProductCard.jsx index 9460b1e9..f3c5162b 100644 --- a/src/components/Products/ProductCard.jsx +++ b/src/components/Products/ProductCard.jsx @@ -9,7 +9,7 @@ const HeartIcon = ({ isWishlisted = false, animate = false, className = 'h-6 w-6 viewBox="0 0 18 17" fill="none" xmlns="http://www.w3.org/2000/svg" - className={`${className} transition-transform duration-200 ease-out ${animate ? 'animate-double-pop' : (isWishlisted ? 'scale-110' : '')} ${isWishlisted ? 'text-white' : 'text-current'}`} + className={`${className} transition-transform duration-200 ease-out ${animate ? 'animate-double-pop' : (isWishlisted ? 'scale-110' : '')} ${isWishlisted ? 'text-white' : 'text-current'}`} aria-hidden="true" focusable="false" > @@ -96,20 +96,21 @@ const ProductCard = forwardRef(({ product }, ref) => { } return ( -
{/* --- IMAGE CONTAINER --- */} -
(e.key === 'Enter' || e.key === ' ') && handleProductClick()} - > - +
(e.key === 'Enter' || e.key === ' ') && handleProductClick()} + > + {/* Badges for NEW and SALE */}
{product.isNew && ( @@ -123,7 +124,7 @@ const ProductCard = forwardRef(({ product }, ref) => { )}
- + {/* State 1: Image is loading */} {!imageLoaded && !imageError && (
@@ -146,7 +147,7 @@ const ProductCard = forwardRef(({ product }, ref) => { {product.name} setImageLoaded(true)} onError={() => { setImageLoaded(true); @@ -185,7 +186,7 @@ const ProductCard = forwardRef(({ product }, ref) => { {formatPrice(product.price)}
- +

{product.name}

@@ -216,15 +217,15 @@ const ProductCard = forwardRef(({ product }, ref) => { ))} -
- +
+
)}
- +
- {/* --- Add to Cart Button --- */} - + aria-live="polite" + > + {cartLoading ? ( + + + ADDING... + + ) : cartAdded ? ( + + + ADDED + + ) : ( + <> + + ADD TO CART + + )} +
diff --git a/src/components/Products/ProductGrid.jsx b/src/components/Products/ProductGrid.jsx index 293578c9..e8a07c6e 100644 --- a/src/components/Products/ProductGrid.jsx +++ b/src/components/Products/ProductGrid.jsx @@ -6,7 +6,7 @@ export default function ProductGrid({ products, lastProductElementRef }) { } return ( -
+
{products.map((product, index) => { // Attach ref to the last product for infinite scroll const isLastProduct = index === products.length - 1; diff --git a/src/components/Products/SortDropdown.jsx b/src/components/Products/SortDropdown.jsx index f7bf0ce4..39d69fcf 100644 --- a/src/components/Products/SortDropdown.jsx +++ b/src/components/Products/SortDropdown.jsx @@ -10,7 +10,7 @@ const SORT_OPTIONS = [ { label: 'Rating - High to Low', field: 'rating', order: 'desc' }, ]; -export default function SortDropdown({ sortBy = 'featured', sortOrder = 'desc', onSortChange = () => {} }) { +export default function SortDropdown({ sortBy = 'featured', sortOrder = 'desc', onSortChange = () => {}, className = '' }) { const [isOpen, setIsOpen] = useState(false); const dropdownRef = useRef(null); @@ -50,24 +50,27 @@ export default function SortDropdown({ sortBy = 'featured', sortOrder = 'desc', }; return ( -
-
+
+
Sort by:
-
+
{isOpen && ( -
+
{SORT_OPTIONS.map((option, index) => ( +
- {/* Recently Viewed Products Grid */} -
- {visibleItems.map((product) => ( -
- -
- ))} + + {/* Recently Viewed Products: grid on desktop, horizontal scroll on mobile */} +
+
+ {visibleItems.map((product) => ( +
+ +
+ ))} +
); - } diff --git a/src/components/SupplementForGoalsSection.jsx b/src/components/SupplementForGoalsSection.jsx index aef1d3ec..f41d13b2 100644 --- a/src/components/SupplementForGoalsSection.jsx +++ b/src/components/SupplementForGoalsSection.jsx @@ -24,7 +24,7 @@ export default function SupplementForGoalsSection() { return (

- Supplements for every goal + Supplements for every goal

diff --git a/src/components/WhyChoose.jsx b/src/components/WhyChoose.jsx index 10d07c0d..7c607288 100644 --- a/src/components/WhyChoose.jsx +++ b/src/components/WhyChoose.jsx @@ -3,11 +3,11 @@ function WhyChoose() {

- Why Choose - Core - X Products + Why Choose + Core + X Products

diff --git a/src/components/collection.css b/src/components/collection.css index 43189978..93843314 100644 --- a/src/components/collection.css +++ b/src/components/collection.css @@ -10,33 +10,6 @@ padding: 85px; } -/* Heading Styles */ -.collection-heading { - text-align: center; - font-size: 64px; - font-weight: 700; - margin-bottom: 60px; - letter-spacing: -2%; - line-height: 64px; - text-transform: uppercase; -} - -.heading-shop, -.heading-collection { - color: #000; - font-weight: 900; - font-family: 'Montserrat', sans-serif; - text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); -} - -.heading-by { - color: transparent; - -webkit-text-stroke: 1px #000; - text-stroke: 1px #000; - font-weight: 700; - padding: 0 8px; -} - /* Collection Grid */ .collection-grid { display: grid; @@ -118,10 +91,6 @@ /* Responsive Design */ @media (max-width: 1024px) { - .collection-heading { - font-size: 3rem; - } - .collection-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; @@ -133,16 +102,6 @@ padding: 60px 16px; } - .collection-heading { - font-size: 2rem; - margin-bottom: 40px; - } - - .heading-by { - -webkit-text-stroke: 1.5px #000; - text-stroke: 1.5px #000; - } - .collection-grid { grid-template-columns: 1fr; gap: 16px; diff --git a/src/index.css b/src/index.css index e5355402..405fe6ea 100644 --- a/src/index.css +++ b/src/index.css @@ -28,30 +28,6 @@ } } -.text-outline { - -webkit-text-stroke: 2px black; -} - -/* Black text stroke utility (explicit name used in RecentlyViewed)Use multiple text-shadow layers to create an outer-only outline so the stroke doesn't bleed into inner counters of glyphs.*/ -.text-stroke-black { - /* multiple offsets around the glyph to simulate an even outline */ - text-shadow: - -1px -1px 0 #000, - 1px -1px 0 #000, - -1px 1px 0 #000, - 1px 1px 0 #000, - 0 -2px 0 #000, - 2px 0 0 #000, - 0 2px 0 #000, - -2px 0 0 #000, - -2px -2px 0 #000, - 2px -2px 0 #000, - 2px 2px 0 #000, - -2px 2px 0 #000; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} - /* Product Card Action Button Animations */ @keyframes double-pop { 0% { transform: scale(1); } diff --git a/src/pages/Products/Products.jsx b/src/pages/Products/Products.jsx index cc1e240c..cc574e6e 100644 --- a/src/pages/Products/Products.jsx +++ b/src/pages/Products/Products.jsx @@ -33,7 +33,7 @@ export default function Products() { garageSaleOnly: false, }); // Sorting state (client-side) - const [sortBy, setSortBy] = useState('best_selling'); + const [sortBy, setSortBy] = useState('featured'); const [sortOrder, setSortOrder] = useState('desc'); const [isFilterOpen, setIsFilterOpen] = useState(false); const productListKey = allProducts[0]?._id || 'no-products'; @@ -106,7 +106,7 @@ export default function Products() { break; case 'featured:desc': default: - // Featured is a placeholder - keep original order (assumed backend order) + // Featured (placeholder) - keep backend/default ordering break; } @@ -172,9 +172,11 @@ export default function Products() { {/* Toolbar Section */}
-
- {/* Left: All Filters button */} - - { - // If user chooses Best Selling (placeholder), map empty or best_selling - setSortBy(field || 'best_selling'); - setSortOrder(order || 'desc'); - // reset displayed count to show top results - setDisplayedCount(12); - }} - /> +
+ { + // If user chooses Featured (placeholder), map empty or featured + setSortBy(field || 'featured'); + setSortOrder(order || 'desc'); + // reset displayed count to show top results + setDisplayedCount(12); + }} + /> +