hey-pharmacist-ecommerce 1.1.41 → 1.1.43

package/src/screens/WishlistScreen.tsx

@@ -166,19 +166,19 @@ export default function WishlistScreen() {
                                 <div className="max-w-lg text-center space-y-6">
                                     <div className="flex justify-center">
                                         <div className="rounded-full bg-gray-100 p-6">
-                                            <Heart className="h-12 w-12 text-secondary" />
+                                            <Heart className="h-12 w-12 text-hsecondary" />
                                         </div>
                                     </div>
                                     <div className="space-y-2">
-                                        <h2 className="text-2xl font-bold text-secondary">Sign in to see your favourites</h2>
-                                        <p className="text-muted">
+                                        <h2 className="text-2xl font-bold text-hsecondary">Sign in to see your favourites</h2>
+                                        <p className="text-hmuted">
                                             Create your curated shelf of products and we&apos;ll keep them ready whenever you return.
                                         </p>
                                     </div>
                                     <button
                                         type="button"
                                         onClick={() => router.push(buildPath('/login'))}
-                                        className="rounded-xl border-2 border-primary bg-primary text-white px-6 py-3 text-sm font-medium transition-colors hover:opacity-80"
+                                        className="rounded-xl border-2 border-hprimary bg-hprimary text-white px-6 py-3 text-sm font-medium transition-colors hover:opacity-80"
                                     >
                                         Sign In
                                     </button>
@@ -189,8 +189,8 @@ export default function WishlistScreen() {
                         {isAuthenticated && (
                             <>
                                 <div className="mb-6">
-                                    <h1 className="text-2xl font-bold text-secondary">Wishlist</h1>
-                                    <p className="text-sm text-muted mt-1">
+                                    <h1 className="text-2xl font-bold text-hsecondary">Wishlist</h1>
+                                    <p className="text-sm text-hmuted mt-1">
                                         {wishlistCount} {wishlistCount === 1 ? 'item' : 'items'} saved
                                         {wishlistCount > 0 && ` • Total value: ${formatPrice(totalValue)}`}
                                     </p>
@@ -199,19 +199,19 @@ export default function WishlistScreen() {
                                 <div className="flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between mb-6">
                                     <div className="space-y-1">
                                         {onlyInStock && (
-                                            <p className="text-sm text-muted">
+                                            <p className="text-sm text-hmuted">
                                                 Showing items ready to ship
                                             </p>
                                         )}
                                     </div>
 
                                     <div className="flex flex-wrap items-center gap-3">
-                                        <label className="inline-flex cursor-pointer items-center gap-2 rounded-full border border-slate-200 bg-slate-50 px-3 py-1.5 text-sm font-medium text-slate-600 transition hover:border-primary hover:text-secondary">
+                                        <label className="inline-flex cursor-pointer items-center gap-2 rounded-full border border-slate-200 bg-slate-50 px-3 py-1.5 text-sm font-medium text-slate-600 transition hover:border-hprimary hover:text-hsecondary">
                                             <input
                                                 type="checkbox"
                                                 checked={onlyInStock}
                                                 onChange={(event) => setOnlyInStock(event.target.checked)}
-                                                className="h-4 w-4 rounded-sm border-slate-300 text-secondary focus:ring-secondary"
+                                                className="h-4 w-4 rounded-sm border-slate-300 text-hsecondary focus:ring-hsecondary"
                                             />
                                             Only show in-stock
                                         </label>
@@ -236,7 +236,7 @@ export default function WishlistScreen() {
                                                 type="button"
                                                 onClick={() => setViewMode('grid')}
                                                 className={`flex items-center gap-1 px-3 py-1.5 text-sm font-medium transition rounded-full ${viewMode === 'grid'
-                                                    ? 'bg-white text-primary shadow-md'
+                                                    ? 'bg-white text-hprimary shadow-md'
                                                     : 'text-slate-600 hover:bg-white'
                                                     }`}
                                             >
@@ -246,7 +246,7 @@ export default function WishlistScreen() {
                                                 type="button"
                                                 onClick={() => setViewMode('list')}
                                                 className={`flex items-center gap-1 px-3 py-1.5 text-sm font-medium transition rounded-full ${viewMode === 'list'
-                                                    ? 'bg-white text-primary shadow-md'
+                                                    ? 'bg-white text-hprimary shadow-md'
                                                     : 'text-slate-600 hover:bg-white'
                                                     }`}
                                             >
@@ -283,12 +283,12 @@ export default function WishlistScreen() {
                                         <div className="text-center space-y-6 max-w-md">
                                             <div className="flex justify-center">
                                                 <div className="rounded-full bg-gray-100 p-6">
-                                                    <Heart className="h-12 w-12 text-secondary" />
+                                                    <Heart className="h-12 w-12 text-hsecondary" />
                                                 </div>
                                             </div>
                                             <div className="space-y-2">
-                                                <h2 className="text-2xl font-bold text-secondary">Your wishlist is empty</h2>
-                                                <p className="text-muted">
+                                                <h2 className="text-2xl font-bold text-hsecondary">Your wishlist is empty</h2>
+                                                <p className="text-hmuted">
                                                     Start adding products to your wishlist to see them here.
                                                 </p>
                                             </div>
@@ -296,7 +296,7 @@ export default function WishlistScreen() {
                                                 <button
                                                     type="button"
                                                     onClick={() => router.push(buildPath('/shop'))}
-                                                    className="rounded-xl border-2 border-secondary bg-secondary text-white px-6 py-3 text-sm font-medium transition-colors flex items-center justify-center gap-2 hover:opacity-80"
+                                                    className="rounded-xl border-2 border-hsecondary bg-hsecondary text-white px-6 py-3 text-sm font-medium transition-colors flex items-center justify-center gap-2 hover:opacity-80"
                                                 >
                                                     Discover products
                                                 </button>
@@ -357,15 +357,15 @@ export default function WishlistScreen() {
                                                             <div className="flex flex-1 flex-col gap-2">
                                                                 <div className="flex flex-wrap items-center justify-between gap-3">
                                                                     <div>
-                                                                        <h3 className="text-lg font-semibold text-secondary">
+                                                                        <h3 className="text-lg font-semibold text-hsecondary">
                                                                             {product.name}
                                                                         </h3>
-                                                                        <p className="text-sm text-muted">
+                                                                        <p className="text-sm text-hmuted">
                                                                             General wellness
                                                                         </p>
                                                                     </div>
                                                                     <div className="text-right">
-                                                                        <p className="text-lg font-bold text-primary">
+                                                                        <p className="text-lg font-bold text-hprimary">
                                                                             {formatPrice(product.summary?.minPrice ?? 0)}
                                                                         </p>
                                                                         {product.summary?.hasDiscount && (
@@ -391,7 +391,7 @@ export default function WishlistScreen() {
                                                                     <Button
                                                                         size="sm"
                                                                         onClick={() => router.push(buildPath(`/products/${product._id}`))}
-                                                                        className='bg-primary-90 text-white hover:bg-primary-70'
+                                                                        className='bg-hprimary-90 text-white hover:bg-hprimary-70'
                                                                     >
                                                                         View details
                                                                     </Button>
@@ -417,15 +417,15 @@ export default function WishlistScreen() {
                                         <div className="flex h-16 w-16 items-center justify-center rounded-full bg-gray-200 text-gray-500">
                                             <Package className="h-8 w-8" />
                                         </div>
-                                        <h3 className="mt-6 text-xl font-semibold text-secondary">
+                                        <h3 className="mt-6 text-xl font-semibold text-hsecondary">
                                             Nothing matches those filters
                                         </h3>
-                                        <p className="mt-2 max-w-md text-sm text-muted">
+                                        <p className="mt-2 max-w-md text-sm text-hmuted">
                                             Try showing out-of-stock items or adjust your sort order to revisit everything you&apos;ve saved.
                                         </p>
                                         <button
                                             type="button"
-                                            className="mt-6 rounded-xl border-2 border-primary bg-white px-6 py-3 text-sm font-medium text-secondary hover:opacity-80 transition-colors"
+                                            className="mt-6 rounded-xl border-2 border-hprimary bg-white px-6 py-3 text-sm font-medium text-hsecondary hover:opacity-80 transition-colors"
                                             onClick={() => setOnlyInStock(false)}
                                         >
                                             Show all saved products

package/src/styles/globals.css

@@ -4,49 +4,49 @@
 @source "../**/*.{js,jsx,ts,tsx,mdx}";
 
 @theme {
-  --color-primary-50: rgb(var(--hp-primary-50));
-  --color-primary-100: rgb(var(--hp-primary-100));
-  --color-primary-200: rgb(var(--hp-primary-200));
-  --color-primary-300: rgb(var(--hp-primary-300));
-  --color-primary-400: rgb(var(--hp-primary-400));
-  --color-primary-500: rgb(var(--hp-primary-500));
-  --color-primary-600: var(--hp-primary-600, #E67E50);
-  --color-primary-700: rgb(var(--hp-primary-700));
-  --color-primary-800: rgb(var(--hp-primary-800));
-  --color-primary-900: rgb(var(--hp-primary-900));
-  --color-primary-950: rgb(var(--hp-primary-950));
-  --color-primary: var(--hp-primary, #5b9bd5);
-  --color-primary-dark: var(--hp-primary-dark, #4a8ac4);
-  --color-primary-bg: var(--hp-primary-bg, #e6ebf0);
-
-  --color-secondary-50: rgb(var(--hp-secondary-50));
-  --color-secondary-100: rgb(var(--hp-secondary-100));
-  --color-secondary-200: rgb(var(--hp-secondary-200));
-  --color-secondary-300: rgb(var(--hp-secondary-300));
-  --color-secondary-400: rgb(var(--hp-secondary-400));
-  --color-secondary-500: rgb(var(--hp-secondary-500));
-  --color-secondary-600: rgb(var(--hp-secondary-600));
-  --color-secondary-700: rgb(var(--hp-secondary-700));
-  --color-secondary-800: rgb(var(--hp-secondary-800));
-  --color-secondary-900: rgb(var(--hp-secondary-900));
-  --color-secondary-950: rgb(var(--hp-secondary-950));
-  --color-secondary: var(--hp-secondary, #2b4b7c);
-
-  --color-accent-50: rgb(var(--hp-accent-50));
-  --color-accent-100: rgb(var(--hp-accent-100));
-  --color-accent-200: rgb(var(--hp-accent-200));
-  --color-accent-300: rgb(var(--hp-accent-300));
-  --color-accent-400: rgb(var(--hp-accent-400));
-  --color-accent-500: rgb(var(--hp-accent-500));
-  --color-accent-600: rgb(var(--hp-accent-600));
-  --color-accent-700: rgb(var(--hp-accent-700));
-  --color-accent-800: rgb(var(--hp-accent-800));
-  --color-accent-900: rgb(var(--hp-accent-900));
-  --color-accent-950: rgb(var(--hp-accent-950));
-  --color-accent: var(--hp-accent, #e67e50);
-  --color-accent-dark: var(--hp-accent-dark, #d66f45);
-
-  --color-muted: var(--hp-text-muted, #676c80);
+  --color-hprimary-50: rgb(var(--hp-primary-50));
+  --color-hprimary-100: rgb(var(--hp-primary-100));
+  --color-hprimary-200: rgb(var(--hp-primary-200));
+  --color-hprimary-300: rgb(var(--hp-primary-300));
+  --color-hprimary-400: rgb(var(--hp-primary-400));
+  --color-hprimary-500: rgb(var(--hp-primary-500));
+  --color-hprimary-600: var(--hp-primary-600, #E67E50);
+  --color-hprimary-700: rgb(var(--hp-primary-700));
+  --color-hprimary-800: rgb(var(--hp-primary-800));
+  --color-hprimary-900: rgb(var(--hp-primary-900));
+  --color-hprimary-950: rgb(var(--hp-primary-950));
+  --color-hprimary: var(--hp-primary, #5b9bd5);
+  --color-hprimary-dark: var(--hp-primary-dark, #4a8ac4);
+  --color-hprimary-bg: var(--hp-primary-bg, #e6ebf0);
+
+  --color-hsecondary-50: rgb(var(--hp-secondary-50));
+  --color-hsecondary-100: rgb(var(--hp-secondary-100));
+  --color-hsecondary-200: rgb(var(--hp-secondary-200));
+  --color-hsecondary-300: rgb(var(--hp-secondary-300));
+  --color-hsecondary-400: rgb(var(--hp-secondary-400));
+  --color-hsecondary-500: rgb(var(--hp-secondary-500));
+  --color-hsecondary-600: rgb(var(--hp-secondary-600));
+  --color-hsecondary-700: rgb(var(--hp-secondary-700));
+  --color-hsecondary-800: rgb(var(--hp-secondary-800));
+  --color-hsecondary-900: rgb(var(--hp-secondary-900));
+  --color-hsecondary-950: rgb(var(--hp-secondary-950));
+  --color-hsecondary: var(--hp-secondary, #2b4b7c);
+
+  --color-haccent-50: rgb(var(--hp-accent-50));
+  --color-haccent-100: rgb(var(--hp-accent-100));
+  --color-haccent-200: rgb(var(--hp-accent-200));
+  --color-haccent-300: rgb(var(--hp-accent-300));
+  --color-haccent-400: rgb(var(--hp-accent-400));
+  --color-haccent-500: rgb(var(--hp-accent-500));
+  --color-haccent-600: rgb(var(--hp-accent-600));
+  --color-haccent-700: rgb(var(--hp-accent-700));
+  --color-haccent-800: rgb(var(--hp-accent-800));
+  --color-haccent-900: rgb(var(--hp-accent-900));
+  --color-haccent-950: rgb(var(--hp-accent-950));
+  --color-haccent: var(--hp-accent, #e67e50);
+  --color-haccent-dark: var(--hp-accent-dark, #d66f45);
+
+  --color-hmuted: var(--hp-text-muted, #676c80);
 
   --animate-fade-in: fadeIn 0.3s ease-in-out;
   --animate-slide-up: slideUp 0.3s ease-out;