From 0035a84dea4e032ba14d0c3ba07f97e94d39f2e7 Mon Sep 17 00:00:00 2001 From: Mohammed Al-yaseen Date: Sat, 11 Oct 2025 11:07:40 +0300 Subject: [PATCH] cart: enhance order summary styles --- .../OrderSummary/OrderSummary.module.css | 129 ++++++++---------- src/components/OrderSummary/OrderSummary.tsx | 35 ++--- src/index.css | 4 +- .../cart/components/CartDesktopLayout.tsx | 1 - 4 files changed, 67 insertions(+), 102 deletions(-) diff --git a/src/components/OrderSummary/OrderSummary.module.css b/src/components/OrderSummary/OrderSummary.module.css index 7a3ef4c..d4c39c7 100644 --- a/src/components/OrderSummary/OrderSummary.module.css +++ b/src/components/OrderSummary/OrderSummary.module.css @@ -2,24 +2,10 @@ padding: 16px !important; } -/* Enhanced responsive order summary */ -@media (min-width: 769px) and (max-width: 1024px) { - .orderSummary { - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); - } -} - .orderSummary { transition: all 0.3s ease; } -/* Enhanced responsive order summary */ -@media (min-width: 769px) and (max-width: 1024px) { - .orderSummary { - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); - } -} - .summaryRow { display: flex; justify-content: space-between; @@ -27,60 +13,15 @@ font-size: 16px; } -/* Enhanced responsive summary rows */ -@media (min-width: 769px) and (max-width: 1024px) { - .summaryRow { - padding: 12px 0; - font-size: 16px; - } -} - -@media (min-width: 1025px) { - .summaryRow { - padding: 16px 0; - font-size: 18px; - } -} - .summaryDivider { margin: 8px 0 !important; } -/* Enhanced responsive summary divider */ -@media (min-width: 769px) and (max-width: 1024px) { - .summaryDivider { - margin: 20px 0 !important; - } -} - -@media (min-width: 1025px) { - .summaryDivider { - margin: 24px 0 !important; - } -} - .totalRow { font-weight: bold; font-size: 16px; } -/* Enhanced responsive total row */ -@media (min-width: 769px) and (max-width: 1024px) { - .totalRow { - font-size: 18px; - padding-top: 20px; - margin-top: 12px; - } -} - -@media (min-width: 1025px) { - .totalRow { - font-size: 20px; - padding-top: 24px; - margin-top: 16px; - } -} - .desktopOrderSummary { background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%); border: 1px solid rgba(0, 0, 0, 0.08); @@ -102,13 +43,13 @@ margin-top: 16px; } -/* Enhanced responsive animations */ -@media (prefers-reduced-motion: no-preference) { - .orderSummary { - animation: fadeInUp 0.8s ease-out; - } +/* Enhanced responsive focus states */ +.orderSummary:focus { + outline: 2px solid var(--primary); + outline-offset: 2px; } +/* Enhanced responsive animations */ @keyframes fadeInUp { from { opacity: 0; @@ -120,27 +61,61 @@ } } -/* Enhanced responsive focus states */ -.orderSummary:focus { - outline: 2px solid var(--primary); - outline-offset: 2px; +/* ===== MEDIA QUERIES ===== */ + +/* Tablet styles (769px - 1024px) */ +@media (min-width: 769px) and (max-width: 1024px) { + .orderSummary { + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); + } + + .summaryRow { + padding: 12px 0; + font-size: 16px; + } + + .summaryDivider { + margin: 20px 0 !important; + } + + .totalRow { + font-size: 18px; + padding-top: 20px; + margin-top: 12px; + } } +/* Desktop styles (1025px+) */ +@media (min-width: 1025px) { + .summaryRow { + padding: 8px 0; + font-size: 18px; + } + + .summaryDivider { + margin: 0 !important; + } + + .totalRow { + font-size: 20px; + } +} + +/* Focus states for larger screens */ @media (min-width: 768px) { .orderSummary:focus { outline-offset: 4px; } } -/* Enhanced responsive print styles */ -@media print { +/* Reduced motion preferences */ +@media (prefers-reduced-motion: no-preference) { .orderSummary { - box-shadow: none !important; - border: 1px solid #ccc !important; + animation: fadeInUp 0.8s ease-out; } } -/* Enhanced responsive hover effects */ +/* Hover effects for devices that support hover */ @media (hover: hover) { .orderSummary:hover { transform: translateY(-2px); @@ -154,3 +129,11 @@ box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4); } } + +/* Print styles */ +@media print { + .orderSummary { + box-shadow: none !important; + border: 1px solid #ccc !important; + } +} \ No newline at end of file diff --git a/src/components/OrderSummary/OrderSummary.tsx b/src/components/OrderSummary/OrderSummary.tsx index b7db53c..9f33203 100644 --- a/src/components/OrderSummary/OrderSummary.tsx +++ b/src/components/OrderSummary/OrderSummary.tsx @@ -10,7 +10,6 @@ import styles from "./OrderSummary.module.css"; export default function OrderSummary() { const { t } = useTranslation(); const subtotal = useAppSelector(selectCartTotal); - const { isRTL } = useAppSelector((state) => state.locale); const tax = subtotal * 0.1; // 10% tax const total = subtotal + tax; @@ -21,39 +20,21 @@ export default function OrderSummary() {
- - {t("cart.basketTotal")} - - + {t("cart.basketTotal")} +
- - {t("cart.discount")} - - + {t("cart.discount")} +
- - {t("cart.riderTip")} - - + {t("cart.riderTip")} +
- {t("cart.totalAmount")} - + {t("cart.totalAmount")} +
diff --git a/src/index.css b/src/index.css index ec973b1..4dcdee9 100644 --- a/src/index.css +++ b/src/index.css @@ -15,7 +15,7 @@ --primary2: #ffc600; --secondary: #09237d; --text-color: #fff; - --text-color-gray: #5f6c7b; + --text-color-gray: #5f6c7b; /* rgba(67, 78, 92, 1); */ --success: #03b100; --danger: #dc3545; --primary-glow: radial-gradient( @@ -43,6 +43,8 @@ --secondary-background: #0a0a0a; --secondary-foreground: #ffffff; --border: #363636; + --text-color: #000; + --text-color-gray: #5f6c7b; /* rgba(67, 78, 92, 1); */ } html, diff --git a/src/pages/cart/components/CartDesktopLayout.tsx b/src/pages/cart/components/CartDesktopLayout.tsx index 1bb3352..b5e2cf4 100644 --- a/src/pages/cart/components/CartDesktopLayout.tsx +++ b/src/pages/cart/components/CartDesktopLayout.tsx @@ -217,7 +217,6 @@ export default function CartDesktopLayout() { {/* Order Summary */}