fix: date picker days infinity, cross buttons breath and compatibility pages

src/components/BreathPage/index.tsx

@@ -12,6 +12,7 @@ import { useNavigate } from "react-router-dom";
 import routes from "@/routes";
 import parseAPNG from "apng-js";
 import Player from "apng-js/types/library/player";
+import { EPathsFromHome } from "@/store/siteConfig";
 
 let apngPlayer: Player | null = null;
 
@@ -116,9 +117,39 @@ function BreathPage(): JSX.Element {
 
   useApiCall<UserCallbacks.IUserCallbacks>(createCallback);
 
+  const handleCross = () => {
+    if (homeConfig.pathFromHome === EPathsFromHome.compatibility) {
+      dispatch(
+        actions.siteConfig.update({
+          home: {
+            pathFromHome: EPathsFromHome.compatibility,
+            isShowNavbar: true,
+          },
+        })
+      );
+      return navigate(routes.client.home());
+    }
+    if (homeConfig.pathFromHome === EPathsFromHome.breath) {
+      dispatch(
+        actions.siteConfig.update({
+          home: { pathFromHome: EPathsFromHome.breath, isShowNavbar: false },
+        })
+      );
+      return navigate(routes.client.compatibility());
+    }
+    return navigate(routes.client.home());
+  };
+
   return (
     <>
-      <section className={`${styles.page} page`} ref={pageRef} style={{ paddingBottom: showNavbarFooter ? '48px' : '16px'}}>
+      <section
+        className={`${styles.page} page`}
+        ref={pageRef}
+        style={{ paddingBottom: showNavbarFooter ? "48px" : "16px" }}
+      >
+        {!showNavbarFooter && (
+          <div className={styles.cross} onClick={handleCross}></div>
+        )}
         <canvas
           style={{ display: isOpenModal ? "hidden" : "block" }}
           className={`${styles["leo-apng"]} ${

src/components/BreathPage/styles.module.css

@@ -82,6 +82,41 @@
   animation-timing-function: linear;
 }
 
+.cross {
+  position: absolute;
+  top: 24px;
+  right: 24px;
+  width: 24px;
+  height: 24px;
+  border: solid 2px #bdbdbd;
+  border-radius: 100%;
+  rotate: 45deg;
+  cursor: pointer;
+  z-index: 9999;
+}
+
+.cross::before {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 10px;
+  height: 2px;
+  background-color: #bdbdbd;
+}
+
+.cross::after {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 2px;
+  height: 10px;
+  background-color: #bdbdbd;
+}
+
 @keyframes leo-apng {
   0% {
     opacity: 0;

src/components/CompatResultPage/index.tsx

@@ -96,7 +96,7 @@ function CompatResultPage(): JSX.Element {
           }}
         />
       </FullScreenModal>
-      {text !== "Loading..." && (
+      {text !== "Loading..." && !showNavbarFooter && (
         <div className={styles.cross} onClick={handleNext}></div>
       )}
       <div className={styles["title-container"]}>

src/components/Compatibility/DatePicker.tsx

@@ -18,7 +18,17 @@ const DatePicker: React.FC<DatePickerProps> = ({
     getDateAsString(currentDate)
   );
 
-  const days = Array.from({ length: 31 }, (_, index) => (index + 1).toString());
+  const days = Array.from({ length: 93 }, (_, index) => {
+    
+    if (index + 1 > 62) {
+      return (index + 1 - 62).toString();
+    }
+    if (index + 1 > 31) {
+      return (index + 1 - 31).toString();
+    }
+    return (index + 1).toString()
+  });
+  
   const months = Array.from({ length: 36 }, (_, index) =>
     new Date(0, index).toLocaleDateString(undefined, { month: "long" })
   );

src/components/Compatibility/DatePickerItem.tsx

@@ -60,6 +60,14 @@ const DatePickerItem: React.FC<DatePickerItemProps> = ({
         setTranslateY((data.indexOf(selectedValue) + 12) * -ITEM_HEIGHT);
       }
     }
+    if (unit === "day") {
+      if (
+        data.indexOf(selectedValue) < 31 ||
+        data.indexOf(selectedValue) > 62
+      ) {
+        setTranslateY((data.indexOf(selectedValue) + 31) * -ITEM_HEIGHT);
+      }
+    }
   }, [unit, data, selectedValue]);
 
   const handleTouchEnd = () => {

src/components/Compatibility/index.tsx

@@ -11,6 +11,7 @@ import { useNavigate } from "react-router-dom";
 import routes from "@/routes";
 import { useDispatch, useSelector } from "react-redux";
 import { actions, selectors } from "@/store";
+import { EPathsFromHome } from "@/store/siteConfig";
 
 function CompatibilityPage(): JSX.Element {
   const { t, i18n } = useTranslation();
@@ -39,6 +40,32 @@ function CompatibilityPage(): JSX.Element {
     navigate(routes.client.compatibilityResult());
   };
 
+  const handleCross = () => {
+    if (homeConfig.pathFromHome === EPathsFromHome.compatibility) {
+      dispatch(
+        actions.siteConfig.update({
+          home: {
+            pathFromHome: EPathsFromHome.compatibility,
+            isShowNavbar: false,
+          },
+        })
+      );
+      return navigate(routes.client.breath());
+    }
+    if (homeConfig.pathFromHome === EPathsFromHome.breath) {
+      dispatch(
+        actions.siteConfig.update({
+          home: {
+            pathFromHome: EPathsFromHome.compatibility,
+            isShowNavbar: true,
+          },
+        })
+      );
+      return navigate(routes.client.home());
+    }
+    return navigate(routes.client.home());
+  };
+
   const api = useApi();
   const locale = i18n.language;
   const loadData = useCallback(() => {
@@ -69,8 +96,13 @@ function CompatibilityPage(): JSX.Element {
   };
 
   return (
-    <section className={`${styles.page} page`} style={{ paddingBottom: showNavbarFooter ? '48px' : '16px'}}>
+    <section
-      <div className={styles.cross} onClick={handleNext}></div>
+      className={`${styles.page} page`}
+      style={{ paddingBottom: showNavbarFooter ? "48px" : "16px" }}
+    >
+      {!showNavbarFooter && (
+        <div className={styles.cross} onClick={handleCross}></div>
+      )}
       {/* <Title variant="h1" className={styles.title}>
         {t("compatibility")}
       </Title> */}

src/components/StartBreathModalChild/index.tsx

@@ -13,7 +13,7 @@ function StartBreathModalChild({
 
   return (
     <section className={`${styles["start-breath"]} page`}>
-      <div className={styles.cross} onClick={handleBegin}></div>
+      {/* <div className={styles.cross} onClick={handleBegin}></div> */}
       <div className={styles.text}>
         <Title variant="h4" className={styles["breathe-title"]}>
           {t("breathe-title")

src/components/UserCallbacksPage/index.tsx

@@ -41,7 +41,7 @@ function UserCallbacksPage(): JSX.Element {
       className={`${styles.page} page`}
       style={{ paddingBottom: getPaddingBottomPage() }}
     >
-      <div className={styles.cross} onClick={handleNext}></div>
+      {!showNavbarFooter && <div className={styles.cross} onClick={handleNext}></div>}
       <div className={styles["title-container"]}>
         <Title variant="h3" className={styles.percent}>
           <>