From 6697e4aed13e9285b08a1e9d2bc0de0b67783858 Mon Sep 17 00:00:00 2001
From: Mohammed Al-yaseen <mohammed.o.alyaseen@gmail.com>
Date: Tue, 14 Oct 2025 22:45:14 +0300
Subject: [PATCH] styles fixes

---
 src/ThemeConstants.ts                         |  9 +++++----
 src/pages/cart/cart.module.css                |  2 +-
 .../youMayLike/YouMayAlsoLike.module.css      | 19 +++++++++++++++++--
 .../youMayLike/YouMightAlsoLike.tsx           |  2 --
 4 files changed, 23 insertions(+), 9 deletions(-)

diff --git a/src/ThemeConstants.ts b/src/ThemeConstants.ts
index bd9b562..38181ed 100644
--- a/src/ThemeConstants.ts
+++ b/src/ThemeConstants.ts
@@ -2,7 +2,7 @@
 import type { ThemeConfig } from "antd";
 
 export const colors = {
-  primary: "#FFC600",
+  primary: "#FFD633",
   secondary: "linear-gradient(135deg, #00C1D4 0%, #FF5F6D 100%)",
   darkSpace: "linear-gradient(to right, #0F0525, #2A0B45)",
 };
@@ -17,7 +17,6 @@ export const errorColor = "#DC3545";
 export const errorColorDark = "#d9363e";
 export const DisabledColor = "#424242";
 
-
 export const WHITE_COLOR = {
   50: "#e0f1ff",
   100: "#b0d2ff",
@@ -30,7 +29,7 @@ export const WHITE_COLOR = {
   800: "#003650",
   900: "#001620",
   borderColor: "#E7EAF3B2",
-  primaryColor: "#FFC600",
+  primaryColor: "#FFD633",
   primaryColor2: "#09237D",
   whiteColor: "#FFF",
   blackColor: "#000000e0",
@@ -59,7 +58,7 @@ export const DARK_COLOR = {
   // Semantic colors
   borderColor: "#363636",
   borderColorLight: "#424242",
-  primaryColor: "#FFC600",
+  primaryColor: "#FFD633",
   primaryColorHover: "#FFD633",
   primaryColorActive: "#E6B800",
   primaryColor2: "#FFD633",
@@ -244,6 +243,7 @@ export const themeConfig: ThemeConfig = {
     Select: {
       borderRadius: 1000,
       multipleItemHeightLG: 32,
+      optionSelectedBg: WHITE_COLOR.activeBg,
     },
   },
 };
@@ -377,6 +377,7 @@ export const darkThemeConfig: ThemeConfig = {
       colorText: DARK_COLOR.textPrimary,
       colorTextPlaceholder: DARK_COLOR.textDisabled,
       borderRadius: 1000,
+      optionSelectedBg: DARK_COLOR.activeBg,
     },
 
     // Menu component
diff --git a/src/pages/cart/cart.module.css b/src/pages/cart/cart.module.css
index 192b62a..087aaa8 100644
--- a/src/pages/cart/cart.module.css
+++ b/src/pages/cart/cart.module.css
@@ -65,7 +65,7 @@
 }
 
 .tableNumberCard :global(.ant-select-selection-overflow) {
-  top: 5px !important;
+  top: 1px !important;
 }
 
 .couponApplyIcon {
diff --git a/src/pages/cart/components/youMayLike/YouMayAlsoLike.module.css b/src/pages/cart/components/youMayLike/YouMayAlsoLike.module.css
index 9b89272..b79de17 100644
--- a/src/pages/cart/components/youMayLike/YouMayAlsoLike.module.css
+++ b/src/pages/cart/components/youMayLike/YouMayAlsoLike.module.css
@@ -47,10 +47,25 @@
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
 }
 
-@media (min-width: 768px) {
+@media (max-width: 768px) {
   .popularMenuItemImage:focus {
     outline-offset: 4px;
   }
+  .youMightAlsoLikeContainer {
+    height: 150px !important;
+  }
+}
+
+@media (min-width: 768px) and (max-width: 1024px) {
+  .youMightAlsoLikeContainer {
+    height: 200px !important;
+  }
+}
+
+@media (min-width: 1024px) {
+  .youMightAlsoLikeContainer {
+    height: 200px !important;
+  }
 }
 
 /* Hover effects for devices that support hover */
@@ -118,7 +133,7 @@
   color: white;
 }
 
-[data-theme="dark"] .arrowButton:hover stroke{
+[data-theme="dark"] .arrowButton:hover stroke {
   background: rgba(40, 40, 40, 1);
   border-color: rgba(255, 255, 255, 0.2);
 }
diff --git a/src/pages/cart/components/youMayLike/YouMightAlsoLike.tsx b/src/pages/cart/components/youMayLike/YouMightAlsoLike.tsx
index aeea8ba..e873886 100644
--- a/src/pages/cart/components/youMayLike/YouMightAlsoLike.tsx
+++ b/src/pages/cart/components/youMayLike/YouMightAlsoLike.tsx
@@ -191,7 +191,6 @@ export default function YouMightAlsoLike() {
                   justifyContent: "space-between",
                   width: isMobile ? "95px" : isTablet ? "120px" : "140px",
                   position: "relative",
-                  height: 200,
                   overflow: "hidden",
                 }}
               >
@@ -258,7 +257,6 @@ export default function YouMightAlsoLike() {
                   style={{
                     flex: 1,
                     rowGap: 0,
-                    height: 40,
                   }}
                 >
                   <div style={{ height: 25 }}>