fix: icons navbar home page, button attention page, date picker compatibility page safari bag

src/components/AttentionPage/index.tsx

@@ -5,7 +5,7 @@ import routes from '@/routes'
 import styles from './styles.module.css'
 // import CheckboxWithText from '../CheckboxWithText'
 import SpecialWelcomeOffer from '../SpecialWelcomeOffer'
-import MainButton from '../MainButton'
+// import MainButton from '../MainButton'
 
 interface AttentionPageProps {
   isOpenModal: boolean
@@ -31,7 +31,7 @@ function AttentionPage({ isOpenModal, onCloseSpecialOffer }: AttentionPageProps)
       <p className={styles.text}>{t('aura.warming_up.body')}</p>
       <div className={styles['checkbox-container']}>
         {/* <CheckboxWithText text={t('not_ready_for_information')} onChange={onChangeCheckbox} /> */}
-        <MainButton className={styles.button} onClick={handleNext}>{t('aura.warming_up.button')}</MainButton>
+        <Title variant='h2' className={styles.button} onClick={handleNext}>{t('aura.warming_up.button')}</Title>
       </div>
     </section>
   )

src/components/AttentionPage/styles.module.css

@@ -23,5 +23,6 @@
 }
 
 .button {
-    white-space: pre;
+  white-space: pre;
-}
+  cursor: pointer;
+}

src/components/Compatibility/DatePicker.module.css

@@ -115,4 +115,8 @@
   position: absolute; /* Position it absolutely for centering */
   left: 50%; /* Center horizontally */
   transform: translateX(-50%); /* Center horizontally */
+  -ms-transform: translateX(-50%);
+  -webkit-transform: translateX(-50%);
+  -moz-transform: translateX(-50%);
+  -o-transform: translateX(-50%);
 }

src/components/Compatibility/DatePicker.tsx

@@ -1,15 +1,22 @@
 import React, { useEffect, useState } from "react";
-import "./DatePicker.css";
+import styles from "./DatePicker.module.css";
 import DatePickerItem from "./DatePickerItem";
 import { IDate, getDateAsString } from "@/services/date";
+import { useTranslation } from "react-i18next";
 
 interface DatePickerProps {
   onDateChange: (selectedDate: string | IDate) => void;
 }
 
