From 22d6c9e1fe872b94c87791fb5c786cf2230565e3 Mon Sep 17 00:00:00 2001 From: gofnnp Date: Thu, 21 Sep 2023 00:23:14 +0400 Subject: [PATCH] fix: paths from home page, reviews, profile create, attention page --- src/components/AttentionPage/index.tsx | 20 +-- .../AttentionPage/styles.module.css | 28 ++-- src/components/BreathPage/index.tsx | 11 -- src/components/BreathPage/styles.module.css | 1 + src/components/CompatResultPage/index.tsx | 35 +++-- .../CompatResultPage/styles.module.css | 15 ++ src/components/Compatibility/DatePicker.css | 118 ++++++++++++++ src/components/Compatibility/DatePicker.tsx | 82 ++++++++++ .../Compatibility/DatePickerItem.tsx | 148 ++++++++++++++++++ src/components/Compatibility/index.tsx | 126 +++++++-------- .../Compatibility/styles.module.css | 44 +++++- src/components/CreateProfilePage/index.tsx | 8 +- src/components/FeedbackPage/index.tsx | 73 +++++++-- src/components/FeedbackPage/styles.module.css | 25 +++ src/components/HomePage/styles.module.css | 2 +- .../StartBreathModalChild/index.tsx | 39 +++-- .../StartBreathModalChild/styles.module.css | 36 ++++- src/components/UserCallbacksPage/index.tsx | 19 ++- .../UserCallbacksPage/styles.module.css | 7 + src/locales/dev.ts | 12 ++ 20 files changed, 700 insertions(+), 149 deletions(-) create mode 100644 src/components/Compatibility/DatePicker.css create mode 100644 src/components/Compatibility/DatePicker.tsx create mode 100644 src/components/Compatibility/DatePickerItem.tsx diff --git a/src/components/AttentionPage/index.tsx b/src/components/AttentionPage/index.tsx index bcd4485..d9d8091 100644 --- a/src/components/AttentionPage/index.tsx +++ b/src/components/AttentionPage/index.tsx @@ -3,8 +3,9 @@ import { useTranslation } from 'react-i18next' import Title from '../Title' import routes from '@/routes' import styles from './styles.module.css' -import CheckboxWithText from '../CheckboxWithText' +// import CheckboxWithText from '../CheckboxWithText' import SpecialWelcomeOffer from '../SpecialWelcomeOffer' +import MainButton from '../MainButton' interface AttentionPageProps { isOpenModal: boolean @@ -16,20 +17,21 @@ function AttentionPage({ isOpenModal, onCloseSpecialOffer }: AttentionPageProps) const navigate = useNavigate() const handleNext = () => navigate(routes.client.feedback()) - const onChangeCheckbox = (e: React.FormEvent) => { - if (e.currentTarget.checked) { - handleNext() - } - } + // const onChangeCheckbox = (e: React.FormEvent) => { + // if (e.currentTarget.checked) { + // handleNext() + // } + // } return (
stop - {t('attention')} -

{t('attention_page_text')}

+ {t('aura.attention.title')} +

{t('aura.warming_up.body')}

