From 87eba58d0ed8b768e1ec0378e68cec5064dfd0eb Mon Sep 17 00:00:00 2001 From: gofnnp Date: Thu, 21 Sep 2023 03:35:48 +0400 Subject: [PATCH] fix: icons navbar home page, button attention page, date picker compatibility page safari bag --- public/navbar-icons/Aura.png | Bin 0 -> 2888 bytes public/navbar-icons/Breath.png | Bin 0 -> 1891 bytes public/navbar-icons/Compatibility.png | Bin 0 -> 1531 bytes public/navbar-icons/moon.png | Bin 0 -> 1402 bytes src/components/AttentionPage/index.tsx | 4 +- .../AttentionPage/styles.module.css | 5 +- .../{DatePicker.css => DatePicker.module.css} | 4 ++ src/components/Compatibility/DatePicker.tsx | 25 ++++++--- .../Compatibility/DatePickerItem.tsx | 18 ++++-- src/components/Compatibility/index.tsx | 4 +- src/components/HomePage/index.tsx | 10 ++-- src/components/HomePage/styles.module.css | 2 +- src/components/NavbarHome/index.tsx | 53 +++++++++++------- src/components/NavbarHome/styles.module.css | 50 +++++++++++------ 14 files changed, 112 insertions(+), 63 deletions(-) create mode 100644 public/navbar-icons/Aura.png create mode 100644 public/navbar-icons/Breath.png create mode 100644 public/navbar-icons/Compatibility.png create mode 100644 public/navbar-icons/moon.png rename src/components/Compatibility/{DatePicker.css => DatePicker.module.css} (94%) diff --git a/public/navbar-icons/Aura.png b/public/navbar-icons/Aura.png new file mode 100644 index 0000000000000000000000000000000000000000..b836d79a5a050ba12147346fa9e5f30d31a4d4be GIT binary patch literal 2888 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 literal 0 HcmV?d00001 diff --git a/public/navbar-icons/moon.png b/public/navbar-icons/moon.png new file mode 100644 index 0000000000000000000000000000000000000000..04847fa278691b6de008fd58bca3a641ff80f89f GIT binary patch literal 1402 zcmV-=1%>*FP)p`m{%S&3~m1!V+(_$lt*aa*f+yT@&(D2g8xfuzES5EwFW zv|YM&xJ_JhyWn=p?Tm#wqX489<}0f%2;!3$j2F$#S|Dt57Xtha!{n0`IuyXDitH zX32rp!oV*e0_Jug(eO6;p>(PjY(dxL0ACB%Lr2_yBugGq3;2ZV++mffI!cIi>R};v zDg70>Gq3f=I0+-p5tdQ6Oz%@mSlB)U<{y8PJ2P5uetw%jmg)38x3?qybb&uuj}pVz z`&W7S%w|X$`xse_VG123%3&s==;4J)xbYt&VdNwSh6j%luJ(FXe54Vz!YDq)#-nE;jO;Av*FDW`oeXKR zn5OBtj!R06EG0H;-d>Tl*GM`w2gg5m$)04h5d@J{H>|vA$gIfD>)%I zUa|8HYBh3w_~3I|Gxi@EYDN$}BKgazmG36G;}p}FA{OC$#{hzMNf{x0p0kd2Vw}`D z)fi!6XSGOc!OWeZgt12saYYFW^MnGTq(Yxd|CHQ^kV=^@?MXW>l#}XNGiyQ%Q-v%* z;Y4BWrcpG8{C64#sFi6ARTv-RH)-%F76l*K|m^*IthaKgBNy;sJf-i;JD&0+s zsvyAKGKsQF=j*a&slq9Z7=VqM-|vzkr7&;E57DaFfWDiH4Vm^PE9x- z@w$>Q2;`_|H23Wk#mhc`Fs(P>8yM_MWi(3}6WU?`)=6XMZy?M$ zg$Mp-tSkq@#M&f7sBkncJ_o|YOhrPJpDfO(Qj+9gfrmB6ABqpYkd2J0Bks_VC^W^z z4T=V&s4+;sSqdkehHfDTKy{;WB|sp`bmT7@mcqMMYL?aIi1Nz?CXTmE7L>xI8ct0N z_K}so$`?WeTsy4dF%5;Nvk{80b3=M` z{Sd9jsl4`%Fb~vfoHB`3`50_(j&0^mW5>0~;GQsYpocJ|u)*(~cdpFf@d5WKp9*gm zVDVN9I-RD}=4Z;FJk^m8ZR>Pug^?Hvswcl;!jeyX?QL%58PJ#v7ja(G_*f1^`9>ZX zxl5o}&OYS}e9EdXQGo4@TscJHIvDE9zH9%i@4I%q`63j1WKd}6g7XdOl3arIq!0+@ z?OUN9UjSO)sUKOOXpb@Q_6P&nj)h3Llg#Hf$>4D)-1cJ@2?TkzgNRf%o3eI%aFnlO zhztVSR0Y*h9(o~pSfn1yRHP~t#K4E|7a81rJ7L0v2@?|X4~HGjmhfs@!T{t('aura.warming_up.body')}