-const DatePicker: React.FC<DatePickerProps> = ({ onDateChange }) => {
+const DatePicker: React.FC<DatePickerProps> = ({
+  onDateChange,
+}) => {
+  const { i18n } = useTranslation();
+  const locale = i18n.language;
   const currentDate = new Date();
-  const [selectedDate, setSelectedDate] = useState<string | IDate>(getDateAsString(currentDate));
+  const [selectedDate, setSelectedDate] = useState<string | IDate>(
+    getDateAsString(currentDate)
+  );
 
   const days = Array.from({ length: 31 }, (_, index) => (index + 1).toString());
   const months = Array.from({ length: 12 }, (_, index) =>
@@ -45,10 +52,10 @@ const DatePicker: React.FC<DatePickerProps> = ({ onDateChange }) => {
 
   return (
     <>
-      <div className="date-picker-container">
+      <div className={styles["date-picker-container"]}>
         <DatePickerItem
           data={days}
-          selectedValue={new Date(getDateAsString(selectedDate)).getDate().toString()}
+          selectedValue={new Date(getDateAsString(selectedDate).replace(/-/g, "/")).getDate().toString()}
           onSelect={handleDaySelect}
           unit="day"
         />
@@ -56,19 +63,19 @@ const DatePicker: React.FC<DatePickerProps> = ({ onDateChange }) => {
           data={months}
           selectedValue={new Date(
             0,
-            new Date(getDateAsString(selectedDate)).getMonth()
+            new Date(getDateAsString(selectedDate).replace(/-/g, "/")).getMonth()
-          ).toLocaleDateString(undefined, { month: "long" })}
+          ).toLocaleDateString(locale, { month: "long" })}
           onSelect={handleMonthSelect}
           unit="month"
         />
         <DatePickerItem
           data={years}
-          selectedValue={new Date(getDateAsString(selectedDate)).getFullYear().toString()}
+          selectedValue={new Date(getDateAsString(selectedDate).replace(/-/g, "/")).getFullYear().toString()}
           onSelect={handleYearSelect}
           unit="year"
         />
       </div>
-      <div className="date-picker-selected-date">
+      <div className={styles["date-picker-selected-date"]}>
         {/* {selectedDate.toLocaleDateString("en-US", {
           year: "numeric",
           month: "long",

src/components/Compatibility/DatePickerItem.tsx

@@ -1,4 +1,5 @@
 import React, { useEffect, useRef, useState } from "react";
+import styles from "./DatePicker.module.css";
 
 const ITEM_HEIGHT = 40; // Height of each date item
 
@@ -23,8 +24,11 @@ const DatePickerItem: React.FC<DatePickerItemProps> = ({
   data,
   selectedValue,
   onSelect,
-  unit,
+  unit
 }) => {
+  console.log(selectedValue);
+  console.log(data);
+
   const isMobile = useIsMobile();
   const scrollRef = useRef<HTMLDivElement | null>(null);
 
@@ -116,10 +120,10 @@ const DatePickerItem: React.FC<DatePickerItemProps> = ({
   //   }, []);
 
   return (
-    <div className="date-picker-viewport">
+    <div className={styles["date-picker-viewport"]}>
-      <div className="date-picker-wheel">
+      <div className={styles["date-picker-wheel"]}>
         <div
-          className="date-picker-scroll"
+          className={styles["date-picker-scroll"]}
           onTouchStart={handleTouchStart}
           onTouchMove={handleTouchMove}
           onTouchEnd={handleTouchEnd}
@@ -127,12 +131,14 @@ const DatePickerItem: React.FC<DatePickerItemProps> = ({
           ref={scrollRef}
           style={{
             transform: `translateY(${translateY}px)`,
+            // msTransform: `translateY(${translateY}px)`,
+            WebkitTransform: `translateY(${translateY}px)`,
           }}
         >
           {data.map((item, index) => (
             <div
-              className={`date-picker-item ${
+              className={`${styles["date-picker-item"]} ${
-                item === selectedValue ? "selected" : ""
+                item === selectedValue ? styles["selected"] : ""
               }`}
               key={`${unit}-${index}`}
             >

src/components/Compatibility/index.tsx

@@ -69,9 +69,9 @@ function CompatibilityPage(): JSX.Element {
   return (
     <section className={`${styles.page} page`}>
       <div className={styles.cross} onClick={handleNext}></div>
-      <Title variant="h1" className={styles.title}>
+      {/* <Title variant="h1" className={styles.title}>
         {t("compatibility")}
-      </Title>
+      </Title> */}
       <div className={styles.content}>
         <Title variant="h2" className={styles.iam}>
           {t("iAm")}

src/components/HomePage/index.tsx

@@ -62,26 +62,26 @@ function HomePage(): JSX.Element {
       {
           title: 'Breathing',
           path: routes.client.breath(),
-          image: '',
+          image: 'Breath.png',
           onClick: handleBreath
       },
       {
           title: 'Aura',
           path: routes.client.home(),
-          image: '',
+          image: 'Aura.png',
           active: true,
           onClick: () => null
       },
       {
           title: 'Compatibility',
           path: routes.client.compatibility(),
-          image: '',
+          image: 'Compatibility.png',
           onClick: handleCompatibility
       },
       {
           title: 'My Moon',
           path: routes.client.home(),
-          image: '',
+          image: 'moon.png',
           onClick: () => null
       }
   ]
@@ -136,7 +136,7 @@ function HomePage(): JSX.Element {
 
   const downloadImg = () => {
     if (!asset) return;
-    download(asset.url.replace("http://", "https://"), "image.png");
+    download(asset.url.replace("http://", "https://"), asset.asset_data.metadata.filename || "image.png");
   };
 
   return (

src/components/HomePage/styles.module.css

@@ -10,7 +10,7 @@
   background-size: calc(100% + 186px);
   background-position: center;
   background-repeat: no-repeat;
-  padding: 16px 12px 0;
+  padding: 16px 12px 94px;
   overflow-y: scroll;
 }
 

src/components/NavbarHome/index.tsx

@@ -1,33 +1,46 @@
-import { Link } from 'react-router-dom'
+import { Link } from "react-router-dom";
-import styles from './styles.module.css'
+import styles from "./styles.module.css";
 
 export interface INavbarHomeItems {
-  title: string
+  title: string;
-  path: string
+  path: string;
-  image: string
+  image: string;
-  active?: boolean
+  active?: boolean;
-  onClick?: () => void
+  onClick?: () => void;
 }
 
 interface INavbarHomeProps {
-  items: INavbarHomeItems[]
+  items: INavbarHomeItems[];
 }
 
-function NavbarHome({items}: INavbarHomeProps): JSX.Element {
+function NavbarHome({ items }: INavbarHomeProps): JSX.Element {
-  
-
   return (
-    <div className={`${styles['container']}`}>
+    <div className={`${styles["container"]}`}>
       {items.map((item, index) => (
-          <div className={`${styles['navbar-item']} ${item.active ? styles['navbar-item--active'] : ''}`} key={index}>
+        <div
-            <Link to={item.path} onClick={item.onClick}>
+          className={`${styles["navbar-item"]} ${
-              {/* <img src={item.image} alt={item.title} /> */}
+            item.active ? styles["navbar-item--active"] : ""
-              <p>{item.title}</p>
+          }`}
-            </Link>
+          key={index}
-          </div>
+        >
+          <Link
+            className={styles["navbar-item__link"]}
+            to={item.path}
+            onClick={item.onClick}
+          >
+            <div className={styles["navbar-item__image-container"]}>
+              <img
+                className={styles["navbar-item__image"]}
+                src={`./navbar-icons/${item.image}`}
+                alt={item.title}
+              />
+            </div>
+            <p>{item.title}</p>
+          </Link>
+        </div>
       ))}
     </div>
-  )
+  );
 }
 
-export default NavbarHome
+export default NavbarHome;

src/components/NavbarHome/styles.module.css

@@ -1,23 +1,41 @@
 .container {
-    width: 100vw;
+  width: 100vw;
-    max-width: 560px;
+  max-width: 560px;
-    background-color: #232322;
+  background-color: #232322;
-    padding: 12px 0;
+  padding: 12px 0;
-    display: flex;
+  display: flex;
-    flex-direction: row;
+  flex-direction: row;
-    justify-content: space-evenly;
+  justify-content: space-evenly;
-    position: fixed;
+  position: fixed;
-    bottom: 0;
+  bottom: 0;
 }
 
 .navbar-item {
-    font-size: 12px;
+  font-size: 12px;
-    display: flex;
+  display: flex;
-    flex-direction: column;
+  flex-direction: column;
-    justify-content: center;
+  justify-content: flex-end;
-    color: #dedede;
+  color: #dedede;
+}
+
+.navbar-item__link {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 6px;
+  height: 100%;
 }
 
 .navbar-item--active {
-    color: #f24058;
+  color: #f24058;
-}
+}
+
+.navbar-item__image-container {
+  flex: 1;
+  display: flex;
+  align-items: center;
+}
+
+.navbar-item__image {
+  width: 30px;
+}