styles fixes

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

src/pages/cart/cart.module.css

@@ -65,7 +65,7 @@
 }
 
 .tableNumberCard :global(.ant-select-selection-overflow) {
-  top: 5px !important;
+  top: 1px !important;
 }
 
 .couponApplyIcon {

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 */

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 }}>