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": "الدفع",

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 && (
+                <div style={{ paddingTop: 4 }}>
                   <Link
                     to={`/${id}/login`}
-                  style={{ color: colors.primary, marginTop: 4 }}
+                    style={{
+                      color: colors.primary,
+                      textDecoration: "underline",
+                      fontSize: "14px",
+                      fontWeight: 400,
+                      padding: "0 4px",
+                    }}
                   >
-                  {t("menu.joinToEarn")}
+                    {t("menu.joinUs")}
                   </Link>
+                  <span style={{ fontSize: "14px", color: colors.secondary }}>
+                    {t("menu.joinUsDescription")}
+                  </span>
+                </div>
               )}
             </ProText>
           </Col>