Merge branch 'feature/blur-component' into 'develop'

Feature/blur component

See merge request witapp/aura-webapp!191

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);
+      -webkit-backdrop-filter: blur(0.5px);
-      mask: linear-gradient(
+      backdrop-filter: blur(0.5px);
-                      to bottom,
+      -webkit-mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, black 12.5%, black 25%, rgba(0, 0, 0, 0) 37.5%);
-                      rgba(0, 0, 0, 0) 0%,
+      mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, black 12.5%, black 25%, rgba(0, 0, 0, 0) 37.5%);
-                      rgba(0, 0, 0, 1) 12.5%,
-                      rgba(0, 0, 0, 1) 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(
+      -webkit-mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 12.5%, black 25%, black 37.5%, rgba(0, 0, 0, 0) 50%);
-                      to bottom,
+      mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 12.5%, black 25%, black 37.5%, rgba(0, 0, 0, 0) 50%);
-                      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%
-      );
     }
 
     & > div:nth-of-type(2) {
       z-index: 3;
+      -webkit-backdrop-filter: blur(2px);
       backdrop-filter: blur(2px);
-      mask: linear-gradient(
+      -webkit-mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 25%, black 37.5%, black 50%, rgba(0, 0, 0, 0) 62.5%);
-                      to bottom,
+      mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 25%, black 37.5%, black 50%, rgba(0, 0, 0, 0) 62.5%);
-                      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%
-      );
     }
 
     & > div:nth-of-type(3) {
       z-index: 4;
+      -webkit-backdrop-filter: blur(4px);
       backdrop-filter: blur(4px);
-      mask: linear-gradient(
+      -webkit-mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 37.5%, black 50%, black 62.5%, rgba(0, 0, 0, 0) 75%);
-                      to bottom,
+      mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 37.5%, black 50%, black 62.5%, rgba(0, 0, 0, 0) 75%);
-                      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%
-      );
     }
 
     & > div:nth-of-type(4) {
       z-index: 5;
+      -webkit-backdrop-filter: blur(8px);
       backdrop-filter: blur(8px);
-      mask: linear-gradient(
+      -webkit-mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 50%, black 62.5%, black 75%, rgba(0, 0, 0, 0) 87.5%);
-                      to bottom,
+      mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 50%, black 62.5%, black 75%, rgba(0, 0, 0, 0) 87.5%);
-                      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%
-      );
     }
 
     & > div:nth-of-type(5) {
       z-index: 6;
+      -webkit-backdrop-filter: blur(16px);
       backdrop-filter: blur(16px);
-      mask: linear-gradient(
+      -webkit-mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 62.5%, black 75%, black 87.5%, rgba(0, 0, 0, 0) 100%);
-                      to bottom,
+      mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 62.5%, black 75%, black 87.5%, rgba(0, 0, 0, 0) 100%);
-                      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%
-      );
     }
 
     & > div:nth-of-type(6) {
       z-index: 7;
+      -webkit-backdrop-filter: blur(32px);
       backdrop-filter: blur(32px);
-      mask: linear-gradient(
+      -webkit-mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 75%, black 87.5%, black 100%);
-                      to bottom,
+      mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 75%, black 87.5%, black 100%);
-                      rgba(0, 0, 0, 0) 75%,
-                      rgba(0, 0, 0, 1) 87.5%,
-                      rgba(0, 0, 0, 1) 100%
-      );
     }
 
     &::after {
       content: "";
       z-index: 8;
+      -webkit-backdrop-filter: blur(64px);
       backdrop-filter: blur(64px);
-      mask: linear-gradient(
+      -webkit-mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 87.5%, black 100%);
-                      to bottom,
+      mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 87.5%, black 100%);
-                      rgba(0, 0, 0, 0) 87.5%,
-                      rgba(0, 0, 0, 1) 100%
-      );
     }
   }
 }

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 (
     <>
       <div className={styles["multiply-answers"]}>
@@ -79,7 +81,7 @@ function MultiplyAnswers({ answers }: IMultiplyAnswersProps) {
       </div>
       {!!currentlyAffecting.length && (
         <QuestionnaireGreenButton
-          isActiveBlur={true}
+          isActiveBlur={location.pathname.includes('v1/questionnaire/relationships/currentlyAffecting/')}
           className={styles.button}
           onClick={handleNext}
         >

src/components/pages/ABDesign/v1/components/Questionnaire/CustomAnswers/MultipleAnswers/styles.module.scss

@@ -19,7 +19,6 @@
 
   button {
     z-index: 10;
-    max-width: 100%;
   }
 }