hey-pharmacist-ecommerce 1.1.41 → 1.1.42

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (47) hide show
  1. package/dist/index.js +370 -370
  2. package/dist/index.js.map +1 -1
  3. package/dist/index.mjs +370 -370
  4. package/dist/index.mjs.map +1 -1
  5. package/package.json +1 -1
  6. package/src/components/AccountAddressesTab.tsx +9 -9
  7. package/src/components/AccountOrdersTab.tsx +11 -11
  8. package/src/components/AccountOverviewTab.tsx +21 -21
  9. package/src/components/AccountPaymentTab.tsx +2 -2
  10. package/src/components/AccountReviewsTab.tsx +1 -1
  11. package/src/components/AccountSettingsTab.tsx +6 -6
  12. package/src/components/AddressFormModal.tsx +2 -2
  13. package/src/components/CartItem.tsx +2 -2
  14. package/src/components/FilterChips.tsx +7 -7
  15. package/src/components/Footer.tsx +9 -9
  16. package/src/components/Header.tsx +7 -7
  17. package/src/components/NotificationBell.tsx +3 -3
  18. package/src/components/NotificationDrawer.tsx +1 -1
  19. package/src/components/NotificationModal.tsx +1 -1
  20. package/src/components/OrderCard.tsx +2 -2
  21. package/src/components/ProductCard.tsx +6 -6
  22. package/src/components/QuickViewModal.tsx +23 -23
  23. package/src/components/ReviewCard.tsx +4 -4
  24. package/src/components/TabNavigation.tsx +2 -2
  25. package/src/components/ui/Badge.tsx +2 -2
  26. package/src/components/ui/Button.tsx +3 -3
  27. package/src/components/ui/ConfirmModal.tsx +3 -3
  28. package/src/components/ui/Input.tsx +1 -1
  29. package/src/providers/ThemeProvider.tsx +2 -2
  30. package/src/screens/AddressesScreen.tsx +6 -6
  31. package/src/screens/CartScreen.tsx +19 -19
  32. package/src/screens/ChangePasswordScreen.tsx +2 -2
  33. package/src/screens/CheckoutScreen.tsx +21 -21
  34. package/src/screens/CurrentOrdersScreen.tsx +4 -4
  35. package/src/screens/EditProfileScreen.tsx +1 -1
  36. package/src/screens/ForgotPasswordScreen.tsx +11 -11
  37. package/src/screens/LoginScreen.tsx +12 -12
  38. package/src/screens/OrderDetailScreen.tsx +30 -30
  39. package/src/screens/OrdersScreen.tsx +3 -3
  40. package/src/screens/ProductDetailScreen.tsx +48 -48
  41. package/src/screens/ProfileScreen.tsx +2 -2
  42. package/src/screens/RegisterScreen.tsx +15 -15
  43. package/src/screens/ResetPasswordScreen.tsx +14 -14
  44. package/src/screens/SearchResultsScreen.tsx +7 -7
  45. package/src/screens/ShopScreen.tsx +50 -50
  46. package/src/screens/WishlistScreen.tsx +22 -22
  47. package/src/styles/globals.css +43 -43
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "hey-pharmacist-ecommerce",
3
- "version": "1.1.41",
3
+ "version": "1.1.42",
4
4
  "description": "Production-ready, multi-tenant e‑commerce UI + API adapter for Next.js with auth, carts, checkout, orders, theming, and pharmacist-focused UX.",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.mjs",
