From 981b1137012d33bff8806eea9496cf87d209a3ca Mon Sep 17 00:00:00 2001 From: Cheslav Zhuravsky Date: Mon, 2 Oct 2023 10:43:00 +0300 Subject: [PATCH 1/6] update landing --- src/pages/Search/Search.module.scss | 8 +++++++- src/pages/Search/Search.tsx | 4 +++- 2 files changed, 10 insertions(+), 2 deletions(-) diff --git a/src/pages/Search/Search.module.scss b/src/pages/Search/Search.module.scss index 9494a9ef7..61b836fd1 100644 --- a/src/pages/Search/Search.module.scss +++ b/src/pages/Search/Search.module.scss @@ -106,7 +106,7 @@ } } - animation: identifier2 140s infinite; + // animation: identifier2 140s infinite; } > * { @@ -251,4 +251,10 @@ line-height: 30px; color: rgba(255, 255, 255, 0.5); } + + a { + &:hover { + opacity: 0.7; + } + } } diff --git a/src/pages/Search/Search.tsx b/src/pages/Search/Search.tsx index 4735bc7f7..c87f403f6 100644 --- a/src/pages/Search/Search.tsx +++ b/src/pages/Search/Search.tsx @@ -88,7 +88,9 @@ function Search() { ].map(({ title, text }) => { return (
  • -
    {title}
    + +
    {title}
    +

    {text}

    • ); From 8903e424ccfbaf31aded56c22850d755e4a4c56b Mon Sep 17 00:00:00 2001 From: Cheslav Zhuravsky Date: Mon, 2 Oct 2023 10:43:37 +0300 Subject: [PATCH 2/6] toggle off menu opening on mobile --- src/layouts/Main.tsx | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/src/layouts/Main.tsx b/src/layouts/Main.tsx index 48545130e..091e1bd4a 100644 --- a/src/layouts/Main.tsx +++ b/src/layouts/Main.tsx @@ -9,10 +9,12 @@ import Header from 'src/containers/application/Header/Header'; import useSetActiveAddress from 'src/hooks/useSetActiveAddress'; import { RootState } from 'src/redux/store'; import styles from './Main.module.scss'; +import { useDevice } from 'src/contexts/device'; function MainLayout({ children }: { children: JSX.Element }) { const { pocket } = useSelector((state: RootState) => state); const { defaultAccount } = pocket; + const { isMobile } = useDevice(); const { addressActive } = useSetActiveAddress(defaultAccount); const [openMenu, setOpenMenu] = useState(false); @@ -26,10 +28,13 @@ function MainLayout({ children }: { children: JSX.Element }) { useEffect(() => { // for animation - if (localStorage.getItem(localStorageKeys.MENU_SHOW) !== 'false') { + if ( + localStorage.getItem(localStorageKeys.MENU_SHOW) !== 'false' && + !isMobile + ) { toggleMenu(true); } - }, []); + }, [isMobile]); function closeMenu() { toggleMenu(false); From dcc3cf36d77bd9994202bd344dddde7d685ce0eb Mon Sep 17 00:00:00 2001 From: Cheslav Zhuravsky Date: Mon, 2 Oct 2023 10:44:12 +0300 Subject: [PATCH 3/6] add query to hash conversion --- .../application/Header/Commander/Commander.tsx | 14 ++++++++++++-- 1 file changed, 12 insertions(+), 2 deletions(-) diff --git a/src/containers/application/Header/Commander/Commander.tsx b/src/containers/application/Header/Commander/Commander.tsx index f18f0360b..3a7f131a6 100644 --- a/src/containers/application/Header/Commander/Commander.tsx +++ b/src/containers/application/Header/Commander/Commander.tsx @@ -1,10 +1,12 @@ import React, { useEffect, useState } from 'react'; import { useNavigate, useParams } from 'react-router-dom'; -import { replaceSlash } from '../../../../utils/utils'; +import { encodeSlash, replaceSlash } from '../../../../utils/utils'; import { Input } from '../../../../components'; import styles from './Commander.module.scss'; import { Color } from 'src/components/LinearGradientContainer/LinearGradientContainer'; import { routes } from 'src/routes'; +import { getIpfsHash } from 'src/utils/search/utils'; +import { PATTERN_IPFS_HASH } from 'src/utils/config'; const fixedValue = '~'; @@ -41,7 +43,15 @@ function Commander() { }, []); useEffect(() => { - setSearch(fixedValue + (query || '')); + (async () => { + let search = query || ''; + + if (!search.match(PATTERN_IPFS_HASH) && search) { + search = await getIpfsHash(encodeSlash(query)); + } + + setSearch(fixedValue + (search || '')); + })(); }, [query]); function onChange(event: React.ChangeEvent) { From fbee3d6a8f45f481a84c042b930c563504afb559 Mon Sep 17 00:00:00 2001 From: Cheslav Zhuravsky Date: Mon, 2 Oct 2023 23:47:05 +0300 Subject: [PATCH 4/6] add ask button for commander focus --- src/components/actionBar/index.tsx | 55 ++++++++++++++++++++++++++++-- 1 file changed, 53 insertions(+), 2 deletions(-) diff --git a/src/components/actionBar/index.tsx b/src/components/actionBar/index.tsx index 813c0d0e5..b9a69edcd 100644 --- a/src/components/actionBar/index.tsx +++ b/src/components/actionBar/index.tsx @@ -1,15 +1,16 @@ -import React from 'react'; +import React, { useEffect, useState } from 'react'; import { $TsFixMeFunc } from 'src/types/tsfix'; import { useSelector } from 'react-redux'; import { RootState } from 'src/redux/store'; import { routes } from 'src/routes'; import { CYBER } from 'src/utils/config'; -import { useLocation } from 'react-router-dom'; +import { useLocation, useNavigate } from 'react-router-dom'; import { Networks } from 'src/types/networks'; import ButtonIcon from '../buttons/ButtonIcon'; import styles from './styles.scss'; import Button from '../btnGrd'; import usePassportByAddress from 'src/features/passport/hooks/usePassportByAddress'; +import { id } from 'src/containers/application/Header/Commander/Commander'; const back = require('../../image/arrow-left-img.svg'); @@ -43,6 +44,9 @@ type Props = { function ActionBar({ children, text, onClickBack, button }: Props) { const location = useLocation(); + const navigate = useNavigate(); + + const [commanderFocused, setCommanderFocused] = useState(false); const { defaultAccount } = useSelector((store: RootState) => { return { @@ -57,8 +61,55 @@ function ActionBar({ children, text, onClickBack, button }: Props) { const noAccount = !defaultAccount.account; const noPassport = CYBER.CHAIN_ID === Networks.BOSTROM && !passport; + useEffect(() => { + const commander = document.getElementById(id); + + function onFocus() { + setCommanderFocused(true); + } + + function onBlur(e) { + if (e.relatedTarget?.tagName.toLowerCase() === 'button') { + e.relatedTarget.click(); + } + setCommanderFocused(false); + } + + if (commander) { + commander.addEventListener('focus', onFocus); + commander.addEventListener('blur', onBlur); + } + + return () => { + if (commander) { + commander.removeEventListener('focus', onFocus); + commander.removeEventListener('blur', onBlur); + } + }; + }, [id]); + // TODO: not show while loading passport + // refactor + if (commanderFocused) { + return ( + + + + ); + } + if ( (noAccount || noPassport) && // maybe change to props From 741fdc618f5dd062fe26934ed4649049b8757edb Mon Sep 17 00:00:00 2001 From: Cheslav Zhuravsky Date: Tue, 3 Oct 2023 12:43:21 +0300 Subject: [PATCH 5/6] landing fixes --- src/pages/Search/Search.module.scss | 66 ++++++++++++++++------------- src/pages/Search/Search.tsx | 13 +++--- 2 files changed, 43 insertions(+), 36 deletions(-) diff --git a/src/pages/Search/Search.module.scss b/src/pages/Search/Search.module.scss index 61b836fd1..543d78972 100644 --- a/src/pages/Search/Search.module.scss +++ b/src/pages/Search/Search.module.scss @@ -93,20 +93,38 @@ gap: 0 40px; + .imgWrapper { + position: relative; + border-radius: 50%; + + &::after { + // content: ''; + position: absolute; + border-radius: 50%; + + left: 0; + right: 0; + height: 100%; + } + } + img { max-width: 100%; + box-shadow: 0px 0px 15px -2px #76ff03; + border-radius: 50%; + border: 1px solid #fff; - @keyframes identifier2 { - from { - rotate: 0; - } + // @keyframes anim { + // from { + // box-shadow: 0px 0px 15px 2px #76ff03; + // } - to { - rotate: 360deg; - } - } + // to { + // box-shadow: 0px 0px 0px 2px #76ff03; + // } + // } - // animation: identifier2 140s infinite; + // animation: anim 8s infinite alternate; } > * { @@ -140,33 +158,21 @@ } } - @media (max-width: 500px) { + @media (max-width: 580px) { .info { display: unset; - + h2 { + position: relative; + // left: -20px; + } &::before { content: unset; } - .image { + .imgWrapper { position: absolute; - right: -65%; + right: -80%; top: 85px; - - @keyframes anim { - from { - box-shadow: 0px 0px 25px 2px #76ff03; - } - - to { - box-shadow: 0px 0px 0px 2px #76ff03; - } - } - - animation: anim 8s infinite alternate; - - border: 1px solid #fff; - border-radius: 50%; } .particles { @@ -247,8 +253,8 @@ } p { - // margin-top: 15px; - line-height: 30px; + margin-top: 7px; + line-height: 23px; color: rgba(255, 255, 255, 0.5); } diff --git a/src/pages/Search/Search.tsx b/src/pages/Search/Search.tsx index c87f403f6..09920580d 100644 --- a/src/pages/Search/Search.tsx +++ b/src/pages/Search/Search.tsx @@ -46,12 +46,13 @@ function Search() { decentralized search
    is here - - cyber +
    + cyber +

    111 000 particles

    From b5e179fef6a9fbf290de245d956dfaa90d3e4bcf Mon Sep 17 00:00:00 2001 From: Cheslav Zhuravsky Date: Tue, 3 Oct 2023 17:15:20 +0300 Subject: [PATCH 6/6] fix --- src/pages/Search/Search.module.scss | 37 +++++++++++++++++++++++++---- 1 file changed, 33 insertions(+), 4 deletions(-) diff --git a/src/pages/Search/Search.module.scss b/src/pages/Search/Search.module.scss index 543d78972..d22b03ce6 100644 --- a/src/pages/Search/Search.module.scss +++ b/src/pages/Search/Search.module.scss @@ -17,6 +17,8 @@ padding: 0 50px; gap: 15px; + // margin-top: -3px; + z-index: 1; grid-template-columns: repeat(2, 1fr); @@ -161,8 +163,29 @@ @media (max-width: 580px) { .info { display: unset; + margin-top: -20px; h2 { position: relative; + text-shadow: 0px 0px 15px #ffd900; + + // &::before { + // content: ''; + // position: absolute; + // left: -30%; + // right: -30%; + + // margin-top: auto; + // height: 100%; + // z-index: -1; + // filter: blur(20px); + // background: linear-gradient( + // 90deg, + // rgba(0, 0, 0, 0) 3.92%, + // rgba(118, 255, 3, 0.2) 43.95%, + // rgba(118, 255, 3, 0.2) 55.96%, + // rgba(0, 0, 0, 0) 100% + // ); + // } // left: -20px; } &::before { @@ -171,8 +194,14 @@ .imgWrapper { position: absolute; - right: -80%; - top: 85px; + right: -105%; + + img { + // box-shadow: 0px 0px 30px -1px #76ff03; + + box-shadow: 0px 0px 25px -10px #76ff03, 0px 0px 200px -20px #76ff03; + } + top: 45px; } .particles { @@ -182,9 +211,9 @@ .advantages { // text-align: left; - margin-top: 40px; + margin-top: 20px; position: relative; - left: -40px; + left: -25px; display: flex; flex-direction: column; }