remove unnecessary code & enhance gray color over the app

src/components/Icons/BackIcon.tsx

@@ -1,9 +1,14 @@
+import { useAppSelector } from "redux/hooks";
+import { ProGray1 } from "ThemeConstants";
+
 interface BackIconType {
   className?: string;
   onClick?: () => void;
 }
 
 const BackIcon = ({ className, onClick }: BackIconType) => {
+  const { themeName } = useAppSelector((state) => state.theme);
+  const color = themeName === "dark" ? "white" : ProGray1;
   return (
     <svg
       width="16"
@@ -16,7 +21,7 @@ const BackIcon = ({ className, onClick }: BackIconType) => {
     >
       <path
         d="M10 12L6 8L10 4"
-        stroke={"rgba(95, 108, 123, 1)"}
+        stroke={color}
         strokeWidth="1.5"
         strokeLinecap="round"
         strokeLinejoin="round"

src/components/Icons/NextIcon.tsx

@@ -1,9 +1,14 @@
+import { useAppSelector } from "redux/hooks";
+import { ProGray1 } from "ThemeConstants";
+
 interface NextIconType {
   className?: string;
   onClick?: () => void;
 }
 
 const NextIcon = ({ className, onClick }: NextIconType) => {
+  const { themeName } = useAppSelector((state) => state.theme);
+  const color = themeName === "dark" ? "white" : ProGray1;
   return (
     <svg
       width="16"
@@ -16,7 +21,7 @@ const NextIcon = ({ className, onClick }: NextIconType) => {
     >
       <path
         d="M6 12L10 8L6 4"
-        stroke="#434E5C"
+        stroke={color}
         strokeWidth="1.5"
         strokeLinecap="round"
         strokeLinejoin="round"

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>

src/components/privateRoute/PrivateRoute.tsx

@@ -32,6 +32,9 @@ export const PrivateRoute = ({
   //   ? !!newPermissions.find((p) => p.name === permission)
   //   : true;
 
+  console.log(token);
+  
+
   if (!token) {
     return <Navigate to={`/${id}/login`} />;
   }