From 63139eb20bd8fd3f75b10975634dd6eddd8829e1 Mon Sep 17 00:00:00 2001
From: Mohammed Al-yaseen <mohammed.o.alyaseen@gmail.com>
Date: Wed, 10 Dec 2025 21:22:22 +0300
Subject: [PATCH] update loyalty icon place

---
 src/components/Icons/StarIcon.tsx                  |  9 +++++----
 src/components/Icons/item/DescIcon1.tsx            |  4 ++--
 src/components/Icons/item/DescIcon2.tsx            |  4 ++--
 src/components/Icons/item/DescIcon3.tsx            |  4 ++--
 .../ItemDescriptionIcons.module.css                | 13 ++++++++++++-
 .../ItemDescriptionIcons/ItemDescriptionIcons.tsx  | 14 +++++++++-----
 .../youMayLike/YouMayAlsoLike.module.css           |  5 -----
 src/pages/menu/components/MenuList/ProductCard.tsx |  3 +--
 8 files changed, 33 insertions(+), 23 deletions(-)

diff --git a/src/components/Icons/StarIcon.tsx b/src/components/Icons/StarIcon.tsx
index 097feb1..3fe9fe7 100644
--- a/src/components/Icons/StarIcon.tsx
+++ b/src/components/Icons/StarIcon.tsx
@@ -6,16 +6,17 @@ interface StarIconType {
 const StarIcon = ({ className, onClick }: StarIconType) => {
   return (
     <svg
-      width="17"
-      height="16"
-      viewBox="0 0 17 16"
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
       className={className}
       onClick={onClick}
     >
+      <rect width="20" height="20" rx="10" fill="#F5F5F6" />
       <path
-        d="M7.8951 0.97117C7.92797 0.904766 7.97874 0.84887 8.04169 0.809789C8.10464 0.770709 8.17726 0.75 8.25135 0.75C8.32544 0.75 8.39806 0.770709 8.46101 0.809789C8.52396 0.84887 8.57473 0.904766 8.6076 0.97117L10.3401 4.48042C10.4541 4.71151 10.6225 4.91144 10.8309 5.063C11.0393 5.21455 11.2814 5.31319 11.5363 5.35042L15.4109 5.91742C15.4843 5.92806 15.5532 5.95902 15.61 6.00682C15.6667 6.05462 15.7089 6.11733 15.7319 6.18788C15.7548 6.25842 15.7576 6.33397 15.7398 6.406C15.722 6.47802 15.6845 6.54363 15.6314 6.59542L12.8294 9.32392C12.6444 9.50388 12.506 9.72616 12.4262 9.97155C12.3464 10.2169 12.3274 10.4781 12.3711 10.7324L13.0326 14.5874C13.0456 14.6608 13.0376 14.7363 13.0097 14.8054C12.9818 14.8745 12.935 14.9344 12.8748 14.9782C12.8145 15.022 12.7431 15.0479 12.6687 15.0531C12.5944 15.0583 12.5201 15.0424 12.4543 15.0074L8.99085 13.1864C8.76268 13.0665 8.50876 13.0038 8.25097 13.0038C7.99319 13.0038 7.73927 13.0665 7.5111 13.1864L4.04835 15.0074C3.9826 15.0422 3.9084 15.0579 3.83419 15.0526C3.75998 15.0473 3.68874 15.0213 3.62857 14.9776C3.5684 14.9338 3.52172 14.8741 3.49384 14.8051C3.46596 14.7361 3.45799 14.6607 3.47085 14.5874L4.1316 10.7332C4.17538 10.4787 4.15653 10.2174 4.07669 9.9719C3.99685 9.72636 3.85841 9.50396 3.67335 9.32392L0.87135 6.59617C0.817795 6.54444 0.779845 6.47872 0.761822 6.40648C0.743799 6.33423 0.746427 6.25838 0.769409 6.18756C0.79239 6.11674 0.8348 6.0538 0.891807 6.00591C0.948815 5.95801 1.01813 5.92709 1.09185 5.91667L4.9656 5.35042C5.22083 5.31342 5.46324 5.21488 5.6719 5.06332C5.88057 4.91175 6.04923 4.7117 6.16335 4.48042L7.8951 0.97117Z"
+        d="M9.76242 5.14751C9.78433 5.10324 9.81818 5.06597 9.86015 5.03992C9.90212 5.01387 9.95053 5.00006 9.99992 5.00006C10.0493 5.00006 10.0977 5.01387 10.1397 5.03992C10.1817 5.06597 10.2155 5.10324 10.2374 5.14751L11.3924 7.48701C11.4684 7.64107 11.5807 7.77436 11.7196 7.87539C11.8585 7.97643 12.0199 8.04219 12.1899 8.06701L14.7729 8.44501C14.8219 8.4521 14.8678 8.47274 14.9057 8.50461C14.9435 8.53647 14.9716 8.57828 14.9869 8.62531C15.0022 8.67234 15.0041 8.72271 14.9922 8.77073C14.9804 8.81874 14.9553 8.86248 14.9199 8.89701L13.0519 10.716C12.9286 10.836 12.8364 10.9842 12.7832 11.1478C12.7299 11.3114 12.7173 11.4855 12.7464 11.655L13.1874 14.225C13.1961 14.2739 13.1908 14.3243 13.1722 14.3704C13.1536 14.4164 13.1224 14.4563 13.0822 14.4855C13.042 14.5147 12.9944 14.532 12.9449 14.5355C12.8953 14.5389 12.8458 14.5284 12.8019 14.505L10.4929 13.291C10.3408 13.211 10.1715 13.1693 9.99967 13.1693C9.82782 13.1693 9.65854 13.211 9.50642 13.291L7.19792 14.505C7.15409 14.5282 7.10462 14.5387 7.05515 14.5351C7.00568 14.5316 6.95818 14.5143 6.91807 14.4851C6.87796 14.4559 6.84684 14.4161 6.82825 14.3701C6.80966 14.3241 6.80435 14.2739 6.81292 14.225L7.25342 11.6555C7.28261 11.4859 7.27004 11.3117 7.21682 11.148C7.16359 10.9843 7.0713 10.836 6.94792 10.716L5.07992 8.89751C5.04422 8.86302 5.01892 8.81921 5.0069 8.77105C4.99489 8.72288 4.99664 8.67232 5.01196 8.6251C5.02728 8.57789 5.05556 8.53593 5.09356 8.504C5.13157 8.47207 5.17778 8.45146 5.22692 8.44451L7.80942 8.06701C7.97958 8.04234 8.14118 7.97665 8.28029 7.87561C8.4194 7.77456 8.53184 7.6412 8.60792 7.48701L9.76242 5.14751Z"
         fill="#FFC600"
         stroke="#FFC600"
         strokeWidth="1.5"
diff --git a/src/components/Icons/item/DescIcon1.tsx b/src/components/Icons/item/DescIcon1.tsx
index 46777b9..dee7ff4 100644
--- a/src/components/Icons/item/DescIcon1.tsx
+++ b/src/components/Icons/item/DescIcon1.tsx
@@ -7,8 +7,8 @@ interface DescIcon1Type {
 const DescIcon1 = ({ className, onClick,pathColor }: DescIcon1Type) => {
   return (
     <svg
-      width="22"
-      height="22"
+      width="16"
+      height="16"
       viewBox="0 0 16 16"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
diff --git a/src/components/Icons/item/DescIcon2.tsx b/src/components/Icons/item/DescIcon2.tsx
index 2f738c4..7ee128e 100644
--- a/src/components/Icons/item/DescIcon2.tsx
+++ b/src/components/Icons/item/DescIcon2.tsx
@@ -7,8 +7,8 @@ interface DescIcon2Type {
 const DescIcon2 = ({ className, onClick, pathColor }: DescIcon2Type) => {
   return (
     <svg
-      width="22"
-      height="22"
+      width="16"
+      height="16"
       viewBox="0 0 16 16"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
diff --git a/src/components/Icons/item/DescIcon3.tsx b/src/components/Icons/item/DescIcon3.tsx
index 16f4a84..e462758 100644
--- a/src/components/Icons/item/DescIcon3.tsx
+++ b/src/components/Icons/item/DescIcon3.tsx
@@ -7,8 +7,8 @@ interface DescIcon3Type {
 const DescIcon3 = ({ className, onClick, pathColor }: DescIcon3Type) => {
   return (
     <svg
-      width="22"
-      height="22"
+      width="16"
+      height="16"
       viewBox="0 0 16 16"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
diff --git a/src/components/ItemDescriptionIcons/ItemDescriptionIcons.module.css b/src/components/ItemDescriptionIcons/ItemDescriptionIcons.module.css
index ee11f2f..13c4056 100644
--- a/src/components/ItemDescriptionIcons/ItemDescriptionIcons.module.css
+++ b/src/components/ItemDescriptionIcons/ItemDescriptionIcons.module.css
@@ -1,3 +1,14 @@
 .descIcon {
   margin: 0 5px 0 0;
-}
\ No newline at end of file
+}
+
+.descIconsContainer {
+  position: relative;
+  top: 3px;
+}
+
+.itemDescriptionIconsContainer {
+  display: flex;
+  flex-direction: row;
+  gap: 8px;
+}
diff --git a/src/components/ItemDescriptionIcons/ItemDescriptionIcons.tsx b/src/components/ItemDescriptionIcons/ItemDescriptionIcons.tsx
index c9fd943..75d4220 100644
--- a/src/components/ItemDescriptionIcons/ItemDescriptionIcons.tsx
+++ b/src/components/ItemDescriptionIcons/ItemDescriptionIcons.tsx
@@ -3,15 +3,19 @@ import DescIcon2 from "components/Icons/item/DescIcon2";
 import DescIcon3 from "components/Icons/item/DescIcon3";
 import { useAppSelector } from "redux/hooks";
 import styles from "./ItemDescriptionIcons.module.css";
+import StarIcon from "components/Icons/StarIcon";
 
-export function ItemDescriptionIcons({ className }: { className?: string }) {
+export function ItemDescriptionIcons({ className, hasLoyalty }: { className?: string, hasLoyalty?: boolean }) {
   const { themeName } = useAppSelector((state) => state.theme);
   const pathColor = themeName === "dark" ? "white" : "#000044";
   return (
-    <div className={className}>
-      <DescIcon1 className={styles.descIcon} pathColor={pathColor} />
-      <DescIcon2 className={styles.descIcon} pathColor={pathColor} />
-      <DescIcon3 className={styles.descIcon} pathColor={pathColor} />
+    <div className={className + " " + styles.itemDescriptionIconsContainer}>
+      {hasLoyalty && <StarIcon className={styles.starIcon} />}
+      <span className={styles.descIconsContainer}>
+        <DescIcon1 className={styles.descIcon} pathColor={pathColor} />
+        <DescIcon2 className={styles.descIcon} pathColor={pathColor} />
+        <DescIcon3 className={styles.descIcon} pathColor={pathColor} />
+      </span>
     </div>
   );
 }
diff --git a/src/pages/cart/components/youMayLike/YouMayAlsoLike.module.css b/src/pages/cart/components/youMayLike/YouMayAlsoLike.module.css
index 5163e78..a0be90f 100644
--- a/src/pages/cart/components/youMayLike/YouMayAlsoLike.module.css
+++ b/src/pages/cart/components/youMayLike/YouMayAlsoLike.module.css
@@ -105,11 +105,6 @@
   outline-offset: 2px;
 }
 
-.itemDescriptionIcons svg {
-  width: 18px;
-  height: 18px;
-}
-
 .arrowButton {
   display: flex;
   align-items: center;
diff --git a/src/pages/menu/components/MenuList/ProductCard.tsx b/src/pages/menu/components/MenuList/ProductCard.tsx
index 674959c..22eb370 100644
--- a/src/pages/menu/components/MenuList/ProductCard.tsx
+++ b/src/pages/menu/components/MenuList/ProductCard.tsx
@@ -84,7 +84,6 @@ export default function ProductCard({ item }: Props) {
                 gap: "0.5rem",
               }}
             >
-              <StarIcon />
               <ProText
                 style={{
                   margin: 0,
@@ -156,7 +155,7 @@ export default function ProductCard({ item }: Props) {
                   ...(isRTL ? { right: -5 } : {}),
                 }}
               >
-                <ItemDescriptionIcons className={styles.itemDescriptionIcons} />
+                <ItemDescriptionIcons className={styles.itemDescriptionIcons} hasLoyalty={item.isHasLoyalty} />
               </div>
             </div>