- + {/* */} + {t('aura.warming_up.button')}
) diff --git a/src/components/AttentionPage/styles.module.css b/src/components/AttentionPage/styles.module.css index 8455b8c..355b4c9 100644 --- a/src/components/AttentionPage/styles.module.css +++ b/src/components/AttentionPage/styles.module.css @@ -1,23 +1,27 @@ .page { - position: relative; - flex: auto; - height: calc(100vh - 50px); - max-height: -webkit-fill-available; - justify-content: center; - gap: 16px; + position: relative; + flex: auto; + height: calc(100vh - 50px); + max-height: -webkit-fill-available; + justify-content: center; + gap: 16px; } .icon { - width: 96px; + width: 96px; } .text { - text-align: center; - line-height: 1.2; - font-weight: 700; + text-align: center; + line-height: 1.2; + font-weight: 700; } .checkbox-container { - width: 80%; - margin: 64px auto 0; + width: 80%; + margin: 64px auto 0; +} + +.button { + white-space: pre; } \ No newline at end of file diff --git a/src/components/BreathPage/index.tsx b/src/components/BreathPage/index.tsx index 4c6d985..e88152e 100644 --- a/src/components/BreathPage/index.tsx +++ b/src/components/BreathPage/index.tsx @@ -37,8 +37,6 @@ function BreathPage(): JSX.Element { if (isOpenModal) return; const previewTimeOut = setTimeout(() => { setIsShowPreview(false); - console.log(apngPlayer); - apngPlayer?.play() }, 10_000); @@ -54,26 +52,17 @@ function BreathPage(): JSX.Element { useEffect(() => { async function test() { - console.log(data); - if (!data) return; - console.log(1); - const response = await fetch( data.find((item) => item.key === "au.apng.leo")?.url || "" ); - console.log(2); const arrayBuffer = await response.arrayBuffer(); - console.log(3); const apng = parseAPNG(arrayBuffer); - console.log(4); const context = leoCanvasRef.current?.getContext("2d"); - console.log("context: ", context); if (context && !(apng instanceof Error)) { context.canvas.height = apng.height; context.canvas.width = apng.width; const _apngPlayer = await apng.getPlayer(context); - console.log(5); setApngPlayer(_apngPlayer); if (apngPlayer) { apngPlayer.stop(); diff --git a/src/components/BreathPage/styles.module.css b/src/components/BreathPage/styles.module.css index ce873e5..4443c84 100644 --- a/src/components/BreathPage/styles.module.css +++ b/src/components/BreathPage/styles.module.css @@ -5,6 +5,7 @@ justify-content: center; align-items: center; background-color: #01010b; + padding-bottom: 60px; flex: auto; } diff --git a/src/components/CompatResultPage/index.tsx b/src/components/CompatResultPage/index.tsx index aaa2091..023474b 100644 --- a/src/components/CompatResultPage/index.tsx +++ b/src/components/CompatResultPage/index.tsx @@ -75,7 +75,9 @@ function CompatResultPage(): JSX.Element { return (
- {text !== "Loading..." &&
} + {text !== "Loading..." && ( +
+ )}
{t("you_and", { user: rightUser.name })}
@@ -85,19 +87,26 @@ function CompatResultPage(): JSX.Element {

{text}

- {text !== "Loading..." && ( -
-

- {t("now-you-know")} -

- +
+ )} + {text !== "Loading..." && + homeConfig.pathFromHome === EPathsFromHome.breath && ( + - - )} + )}
); } diff --git a/src/components/CompatResultPage/styles.module.css b/src/components/CompatResultPage/styles.module.css index d13c3c0..9ed88e9 100644 --- a/src/components/CompatResultPage/styles.module.css +++ b/src/components/CompatResultPage/styles.module.css @@ -67,6 +67,21 @@ color: #fff; } +.button-green { + position: fixed; + font-weight: 500; + border: none; + bottom: 24px; + width: calc(100% - 64px); + max-width: 496px; + border-radius: 32px; + padding: 24px 0; + background: -moz-linear-gradient(to bottom, #01d400, #196e17); + background: -webkit-linear-gradient(to bottom, #01d400, #196e17); + background: linear-gradient(to bottom, #01d400, #196e17); + color: #fff; +} + .cross { position: absolute; top: 24px; diff --git a/src/components/Compatibility/DatePicker.css b/src/components/Compatibility/DatePicker.css new file mode 100644 index 0000000..6376b7d --- /dev/null +++ b/src/components/Compatibility/DatePicker.css @@ -0,0 +1,118 @@ +/* DatePicker.css */ + +/* Container for the entire date picker */ +.date-picker-container { + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-between; + margin: 0 auto; + color: white; + /* background: transparent; */ + /* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); */ +} + +.date-picker-viewport { + flex: 1; + position: relative; + height: 160px; /* Adjust the max height as needed */ + overflow: hidden; + padding: 0; + -ms-overflow-style: none; /* IE and Edge */ + scrollbar-width: none; /* Firefox */ +} +.date-picker-viewport::-webkit-scrollbar { + display: none; /* Chrome, Safari and Opera */ +} + +.date-picker-viewport:first-child .date-picker-wheel { + border-bottom-left-radius: 10px; + border-top-left-radius: 10px; +} +.date-picker-viewport:last-child .date-picker-wheel { + border-bottom-right-radius: 10px; + border-top-right-radius: 10px; +} + +.date-picker-viewport::after { + content: ""; + position: absolute; + z-index: 2; + top: 0; + right: 0; + bottom: 0; + left: 0; + pointer-events: none; + /* background: linear-gradient( + #f7f7f7, + rgba(245, 245, 245, 0) 52%, + rgba(245, 245, 245, 0) 48%, + #f7f7f7 + ); */ +} + +.date-picker-wheel { + position: absolute; + height: 40px; + top: 50%; + background: #7a7979; + margin-top: -20px; + width: 100%; + display: block; +} + +/* Scrollable components for day, month, and year */ +.date-picker-scroll { + padding: 0; + touch-action: none; +} + +/* Individual items in the scrollable components */ +.date-picker-item { + padding: 10px 0; + cursor: pointer; + transition: background-color 0.2s; + height: 40px; + display: flex; + align-items: center; + justify-content: center; + color: #a09b9b; +} +.date-picker-item.selected { + color: white; +} + +/* Header and confirm button */ +.date-picker-header { + display: flex; + justify-content: flex-end; + margin-top: 10px; +} + +.date-picker-confirm { + background-color: #007aff; + color: #ffffff; + padding: 10px 20px; + border: none; + border-radius: 5px; + cursor: pointer; + transition: background-color 0.2s; +} + +.date-picker-confirm:hover { + background-color: #0056b3; +} + +/* Display selected date */ +.date-picker-selected-date { + margin-top: 10px; + text-align: center; + font-size: 16px; + color: #007aff; /* Change the color to your desired style */ + white-space: nowrap; /* Prevent selected date from wrapping */ + text-overflow: ellipsis; /* Show ellipsis for long selected date */ + width: 100%; /* Ensure the width is 100% for centering */ + position: absolute; /* Position it absolutely for centering */ + left: 50%; /* Center horizontally */ + transform: translateX(-50%); /* Center horizontally */ +} diff --git a/src/components/Compatibility/DatePicker.tsx b/src/components/Compatibility/DatePicker.tsx new file mode 100644 index 0000000..17639bb --- /dev/null +++ b/src/components/Compatibility/DatePicker.tsx @@ -0,0 +1,82 @@ +import React, { useEffect, useState } from "react"; +import "./DatePicker.css"; +import DatePickerItem from "./DatePickerItem"; +import { IDate, getDateAsString } from "@/services/date"; + +interface DatePickerProps { + onDateChange: (selectedDate: string | IDate) => void; +} + +const DatePicker: React.FC = ({ onDateChange }) => { + const currentDate = new Date(); + const [selectedDate, setSelectedDate] = useState(getDateAsString(currentDate)); + + const days = Array.from({ length: 31 }, (_, index) => (index + 1).toString()); + const months = Array.from({ length: 12 }, (_, index) => + new Date(0, index).toLocaleDateString(undefined, { month: "long" }) + ); + const years = Array.from({ length: 81 }, (_, index) => + (currentDate.getFullYear() - 80 + index).toString() + ); + + const handleDaySelect = (day: string) => { + const newDate = new Date(getDateAsString(selectedDate)); + newDate.setDate(parseInt(day)); + setSelectedDate(getDateAsString(newDate)); + }; + + const handleMonthSelect = (month: string) => { + const newDate = new Date(getDateAsString(selectedDate)); + newDate.setMonth(months.indexOf(month)); + setSelectedDate(getDateAsString(newDate)); + }; + + const handleYearSelect = (year: string) => { + const newDate = new Date(getDateAsString(selectedDate)); + newDate.setFullYear(parseInt(year)); + setSelectedDate(getDateAsString(newDate)); + }; + + useEffect(() => { + if (onDateChange) { + onDateChange(selectedDate); // Call the callback when selectedDate changes + } + }, [selectedDate, onDateChange]); + + return ( + <> +
+ + + +
+
+ {/* {selectedDate.toLocaleDateString("en-US", { + year: "numeric", + month: "long", + day: "numeric", + })} */} +
+ + ); +}; + +export default DatePicker; diff --git a/src/components/Compatibility/DatePickerItem.tsx b/src/components/Compatibility/DatePickerItem.tsx new file mode 100644 index 0000000..d11dab9 --- /dev/null +++ b/src/components/Compatibility/DatePickerItem.tsx @@ -0,0 +1,148 @@ +import React, { useEffect, useRef, useState } from "react"; + +const ITEM_HEIGHT = 40; // Height of each date item + +interface DatePickerItemProps { + data: string[]; + selectedValue: string; + onSelect: (value: string) => void; + unit: string; +} + +function useIsMobile() { + const [isMobile, setIsMobile] = useState(false); + + useEffect(() => { + setIsMobile(window.matchMedia("(max-width: 600px)").matches); + }, []); + + return isMobile; +} + +const DatePickerItem: React.FC = ({ + data, + selectedValue, + onSelect, + unit, +}) => { + const isMobile = useIsMobile(); + const scrollRef = useRef(null); + + const [touchY, setTouchY] = useState(0); + const [translateY, setTranslateY] = useState( + data.indexOf(selectedValue) * -ITEM_HEIGHT + ); + + const handleTouchStart = (event: React.TouchEvent) => { + setTouchY(event.touches[0].clientY); + }; + + const handleTouchMove = (event: React.TouchEvent) => { + if (isMobile && touchY !== null) { + const deltaY = event.touches[0].clientY - touchY; + wheelScroll(deltaY); + setTouchY(event.touches[0].clientY); + } + }; + + const handleTouchEnd = () => { + if (isMobile && scrollRef.current) { + const selectedIndex = Math.round(-translateY / ITEM_HEIGHT); + onSelect(data[selectedIndex]); + + // Limit the translateY to ensure it aligns with a valid item + setTranslateY(-selectedIndex * ITEM_HEIGHT); + setTouchY(0); + } + }; + + const wheelScroll = (deltaY: number) => { + const newTranslateY = translateY + deltaY; + + // Calculate the maximum and minimum translateY values based on the data length + const minTranslateY = -ITEM_HEIGHT * (data.length - 1); + const maxTranslateY = 0; + + // Ensure the newTranslateY stays within the valid range + if (newTranslateY < minTranslateY) { + setTranslateY(minTranslateY); + } else if (newTranslateY > maxTranslateY) { + setTranslateY(maxTranslateY); + } else { + setTranslateY(newTranslateY); + } + }; + + // const handleMouseDown = (event: React.MouseEvent) => { + // if (!isMobile) { + // setTouchY(event.clientY); + // document.addEventListener("mousemove", handleMouseMove); + // document.addEventListener("mouseup", handleMouseUp); + // } + // }; + + // const handleMouseMove = (event: MouseEvent) => { + // const deltaY = event.clientY - touchY; + // handleScroll(deltaY); + // setTouchY(event.clientY); + // }; + + // const handleMouseUp = () => { + // resetMouseState(); + // }; + + // const resetTouchState = () => { + // if (isMobile && scrollRef.current) { + // const selectedIndex = Math.round(-translateY / ITEM_HEIGHT); + // onSelect(data[selectedIndex]); + + // // Limit the translateY to ensure it aligns with a valid item + // setTranslateY(-selectedIndex * ITEM_HEIGHT); + // setTouchY(0); + // } + // }; + + // const resetMouseState = () => { + // document.removeEventListener("mousemove", handleMouseMove); + // document.removeEventListener("mouseup", handleMouseUp); + // resetTouchState(); + // }; + + // useEffect(() => { + // // Clean up mouse event listeners when the component unmounts + // return () => { + // resetMouseState(); + // }; + // }, []); + + return ( +
+
+
+ {data.map((item, index) => ( +
+ {item} +
+ ))} +
+
+
+ ); +}; + +export default DatePickerItem; diff --git a/src/components/Compatibility/index.tsx b/src/components/Compatibility/index.tsx index 880a814..2855c3c 100644 --- a/src/components/Compatibility/index.tsx +++ b/src/components/Compatibility/index.tsx @@ -4,8 +4,8 @@ import Title from "../Title"; import styles from "./styles.module.css"; import { useCallback, useState } from "react"; import NameInput from "./nameInput"; -import { DatePicker } from "../DateTimePicker"; -import { IDate, getDateAsString } from "@/services/date"; +import DatePicker from "./DatePicker"; +import { IDate } from "@/services/date"; import { AICompatCategories, useApi, useApiCall } from "@/api"; import { useNavigate } from "react-router-dom"; import routes from "@/routes"; @@ -14,57 +14,61 @@ import { actions } from "@/store"; function CompatibilityPage(): JSX.Element { const { t, i18n } = useTranslation(); - const navigate = useNavigate() - const dispatch = useDispatch() + const navigate = useNavigate(); + const dispatch = useDispatch(); const [isDisabled, setIsDisabled] = useState(true); const [isDisabledName, setIsDisabledName] = useState(true); const [isDisabledDate, setIsDisabledDate] = useState(true); - const [name, setName] = useState(''); - const [date, setDate] = useState(''); + const [name, setName] = useState(""); + const [selectedDate, setSelectedDate] = useState(""); const [compatCategory, setCompatCategory] = useState(1); const handleNext = () => { - dispatch(actions.compatibility.update({ - rightUser: { - name, - birthDate: date - }, - categoryId: compatCategory - })) - navigate(routes.client.compatibilityResult()) + if (isDisabled) return; + dispatch( + actions.compatibility.update({ + rightUser: { + name, + birthDate: selectedDate, + }, + categoryId: compatCategory, + }) + ); + navigate(routes.client.compatibilityResult()); }; - - const api = useApi() - const locale = i18n.language + + const api = useApi(); + const locale = i18n.language; const loadData = useCallback(() => { - return api.getAiCompatCategories({ locale }) - .then((resp: AICompatCategories.Response) => resp.compat_categories) - }, [api, locale]) - const { data } = useApiCall(loadData) + return api + .getAiCompatCategories({ locale }) + .then((resp: AICompatCategories.Response) => resp.compat_categories); + }, [api, locale]); + const { data } = useApiCall(loadData); const handleValidName = (name: string) => { setIsDisabledName(!name.length); - setName(name) - checkAllDisabled() - } + setName(name); + checkAllDisabled(); + }; - const handleValidDate = (date: IDate | string) => { + const handleValidDate = (date: string | IDate) => { setIsDisabledDate(date === ''); - setDate(date) - checkAllDisabled() - } + setSelectedDate(date); + checkAllDisabled(); + }; const checkAllDisabled = () => { setIsDisabled(isDisabledName || isDisabledDate); - } + }; const changeCompatCategory = (event: React.ChangeEvent) => { - setCompatCategory(parseInt(event.target.value)) - } - + setCompatCategory(parseInt(event.target.value)); + }; return (
+
{t("compatibility")} @@ -75,47 +79,47 @@ function CompatibilityPage(): JSX.Element { + -
-
+
+
setIsDisabledName(true)} />
-
- setIsDisabledDate(true)} - /> +
+
{data && data.length && ( -
- { - data.map((item, index) => ( -
- - -
- )) - } +
+ {data.map((item, index) => ( +
+ + +
+ ))}
)} - + {t("check")}
diff --git a/src/components/Compatibility/styles.module.css b/src/components/Compatibility/styles.module.css index 91374f8..3b3ec25 100644 --- a/src/components/Compatibility/styles.module.css +++ b/src/components/Compatibility/styles.module.css @@ -6,8 +6,42 @@ align-items: flex-start; } +.cross { + position: absolute; + top: 24px; + right: 24px; + width: 24px; + height: 24px; + border: solid 2px #bdbdbd; + border-radius: 100%; + rotate: 45deg; + cursor: pointer; +} + +.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; +} + .content { - width: 100%; + width: 100%; } .title { @@ -84,10 +118,10 @@ } .check-btn { - border-radius: 30px; - background-color: #ea445a; - max-width: 200px; - margin: 48px auto; + border-radius: 30px; + background-color: #ea445a; + max-width: 200px; + margin: 48px auto; } .compatibility-categories { diff --git a/src/components/CreateProfilePage/index.tsx b/src/components/CreateProfilePage/index.tsx index 60d5bd5..6f2c7bb 100644 --- a/src/components/CreateProfilePage/index.tsx +++ b/src/components/CreateProfilePage/index.tsx @@ -34,10 +34,10 @@ function CreateProfilePage(): JSX.Element { }, [progressbarRef]) const processItems = [ - { task: () => sleep(3300).then(() => setProgress(23)), label: t('money_energy') }, - { task: () => sleep(2550).then(() => setProgress(48)), label: t('sexual_energy') }, - { task: () => sleep(3789).then(() => setProgress(65)), label: t('black_energy') }, - { task: () => sleep(3789).then(() => setProgress(98)), label: t('relations_energy') }, + { task: () => sleep(3300).then(() => setProgress(23)), label: t('aura.1.loading') }, + { task: () => sleep(2550).then(() => setProgress(48)), label: t('aura.2.loading') }, + { task: () => sleep(3789).then(() => setProgress(65)), label: t('aura.3.loading') }, + { task: () => sleep(3789).then(() => setProgress(98)), label: t('aura.4.loading') }, ] const handleDone = () => Promise.resolve() .then(() => setProgress(100)) diff --git a/src/components/FeedbackPage/index.tsx b/src/components/FeedbackPage/index.tsx index 3a7a83c..024c450 100644 --- a/src/components/FeedbackPage/index.tsx +++ b/src/components/FeedbackPage/index.tsx @@ -1,26 +1,65 @@ -import { useNavigate } from 'react-router-dom' -import { useTranslation } from 'react-i18next' -import routes from '@/routes' -import styles from './styles.module.css' -import MainButton from '../MainButton' +import { useNavigate } from "react-router-dom"; +import { useTranslation } from "react-i18next"; +import routes from "@/routes"; +import styles from "./styles.module.css"; +import MainButton from "../MainButton"; +import Title from "../Title"; +import { useApi, useApiCall } from "@/api"; +import { useCallback } from "react"; +import { Asset } from "@/api/resources/Assets"; function FeedbackPage(): JSX.Element { - const { t } = useTranslation() - const navigate = useNavigate() - const handleNext = () => navigate(routes.client.emailEnter()) + const { t } = useTranslation(); + const navigate = useNavigate(); + const api = useApi(); + const handleNext = () => navigate(routes.client.emailEnter()); + + const assetsData = useCallback(async () => { + const { assets } = await api.getAssets({ category: String("au") }); + return assets; + }, [api]); + + const { + data: assets, + // isPending + } = useApiCall(assetsData); + + const reviews = [ + { + title: t("aura.name_1.review"), + text: t("aura.review_1.content"), + imageKey: "au.1.avatar", + }, + { + title: t("aura.name_2.review"), + text: t("aura.review_2.content"), + imageKey: "au.2.avatar", + }, + ]; return (
-
- profile picture - stop +
+ {reviews.map(({ title, text, imageKey }, index) => ( +
+
+ asset.key === imageKey)?.url} + alt="profile picture" + /> +
+ {title} + stop +
+
+

{text}

+
+ ))}
-

