From caa109fbcb5f0b9a11894ffad8191738a53b9a0d Mon Sep 17 00:00:00 2001
From: Mohammed Al-yaseen <mohammed.o.alyaseen@gmail.com>
Date: Wed, 10 Dec 2025 00:44:50 +0300
Subject: [PATCH] styles adjustments

---
 src/components/ArabicPrice/ArabicPrice.tsx    |  6 ++-
 .../CategoriesList/CategoriesList.module.css  | 49 +------------------
 .../CategoriesList/CategoriesList.tsx         | 34 ++++++-------
 .../menu/components/MenuList/ProductCard.tsx  | 10 ++--
 4 files changed, 27 insertions(+), 72 deletions(-)

diff --git a/src/components/ArabicPrice/ArabicPrice.tsx b/src/components/ArabicPrice/ArabicPrice.tsx
index c0d6cc3..a902264 100644
--- a/src/components/ArabicPrice/ArabicPrice.tsx
+++ b/src/components/ArabicPrice/ArabicPrice.tsx
@@ -47,6 +47,7 @@ const ArabicPrice: React.FC<ArabicPriceProps> = ({
             style={{
               verticalAlign: "baseline",
               lineHeight: 1,
+              fontSize: "14px",
               ...(decorationStyle ?? {}),
             }}
           >
@@ -55,7 +56,7 @@ const ArabicPrice: React.FC<ArabicPriceProps> = ({
           <span style={{ margin: "0 2px" }} />
           <span
             style={{
-              fontSize: "0.9em",
+              fontSize: "14px",
               verticalAlign: "baseline",
               lineHeight: 1,
               position: "relative",
@@ -73,6 +74,7 @@ const ArabicPrice: React.FC<ArabicPriceProps> = ({
               verticalAlign: "baseline",
               lineHeight: 1,
               display: "inline-block",
+              fontSize: "14px",
               ...(decorationStyle ?? {}),
             }}
           >
@@ -81,7 +83,7 @@ const ArabicPrice: React.FC<ArabicPriceProps> = ({
           <span style={{ margin: "0 2px" }} />
           <span
             style={{
-              fontSize: "0.9em",
+              fontSize: "14px",
               verticalAlign: "baseline",
               lineHeight: 1,
               display: "inline-block",
diff --git a/src/pages/menu/components/CategoriesList/CategoriesList.module.css b/src/pages/menu/components/CategoriesList/CategoriesList.module.css
index bd54afd..a3aa3be 100644
--- a/src/pages/menu/components/CategoriesList/CategoriesList.module.css
+++ b/src/pages/menu/components/CategoriesList/CategoriesList.module.css
@@ -209,6 +209,7 @@
   border-radius: 0.375rem;
   transition: transform 0.3s ease;
   overflow: hidden;
+  border-radius: 6px;
 }
 
 /* Responsive adjustments */
@@ -408,22 +409,6 @@
   animation: glowPulse 2s ease-in-out infinite;
 }
 
-/* Fade out glow effect when returning to normal */
-.categoriesContainer:not(.categoriesSticky)::before {
-  content: "";
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  height: 2px;
-  background: linear-gradient(
-    90deg,
-    transparent,
-    rgba(24, 144, 255, 0.1),
-    transparent
-  );
-  animation: glowFadeOut 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
-}
 
 @keyframes glowPulse {
   0%,
@@ -552,25 +537,6 @@
   animation: darkCategoryUpdate 0.6s ease-in-out;
 }
 
-@keyframes darkCategoryUpdate {
-  0% {
-    transform: scale(1.05);
-  }
-  50% {
-    transform: scale(1.1);
-    box-shadow: 0 8px 32px rgba(255, 198, 0, 0.4);
-  }
-  100% {
-    transform: scale(1.05);
-  }
-}
-
-/* Enhanced dark theme for container backgrounds */
-:global(.darkApp) .container,
-:global(.darkApp) .categoriesContainer {
-  background-color: #0a0a0a !important;
-  border-bottom-color: #363636 !important;
-}
 
 :global(.darkApp) .itemDescriptionIcons path {
   fill: #ffffff;
@@ -636,19 +602,6 @@
   }
 }
 
-/* Enhanced responsive print styles */
-@media print {
-  .menuItem,
-  .categoryCard {
-    box-shadow: none !important;
-    border: 1px solid #ccc !important;
-  }
-
-  .categoriesContainer {
-    display: none !important;
-  }
-}
-
 /* Mobile-specific sticky categories */
 @media (max-width: 768px) {
   .categoriesSticky {
diff --git a/src/pages/menu/components/CategoriesList/CategoriesList.tsx b/src/pages/menu/components/CategoriesList/CategoriesList.tsx
index fdbcef4..69ac3ad 100644
--- a/src/pages/menu/components/CategoriesList/CategoriesList.tsx
+++ b/src/pages/menu/components/CategoriesList/CategoriesList.tsx
@@ -38,12 +38,12 @@ export function CategoriesList({ categories }: CategoriesListProps) {
     if (xs) {
       return {
         width: 90,
-        height: isCategoriesSticky ? 38 : 110,
+        height: isCategoriesSticky ? 38 : 120,
       };
     } else if (md) {
       return {
         width: 120,
-        height: isCategoriesSticky ? 38 : 110,
+        height: isCategoriesSticky ? 38 : 120,
       };
     } else {
       return {
@@ -220,20 +220,10 @@ export function CategoriesList({ categories }: CategoriesListProps) {
                     src={category.image || default_image}
                     fallbackSrc={default_image}
                     alt={category.name}
-                    className={`${styles.categoryMenuItemImage} ${
-                      xs
-                        ? styles.categoryMenuItemImageMobile
-                        : md
-                          ? styles.categoryMenuItemImageTablet
-                          : styles.categoryMenuItemImageDesktop
-                    }`}
+                    className={`${styles.categoryMenuItemImage}`}
                     // {...getCategoryImageStyle()}
                     width={105}
                     height={80}
-                    style={{
-                      borderEndEndRadius: isCategoriesSticky ? 8 : 0,
-                      borderEndStartRadius: isCategoriesSticky ? 8 : 0,
-                    }}
                     loadingContainerStyle={{
                       borderEndEndRadius: isCategoriesSticky ? 8 : 0,
                       borderEndStartRadius: isCategoriesSticky ? 8 : 0,
@@ -252,16 +242,24 @@ export function CategoriesList({ categories }: CategoriesListProps) {
                       ? {
                           // backgroundColor: "#fff6e0",
                           borderBottom: isCategoriesSticky
-                            ? "solid 1px var(--primary)"
+                            ? activeCategory === category.id
+                              ? "solid 1px var(--primary)"
+                              : "solid 1px var(--border)"
                             : "none",
                           borderRight: isCategoriesSticky
-                            ? "solid 1px var(--primary)"
+                            ? activeCategory === category.id
+                              ? "solid 1px var(--primary)"
+                              : "solid 1px var(--border)"
                             : "none",
                           borderLeft: isCategoriesSticky
-                            ? "solid 1px var(--primary)"
+                            ? activeCategory === category.id
+                              ? "solid 1px var(--primary)"
+                              : "solid 1px var(--border)"
                             : "none",
                           borderTop: isCategoriesSticky
-                            ? "solid 1px var(--primary)"
+                            ? activeCategory === category.id
+                              ? "solid 1px var(--primary)"
+                              : "solid 1px var(--border)"
                             : 0,
                           borderStartStartRadius: isCategoriesSticky ? 888 : 0,
                           borderStartEndRadius: isCategoriesSticky ? 888 : 0,
@@ -273,6 +271,7 @@ export function CategoriesList({ categories }: CategoriesListProps) {
                     width: 104,
                     height: 30,
                     marginBottom: 1,
+                    border: "none"
                   }}
                 >
                   <ProText
@@ -308,6 +307,7 @@ export function CategoriesList({ categories }: CategoriesListProps) {
                             ? `2px solid ${colors.primary}`
                             : "none",
                         paddingBottom: activeCategory === category.id ? 8 : 0,
+                        marginTop: isCategoriesSticky ? 0 : 4,
                       }}
                     >
                       {isRTL
diff --git a/src/pages/menu/components/MenuList/ProductCard.tsx b/src/pages/menu/components/MenuList/ProductCard.tsx
index 9e78203..674959c 100644
--- a/src/pages/menu/components/MenuList/ProductCard.tsx
+++ b/src/pages/menu/components/MenuList/ProductCard.tsx
@@ -62,7 +62,7 @@ export default function ProductCard({ item }: Props) {
               justifyContent: "space-between",
               padding: item.description
                 ? "16px 16px 8px 16px"
-                : "16px 16px 24px 16px",
+                : "16px",
               overflow: "hide",
               boxShadow: "none",
             },
@@ -71,10 +71,9 @@ export default function ProductCard({ item }: Props) {
           <div
             style={{
               display: "flex",
-              alignItems: "center",
               justifyContent: "space-between",
               height: "100%",
-              gap: isMobile ? 10 : 16,
+              gap: isMobile ? 11 : 16,
             }}
           >
             <div
@@ -160,6 +159,7 @@ export default function ProductCard({ item }: Props) {
                 <ItemDescriptionIcons className={styles.itemDescriptionIcons} />
               </div>
             </div>
+
             <div style={{ position: "relative" }}>
               {/* {item.isHasLoyalty && (
               <StarIcon  className={styles.loyaltyButton} />
@@ -186,8 +186,8 @@ export default function ProductCard({ item }: Props) {
                         ? styles.popularMenuItemImageTablet
                         : styles.popularMenuItemImageDesktop
                   }`}
-                  width={90}
-                  height={90}
+                  width={92}
+                  height={92}
                 />
 
                 {/* <AddToCartButton /> */}