feat: changing the only the ui of the Merch page (#1314)

Author: sachinggsingh

src/components/merch/FilterBar.css

@@ -71,18 +71,18 @@
 }
 
 .category-button.active {
-  background: linear-gradient(135deg, #667eea 0%, #5b47d6 100%);
-  border-color: #667eea;
+  background: var(--ifm-color-primary);
+  border-color: var(--ifm-color-primary);
   color: #ffffff !important;
   font-weight: 600;
-  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
 }
 
 .category-button.active:hover {
-  background: linear-gradient(135deg, #818cf8 0%, #06b6d4 100%);
-  border-color: #818cf8;
+  background: var(--ifm-color-primary-dark);
+  border-color: var(--ifm-color-primary-dark);
   transform: translateX(4px);
-  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
+  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
 }
 
 .category-icon {
@@ -124,9 +124,9 @@
 
 .sort-select:focus {
   outline: none;
-  border-color: #667eea;
+  border-color: var(--ifm-color-primary);
   background-color: #ffffff;
-  box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.15), 0 2px 8px rgba(102, 126, 234, 0.2);
+  box-shadow: 0 0 0 4px rgba(46, 133, 85, 0.15), 0 2px 8px rgba(46, 133, 85, 0.2);
 }
 
 /* Responsive Design */

src/components/merch/FilterBar.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Filter, SlidersHorizontal } from "lucide-react";
+import { Filter, SlidersHorizontal, ShoppingBag, Shirt, Component, Backpack } from "lucide-react";
 import "./FilterBar.css";
 
 interface FilterBarProps {
@@ -10,10 +10,10 @@ interface FilterBarProps {
 }
 
 const categories = [
-  { id: "all", label: "All Products", icon: "🛍️" },
-  { id: "t-shirts", label: "T-Shirts", icon: "👕" },
-  { id: "hoodies", label: "Hoodies", icon: "🧥" },
-  { id: "accessories", label: "Accessories", icon: "🎒" },
+  { id: "all", label: "All Products", icon: <ShoppingBag size={18} /> },
+  { id: "t-shirts", label: "T-Shirts", icon: <Shirt size={18} /> },
+  { id: "hoodies", label: "Hoodies", icon: <Component size={18} /> },
+  { id: "accessories", label: "Accessories", icon: <Backpack size={18} /> },
 ];
 
 const sortOptions = [

src/components/merch/ProductCard.css

@@ -14,8 +14,8 @@
 
 .product-card:hover {
   transform: translateY(-4px);
-  box-shadow: 0 12px 24px rgba(102, 126, 234, 0.15);
-  border-color: rgba(102, 126, 234, 0.3);
+  box-shadow: 0 12px 24px rgba(46, 133, 85, 0.15);
+  border-color: rgba(46, 133, 85, 0.3);
 }
 
 /* Image Section */
@@ -70,13 +70,13 @@
   justify-content: center;
   cursor: pointer;
   transition: all 0.2s ease;
-  color: #667eea;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  color: var(--ifm-color-primary);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
 }
 
 .overlay-button:hover {
   transform: scale(1.1);
-  background: linear-gradient(135deg, #667eea 0%, #06b6d4 100%);
+  background: var(--ifm-color-primary);
   color: white;
 }
 
@@ -114,7 +114,7 @@
   position: absolute;
   top: 12px;
   left: 12px;
-  background: linear-gradient(135deg, #667eea 0%, #5b47d6 100%);
+  background: var(--ifm-color-primary);
   color: white;
   padding: 4px 10px;
   border-radius: 6px;
@@ -123,7 +123,7 @@
   text-transform: uppercase;
   letter-spacing: 0.5px;
   z-index: 3;
-  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.4);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
 }
 
 /* Content Section */
@@ -206,7 +206,7 @@
   display: flex;
   align-items: baseline;
   font-weight: 700;
-  color: #5b47d6;
+  color: var(--ifm-font-color-base);
 }
 
 .price-currency {
@@ -223,7 +223,7 @@
   justify-content: center;
   gap: 0.5rem;
   padding: 0.625rem 1rem;
-  background: linear-gradient(135deg, #667eea 0%, #5b47d6 100%);
+  background: var(--ifm-color-primary);
   color: white;
   border: none;
   border-radius: 8px;
@@ -232,13 +232,13 @@
   cursor: pointer;
   transition: all 0.2s ease;
   white-space: nowrap;
-  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
 }
 
 .product-card-button:hover {
-  background: linear-gradient(135deg, #818cf8 0%, #06b6d4 100%);
+  background: var(--ifm-color-primary-dark);
   transform: translateY(-1px);
-  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
+  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
 }
 
 .product-card-button:active {

src/components/merch/ProductImageViewer.css

@@ -102,7 +102,7 @@
 }
 
 .control-button {
-  background: linear-gradient(135deg, #667eea 0%, #5b47d6 100%);
+  background: var(--ifm-color-primary);
   border: none;
   color: white;
   border-radius: 8px;
@@ -114,13 +114,13 @@
   justify-content: center;
   min-width: 44px;
   height: 44px;
-  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
 }
 
 .control-button:hover:not(:disabled) {
-  background: linear-gradient(135deg, #818cf8 0%, #06b6d4 100%);
+  background: var(--ifm-color-primary-dark);
   transform: translateY(-1px);
-  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
+  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
 }
 
 .control-button:active:not(:disabled) {

src/components/merch/ShoppingCart.css

@@ -108,20 +108,20 @@
 
 .cart-continue-button {
   padding: 0.75rem 1.5rem;
-  background: linear-gradient(135deg, #667eea 0%, #5b47d6 100%);
+  background: var(--ifm-color-primary);
   color: white;
   border: none;
   border-radius: 8px;
   font-weight: 600;
   cursor: pointer;
   transition: all 0.2s ease;
-  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
 }
 
 .cart-continue-button:hover {
-  background: linear-gradient(135deg, #818cf8 0%, #06b6d4 100%);
+  background: var(--ifm-color-primary-dark);
   transform: translateY(-1px);
-  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
+  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
 }
 
 /* Cart Items */
@@ -175,7 +175,7 @@
 .cart-item-price {
   font-size: 0.875rem;
   font-weight: 700;
-  color: #5b47d6;
+  color: var(--ifm-font-color-base);
   margin: 0;
 }
 
@@ -211,7 +211,7 @@
 }
 
 .quantity-controls button:hover:not(:disabled) {
-  background: linear-gradient(135deg, #667eea 0%, #5b47d6 100%);
+  background: var(--ifm-color-primary);
   color: white;
 }
 
@@ -300,14 +300,14 @@
   border-top: 2px solid var(--ifm-color-emphasis-200);
   font-size: 1.125rem;
   font-weight: 700;
-  color: #5b47d6;
+  color: var(--ifm-font-color-base);
 }
 
 /* Checkout Button */
 .cart-checkout-button {
   width: 100%;
   padding: 1rem;
-  background: linear-gradient(135deg, #667eea 0%, #5b47d6 100%);
+  background: var(--ifm-color-primary);
   color: white;
   border: none;
   border-radius: 8px;
@@ -320,13 +320,13 @@
   gap: 0.5rem;
   transition: all 0.2s ease;
   margin-bottom: 0.75rem;
-  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
 }
 
 .cart-checkout-button:hover {
-  background: linear-gradient(135deg, #818cf8 0%, #06b6d4 100%);
+  background: var(--ifm-color-primary-dark);
   transform: translateY(-1px);
-  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
+  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
 }
 
 .cart-checkout-button:active {