From 101b451a38325925d79d4174d1d9faa826fd7d69 Mon Sep 17 00:00:00 2001 From: yury Date: Sat, 22 Jun 2024 04:52:46 +0300 Subject: [PATCH 1/5] feat: fix blur --- src/components/BlurComponent/styles.scss | 79 ++++++------------- .../MultipleAnswers/styles.module.scss | 1 - 2 files changed, 26 insertions(+), 54 deletions(-) diff --git a/src/components/BlurComponent/styles.scss b/src/components/BlurComponent/styles.scss index 14ceccf..e055656 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; @@ -24,86 +26,57 @@ &::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% - ); + backdrop-filter: blur(1px); + -webkit-backdrop-filter: blur(1px); + mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 12.5%, rgb(0, 0, 0) 25%, rgba(0, 0, 0, 0) 37.5%); } & > div:nth-of-type(1) { z-index: 2; 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-backdrop-filter: blur(1px); + mask: linear-gradient(to bottom, rgba(255, 255, 255, 0) 13%, rgb(0, 0, 0) 25%, rgb(0, 0, 0) 18%, rgba(0, 0, 0, 0) 50%); } & > div:nth-of-type(2) { z-index: 3; 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-backdrop-filter: blur(2px); + mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 25%, rgb(0, 0, 0) 37.5%, rgb(0, 0, 0) 50%, rgba(0, 0, 0, 0) 62.5%); + /* margin-top: 10px; */ } & > div:nth-of-type(3) { - z-index: 4; + z-index: -7; 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-backdrop-filter: blur(4px); + mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 37.5%, rgb(0, 0, 0) 50%, rgb(0, 0, 0) 62.5%, rgba(0, 0, 0, 0) 75%); + margin-top: 20px; } & > div:nth-of-type(4) { - z-index: 5; + z-index: -14; 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-backdrop-filter: blur(8px); + mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 50%, rgb(0, 0, 0) 62.5%, rgb(0, 0, 0) 75%, rgba(0, 0, 0, 0) 87.5%); + margin-top: 28px; } & > div:nth-of-type(5) { - z-index: 6; + z-index: -16; 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-backdrop-filter: blur(16px); + mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 62.5%, rgb(0, 0, 0) 75%, rgb(0, 0, 0) 87.5%, rgba(0, 0, 0, 0) 100%); + margin-top: 31px; } & > div:nth-of-type(6) { - z-index: 7; + z-index: -20; 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-backdrop-filter: blur(32px); + mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 75%, rgb(0, 0, 0) 87.5%, rgb(0, 0, 0) 100%); + margin-top: 33px; } &::after { 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%; } } From fb864abe8089331fa30733841d4f600734a0ef07 Mon Sep 17 00:00:00 2001 From: yury Date: Sat, 22 Jun 2024 05:01:43 +0300 Subject: [PATCH 2/5] feat: fix blur --- src/components/BlurComponent/styles.scss | 58 ++++++++++++------------ 1 file changed, 29 insertions(+), 29 deletions(-) diff --git a/src/components/BlurComponent/styles.scss b/src/components/BlurComponent/styles.scss index e055656..8c6eb0b 100644 --- a/src/components/BlurComponent/styles.scss +++ b/src/components/BlurComponent/styles.scss @@ -26,68 +26,68 @@ &::before { content: ""; z-index: 1; - backdrop-filter: blur(1px); - -webkit-backdrop-filter: blur(1px); - mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 12.5%, rgb(0, 0, 0) 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; - backdrop-filter: blur(1px); -webkit-backdrop-filter: blur(1px); - mask: linear-gradient(to bottom, rgba(255, 255, 255, 0) 13%, rgb(0, 0, 0) 25%, rgb(0, 0, 0) 18%, rgba(0, 0, 0, 0) 50%); + backdrop-filter: blur(1px); + -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; - backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); - mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 25%, rgb(0, 0, 0) 37.5%, rgb(0, 0, 0) 50%, rgba(0, 0, 0, 0) 62.5%); - /* margin-top: 10px; */ + backdrop-filter: blur(2px); + -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: -7; - backdrop-filter: blur(4px); + z-index: 4; -webkit-backdrop-filter: blur(4px); - mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 37.5%, rgb(0, 0, 0) 50%, rgb(0, 0, 0) 62.5%, rgba(0, 0, 0, 0) 75%); - margin-top: 20px; + backdrop-filter: blur(4px); + -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: -14; - backdrop-filter: blur(8px); + z-index: 5; -webkit-backdrop-filter: blur(8px); - mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 50%, rgb(0, 0, 0) 62.5%, rgb(0, 0, 0) 75%, rgba(0, 0, 0, 0) 87.5%); - margin-top: 28px; + backdrop-filter: blur(8px); + -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: -16; - backdrop-filter: blur(16px); + z-index: 6; -webkit-backdrop-filter: blur(16px); - mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 62.5%, rgb(0, 0, 0) 75%, rgb(0, 0, 0) 87.5%, rgba(0, 0, 0, 0) 100%); - margin-top: 31px; + backdrop-filter: blur(16px); + -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: -20; - backdrop-filter: blur(32px); + z-index: 7; -webkit-backdrop-filter: blur(32px); - mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 75%, rgb(0, 0, 0) 87.5%, rgb(0, 0, 0) 100%); - margin-top: 33px; + backdrop-filter: blur(32px); + -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 From 175f75f0684e0f6b388b4155072165e5b9a913f2 Mon Sep 17 00:00:00 2001 From: yury Date: Sat, 22 Jun 2024 05:06:32 +0300 Subject: [PATCH 3/5] feat: fix blur --- src/components/BlurComponent/styles.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/BlurComponent/styles.scss b/src/components/BlurComponent/styles.scss index 8c6eb0b..68c8205 100644 --- a/src/components/BlurComponent/styles.scss +++ b/src/components/BlurComponent/styles.scss @@ -12,7 +12,7 @@ left: -100px; right: -100px; bottom: -16px; - top: -24px; + top: -48px; height: auto; pointer-events: none; From 53ea9ae8e07c786b2c925cd502b2fbe41a0c46c7 Mon Sep 17 00:00:00 2001 From: yury Date: Sat, 22 Jun 2024 10:58:33 +0300 Subject: [PATCH 4/5] feat: add blur only one page --- .../Questionnaire/CustomAnswers/MultipleAnswers/index.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) 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 && ( From 386798682a2e3f3a00d2b9fd6208a7d8d9f18129 Mon Sep 17 00:00:00 2001 From: yury Date: Sat, 22 Jun 2024 11:15:46 +0300 Subject: [PATCH 5/5] feat: fix button width --- .../pages/ABDesign/v1/ui/GreenButton/styles.module.css | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/pages/ABDesign/v1/ui/GreenButton/styles.module.css b/src/components/pages/ABDesign/v1/ui/GreenButton/styles.module.css index 36126c0..a589618 100644 --- a/src/components/pages/ABDesign/v1/ui/GreenButton/styles.module.css +++ b/src/components/pages/ABDesign/v1/ui/GreenButton/styles.module.css @@ -5,7 +5,6 @@ width: 100%; background: linear-gradient(90deg, #3a716d31 9%, #3c3c3c31 72%, #21888931 96%), linear-gradient(90deg, #05d4b6 23%, #22908e 74%, #0cc3ac 94%); - max-width: 330px; border-radius: 8px; font-size: 29px; line-height: 125%;