fix blur button

src/components/pages/ABDesign/v1/components/Questionnaire/CustomAnswers/MultipleAnswers/index.tsx

@@ -3,10 +3,11 @@ import styles from "./styles.module.scss";
 import { useTranslation } from "react-i18next";
 import { useDispatch, useSelector } from "react-redux";
 import { actions, selectors } from "@/store";
-import {useNavigate, useLocation} 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";
+import BlurComponent from "@/components/BlurComponent";
 
 interface IMultiplyAnswersProps {
   answers: IAnswer[];
@@ -55,7 +56,6 @@ function MultiplyAnswers({ answers }: IMultiplyAnswersProps) {
     );
   };
 
-
   return (
     <>
       <div className={styles["multiply-answers"]}>
@@ -80,13 +80,18 @@ function MultiplyAnswers({ answers }: IMultiplyAnswersProps) {
         ))}
       </div>
       {!!currentlyAffecting.length && (
-        <QuestionnaireGreenButton
-          isActiveBlur={location.pathname.includes('v1/questionnaire/relationships/currentlyAffecting/')}
+        <BlurComponent
           className={styles.button}
-          onClick={handleNext}
+          isActiveBlur={location.pathname.includes(
+            "v1/questionnaire/relationships/currentlyAffecting"
+          )}
         >
-          {t("next")}
-        </QuestionnaireGreenButton>
+          <QuestionnaireGreenButton
+            onClick={handleNext}
+          >
+            {t("next")}
+          </QuestionnaireGreenButton>
+        </BlurComponent>
       )}
     </>
   );

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

@@ -8,12 +8,11 @@
   width: 100%;
 }
 
-
 .button {
-  position: fixed;
-  height: unset;
+  position: fixed !important;
+  height: unset !important;
   bottom: calc(0dvh + 16px);
-  width: calc(100% - 64px);
+  width: calc(100% - 64px) !important;
   max-width: 396px;
   margin-top: 8px;
 
@@ -23,7 +22,7 @@
 }
 
 .answer-active {
-  animation: pulse .7s ease-in-out;
+  animation: pulse 0.7s ease-in-out;
 }
 
 @keyframes pulse {
@@ -36,4 +35,4 @@
   100% {
     transform: scale(1);
   }
-}
+}

src/components/pages/ABDesign/v1/ui/GreenButton/index.tsx

@@ -1,24 +1,19 @@
-import MainButton, {ButtonProps} from "@/components/MainButton";
+import MainButton, { ButtonProps } from "@/components/MainButton";
 import styles from "./styles.module.css";
-import BlurComponent from "@/components/BlurComponent";
 
 interface IQuestionnaireGreenButtonProps extends ButtonProps {
   className?: string;
-  isActiveBlur?: boolean
 }
 
 function QuestionnaireGreenButton({
-                                    className = "",
-                                    isActiveBlur,
-                                    ...props
-                                  }: IQuestionnaireGreenButtonProps) {
+  className = "",
+  ...props
+}: IQuestionnaireGreenButtonProps) {
   return (
-    <BlurComponent className={className} isActiveBlur={isActiveBlur}>
-      <MainButton
-        className={`${styles.button}`}
-        {...props}
-      ></MainButton>
-    </BlurComponent>
+    <MainButton
+      className={`${styles.button} ${className}`}
+      {...props}
+    ></MainButton>
   );
 }