From 2408481948abf6a1b57efa41caa5993dd17eaf51 Mon Sep 17 00:00:00 2001 From: Yury Date: Sat, 22 Jun 2024 07:58:47 +0000 Subject: [PATCH] Feature/blur component --- src/components/BlurComponent/styles.scss | 83 +++++++------------ .../CustomAnswers/MultipleAnswers/index.tsx | 6 +- .../MultipleAnswers/styles.module.scss | 1 - 3 files changed, 32 insertions(+), 58 deletions(-) diff --git a/src/components/BlurComponent/styles.scss b/src/components/BlurComponent/styles.scss index 14ceccf..68c8205 100644 --- a/src/components/BlurComponent/styles.scss +++ b/src/components/BlurComponent/styles.scss @@ -2,6 +2,8 @@ position: relative; height: 100%; width: 100%; + text-align: center; + text-align: -webkit-center; .gradient-blur { position: absolute; @@ -10,7 +12,7 @@ left: -100px; right: -100px; bottom: -16px; - top: -24px; + top: -48px; height: auto; pointer-events: none; @@ -24,97 +26,68 @@ &::before { content: ""; z-index: 1; - backdrop-filter: blur(2px); - mask: linear-gradient( - to bottom, - rgba(0, 0, 0, 0) 0%, - rgba(0, 0, 0, 1) 12.5%, - rgba(0, 0, 0, 1) 25%, - rgba(0, 0, 0, 0) 37.5% - ); + -webkit-backdrop-filter: blur(0.5px); + backdrop-filter: blur(0.5px); + -webkit-mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, black 12.5%, black 25%, rgba(0, 0, 0, 0) 37.5%); + mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, black 12.5%, black 25%, rgba(0, 0, 0, 0) 37.5%); } & > div:nth-of-type(1) { z-index: 2; + -webkit-backdrop-filter: blur(1px); backdrop-filter: blur(1px); - mask: linear-gradient( - to bottom, - rgba(0, 0, 0, 0) 12.5%, - rgba(0, 0, 0, 1) 25%, - rgba(0, 0, 0, 1) 37.5%, - rgba(0, 0, 0, 0) 50% - ); + -webkit-mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 12.5%, black 25%, black 37.5%, rgba(0, 0, 0, 0) 50%); + mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 12.5%, black 25%, black 37.5%, rgba(0, 0, 0, 0) 50%); } & > div:nth-of-type(2) { z-index: 3; + -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); - mask: linear-gradient( - to bottom, - rgba(0, 0, 0, 0) 25%, - rgba(0, 0, 0, 1) 37.5%, - rgba(0, 0, 0, 1) 50%, - rgba(0, 0, 0, 0) 62.5% - ); + -webkit-mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 25%, black 37.5%, black 50%, rgba(0, 0, 0, 0) 62.5%); + mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 25%, black 37.5%, black 50%, rgba(0, 0, 0, 0) 62.5%); } & > div:nth-of-type(3) { z-index: 4; + -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); - mask: linear-gradient( - to bottom, - rgba(0, 0, 0, 0) 37.5%, - rgba(0, 0, 0, 1) 50%, - rgba(0, 0, 0, 1) 62.5%, - rgba(0, 0, 0, 0) 75% - ); + -webkit-mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 37.5%, black 50%, black 62.5%, rgba(0, 0, 0, 0) 75%); + mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 37.5%, black 50%, black 62.5%, rgba(0, 0, 0, 0) 75%); } & > div:nth-of-type(4) { z-index: 5; + -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); - mask: linear-gradient( - to bottom, - rgba(0, 0, 0, 0) 50%, - rgba(0, 0, 0, 1) 62.5%, - rgba(0, 0, 0, 1) 75%, - rgba(0, 0, 0, 0) 87.5% - ); + -webkit-mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 50%, black 62.5%, black 75%, rgba(0, 0, 0, 0) 87.5%); + mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 50%, black 62.5%, black 75%, rgba(0, 0, 0, 0) 87.5%); } & > div:nth-of-type(5) { z-index: 6; + -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); - mask: linear-gradient( - to bottom, - rgba(0, 0, 0, 0) 62.5%, - rgba(0, 0, 0, 1) 75%, - rgba(0, 0, 0, 1) 87.5%, - rgba(0, 0, 0, 0) 100% - ); + -webkit-mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 62.5%, black 75%, black 87.5%, rgba(0, 0, 0, 0) 100%); + mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 62.5%, black 75%, black 87.5%, rgba(0, 0, 0, 0) 100%); } & > div:nth-of-type(6) { z-index: 7; + -webkit-backdrop-filter: blur(32px); backdrop-filter: blur(32px); - mask: linear-gradient( - to bottom, - rgba(0, 0, 0, 0) 75%, - rgba(0, 0, 0, 1) 87.5%, - rgba(0, 0, 0, 1) 100% - ); + -webkit-mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 75%, black 87.5%, black 100%); + mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 75%, black 87.5%, black 100%); } &::after { content: ""; z-index: 8; + -webkit-backdrop-filter: blur(64px); backdrop-filter: blur(64px); - mask: linear-gradient( - to bottom, - rgba(0, 0, 0, 0) 87.5%, - rgba(0, 0, 0, 1) 100% - ); + -webkit-mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 87.5%, black 100%); + mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 87.5%, black 100%); } } } \ No newline at end of file diff --git a/src/components/pages/ABDesign/v1/components/Questionnaire/CustomAnswers/MultipleAnswers/index.tsx b/src/components/pages/ABDesign/v1/components/Questionnaire/CustomAnswers/MultipleAnswers/index.tsx index 36e8815..94e08e8 100644 --- a/src/components/pages/ABDesign/v1/components/Questionnaire/CustomAnswers/MultipleAnswers/index.tsx +++ b/src/components/pages/ABDesign/v1/components/Questionnaire/CustomAnswers/MultipleAnswers/index.tsx @@ -3,7 +3,7 @@ import styles from "./styles.module.scss"; import { useTranslation } from "react-i18next"; import { useDispatch, useSelector } from "react-redux"; import { actions, selectors } from "@/store"; -import { useNavigate } from "react-router-dom"; +import {useNavigate, useLocation} from "react-router-dom"; import routes from "@/routes"; import Answer from "../../../../ui/Answer"; import QuestionnaireGreenButton from "../../../../ui/GreenButton"; @@ -19,6 +19,7 @@ function MultiplyAnswers({ answers }: IMultiplyAnswersProps) { const { currentlyAffecting, gender } = useSelector( selectors.selectQuestionnaire ); + const location = useLocation(); const handleClick = (answer: IAnswer) => { if (currentlyAffecting.includes(`$${answer.id}`)) { @@ -54,6 +55,7 @@ function MultiplyAnswers({ answers }: IMultiplyAnswersProps) { ); }; + return ( <>
@@ -79,7 +81,7 @@ function MultiplyAnswers({ answers }: IMultiplyAnswersProps) {
{!!currentlyAffecting.length && ( diff --git a/src/components/pages/ABDesign/v1/components/Questionnaire/CustomAnswers/MultipleAnswers/styles.module.scss b/src/components/pages/ABDesign/v1/components/Questionnaire/CustomAnswers/MultipleAnswers/styles.module.scss index e757d8e..a6d6c34 100644 --- a/src/components/pages/ABDesign/v1/components/Questionnaire/CustomAnswers/MultipleAnswers/styles.module.scss +++ b/src/components/pages/ABDesign/v1/components/Questionnaire/CustomAnswers/MultipleAnswers/styles.module.scss @@ -19,7 +19,6 @@ button { z-index: 10; - max-width: 100%; } }