From 844d5d129574d457b846b3ff94f20deba76d9a67 Mon Sep 17 00:00:00 2001 From: gofnnp Date: Fri, 6 Oct 2023 00:34:38 +0400 Subject: [PATCH] feat: navbar onboarding, add blur name input from done button on compatibility page, fix cross button on compatibility page, add menu button to home page, replace download button moon page, fix percents --- public/finger.svg | 17 ++++ src/components/App/index.tsx | 4 +- src/components/CompatResultPage/index.tsx | 5 +- src/components/Compatibility/index.tsx | 15 ++-- src/components/Compatibility/nameInput.tsx | 5 +- src/components/EnergyValues/index.tsx | 2 +- src/components/HomePage/index.tsx | 2 +- src/components/Navbar/styles.css | 2 +- src/components/NavbarFooter/index.tsx | 84 ++++++++++++++++++- src/components/NavbarFooter/styles.module.css | 13 +++ src/components/Onboarding/index.tsx | 41 ++++----- src/components/TextWithFinger/index.tsx | 14 ++-- .../WallpaperPage/styles.module.css | 12 ++- src/routes.ts | 2 +- src/store/index.ts | 2 + src/store/onboarding.ts | 10 +++ 16 files changed, 183 insertions(+), 47 deletions(-) create mode 100644 public/finger.svg diff --git a/public/finger.svg b/public/finger.svg new file mode 100644 index 0000000..889b9fb --- /dev/null +++ b/public/finger.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + + + diff --git a/src/components/App/index.tsx b/src/components/App/index.tsx index 2391167..7fd935f 100644 --- a/src/components/App/index.tsx +++ b/src/components/App/index.tsx @@ -225,7 +225,9 @@ function Layout({ setIsSpecialOfferOpen }: LayoutProps): JSX.Element { {showNavbar ? ( setIsMenuOpen(false)} /> ) : null} - {showNavbarFooter && hasNavbarFooter(location.pathname) ? ( + { + // showNavbarFooter && + hasNavbarFooter(location.pathname) ? ( ) : null} diff --git a/src/components/CompatResultPage/index.tsx b/src/components/CompatResultPage/index.tsx index 1f37812..92a1249 100644 --- a/src/components/CompatResultPage/index.tsx +++ b/src/components/CompatResultPage/index.tsx @@ -40,9 +40,10 @@ function CompatResultPage(): JSX.Element { if (homeConfig.pathFromHome === EPathsFromHome.compatibility) { return navigate(routes.client.breath()); } + return navigate(routes.client.compatibility()); }; - const handleCompatibility = () => navigate(routes.client.compatibility()); + // const handleCompatibility = () => navigate(routes.client.compatibility()); const loadData = useCallback(async () => { const right_bday = @@ -119,7 +120,7 @@ function CompatResultPage(): JSX.Element { }} /> -
+
{t("you_and", { user: rightUser.name })}
diff --git a/src/components/Compatibility/index.tsx b/src/components/Compatibility/index.tsx index e2b1225..ea3081e 100644 --- a/src/components/Compatibility/index.tsx +++ b/src/components/Compatibility/index.tsx @@ -169,7 +169,7 @@ function CompatibilityPage(): JSX.Element { {!onboardingCompatibility.isShown && <> {currentOnboarding === 0 && ( { if (!name.length) return; if (e.key === "Enter") { - setCurrentOnboarding(1); (e.target as HTMLInputElement).blur(); - dateRef.current?.scrollIntoView({ behavior: "smooth" }); } }} onValid={handleValidName} onInvalid={() => setIsDisabledName(true)} + onBlur={() => { + if (!name.length) return; + setCurrentOnboarding(1); + dateRef.current?.scrollIntoView({ behavior: "smooth" }); + }} />
{currentOnboarding === 2 && !onboardingCompatibility.isShown && ( { onKeyDown: (event: React.KeyboardEvent) => void; onValid: (value: string) => void; onInvalid: () => void; + onBlur: () => void; } const isValidName = (name: string) => { @@ -17,7 +18,8 @@ const isValidName = (name: string) => { }; function NameInput(props: INameInput): JSX.Element { - const { name, value, placeholder, onValid, onInvalid, onKeyDown } = props; + const { name, value, placeholder, onValid, onInvalid, onKeyDown, onBlur } = + props; const [userName, setUserName] = useState(value); const handleChange = (event: React.ChangeEvent) => { setUserName(event.target.value); @@ -40,6 +42,7 @@ function NameInput(props: INameInput): JSX.Element { onChange={handleChange} onKeyDown={onKeyDown} placeholder={placeholder ?? " "} + onBlur={onBlur} />
); diff --git a/src/components/EnergyValues/index.tsx b/src/components/EnergyValues/index.tsx index d073787..4b5118a 100644 --- a/src/components/EnergyValues/index.tsx +++ b/src/components/EnergyValues/index.tsx @@ -14,7 +14,7 @@ const colors: Record = { } const valueFormatter = (value: number) => { - return `${(value * 10).toFixed(1)}%` + return `${(value * 100).toFixed(1)}%` } function EnergyValues({ className, values }: IEnergyValues): JSX.Element { diff --git a/src/components/HomePage/index.tsx b/src/components/HomePage/index.tsx index 8dbf216..a8122d9 100644 --- a/src/components/HomePage/index.tsx +++ b/src/components/HomePage/index.tsx @@ -166,7 +166,7 @@ function HomePage(): JSX.Element { isShowNavbar ? styles["content__buttons--hidden"] : "" }`} > - + setIsShowOnboardingHome(false)} diff --git a/src/components/Navbar/styles.css b/src/components/Navbar/styles.css index 436b636..b028b12 100644 --- a/src/components/Navbar/styles.css +++ b/src/components/Navbar/styles.css @@ -6,7 +6,7 @@ } .navbar.navbar--open { - z-index: 5; + z-index: 99; } .navbar.navbar--open .navbar__panel { diff --git a/src/components/NavbarFooter/index.tsx b/src/components/NavbarFooter/index.tsx index fba02d8..2040dce 100644 --- a/src/components/NavbarFooter/index.tsx +++ b/src/components/NavbarFooter/index.tsx @@ -1,5 +1,11 @@ import { Link } from "react-router-dom"; import styles from "./styles.module.css"; +import Onboarding from "../Onboarding"; +import { useRef, useState } from "react"; +import TextWithFinger from "../TextWithFinger"; +import { useDispatch, useSelector } from "react-redux"; +import { actions, selectors } from "@/store"; +import { useTranslation } from "react-i18next"; export interface INavbarHomeItems { title: string; @@ -15,6 +21,58 @@ interface INavbarHomeProps { } function NavbarFooter({ items }: INavbarHomeProps): JSX.Element { + const dispatch = useDispatch(); + const { t } = useTranslation(); + const onboardingConfigNavbarFooter = useSelector( + selectors.selectOnboardingNavbarFooter + ); + + const [isShowOnboardingNavbarFooter, setIsShowOnboardingNavbarFooter] = + useState(!onboardingConfigNavbarFooter.isShown); + const [selectedOnboarding, setSelectedOnboarding] = useState(3); + + const buttonsRef = useRef([] as HTMLDivElement[]); + + const setShownOnboarding = () => { + setIsShowOnboardingNavbarFooter(false); + dispatch( + actions.onboardingConfig.update({ + navbarFooter: { + isShown: true, + }, + }) + ); + }; + + const onboardingsSettings = [ + { + text: t("au.web_onbording.breathing"), + onClick: () => setSelectedOnboarding(2), + classNameText: `${styles["breathing-onboarding__text"]} ${styles.onboarding}`, + }, + { + text: t("au.web_onbording.onboarding_2"), + onClick: () => setSelectedOnboarding(2), + }, + { + text: t("au.web_onbording.compatibility"), + onClick: () => setShownOnboarding(), + classNameText: `${styles["compatibility-onboarding__text"]} ${styles.onboarding}`, + }, + { + text: t("au.web_onbording.moon"), + onClick: () => setSelectedOnboarding(0), + classNameText: `${styles["moon-onboarding__text"]} ${styles.onboarding}`, + }, + ]; + + const handleClick = (item: INavbarHomeItems) => { + onboardingsSettings[selectedOnboarding].onClick(); + if (item.onClick) { + item.onClick(); + } + }; + return (
{items.map((item, index) => ( @@ -23,17 +81,33 @@ function NavbarFooter({ items }: INavbarHomeProps): JSX.Element { item.active ? styles["navbar-item--active"] : "" }`} key={index} + ref={(el) => (buttonsRef.current[index] = el as HTMLDivElement)} > + {isShowOnboardingNavbarFooter && ( + + onboardingsSettings[index].onClick()} + classNameText={onboardingsSettings[index].classNameText} + /> + + )} { + handleClick(item); + }} >

{item.title} diff --git a/src/components/NavbarFooter/styles.module.css b/src/components/NavbarFooter/styles.module.css index 5d5730a..f1ebebe 100644 --- a/src/components/NavbarFooter/styles.module.css +++ b/src/components/NavbarFooter/styles.module.css @@ -44,3 +44,16 @@ .navbar-item__image { width: 30px; } + +.onboarding { + width: 188px; + color: #000; +} + +.moon-onboarding__text { + margin-right: 108px; +} + +.breathing-onboarding__text { + margin-left: 108px; +} diff --git a/src/components/Onboarding/index.tsx b/src/components/Onboarding/index.tsx index 0c0b3cd..61be6be 100644 --- a/src/components/Onboarding/index.tsx +++ b/src/components/Onboarding/index.tsx @@ -9,11 +9,12 @@ export enum EDirectionOnboarding { } interface OnboardingProps { - targetRef: React.RefObject; + targetRef: HTMLElement; isShow: boolean; direction?: EDirectionOnboarding; showBackground?: boolean; children: JSX.Element; + classNameContainer?: string; } interface IBoardingCoordinates { top: number; @@ -21,43 +22,43 @@ interface IBoardingCoordinates { } const getCoordinates = ( - targetRef: React.RefObject, + targetRef: HTMLElement, direction: EDirectionOnboarding, onboardingRef: React.RefObject ): IBoardingCoordinates => { - if (targetRef.current && onboardingRef.current) { + if (targetRef && onboardingRef.current) { switch (direction) { case EDirectionOnboarding.LEFT: return { top: - targetRef.current.offsetTop + - targetRef.current.offsetHeight / 2 - + targetRef.offsetTop + + targetRef.offsetHeight / 2 - onboardingRef.current.offsetHeight / 2, left: - targetRef.current.offsetLeft - onboardingRef.current.offsetWidth, + targetRef.offsetLeft - onboardingRef.current.offsetWidth, }; case EDirectionOnboarding.RIGHT: return { top: - targetRef.current.offsetTop + - targetRef.current.offsetHeight / 2 - + targetRef.offsetTop + + targetRef.offsetHeight / 2 - onboardingRef.current.offsetHeight / 2, - left: targetRef.current.offsetLeft + targetRef.current.offsetWidth, + left: targetRef.offsetLeft + targetRef.offsetWidth, }; case EDirectionOnboarding.TOP: return { - top: targetRef.current.offsetTop - onboardingRef.current.offsetHeight, + top: targetRef.offsetTop - onboardingRef.current.offsetHeight, left: - targetRef.current.offsetLeft + - targetRef.current.offsetWidth / 2 - + targetRef.offsetLeft + + targetRef.offsetWidth / 2 - onboardingRef.current.offsetWidth / 2, }; case EDirectionOnboarding.BOTTOM: return { - top: targetRef.current.offsetTop + targetRef.current.offsetHeight, + top: targetRef.offsetTop + targetRef.offsetHeight, left: - targetRef.current.offsetLeft + - targetRef.current.offsetWidth / 2 - + targetRef.offsetLeft + + targetRef.offsetWidth / 2 - onboardingRef.current.offsetWidth / 2, }; } @@ -70,11 +71,12 @@ const getCoordinates = ( const getClassNameContainer = ( direction: EDirectionOnboarding, - showBackground: boolean + showBackground: boolean, + classNameContainer?: string ) => { return `${styles["onboarding-container"]} ${ styles[`direction-${direction}`] - } ${showBackground ? styles["background"] : ""}`; + } ${showBackground ? styles["background"] : ""} ${classNameContainer}`; }; function Onboarding({ @@ -82,6 +84,7 @@ function Onboarding({ isShow, direction = EDirectionOnboarding.TOP, showBackground = false, + classNameContainer = '', children, }: OnboardingProps): JSX.Element { const onboardingRef = useRef(null); @@ -99,10 +102,10 @@ function Onboarding({ } return ( -

+
void; } -function Onboarding({ +function TextWithFinger({ text, showCross = true, direction = EDirectionOnboarding.TOP, + classNameText = "", crossClickHandler, -}: OnboardingProps): JSX.Element { +}: TextWithFingerProps): JSX.Element { return ( <> {text.length && ( -
+
{showCross && (
)} @@ -26,11 +28,11 @@ function Onboarding({ )} finger ); } -export default Onboarding; +export default TextWithFinger; diff --git a/src/components/WallpaperPage/styles.module.css b/src/components/WallpaperPage/styles.module.css index c9d6913..b39600f 100644 --- a/src/components/WallpaperPage/styles.module.css +++ b/src/components/WallpaperPage/styles.module.css @@ -60,15 +60,19 @@ .btn-download { position: absolute; - cursor: pointer; top: 28px; right: 32px; width: 50px; height: 50px; - background-image: url(./Dowload.png); - background-position: center; - background-size: cover; + background-size: 70%; + background-image: url("/Save-icon.png"); background-repeat: no-repeat; + background-position: center center; + -webkit-backdrop-filter: blur(14px); + background-color: #696969; + backdrop-filter: blur(14px); + border-radius: 100%; + cursor: pointer; } .zodiac-metas { diff --git a/src/routes.ts b/src/routes.ts index c3f0a7e..6c47850 100644 --- a/src/routes.ts +++ b/src/routes.ts @@ -89,7 +89,7 @@ export const isEntrypoint = (path: string) => entrypoints.includes(path); export const isNotEntrypoint = (path: string) => !isEntrypoint(path); export const withNavigationRoutes = [ routes.client.wallpaper(), - // routes.client.home(), + routes.client.home(), ]; export const hasNavigation = (path: string) => withNavigationRoutes.includes(path); diff --git a/src/store/index.ts b/src/store/index.ts index ba0546d..4ffc371 100644 --- a/src/store/index.ts +++ b/src/store/index.ts @@ -19,6 +19,7 @@ import onboardingConfig, { selectOnboardingBreath, selectOnboardingCompatibility, selectOnboardingHome, + selectOnboardingNavbarFooter, actions as onboardingConfigActions, } from "./onboarding"; import payment, { @@ -90,6 +91,7 @@ export const selectors = { selectOnboardingHome, selectOnboardingCompatibility, selectOnboardingBreath, + selectOnboardingNavbarFooter, ...formSelectors, }; export type RootState = ReturnType; diff --git a/src/store/onboarding.ts b/src/store/onboarding.ts index 0ead691..0a3524b 100644 --- a/src/store/onboarding.ts +++ b/src/store/onboarding.ts @@ -11,6 +11,9 @@ interface IOnboardingConfig { breath: { isShown: boolean; }; + navbarFooter: { + isShown: boolean; + } } const initialState: IOnboardingConfig = { @@ -23,6 +26,9 @@ const initialState: IOnboardingConfig = { breath: { isShown: false, }, + navbarFooter: { + isShown: false + } }; const onboardingConfigSlice = createSlice({ @@ -45,6 +51,10 @@ export const selectOnboardingHome = createSelector( (state: { onboardingConfig: IOnboardingConfig }) => state.onboardingConfig.home, (onboardingConfig) => onboardingConfig ); +export const selectOnboardingNavbarFooter = createSelector( + (state: { onboardingConfig: IOnboardingConfig }) => state.onboardingConfig.navbarFooter, + (onboardingConfig) => onboardingConfig +); export const selectOnboardingCompatibility = createSelector( (state: { onboardingConfig: IOnboardingConfig }) => state.onboardingConfig.compatibility,