hey-pharmacist-ecommerce 1.1.18 → 1.1.19

package/src/screens/ProductDetailScreen.tsx

@@ -293,7 +293,7 @@ export function ProductDetailScreen({ productId }: ProductDetailScreenProps) {
                 ))}
               </div>
             </div>
-            <div className="space-y-4 rounded-3xl bg-white p-6 shadow-sm">
+            <div className="space-y-4 rounded-3xl bg-white p-6 shadow-xs">
               <div className="h-8 w-32 animate-pulse rounded-full bg-slate-200" />
               <div className="h-10 w-48 animate-pulse rounded-full bg-slate-200" />
               <div className="h-6 w-full animate-pulse rounded-full bg-slate-200" />
@@ -310,7 +310,7 @@ export function ProductDetailScreen({ productId }: ProductDetailScreenProps) {
     return (
       <div className="min-h-screen bg-slate-50">
         <div className="container mx-auto px-4 py-16">
-          <div className="rounded-3xl bg-white p-10 text-center shadow-sm">
+          <div className="rounded-3xl bg-white p-10 text-center shadow-xs">
             <Sparkles className="mx-auto h-10 w-10 text-primary-500" />
             <h1 className="mt-6 text-2xl font-semibold text-gray-900">Product not found</h1>
             <p className="mt-2 text-gray-600">
@@ -547,7 +547,7 @@ export function ProductDetailScreen({ productId }: ProductDetailScreenProps) {
                                 : 'border-gray-200 hover:border-primary/50'
                             }`}
                             >
-                              <div className={`relative h-12 w-12 flex-shrink-0 overflow-hidden rounded-full border-2 ${isSelected ? 'border-primary' : 'border-slate-200'}`}>
+                              <div className={`relative h-12 w-12 shrink-0 overflow-hidden rounded-full border-2 ${isSelected ? 'border-primary' : 'border-slate-200'}`}>
                                 <Image
                                   src={variantImage}
                                   alt={variant.name || 'Variant image'}
@@ -565,7 +565,7 @@ export function ProductDetailScreen({ productId }: ProductDetailScreenProps) {
                                 )}
                               </div>
                               {isSelected && (
-                                <Check className="h-5 w-5 text-secondary flex-shrink-0" />
+                                <Check className="h-5 w-5 text-secondary shrink-0" />
                               )}
                             </button>
                           );
@@ -648,7 +648,7 @@ export function ProductDetailScreen({ productId }: ProductDetailScreenProps) {
                 </div>
 
                 {/* Benefits */}
-              <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 p-6 bg-gradient-to-br from-[#5B9BD5]/5 to-[#2B4B7C]/5 rounded-[24px]">
+              <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 p-6 bg-linear-to-br from-[#5B9BD5]/5 to-[#2B4B7C]/5 rounded-[24px]">
                 <div className="flex items-start gap-3">
                   <div className="size-10 rounded-full bg-white flex items-center justify-center shrink-0">
                     <Truck className="size-5 text-primary" />

package/src/screens/ProfileScreen.tsx

@@ -89,7 +89,7 @@ export default function AccountPage() {
   };
 
   return (
-    <div className="min-h-screen bg-gradient-to-b from-[#F8FAFC] to-[#EBF4FB]">
+    <div className="min-h-screen bg-linear-to-b from-[#F8FAFC] to-[#EBF4FB]">
       {/* Header */}
       <div className="">
         <div className="container mx-auto px-4 py-4">
@@ -110,7 +110,7 @@ export default function AccountPage() {
 
       {/* Tab Content */}
       <div className="container mx-auto max-w-7xl">
-        <div className="rounded-2xl shadow-sm">
+        <div className="rounded-2xl shadow-xs">
           {renderTabContent()}
         </div>
       </div>

package/src/screens/RegisterScreen.tsx

@@ -88,7 +88,7 @@ export function RegisterScreen() {
   };
 
   return (
-    <div className="min-h-screen bg-gradient-to-b from-[#F8FAFC] to-[#EBF4FB]">
+    <div className="min-h-screen bg-linear-to-b from-[#F8FAFC] to-[#EBF4FB]">
       <div className="grid min-h-screen overflow-hidden pb-12">
         <motion.section
           initial={{ opacity: 0, x: 24 }}

package/src/screens/ShopScreen.tsx

@@ -674,7 +674,7 @@ export function ShopScreen({ initialFilters = {}, categoryName }: ShopScreenProp
                   placeholder="Search..."
                   value={searchQuery}
                   onChange={handleInputChange}
-                  className="w-full pl-10 pr-4 py-2.5 rounded-xl border-2 border-gray-200 focus:border-primary focus:outline-none font-['Poppins',sans-serif] text-[13px] text-secondary"
+                  className="w-full pl-10 pr-4 py-2.5 rounded-xl border-2 border-gray-200 focus:border-primary focus:outline-hidden font-['Poppins',sans-serif] text-[13px] text-secondary"
                 />
               </div>
             </div>
@@ -822,7 +822,7 @@ export function ShopScreen({ initialFilters = {}, categoryName }: ShopScreenProp
                       onChange={(event) =>
                         setCustomPrice((current) => ({ ...current, min: event.target.value }))
                       }
-                      className="w-1/2 px-4 py-2.5 rounded-xl border-2 border-gray-200 focus:border-primary focus:outline-none font-['Poppins',sans-serif] text-[13px] text-secondary"
+                      className="w-1/2 px-4 py-2.5 rounded-xl border-2 border-gray-200 focus:border-primary focus:outline-hidden font-['Poppins',sans-serif] text-[13px] text-secondary"
                     />
                     <Input
                       type="number"
@@ -832,7 +832,7 @@ export function ShopScreen({ initialFilters = {}, categoryName }: ShopScreenProp
                       onChange={(event) =>
                         setCustomPrice((current) => ({ ...current, max: event.target.value }))
                       }
-                      className="w-1/2 px-4 py-2.5 rounded-xl border-2 border-gray-200 focus:border-primary focus:outline-none font-['Poppins',sans-serif] text-[13px] text-secondary"
+                      className="w-1/2 px-4 py-2.5 rounded-xl border-2 border-gray-200 focus:border-primary focus:outline-hidden font-['Poppins',sans-serif] text-[13px] text-secondary"
                     />
                   </div>
                   <button
@@ -910,7 +910,7 @@ export function ShopScreen({ initialFilters = {}, categoryName }: ShopScreenProp
                   value={searchQuery}
                   onChange={handleInputChange}
                   onKeyDown={handleKeyDown}
-                  className="flex h-16 w-full rounded-full border-0 bg-white px-5 pl-14 pr-5 text-base text-slate-900 placeholder-slate-400 shadow-lg focus:outline-none focus:ring-2 focus:ring-primary-500/30 disabled:opacity-50"
+                  className="flex h-16 w-full rounded-full border-0 bg-white px-5 pl-14 pr-5 text-base text-slate-900 placeholder-slate-400 shadow-lg focus:outline-hidden focus:ring-2 focus:ring-primary-500/30 disabled:opacity-50"
                   disabled={isSearching}
                 />
               </div>
@@ -938,14 +938,14 @@ export function ShopScreen({ initialFilters = {}, categoryName }: ShopScreenProp
                     initial={{ opacity: 0, y: 20 }}
                     animate={{ opacity: 1, y: 0 }}
                     transition={{ delay: index * 0.1 }}
-                    className={`group relative overflow-hidden rounded-[24px] p-6 transition-all duration-300 ${!categoryFilter ? 'bg-gradient-to-br from-primary to-secondary text-white shadow-xl scale-105'
-                      : 'bg-gradient-to-br from-gray-50 to-white hover:shadow-lg border-2 border-gray-100 hover:border-primary'
+                    className={`group relative overflow-hidden rounded-[24px] p-6 transition-all duration-300 ${!categoryFilter ? 'bg-linear-to-br from-primary to-secondary text-white shadow-xl scale-105'
+                      : 'bg-linear-to-br from-gray-50 to-white hover:shadow-lg border-2 border-gray-100 hover:border-primary'
                       }`}
                   >
                     <div className="relative">
                       <div className={`size-12 rounded-full mb-3 mx-auto flex items-center justify-center transition-all ${!categoryFilter
                         ? 'bg-white/20'
-                        : 'bg-gradient-to-br from-primary/10 to-secondary/10 group-hover:scale-110'
+                        : 'bg-linear-to-br from-primary/10 to-secondary/10 group-hover:scale-110'
                         }`}>
                         <Icon className={`size-6 ${!categoryFilter ? 'text-white' : 'text-primary'
                           }`} />
@@ -968,14 +968,14 @@ export function ShopScreen({ initialFilters = {}, categoryName }: ShopScreenProp
                     animate={{ opacity: 1, y: 0 }}
                     transition={{ delay: index * 0.1 }}
                     onClick={() => handleCategoryChange(category.id ?? '')}
-                    className={`group relative overflow-hidden rounded-[24px] p-6 transition-all duration-300 ${isSelected ? 'bg-gradient-to-br from-primary to-secondary text-white shadow-xl scale-105'
-                      : 'bg-gradient-to-br from-gray-50 to-white hover:shadow-lg border-2 border-gray-100 hover:border-primary'
+                    className={`group relative overflow-hidden rounded-[24px] p-6 transition-all duration-300 ${isSelected ? 'bg-linear-to-br from-primary to-secondary text-white shadow-xl scale-105'
+                      : 'bg-linear-to-br from-gray-50 to-white hover:shadow-lg border-2 border-gray-100 hover:border-primary'
                       }`}
                   >
                     <div className="relative">
                       <div className={`size-12 rounded-full mb-3 mx-auto flex items-center justify-center transition-all ${isSelected
                         ? 'bg-white/20'
-                        : 'bg-gradient-to-br from-primary/10 to-secondary/10 group-hover:scale-110'
+                        : 'bg-linear-to-br from-primary/10 to-secondary/10 group-hover:scale-110'
                         }`}>
                         <Icon className={`size-6 ${isSelected ? 'text-white' : 'text-primary'
                           }`} />
@@ -1000,14 +1000,14 @@ export function ShopScreen({ initialFilters = {}, categoryName }: ShopScreenProp
       <div className="relative pb-16 mt-8">
         <div className="container mx-auto px-4">
           <div className="flex flex-col gap-8 lg:flex-row">
-            <aside className="hidden w-72 flex-shrink-0 lg:block">
+            <aside className="hidden w-72 shrink-0 lg:block">
               <div className="sticky top-24 rounded-lg bg-white">
                 {renderFiltersPanel()}
               </div>
             </aside>
 
             <main className="flex-1 space-y-6">
-              <div className="rounded-3xl border border-gray-100 bg-white p-6 shadow-sm">
+              <div className="rounded-3xl border border-gray-100 bg-white p-6 shadow-xs">
                 <div className="flex flex-col gap-6 md:flex-row md:items-center md:justify-between">
                   <div>
                     <h2 className="text-base font-medium text-gray-700">
@@ -1025,7 +1025,7 @@ export function ShopScreen({ initialFilters = {}, categoryName }: ShopScreenProp
                         onChange={(event) => {
                           setSortOption(event.target.value as SortOption);
                         }}
-                        className="appearance-none rounded-full border border-gray-200 bg-white py-2.5 pl-10 pr-9 text-sm font-medium text-gray-700 shadow-sm transition focus:outline-none focus:ring-1 focus:ring-secondary focus:border-primary"
+                        className="appearance-none rounded-full border border-gray-200 bg-white py-2.5 pl-10 pr-9 text-sm font-medium text-gray-700 shadow-xs transition focus:outline-hidden focus:ring-1 focus:ring-secondary focus:border-primary"
                       >
                         <option value="featured">Featured products</option>
                         <option value="price-low-high">Price: low to high</option>
@@ -1034,7 +1034,7 @@ export function ShopScreen({ initialFilters = {}, categoryName }: ShopScreenProp
                       </select>
                       <ChevronDown className="pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 h-4 w-4 text-gray-400" />
                     </div>
-                    <div className="flex items-center rounded-full border border-gray-200 bg-gray-100 shadow-sm p-1">
+                    <div className="flex items-center rounded-full border border-gray-200 bg-gray-100 shadow-xs p-1">
                       <button
                         type="button"
                         onClick={() => setViewMode('grid')}
@@ -1124,7 +1124,7 @@ export function ShopScreen({ initialFilters = {}, categoryName }: ShopScreenProp
                             <motion.div
                               key={product.id}
                               whileHover={{ y: -4 }}
-                              className="group flex cursor-pointer flex-col gap-6 rounded-2xl border border-gray-100 bg-white p-5 shadow-sm transition hover:shadow-xl md:flex-row md:items-start"
+                              className="group flex cursor-pointer flex-col gap-6 rounded-2xl border border-gray-100 bg-white p-5 shadow-xs transition hover:shadow-xl md:flex-row md:items-start"
                               onClick={() => router.push(buildPath(`/products/${product._id}`))}
                             >
                               <div className="relative h-48 w-full overflow-hidden rounded-2xl bg-gray-100 md:h-40 md:w-40">
@@ -1207,7 +1207,7 @@ export function ShopScreen({ initialFilters = {}, categoryName }: ShopScreenProp
                 {pagination.totalPages > 1 && (
                   <div className="mt-10 flex flex-wrap items-center justify-center gap-3">
                     <Button
-                      variant="outline"
+                      variant="outline-solid"
                       onClick={() => setPage((current) => Math.max(1, current - 1))}
                       disabled={page === 1}
                     >
@@ -1217,7 +1217,7 @@ export function ShopScreen({ initialFilters = {}, categoryName }: ShopScreenProp
                       Page {page} of {pagination.totalPages}
                     </span>
                     <Button
-                      variant="outline"
+                      variant="outline-solid"
                       onClick={() =>
                         setPage((current) => Math.min(pagination.totalPages, current + 1))
                       }

package/src/screens/WishlistScreen.tsx

@@ -205,7 +205,7 @@ export default function WishlistScreen() {
                                                 type="checkbox"
                                                 checked={onlyInStock}
                                                 onChange={(event) => setOnlyInStock(event.target.checked)}
-                                                className="h-4 w-4 rounded border-slate-300 text-secondary focus:ring-secondary"
+                                                className="h-4 w-4 rounded-sm border-slate-300 text-secondary focus:ring-secondary"
                                             />
                                             Only show in-stock
                                         </label>
@@ -215,7 +215,7 @@ export default function WishlistScreen() {
                                             <select
                                                 value={sortOption}
                                                 onChange={(event) => setSortOption(event.target.value as SortOption)}
-                                                className="bg-transparent text-sm font-medium text-slate-700 outline-none"
+                                                className="bg-transparent text-sm font-medium text-slate-700 outline-hidden"
                                             >
                                                 {SORT_OPTIONS.map((option) => (
                                                     <option key={option.value} value={option.value}>
@@ -338,7 +338,7 @@ export default function WishlistScreen() {
                                                             animate={{ opacity: 1, y: 0 }}
                                                             exit={{ opacity: 0, y: -20 }}
                                                             transition={{ duration: 0.2 }}
-                                                            className="flex flex-col gap-4 rounded-2xl border border-slate-100 bg-slate-50 p-4 shadow-sm shadow-primary-50 sm:flex-row sm:items-center"
+                                                            className="flex flex-col gap-4 rounded-2xl border border-slate-100 bg-slate-50 p-4 shadow-xs shadow-primary-50 sm:flex-row sm:items-center"
                                                         >
                                                             <div className="relative h-28 w-full overflow-hidden rounded-2xl bg-white sm:w-40">
                                                                 <Image
@@ -390,7 +390,7 @@ export default function WishlistScreen() {
                                                                     </Button>
                                                                     <Button
                                                                         size="sm"
-                                                                        variant="outline"
+                                                                        variant="outline-solid"
                                                                         onClick={() => handleRemoveFromWishlist(product.id)}
                                                                         className="text-secondary"
                                                                     >

package/src/styles/globals.css

@@ -1,6 +1,117 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import 'tailwindcss';
+
+@theme {
+  --color-primary-50: rgb(var(--color-primary-50));
+  --color-primary-100: rgb(var(--color-primary-100));
+  --color-primary-200: rgb(var(--color-primary-200));
+  --color-primary-300: rgb(var(--color-primary-300));
+  --color-primary-400: rgb(var(--color-primary-400));
+  --color-primary-500: rgb(var(--color-primary-500));
+  --color-primary-600: rgb(var(--color-primary-600));
+  --color-primary-700: rgb(var(--color-primary-700));
+  --color-primary-800: rgb(var(--color-primary-800));
+  --color-primary-900: rgb(var(--color-primary-900));
+  --color-primary-950: rgb(var(--color-primary-950));
+  --color-primary: var(--color-primary, #5b9bd5);
+  --color-primary-dark: var(--color-primary-dark, #4a8ac4);
+  --color-primary-bg: var(--color-primary-bg, #e6ebf0);
+
+  --color-secondary-50: rgb(var(--color-secondary-50));
+  --color-secondary-100: rgb(var(--color-secondary-100));
+  --color-secondary-200: rgb(var(--color-secondary-200));
+  --color-secondary-300: rgb(var(--color-secondary-300));
+  --color-secondary-400: rgb(var(--color-secondary-400));
+  --color-secondary-500: rgb(var(--color-secondary-500));
+  --color-secondary-600: rgb(var(--color-secondary-600));
+  --color-secondary-700: rgb(var(--color-secondary-700));
+  --color-secondary-800: rgb(var(--color-secondary-800));
+  --color-secondary-900: rgb(var(--color-secondary-900));
+  --color-secondary-950: rgb(var(--color-secondary-950));
+  --color-secondary: var(--color-secondary, #2b4b7c);
+
+  --color-accent-50: rgb(var(--color-accent-50));
+  --color-accent-100: rgb(var(--color-accent-100));
+  --color-accent-200: rgb(var(--color-accent-200));
+  --color-accent-300: rgb(var(--color-accent-300));
+  --color-accent-400: rgb(var(--color-accent-400));
+  --color-accent-500: rgb(var(--color-accent-500));
+  --color-accent-600: rgb(var(--color-accent-600));
+  --color-accent-700: rgb(var(--color-accent-700));
+  --color-accent-800: rgb(var(--color-accent-800));
+  --color-accent-900: rgb(var(--color-accent-900));
+  --color-accent-950: rgb(var(--color-accent-950));
+  --color-accent: var(--color-accent, #e67e50);
+  --color-accent-dark: var(--color-accent-dark, #d66f45);
+
+  --color-muted: var(--color-text-muted, #676c80);
+
+  --animate-fade-in: fadeIn 0.3s ease-in-out;
+  --animate-slide-up: slideUp 0.3s ease-out;
+  --animate-slide-down: slideDown 0.3s ease-out;
+  --animate-scale-in: scaleIn 0.2s ease-out;
+
+  @keyframes fadeIn {
+    0% {
+      opacity: 0;
+    }
+    100% {
+      opacity: 1;
+    }
+  }
+  @keyframes slideUp {
+    0% {
+      transform: translateY(10px);
+      opacity: 0;
+    }
+    100% {
+      transform: translateY(0);
+      opacity: 1;
+    }
+  }
+  @keyframes slideDown {
+    0% {
+      transform: translateY(-10px);
+      opacity: 0;
+    }
+    100% {
+      transform: translateY(0);
+      opacity: 1;
+    }
+  }
+  @keyframes scaleIn {
+    0% {
+      transform: scale(0.95);
+      opacity: 0;
+    }
+    100% {
+      transform: scale(1);
+      opacity: 1;
+    }
+  }
+}
+
+/*
+  The default border color has changed to `currentcolor` in Tailwind CSS v4,
+  so we've added these compatibility styles to make sure everything still
+  looks the same as it did with Tailwind CSS v3.
+
+  If we ever want to remove these styles, we need to add an explicit border
+  color utility to any element that depends on these defaults.
+*/
+@layer base {
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--color-gray-200, currentcolor);
+  }
+}
+
+@utility animate-gradient {
+  animation: gradient 3s ease infinite;
+  background-size: 200% 200%;
+}
 
 @layer base {
   :root {
@@ -22,10 +133,6 @@
 }
 
 @layer utilities {
-  .animate-gradient {
-    animation: gradient 3s ease infinite;
-    background-size: 200% 200%;
-  }
   
   @keyframes gradient {
     0% {