{t('feedback')}

- - {t('next')} - + {t("next")}
- ) + ); } -export default FeedbackPage +export default FeedbackPage; diff --git a/src/components/FeedbackPage/styles.module.css b/src/components/FeedbackPage/styles.module.css index f52b045..c493b93 100644 --- a/src/components/FeedbackPage/styles.module.css +++ b/src/components/FeedbackPage/styles.module.css @@ -6,6 +6,23 @@ gap: 16px; } +.reviews { + display: flex; + flex-direction: row; + overflow-x: scroll; + width: 100vw; + max-width: 560px; + padding: 0 32px; + gap: 24px; +} + +.review { + display: flex; + flex-direction: column; + gap: 16px; + min-width: 300px; +} + .images { display: flex; align-items: flex-end; @@ -16,6 +33,9 @@ .profile-picture { width: 96px; + border-radius: 100%; + object-fit: cover; + object-position: center; } .stars { @@ -31,3 +51,8 @@ border-radius: 24px; margin-bottom: 8px; } + +.header-container { + display: flex; + flex-direction: column; +} diff --git a/src/components/HomePage/styles.module.css b/src/components/HomePage/styles.module.css index 6cf3c5a..d1453d2 100644 --- a/src/components/HomePage/styles.module.css +++ b/src/components/HomePage/styles.module.css @@ -81,7 +81,7 @@ flex-direction: column; gap: 12px; align-items: center; - margin-top: calc(100vh - 432px); + margin-top: calc(100vh - 478px); } .content__buttons { diff --git a/src/components/StartBreathModalChild/index.tsx b/src/components/StartBreathModalChild/index.tsx index 7be6eb5..35fb05d 100644 --- a/src/components/StartBreathModalChild/index.tsx +++ b/src/components/StartBreathModalChild/index.tsx @@ -13,23 +13,40 @@ function StartBreathModalChild({ return (
+
- {t("breathe-title").split("").map((symbol, index) => ( - <span className={styles["symbol"]} style={{ animationDelay: `${index * 0.05}s` }} key={index}>{symbol}</span> - ))} + {t("breathe-title") + .split("") + .map((symbol, index) => ( + <span + className={styles["symbol"]} + style={{ animationDelay: `${index * 0.05}s` }} + key={index} + > + {symbol} + </span> + ))} - {t("breathe-subtitle").split("").map((symbol, index) => ( - <span className={styles["symbol"]} style={{ animationDelay: `${(t("breathe-title").split("").length + index) * 0.05}s` }} key={index}>{symbol}</span> - ))} + {t("breathe-subtitle") + .split("") + .map((symbol, index) => ( + <span + className={styles["symbol"]} + style={{ + animationDelay: `${ + (t("breathe-title").split("").length + index) * 0.05 + }s`, + }} + key={index} + > + {symbol} + </span> + ))}
-
diff --git a/src/components/StartBreathModalChild/styles.module.css b/src/components/StartBreathModalChild/styles.module.css index 23053d8..6e9738c 100644 --- a/src/components/StartBreathModalChild/styles.module.css +++ b/src/components/StartBreathModalChild/styles.module.css @@ -29,10 +29,44 @@ will-change: opacity; animation-name: appearance; animation-timing-function: ease; - animation-duration: .3s; + animation-duration: 0.3s; animation-fill-mode: forwards; } +.cross { + position: absolute; + top: 24px; + right: 24px; + width: 24px; + height: 24px; + border: solid 2px #bdbdbd; + border-radius: 100%; + rotate: 45deg; + cursor: pointer; +} + +.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 appearance { 0% { opacity: 0; diff --git a/src/components/UserCallbacksPage/index.tsx b/src/components/UserCallbacksPage/index.tsx index 4e65898..5797228 100644 --- a/src/components/UserCallbacksPage/index.tsx +++ b/src/components/UserCallbacksPage/index.tsx @@ -16,7 +16,11 @@ function UserCallbacksPage(): JSX.Element { const homeConfig = useSelector(selectors.selectHome); const handleNext = () => { - dispatch(actions.siteConfig.update({ home: { pathFromHome: homeConfig.pathFromHome, isShowNavbar: true } })); + dispatch( + actions.siteConfig.update({ + home: { pathFromHome: homeConfig.pathFromHome, isShowNavbar: true }, + }) + ); if (homeConfig.pathFromHome === EPathsFromHome.compatibility) { return navigate(routes.client.home()); } @@ -55,9 +59,16 @@ function UserCallbacksPage(): JSX.Element {

{text}

- + {homeConfig.pathFromHome === EPathsFromHome.breath && ( + + )} + {homeConfig.pathFromHome === EPathsFromHome.compatibility && ( + + )}
); } diff --git a/src/components/UserCallbacksPage/styles.module.css b/src/components/UserCallbacksPage/styles.module.css index 0cc7596..73abc19 100644 --- a/src/components/UserCallbacksPage/styles.module.css +++ b/src/components/UserCallbacksPage/styles.module.css @@ -52,6 +52,13 @@ color: #fff; } +.button-red { + padding: 12px 0; + background: -moz-linear-gradient(to bottom, #FF003D, #6B174A); + background: -webkit-linear-gradient(to bottom, #FF003D, #6B174A); + background: linear-gradient(to bottom, #FF003D, #6B174A); +} + .cross { position: absolute; top: 24px; diff --git a/src/locales/dev.ts b/src/locales/dev.ts index 292392b..d099e2f 100644 --- a/src/locales/dev.ts +++ b/src/locales/dev.ts @@ -89,5 +89,17 @@ export default { "use-all-power": "Use all the power of your Aura", "go-through": "Go through practicing recovery", "now-you-know": "Now you know who`s causing your financial energy loss.", + "aura.breath_compatibility.button": "Discover who is causing your financial energy loss.", + "aura.attention.title": "ATTENTION", + "aura.warming_up.body": "The analysis of your Aura revealed a negative energy influence on you and a partial positive one. Such a combination is very rare! Which one would you like to start with?", + "aura.warming_up.button": "GOOD BAD", + "aura.1.loading": "MONEY energy test1", + "aura.2.loading": "SEXUAL energy test", + "aura.3.loading": "BLACK energy", + "aura.4.loading": "RELATIONS energy", + "aura.name_1.review": "Samantha Green", + "aura.name_2.review": "James Wilson", + "aura.review_1.content": "As for me, money just doesn't stick with me at all. It turned out that it wasn't because I was bad or irresponsible, but it was because of my partner. We delved deeply into this issue thanks to Aura, and what do you think? Everything changed the very next day. Now we are happy and wealthy.", + "aura.review_2.content": "I don't know why, but I always had bad experiences in relationships and couldn't find the one who would understand and love me. So, I took a special extended test and immediately figured everything out. It turns out that the birth date of the chosen one and number coincidences are very important in relationships. Now I consider this in all areas, and it helps me a lot." }, }