{/* */} - {t('aura.warming_up.button')} + {t('aura.warming_up.button')}
) diff --git a/src/components/AttentionPage/styles.module.css b/src/components/AttentionPage/styles.module.css index 355b4c9..e815fc1 100644 --- a/src/components/AttentionPage/styles.module.css +++ b/src/components/AttentionPage/styles.module.css @@ -23,5 +23,6 @@ } .button { - white-space: pre; -} \ No newline at end of file + white-space: pre; + cursor: pointer; +} diff --git a/src/components/Compatibility/DatePicker.css b/src/components/Compatibility/DatePicker.module.css similarity index 94% rename from src/components/Compatibility/DatePicker.css rename to src/components/Compatibility/DatePicker.module.css index 6376b7d..d898069 100644 --- a/src/components/Compatibility/DatePicker.css +++ b/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%); } diff --git a/src/components/Compatibility/DatePicker.tsx b/src/components/Compatibility/DatePicker.tsx index 17639bb..1e96fe3 100644 --- a/src/components/Compatibility/DatePicker.tsx +++ b/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 = ({ onDateChange }) => { +const DatePicker: React.FC = ({ + onDateChange, +}) => { + const { i18n } = useTranslation(); + const locale = i18n.language; const currentDate = new Date(); - const [selectedDate, setSelectedDate] = useState(getDateAsString(currentDate)); + const [selectedDate, setSelectedDate] = useState( + 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 = ({ onDateChange }) => { return ( <> -
+
@@ -56,19 +63,19 @@ const DatePicker: React.FC = ({ onDateChange }) => { data={months} selectedValue={new Date( 0, - new Date(getDateAsString(selectedDate)).getMonth() - ).toLocaleDateString(undefined, { month: "long" })} + new Date(getDateAsString(selectedDate).replace(/-/g, "/")).getMonth() + ).toLocaleDateString(locale, { month: "long" })} onSelect={handleMonthSelect} unit="month" />
-
+
{/* {selectedDate.toLocaleDateString("en-US", { year: "numeric", month: "long", diff --git a/src/components/Compatibility/DatePickerItem.tsx b/src/components/Compatibility/DatePickerItem.tsx index d11dab9..c5f4136 100644 --- a/src/components/Compatibility/DatePickerItem.tsx +++ b/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 = ({ data, selectedValue, onSelect, - unit, + unit }) => { + console.log(selectedValue); + console.log(data); + const isMobile = useIsMobile(); const scrollRef = useRef(null); @@ -116,10 +120,10 @@ const DatePickerItem: React.FC = ({ // }, []); return ( -
-
+
+
= ({ ref={scrollRef} style={{ transform: `translateY(${translateY}px)`, + // msTransform: `translateY(${translateY}px)`, + WebkitTransform: `translateY(${translateY}px)`, }} > {data.map((item, index) => (
diff --git a/src/components/Compatibility/index.tsx b/src/components/Compatibility/index.tsx index 2855c3c..2980b75 100644 --- a/src/components/Compatibility/index.tsx +++ b/src/components/Compatibility/index.tsx @@ -69,9 +69,9 @@ function CompatibilityPage(): JSX.Element { return (
- + {/* <Title variant="h1" className={styles.title}> {t("compatibility")} - + */}
{t("iAm")} diff --git a/src/components/HomePage/index.tsx b/src/components/HomePage/index.tsx index 5de7066..c276ad0 100644 --- a/src/components/HomePage/index.tsx +++ b/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 ( diff --git a/src/components/HomePage/styles.module.css b/src/components/HomePage/styles.module.css index d1453d2..18f457f 100644 --- a/src/components/HomePage/styles.module.css +++ b/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; } diff --git a/src/components/NavbarHome/index.tsx b/src/components/NavbarHome/index.tsx index 2858018..81070d9 100644 --- a/src/components/NavbarHome/index.tsx +++ b/src/components/NavbarHome/index.tsx @@ -1,33 +1,46 @@ -import { Link } from 'react-router-dom' -import styles from './styles.module.css' +import { Link } from "react-router-dom"; +import styles from "./styles.module.css"; export interface INavbarHomeItems { - title: string - path: string - image: string - active?: boolean - onClick?: () => void + title: string; + path: string; + image: string; + active?: boolean; + 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}> - <Link to={item.path} onClick={item.onClick}> - {/* <img src={item.image} alt={item.title} /> */} - <p>{item.title}</p> - </Link> - </div> + <div + className={`${styles["navbar-item"]} ${ + item.active ? styles["navbar-item--active"] : "" + }`} + key={index} + > + <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; diff --git a/src/components/NavbarHome/styles.module.css b/src/components/NavbarHome/styles.module.css index b296e5e..c6463a6 100644 --- a/src/components/NavbarHome/styles.module.css +++ b/src/components/NavbarHome/styles.module.css @@ -1,23 +1,41 @@ .container { - width: 100vw; - max-width: 560px; - background-color: #232322; - padding: 12px 0; - display: flex; - flex-direction: row; - justify-content: space-evenly; - position: fixed; - bottom: 0; + width: 100vw; + max-width: 560px; + background-color: #232322; + padding: 12px 0; + display: flex; + flex-direction: row; + justify-content: space-evenly; + position: fixed; + bottom: 0; } .navbar-item { - font-size: 12px; - display: flex; - flex-direction: column; - justify-content: center; - color: #dedede; + font-size: 12px; + display: flex; + flex-direction: column; + justify-content: flex-end; + color: #dedede; +} + +.navbar-item__link { + display: flex; + flex-direction: column; + align-items: center; + gap: 6px; + height: 100%; } .navbar-item--active { - color: #f24058; -} \ No newline at end of file + color: #f24058; +} + +.navbar-item__image-container { + flex: 1; + display: flex; + align-items: center; +} + +.navbar-item__image { + width: 30px; +}