package/src/components/AccountAddressesTab.tsx CHANGED
@@ -91,11 +91,11 @@ export function AccountAddressesTab() {
91
91
  <div className="p-6 bg-white rounded-xl">
92
92
  <div className="mb-6 flex items-center justify-between">
93
93
  <div>
94
- <h3 className="text-lg font-semibold text-secondary">Saved Addresses</h3>
95
- <p className="text-sm text-muted">Manage your delivery and billing addresses</p>
94
+ <h3 className="text-lg font-semibold text-hsecondary">Saved Addresses</h3>
95
+ <p className="text-sm text-hmuted">Manage your delivery and billing addresses</p>
96
96
  </div>
97
97
  <button
98
- className='flex flex-row items-center gap-2 px-6 py-2 border border-slate-200 rounded-xl text-slate-700 hover:opacity-80 transition-colors bg-secondary text-white text-sm'
98
+ className='flex flex-row items-center gap-2 px-6 py-2 border border-slate-200 rounded-xl text-slate-700 hover:opacity-80 transition-colors bg-hsecondary text-white text-sm'
99
99
  onClick={() => {
100
100
  setEditingAddress(undefined);
101
101
  setIsAddressModalOpen(true);
@@ -128,8 +128,8 @@ export function AccountAddressesTab() {
128
128
  <div className="mb-3">
129
129
  <div className='justify-between flex items-center'>
130
130
  <div className="flex items-center gap-x-2">
131
- <MapPin className="h-4 w-4 text-secondary" />
132
- <p className="font-semibold text-secondary">{address.name}</p>
131
+ <MapPin className="h-4 w-4 text-hsecondary" />
132
+ <p className="font-semibold text-hsecondary">{address.name}</p>
133
133
  {address.isDefault && (
134
134
  <span className="inline-flex items-center gap-1 rounded-full bg-green-100 px-2 py-1 text-xs font-semibold text-green-700">
135
135
  Default
@@ -142,7 +142,7 @@ export function AccountAddressesTab() {
142
142
  setEditingAddress(address);
143
143
  setIsAddressModalOpen(true);
144
144
  }}
145
- className="inline-flex items-center gap-1 rounded-full border border-slate-200 px-2 py-1 text-xs font-medium text-muted transition hover:border-primary-300 hover:text-primary-600"
145
+ className="inline-flex items-center gap-1 rounded-full border border-slate-200 px-2 py-1 text-xs font-medium text-hmuted transition hover:border-hprimary-300 hover:text-hprimary-600"
146
146
  >
147
147
  <Edit3 className="h-3 w-3" />
148
148
  </button>
@@ -164,14 +164,14 @@ export function AccountAddressesTab() {
164
164
  </button>
165
165
  </div>
166
166
  </div>
167
- <p className="text-sm text-muted mt-1">
167
+ <p className="text-sm text-hmuted mt-1">
168
168
  {address.street1}
169
169
  {address.street2 && `, ${address.street2}`}
170
170
  </p>
171
- <p className="text-sm text-muted">
171
+ <p className="text-sm text-hmuted">
172
172
  {address.city}, {address.state} {address.zip}
173
173
  </p>
174
- <p className="text-sm text-muted">{address.country}</p>
174
+ <p className="text-sm text-hmuted">{address.country}</p>
175
175
  {address.phone && (
176
176
  <p className="text-sm text-slate-500 mt-1">{address.phone}</p>
177
177
  )}
package/src/components/AccountOrdersTab.tsx CHANGED
@@ -69,11 +69,11 @@ export function AccountOrdersTab() {
69
69
  <div className="flex items-start justify-between mb-4 pb-4 border-b border-slate-200">
70
70
  <div className="flex items-center gap-3">
71
71
  <div>
72
- <h3 className="text-base font-semibold text-secondary">
72
+ <h3 className="text-base font-semibold text-hsecondary">
73
73
  Order ORD-{order._id?.slice(-6).toUpperCase()}
74
74
  </h3>
75
75
  {/* Order Date */}
76
- <p className="text-xs text-muted mb-4">
76
+ <p className="text-xs text-hmuted mb-4">
77
77
  Placed on {formatDate(order.createdAt || new Date(), 'long')}
78
78
  </p>
79
79
  </div>
@@ -89,8 +89,8 @@ export function AccountOrdersTab() {
89
89
  </Badge>
90
90
  </div>
91
91
  <div className="text-right">
92
- <p className="text-xs text-muted mb-1">Total Amount</p>
93
- <p className="text-lg font-bold text-secondary">
92
+ <p className="text-xs text-hmuted mb-1">Total Amount</p>
93
+ <p className="text-lg font-bold text-hsecondary">
94
94
  {formatPrice(order.grandTotal || 0)}
95
95
  </p>
96
96
  </div>
@@ -117,19 +117,19 @@ export function AccountOrdersTab() {
117
117
  />
118
118
  </div>
119
119
  <div className="flex-1 min-w-0">
120
- <p className="font-medium text-secondary text-sm truncate">
120
+ <p className="font-medium text-hsecondary text-sm truncate">
121
121
  {item.productVariantData?.name || 'Unknown Product'}
122
122
  </p>
123
- <p className="text-xs text-muted">Qty: {item.quantity}</p>
123
+ <p className="text-xs text-hmuted">Qty: {item.quantity}</p>
124
124
  </div>
125
- <p className="font-semibold text-secondary text-sm">
125
+ <p className="font-semibold text-hsecondary text-sm">
126
126
  {formatPrice(itemTotal)}
127
127
  </p>
128
128
  </div>
129
129
  );
130
130
  })
131
131
  ) : (
132
- <p className="text-sm text-muted text-center py-2">No items found</p>
132
+ <p className="text-sm text-hmuted text-center py-2">No items found</p>
133
133
  )}
134
134
  </div>
135
135
 
@@ -139,12 +139,12 @@ export function AccountOrdersTab() {
139
139
  <div className="flex items-center gap-2 bg-blue-50 rounded-lg p-3">
140
140
  <Truck className="h-4 w-4 text-blue-600" />
141
141
  <div className="flex-1">
142
- <p className="text-xs text-muted">Tracking Number:</p>
143
- <p className="text-sm font-medium text-secondary">
142
+ <p className="text-xs text-hmuted">Tracking Number:</p>
143
+ <p className="text-sm font-medium text-hsecondary">
144
144
  {order.trackingNumber}
145
145
  </p>
146
146
  </div>
147
- <button className="text-xs text-primary-600 hover:text-primary-700 font-medium">
147
+ <button className="text-xs text-hprimary-600 hover:text-hprimary-700 font-medium">
148
148
  Track
149
149
  </button>
150
150
  </div>
package/src/components/AccountOverviewTab.tsx CHANGED
@@ -72,7 +72,7 @@ export function AccountOverviewTab() {
72
72
  <Icon className="h-6 w-6" />
73
73
  </div>
74
74
  <div>
75
- <p className="text-2xl font-bold text-secondary">{stat.value}</p>
75
+ <p className="text-2xl font-bold text-hsecondary">{stat.value}</p>
76
76
  <p className="text-sm text-slate-600">{stat.label}</p>
77
77
  </div>
78
78
  </div>
@@ -84,10 +84,10 @@ export function AccountOverviewTab() {
84
84
  {/* Profile Information */}
85
85
  <div className="rounded-xl border border-slate-200 bg-white p-6">
86
86
  <div className="flex items-center justify-between mb-4">
87
- <h3 className="text-lg font-semibold text-secondary">Profile Information</h3>
87
+ <h3 className="text-lg font-semibold text-hsecondary">Profile Information</h3>
88
88
  <button
89
89
  onClick={() => router.push(buildPath('/account/edit'))}
90
- className="flex items-center gap-1 text-sm text-primary-600 hover:text-primary-700"
90
+ className="flex items-center gap-1 text-sm text-hprimary-600 hover:text-hprimary-700"
91
91
  >
92
92
  <Edit className="h-4 w-4" />
93
93
  Edit
@@ -96,42 +96,42 @@ export function AccountOverviewTab() {
96
96
  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
97
97
  <div className="flex items-start gap-3">
98
98
  <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-[#DBEAFE]">
99
- <User className="h-5 w-5 text-secondary" />
99
+ <User className="h-5 w-5 text-hsecondary" />
100
100
  </div>
101
101
  <div>
102
- <p className="text-xs text-muted">Full Name</p>
103
- <p className="text-sm font-medium text-secondary">
102
+ <p className="text-xs text-hmuted">Full Name</p>
103
+ <p className="text-sm font-medium text-hsecondary">
104
104
  {user.firstname} {user.lastname}
105
105
  </p>
106
106
  </div>
107
107
  </div>
108
108
  <div className="flex items-start gap-3">
109
109
  <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-[#DBEAFE]">
110
- <Mail className="h-5 w-5 text-secondary" />
110
+ <Mail className="h-5 w-5 text-hsecondary" />
111
111
  </div>
112
112
  <div>
113
- <p className="text-xs text-muted">E-mail Address</p>
114
- <p className="text-sm font-medium text-secondary">{user.email}</p>
113
+ <p className="text-xs text-hmuted">E-mail Address</p>
114
+ <p className="text-sm font-medium text-hsecondary">{user.email}</p>
115
115
  </div>
116
116
  </div>
117
117
  <div className="flex items-start gap-3">
118
118
  <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-[#DBEAFE]">
119
- <Phone className="h-5 w-5 text-secondary" />
119
+ <Phone className="h-5 w-5 text-hsecondary" />
120
120
  </div>
121
121
  <div>
122
- <p className="text-xs text-muted">Phone Number</p>
123
- <p className="text-sm font-medium text-secondary">
122
+ <p className="text-xs text-hmuted">Phone Number</p>
123
+ <p className="text-sm font-medium text-hsecondary">
124
124
  {user.phoneNumber || 'Not provided'}
125
125
  </p>
126
126
  </div>
127
127
  </div>
128
128
  <div className="flex items-start gap-3">
129
129
  <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-[#DBEAFE]">
130
- <MapPin className="h-5 w-5 text-secondary" />
130
+ <MapPin className="h-5 w-5 text-hsecondary" />
131
131
  </div>
132
132
  <div>
133
- <p className="text-xs text-muted">Date of Birth</p>
134
- <p className="text-sm font-medium text-secondary">Not provided</p>
133
+ <p className="text-xs text-hmuted">Date of Birth</p>
134
+ <p className="text-sm font-medium text-hsecondary">Not provided</p>
135
135
  </div>
136
136
  </div>
137
137
  </div>
@@ -140,14 +140,14 @@ export function AccountOverviewTab() {
140
140
  {/* Recent Orders */}
141
141
  <div className="rounded-xl border border-slate-200 bg-white p-6">
142
142
  <div className="flex items-center justify-between mb-4">
143
- <h3 className="text-lg font-semibold text-secondary">Recent Orders</h3>
143
+ <h3 className="text-lg font-semibold text-hsecondary">Recent Orders</h3>
144
144
  <button
145
145
  onClick={() => {
146
146
  // Switch to orders tab
147
147
  const event = new CustomEvent('switchTab', { detail: 'orders' });
148
148
  window.dispatchEvent(event);
149
149
  }}
150
- className="text-sm text-primary-600 hover:text-primary-700"
150
+ className="text-sm text-hprimary-600 hover:text-hprimary-700"
151
151
  >
152
152
  View All →
153
153
  </button>
@@ -162,7 +162,7 @@ export function AccountOverviewTab() {
162
162
  ))}
163
163
  </div>
164
164
  ) : recentOrders.length === 0 ? (
165
- <p className="text-sm text-muted text-center py-8">No orders yet</p>
165
+ <p className="text-sm text-hmuted text-center py-8">No orders yet</p>
166
166
  ) : (
167
167
  <div className="space-y-3">
168
168
  {recentOrders.map((order) => (
@@ -177,7 +177,7 @@ export function AccountOverviewTab() {
177
177
  </div>
178
178
  <div>
179
179
  <div className='flex items-center gap-2'>
180
- <p className="text-sm font-medium text-secondary">
180
+ <p className="text-sm font-medium text-hsecondary">
181
181
  ORD-{order._id?.slice(-6).toUpperCase()}
182
182
  </p>
183
183
  <Badge className='p-1 text-xs'
@@ -189,14 +189,14 @@ export function AccountOverviewTab() {
189
189
  {order.orderStatus}
190
190
  </Badge>
191
191
  </div>
192
- <p className="text-xs text-muted">
192
+ <p className="text-xs text-hmuted">
193
193
  {formatDate(order.createdAt || new Date(), 'short')}
194
194
  </p>
195
195
  </div>
196
196
  </div>
197
197
  <div className="flex items-center gap-3">
198
198
 
199
- <p className="text-sm font-semibold text-secondary">
199
+ <p className="text-sm font-semibold text-hsecondary">
200
200
  {formatPrice(order.grandTotal || 0)}
201
201
  </p>
202
202
  </div>
package/src/components/AccountPaymentTab.tsx CHANGED
@@ -82,8 +82,8 @@ export function AccountPaymentTab() {
82
82
  className="flex items-center justify-between rounded-lg border border-slate-200 bg-white p-4 hover:shadow-md transition-shadow"
83
83
  >
84
84
  <div className="flex items-center gap-4">
85
- <div className="flex h-12 w-12 items-center justify-center rounded-lg bg-primary-50">
86
- <CreditCard className="h-6 w-6 text-primary-600" />
85
+ <div className="flex h-12 w-12 items-center justify-center rounded-lg bg-hprimary-50">
86
+ <CreditCard className="h-6 w-6 text-hprimary-600" />
87
87
  </div>
88
88
  {/* <div>
89
89
  <div className="flex items-center gap-2">
package/src/components/AccountReviewsTab.tsx CHANGED
@@ -76,7 +76,7 @@ export function AccountReviewsTab() {
76
76
  </div>
77
77
  <button
78
78
  onClick={() => router.push(buildPath('/reviews'))}
79
- className="inline-flex items-center gap-2 px-4 py-2 border border-secondary text-secondary rounded-lg font-medium hover:bg-secondary/5 transition-colors text-sm"
79
+ className="inline-flex items-center gap-2 px-4 py-2 border border-hsecondary text-hsecondary rounded-lg font-medium hover:bg-hsecondary/5 transition-colors text-sm"
80
80
  >
81
81
  <MessageSquare className="size-4" />
82
82
  Write a Review
package/src/components/AccountSettingsTab.tsx CHANGED
@@ -39,14 +39,14 @@ export function AccountSettingsTab() {
39
39
  <div className="p-6 space-y-6">
40
40
  <div className="rounded-2xl border border-slate-200 bg-white p-6">
41
41
  <div className="flex items-center gap-2 mb-4">
42
- <Lock className="h-5 w-5 text-secondary" />
43
- <h3 className="text-lg font-semibold text-secondary">Security</h3>
42
+ <Lock className="h-5 w-5 text-hsecondary" />
43
+ <h3 className="text-lg font-semibold text-hsecondary">Security</h3>
44
44
  </div>
45
45
  <div className="space-y-3">
46
46
  <div className="flex items-center justify-between rounded-lg border border-slate-200 bg-slate-50 px-4 py-3">
47
47
  <div>
48
- <p className="text-sm font-medium text-secondary">Change Password</p>
49
- <p className="text-xs text-muted">Update your account password</p>
48
+ <p className="text-sm font-medium text-hsecondary">Change Password</p>
49
+ <p className="text-xs text-hmuted">Update your account password</p>
50
50
  </div>
51
51
  <Button
52
52
  variant="outline-solid"
@@ -58,8 +58,8 @@ export function AccountSettingsTab() {
58
58
  </div>
59
59
  {/* <div className="flex items-center justify-between rounded-lg border border-slate-200 bg-slate-50 px-4 py-3">
60
60
  <div>
61
- <p className="text-sm font-medium text-secondary">Two-Factor Authentication</p>
62
- <p className="text-xs text-muted">Add an extra layer of security</p>
61
+ <p className="text-sm font-medium text-hsecondary">Two-Factor Authentication</p>
62
+ <p className="text-xs text-hmuted">Add an extra layer of security</p>
63
63
  </div>
64
64
  <Button variant="outline-solid" size="sm">
65
65
  Enable
package/src/components/AddressFormModal.tsx CHANGED
@@ -178,11 +178,11 @@ export function AddressFormModal({ isOpen, onClose, onAddressAdded, onAddressUpd
178
178
  <button
179
179
  type="button"
180
180
  onClick={onClose}
181
- className='flex flex-row items-center gap-2 px-6 py-2 border border-slate-200 rounded-xl text-slate-700 hover:opacity-80 transition-colors text-secondary text-sm'
181
+ className='flex flex-row items-center gap-2 px-6 py-2 border border-slate-200 rounded-xl text-slate-700 hover:opacity-80 transition-colors text-hsecondary text-sm'
182
182
  >
183
183
  Cancel
184
184
  </button>
185
- <button type="submit" disabled={isSubmitting} className='flex flex-row items-center gap-2 px-6 py-2 border border-slate-200 rounded-xl text-slate-700 hover:opacity-80 transition-colors bg-secondary text-white text-sm'>
185
+ <button type="submit" disabled={isSubmitting} className='flex flex-row items-center gap-2 px-6 py-2 border border-slate-200 rounded-xl text-slate-700 hover:opacity-80 transition-colors bg-hsecondary text-white text-sm'>
186
186
  {isSubmitting ? 'Adding Address...' : 'Add Address'}
187
187
  </button>
188
188
  </div>
package/src/components/CartItem.tsx CHANGED
@@ -50,7 +50,7 @@ export function CartItem({ item }: CartItemProps) {
50
50
  initial={{ opacity: 0, y: 20 }}
51
51
  animate={{ opacity: 1, y: 0 }}
52
52
  exit={{ opacity: 0, x: -100 }}
53
- className="bg-white border-2 border-gray-100 rounded-[24px] p-6 hover:border-secondary/30 transition-all duration-300"
53
+ className="bg-white border-2 border-gray-100 rounded-[24px] p-6 hover:border-hsecondary/30 transition-all duration-300"
54
54
  >
55
55
 
56
56
 
@@ -122,7 +122,7 @@ export function CartItem({ item }: CartItemProps) {
122
122
 
123
123
  {/* Price */}
124
124
  <div className="text-right">
125
- <p className="font-['Poppins',sans-serif] font-bold text-[18px] text-secondary">
125
+ <p className="font-['Poppins',sans-serif] font-bold text-[18px] text-hsecondary">
126
126
  {formatPrice(itemTotal)}
127
127
  </p>
128
128
  <p className="font-['Poppins',sans-serif] text-[11px] text-[#676c80]">
package/src/components/FilterChips.tsx CHANGED
@@ -76,7 +76,7 @@ export function FilterChips({
76
76
  <button
77
77
  type="button"
78
78
  onClick={() => onSelect('All')}
79
- className="ml-auto text-xs text-primary-600 hover:text-primary-700 font-medium"
79
+ className="ml-auto text-xs text-hprimary-600 hover:text-hprimary-700 font-medium"
80
80
  >
81
81
  Clear
82
82
  </button>
@@ -94,8 +94,8 @@ export function FilterChips({
94
94
  className={`inline-flex items-center gap-1.5 rounded-lg border px-3 py-1.5 text-sm font-medium transition-all whitespace-nowrap ${
95
95
  isSelected
96
96
  ? isPrimary
97
- ? 'border-primary-500 bg-primary-500 text-white shadow-xs'
98
- : 'border-secondary-500 bg-secondary-500 text-white shadow-xs'
97
+ ? 'border-hprimary-500 bg-hprimary-500 text-white shadow-xs'
98
+ : 'border-hsecondary-500 bg-hsecondary-500 text-white shadow-xs'
99
99
  : 'border-slate-200 bg-white text-slate-700 hover:border-slate-300 hover:bg-slate-50'
100
100
  }`}
101
101
  >
@@ -113,8 +113,8 @@ export function FilterChips({
113
113
  className={`inline-flex items-center gap-1.5 rounded-lg border px-3 py-1.5 text-sm font-medium transition-all whitespace-nowrap ${
114
114
  overflowFilters.includes(selected)
115
115
  ? isPrimary
116
- ? 'border-primary-500 bg-primary-50 text-primary-700'
117
- : 'border-secondary-500 bg-secondary-50 text-secondary-700'
116
+ ? 'border-hprimary-500 bg-hprimary-50 text-hprimary-700'
117
+ : 'border-hsecondary-500 bg-hsecondary-50 text-hsecondary-700'
118
118
  : 'border-slate-200 bg-white text-slate-700 hover:border-slate-300 hover:bg-slate-50'
119
119
  }`}
120
120
  >
@@ -145,8 +145,8 @@ export function FilterChips({
145
145
  className={`flex w-full items-center justify-between rounded-md px-3 py-2 text-sm font-medium transition ${
146
146
  isSelected
147
147
  ? isPrimary
148
- ? 'bg-primary-500 text-white'
149
- : 'bg-secondary-500 text-white'
148
+ ? 'bg-hprimary-500 text-white'
149
+ : 'bg-hsecondary-500 text-white'
150
150
  : 'text-slate-700 hover:bg-slate-100'
151
151
  }`}
152
152
  >
package/src/components/Footer.tsx CHANGED
@@ -48,15 +48,15 @@ export function Footer() {
48
48
  </p>
49
49
  <div className="space-y-3">
50
50
  <div className="flex items-center gap-3">
51
- <Mail className="w-5 h-5 text-primary-500" />
51
+ <Mail className="w-5 h-5 text-hprimary-500" />
52
52
  <span>support@{config.storeName.toLowerCase().replace(/\s+/g, '')}.com</span>
53
53
  </div>
54
54
  <div className="flex items-center gap-3">
55
- <Phone className="w-5 h-5 text-primary-500" />
55
+ <Phone className="w-5 h-5 text-hprimary-500" />
56
56
  <span>+1 (555) 123-4567</span>
57
57
  </div>
58
58
  <div className="flex items-center gap-3">
59
- <MapPin className="w-5 h-5 text-primary-500" />
59
+ <MapPin className="w-5 h-5 text-hprimary-500" />
60
60
  <span>123 Store Street, City, Country</span>
61
61
  </div>
62
62
  </div>
@@ -70,7 +70,7 @@ export function Footer() {
70
70
  <li key={link.href}>
71
71
  <Link
72
72
  href={link.href}
73
- className="hover:text-primary-500 transition-colors"
73
+ className="hover:text-hprimary-500 transition-colors"
74
74
  >
75
75
  {link.label}
76
76
  </Link>
@@ -87,7 +87,7 @@ export function Footer() {
87
87
  <li key={link.href}>
88
88
  <Link
89
89
  href={link.href}
90
- className="hover:text-primary-500 transition-colors"
90
+ className="hover:text-hprimary-500 transition-colors"
91
91
  >
92
92
  {link.label}
93
93
  </Link>
@@ -104,7 +104,7 @@ export function Footer() {
104
104
  <li key={link.href}>
105
105
  <Link
106
106
  href={link.href}
107
- className="hover:text-primary-500 transition-colors"
107
+ className="hover:text-hprimary-500 transition-colors"
108
108
  >
109
109
  {link.label}
110
110
  </Link>
@@ -124,19 +124,19 @@ export function Footer() {
124
124
  <div className="flex items-center gap-4">
125
125
  <a
126
126
  href="#"
127
- className="w-10 h-10 bg-gray-800 hover:bg-primary-600 rounded-full flex items-center justify-center transition-colors"
127
+ className="w-10 h-10 bg-gray-800 hover:bg-hprimary-600 rounded-full flex items-center justify-center transition-colors"
128
128
  >
129
129
  <Facebook className="w-5 h-5" />
130
130
  </a>
131
131
  <a
132
132
  href="#"
133
- className="w-10 h-10 bg-gray-800 hover:bg-primary-600 rounded-full flex items-center justify-center transition-colors"
133
+ className="w-10 h-10 bg-gray-800 hover:bg-hprimary-600 rounded-full flex items-center justify-center transition-colors"
134
134
  >
135
135
  <Twitter className="w-5 h-5" />
136
136
  </a>
137
137
  <a
138
138
  href="#"
139
- className="w-10 h-10 bg-gray-800 hover:bg-primary-600 rounded-full flex items-center justify-center transition-colors"
139
+ className="w-10 h-10 bg-gray-800 hover:bg-hprimary-600 rounded-full flex items-center justify-center transition-colors"
140
140
  >
141
141
  <Instagram className="w-5 h-5" />
142
142
  </a>
package/src/components/Header.tsx CHANGED
@@ -67,10 +67,10 @@ export function Header() {
67
67
  <Link
68
68
  key={link.href}
69
69
  href={link.href}
70
- className="text-gray-700 hover:text-primary-600 font-medium transition-colors relative group"
70
+ className="text-gray-700 hover:text-hprimary-600 font-medium transition-colors relative group"
71
71
  >
72
72
  {link.label}
73
- <span className="absolute bottom-0 left-0 w-0 h-0.5 bg-primary-600 group-hover:w-full transition-all duration-300" />
73
+ <span className="absolute bottom-0 left-0 w-0 h-0.5 bg-hprimary-600 group-hover:w-full transition-all duration-300" />
74
74
  </Link>
75
75
  ))}
76
76
  </nav>
@@ -144,7 +144,7 @@ export function Header() {
144
144
  )}
145
145
  </Link>
146
146
 
147
- <Link href={buildPath('/cart')} className="relative p-2 text-gray-700 hover:text-primary-600 transition-colors">
147
+ <Link href={buildPath('/cart')} className="relative p-2 text-gray-700 hover:text-hprimary-600 transition-colors">
148
148
  <ShoppingCart className="w-6 h-6" />
149
149
  {cart?.cartBody?.items?.length && cart.cartBody?.items?.length > 0 ? (
150
150
  <span className="absolute -top-1 -right-1 bg-red-500 text-white text-xs font-bold rounded-full w-5 h-5 flex items-center justify-center">
@@ -160,7 +160,7 @@ export function Header() {
160
160
  onClick={() => setIsDropdownOpen(!isDropdownOpen)}
161
161
  className="flex items-center gap-2 rounded-full border border-slate-200 bg-white px-3 py-2 hover:bg-slate-50 transition-colors"
162
162
  >
163
- <div className="flex h-7 w-7 items-center justify-center rounded-full bg-primary-100 text-xs font-semibold text-primary-700">
163
+ <div className="flex h-7 w-7 items-center justify-center rounded-full bg-hprimary-100 text-xs font-semibold text-hprimary-700">
164
164
  {getInitials(user?.firstname || '', user?.lastname || '')}
165
165
  </div>
166
166
  <ChevronDown className={`h-4 w-4 text-slate-400 transition-transform ${isDropdownOpen ? 'rotate-180' : ''}`} />
@@ -176,7 +176,7 @@ export function Header() {
176
176
  <div className="absolute right-0 top-full mt-2 w-56 rounded-lg border border-slate-200 bg-white shadow-lg z-20">
177
177
  <div className="p-2">
178
178
  <div className="px-3 py-2 border-b border-slate-200 mb-1">
179
- <p className="text-sm font-medium text-secondary truncate">
179
+ <p className="text-sm font-medium text-hsecondary truncate">
180
180
  {user?.firstname} {user?.lastname}
181
181
  </p>
182
182
  <p className="text-xs text-slate-500 truncate">{user?.email}</p>
@@ -206,7 +206,7 @@ export function Header() {
206
206
  ) : (
207
207
  <Link
208
208
  href={buildPath('/login')}
209
- className="hidden sm:block px-4 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-700 transition-colors font-medium"
209
+ className="hidden sm:block px-4 py-2 bg-hprimary-600 text-white rounded-lg hover:bg-hprimary-700 transition-colors font-medium"
210
210
  >
211
211
  Sign In
212
212
  </Link>
@@ -250,7 +250,7 @@ export function Header() {
250
250
  <Link
251
251
  href={buildPath('/login')}
252
252
  onClick={() => setIsMobileMenuOpen(false)}
253
- className="px-4 py-3 text-primary-600 hover:bg-gray-50 rounded-lg font-medium"
253
+ className="px-4 py-3 text-hprimary-600 hover:bg-gray-50 rounded-lg font-medium"
254
254
  >
255
255
  Sign In
256
256
  </Link>
package/src/components/NotificationBell.tsx CHANGED
@@ -26,8 +26,8 @@ export function NotificationBell() {
26
26
  onClick={handleToggle}
27
27
  onMouseDown={(e) => e.stopPropagation()}
28
28
  className={`relative p-2.5 rounded-xl transition-all duration-300 group flex items-center justify-center ${isDrawerOpen
29
- ? 'bg-primary-50 text-primary-600'
30
- : 'hover:bg-gradient-to-br hover:from-primary-50 hover:to-primary-100/50 text-gray-700'
29
+ ? 'bg-hprimary-50 text-hprimary-600'
30
+ : 'hover:bg-gradient-to-br hover:from-hprimary-50 hover:to-hprimary-100/50 text-gray-700'
31
31
  }`}
32
32
  aria-label="Notifications"
33
33
  whileHover={isDrawerOpen ? {} : { scale: 1.05 }}
@@ -35,7 +35,7 @@ export function NotificationBell() {
35
35
  >
36
36
  {/* Bell Icon */}
37
37
  <Bell
38
- className={`w-6 h-6 transition-colors duration-300 ${isDrawerOpen ? 'text-primary-600 bg-gray-100 rounded-lg p-2 w-10 h-10 transition-all duration-300' : 'group-hover:text-primary-600'
38
+ className={`w-6 h-6 transition-colors duration-300 ${isDrawerOpen ? 'text-hprimary-600 bg-gray-100 rounded-lg p-2 w-10 h-10 transition-all duration-300' : 'group-hover:text-hprimary-600'
39
39
  }`}
40
40
  strokeWidth={2}
41
41
  />
package/src/components/NotificationDrawer.tsx CHANGED
@@ -167,7 +167,7 @@ export function NotificationDrawer() {
167
167
  {/* Loading indicator */}
168
168
  {isLoading && (
169
169
  <div className="flex justify-center py-4">
170
- <div className="w-6 h-6 border-2 border-primary-600 border-t-transparent rounded-full animate-spin" />
170
+ <div className="w-6 h-6 border-2 border-hprimary-600 border-t-transparent rounded-full animate-spin" />
171
171
  </div>
172
172
  )}
173
173
 
package/src/components/NotificationModal.tsx CHANGED
@@ -124,7 +124,7 @@ export function NotificationModal() {
124
124
  {/* Elegant arrow pointer connecting to the bell */}
125
125
  <div className="absolute -top-1 right-5 w-3 h-3 bg-white border-l border-t border-gray-100 transform rotate-45 z-10" />
126
126
  {/* Header */}
127
- <div className="flex items-center justify-between px-4 py-3 border-b bg-gradient-to-r from-primary-50 to-white">
127
+ <div className="flex items-center justify-between px-4 py-3 border-b bg-gradient-to-r from-hprimary-50 to-white">
128
128
  <div className="flex items-center gap-2">
129
129
  <h2
130
130
  id="notification-title"
package/src/components/OrderCard.tsx CHANGED
@@ -81,7 +81,7 @@ export function OrderCard({ order, onDelete }: OrderCardProps) {
81
81
  {/* Header - Compact */}
82
82
  <div className="flex items-center justify-between mb-4 pb-4 border-b border-gray-200">
83
83
  <div className="flex items-center gap-3">
84
- <h3 className="text-base font-bold text-slate-900 group-hover:text-primary transition-colors">
84
+ <h3 className="text-base font-bold text-slate-900 group-hover:text-hprimary transition-colors">
85
85
  Order #{(order._id || order.id || '').slice(-8).toUpperCase()}
86
86
  </h3>
87
87
  <Badge variant={config as any}>{config}</Badge>
@@ -168,7 +168,7 @@ export function OrderCard({ order, onDelete }: OrderCardProps) {
168
168
  e.stopPropagation();
169
169
  window.open(order?.payment?.hostedInvoiceUrl || '', '_blank');
170
170
  }}
171
- className="inline-flex items-center gap-2 rounded-full border-2 border-primary-500 bg-primary-500 hover:bg-primary-600 text-white px-4 py-2 text-sm transition-colors"
171
+ className="inline-flex items-center gap-2 rounded-full border-2 border-hprimary-500 bg-hprimary-500 hover:bg-hprimary-600 text-white px-4 py-2 text-sm transition-colors"
172
172
  onPointerDown={(e) => e.stopPropagation()}
173
173
  >
174
174
  <CreditCard className="w-4 h-4" />