gofnnp/w-aura
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix blur button

Browse Source
This commit is contained in:
gofnnp 2024-06-24 22:19:22 +04:00
parent a454c95611
commit c7a4e545d0
3 changed files with 25 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

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

21
src/components/pages/ABDesign/v1/ui/GreenButton/index.tsx
View File

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