remove unnecessary code & enhance gray color over the app

src/components/PaymentMethods/PaymentMethods.tsx

@@ -4,8 +4,7 @@ import ArabicPrice from "components/ArabicPrice";
 import DifferentCardIcon from "components/Icons/paymentMethods/DifferentCardIcon";
 import ProText from "components/ProText";
 import { useTranslation } from "react-i18next";
-import { useAppSelector } from "redux/hooks";
-import { colors } from "../../ThemeConstants";
+import { colors, ProGray1 } from "../../ThemeConstants";
 import ProInputCard from "../ProInputCard/ProInputCard";
 import styles from "./PaymentMethods.module.css";
 
@@ -13,12 +12,8 @@ interface PaymentMethodsProps {
   onPaymentSelect?: () => void;
 }
 
-const PaymentMethods = ({
-  onPaymentSelect,
-  ...props
-}: PaymentMethodsProps) => {
+const PaymentMethods = ({ onPaymentSelect, ...props }: PaymentMethodsProps) => {
   const { t } = useTranslation();
-  const { isRTL } = useAppSelector((state) => state.locale);
 
   const options: {
     label: string;
@@ -30,7 +25,7 @@ const PaymentMethods = ({
     {
       label: t("checkout.creditDebitCard"),
       value: "creditDebitCard",
-      price: "Expires in:12/26",
+      price: t("checkout.expiresIn") + ":12/26",
     },
 
     {
@@ -90,19 +85,21 @@ const PaymentMethods = ({
                   <ProText
                     style={{
                       fontSize: "0.85rem",
-                      color: "rgba(95, 108, 123, 1)",
+                      color: ProGray1,
                     }}
                   >
                     {option.label}
                   </ProText>
                   {!option.icon ? (
                     <ArabicPrice
-                      price={option.price}
+                      price={option.price || 0}
                       style={{
-                        fontSize: "0.85rem",
-                        color: "rgba(95, 108, 123, 1)",
+                        fontSize: "0.75rem",
+                        color: ProGray1,
                         fontWeight: 400,
                         ...option?.style,
+                        position: "relative",
+                        top: 4,
                       }}
                     />
                   ) : (
@@ -110,9 +107,6 @@ const PaymentMethods = ({
                   )}
                 </div>
               </Radio>
-              {/* {index !== options.length - 1 && (
-              <Divider style={{ margin: 0 }} />
-            )} */}
             </div>
           ))}
         </Space>