general updates

src/components/LoyaltyCard/LoyaltyCard.tsx

@@ -1,5 +1,4 @@
 import { Card, Col, Image, Row } from "antd";
-import LoyaltyIcon from "components/Icons/cart/LoyaltyIcons";
 import PresentIcon from "components/Icons/cart/PresentIcon";
 import { useTranslation } from "react-i18next";
 import { Link, useParams } from "react-router-dom";
@@ -8,11 +7,13 @@ import { ACCESS_TOKEN } from "utils/constants";
 import { colors } from "ThemeConstants.ts";
 import ProText from "../ProText";
 import styles from "./LoyaltyCard.module.css";
+import { useAppSelector } from "redux/hooks";
 
 const LoyaltyCard = () => {
   const { t } = useTranslation();
   const { subdomain } = useParams();
   const { data: restaurant } = useGetRestaurantDetailsQuery(subdomain);
+  const { isRTL } = useAppSelector((state) => state.locale);
   const token = localStorage.getItem(ACCESS_TOKEN);
   const isHasLoyaltyGift =
     (restaurant?.loyalty_stamps || 0) -
@@ -29,11 +30,20 @@ const LoyaltyCard = () => {
         >
           <Col>
             <Row align="middle" gutter={[8, 8]}>
-              <Col>
+              {/* <Col>
                 <LoyaltyIcon className={styles.loyaltyIcon} />
-              </Col>
+              </Col> */}
               <Col>
-                <ProText style={{ fontSize: "1rem", fontWeight: 400 }}>
+                <ProText
+                  style={{
+                    fontWeight: 600,
+                    fontStyle: "SemiBold",
+                    fontSize: "16px",
+                    lineHeight: "140%",
+                    letterSpacing: "0%",
+                    color: "#333333",
+                  }}
+                >
                   {t("menu.loyaltyPoints")}
                 </ProText>
               </Col>
@@ -42,10 +52,13 @@ const LoyaltyCard = () => {
               type="secondary"
               strong
               style={{
-                fontSize: "14px",
-                fontWeight: 700,
-                position: "relative",
+                fontWeight: 400,
+                fontStyle: "Regular",
+                fontSize: "12px",
+                lineHeight: "140%",
+                letterSpacing: "0%",
                 top: -2,
+                color: "#777580",
               }}
             >
               {token &&
@@ -61,12 +74,21 @@ const LoyaltyCard = () => {
                       textDecoration: "underline",
                       fontSize: "14px",
                       fontWeight: 400,
-                      padding: "0 4px",
+                      padding: isRTL ? "0 0 0 4px" : "0 4px 0 0",
                     }}
                   >
                     {t("menu.joinUs")}
                   </Link>
-                  <span style={{ fontSize: "14px", color: colors.secondary }}>
+                  <span
+                    style={{
+                      fontWeight: 400,
+                      fontStyle: "Regular",
+                      fontSize: "12px",
+                      lineHeight: "140%",
+                      letterSpacing: "0%",
+                      color: "#777580",
+                    }}
+                  >
                     {t("menu.joinUsDescription")}
                   </span>
                 </div>
@@ -80,7 +102,7 @@ const LoyaltyCard = () => {
             style={{
               display: "flex",
               flexDirection: "row",
-              gap: 10,
+              gap: 12,
               overflow: "hidden",
               scrollbarWidth: "none",
             }}