enhancements

src/assets/locals/ar.json

@@ -148,7 +148,9 @@
     "delivery": "التوصيل",
     "noMenuItemsAvailable": "لا توجد عناصر قائمة متاحة",
     "restaurantCover": "غلاف المطعم",
-    "restaurantLogo": "شعار المطعم"
+    "restaurantLogo": "شعار المطعم",
+    "joinUs": "انضم إلى الولاء",
+    "joinUsDescription": "لتحصل على هدية مجانية"
   },
   "cart": {
     "title": "السلة",
@@ -232,8 +234,7 @@
     "useLoyaltyPoints": "استخدام نقاط الولاء",
     "noLoyaltyItemsInCart": "لا توجد عناصر ولاء في سلة المشتريات",
     "pleaseAddLoyaltyItems": "يرجى إضافة عناصر ولاء إلى سلة المشتريات لاستخدام نقاط الولاء",
-    "loyaltyDiscountApplied": "تم تطبيق خصم الولاء: {{itemName}} (خصم {{amount}})",
-    "joinToEarn": "انضم إلى الولاء لتحصل على هدية مجانية"
+    "loyaltyDiscountApplied": "تم تطبيق خصم الولاء: {{itemName}} (خصم {{amount}})"
   },
   "checkout": {
     "title": "الدفع",
@@ -305,7 +306,7 @@
     "gotIt": "فهمت",
     "howItWorksDescription": "يمكنك إرسال هدية إلى أي شخص عبر التطبيق. يمكنك إرسال هدية إلى أي شخص عبر التطبيق. يمكنك إرسال هدية إلى أي شخص عبر التطبيق. يمكنك إرسال هدية إلى أي شخص عبر التطبيق. يمكنك إرسال هدية إلى أي شخص عبر التطبيق.",
     "senderEmail": "البريد الإلكتروني المرسل",
-    "save":"حفظ"
+    "save": "حفظ"
   },
   "login": {
     "singup/Login": "الدخول / التسجيل",

src/assets/locals/en.json

@@ -161,7 +161,8 @@
     "searchPlaceholder": "Search for products...",
     "noResultsFound": "No results found",
     "cart": "Cart",
-    "joinToEarn": "Join us to earn loyalty points"
+    "joinUs": "Join us",
+    "joinUsDescription": "to earn loyalty points"
   },
   "cart": {
     "title": "Cart",

src/components/LoyaltyCard/LoyaltyCard.tsx

@@ -66,12 +66,23 @@ const LoyaltyCard = () => {
                   value: restaurant?.loyalty_stamps ?? 0,
                 })}
               {!token && (
-                <Link
-                  to={`/${id}/login`}
-                  style={{ color: colors.primary, marginTop: 4 }}
-                >
-                  {t("menu.joinToEarn")}
-                </Link>
+                <div style={{ paddingTop: 4 }}>
+                  <Link
+                    to={`/${id}/login`}
+                    style={{
+                      color: colors.primary,
+                      textDecoration: "underline",
+                      fontSize: "14px",
+                      fontWeight: 400,
+                      padding: "0 4px",
+                    }}
+                  >
+                    {t("menu.joinUs")}
+                  </Link>
+                  <span style={{ fontSize: "14px", color: colors.secondary }}>
+                    {t("menu.joinUsDescription")}
+                  </span>
+                </div>
               )}
             </ProText>
           </Col>