diff --git a/src/pages/Result/DescriptionForm/DescriptionForm.tsx b/src/pages/Result/DescriptionForm/DescriptionForm.tsx index a0c84f05..3ff90205 100644 --- a/src/pages/Result/DescriptionForm/DescriptionForm.tsx +++ b/src/pages/Result/DescriptionForm/DescriptionForm.tsx @@ -31,7 +31,7 @@ export const DescriptionForm = () => { return ( { - + @@ -85,7 +88,10 @@ export const DescriptionForm = () => { {priceButtonsType === "smooth" ? ( - + Призыв к действию @@ -127,8 +133,13 @@ export const DescriptionForm = () => { {forwarding ? ( - - + + Переадресация diff --git a/src/pages/Result/DescriptionForm/DiscountButtons.tsx b/src/pages/Result/DescriptionForm/DiscountButtons.tsx index 149e1cac..07213f59 100644 --- a/src/pages/Result/DescriptionForm/DiscountButtons.tsx +++ b/src/pages/Result/DescriptionForm/DiscountButtons.tsx @@ -14,7 +14,10 @@ export default function DiscountButtons() { - + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + - - - + diff --git a/src/pages/Result/SettingForm.tsx b/src/pages/Result/SettingForm.tsx index 1242b1ff..af49f3c5 100644 --- a/src/pages/Result/SettingForm.tsx +++ b/src/pages/Result/SettingForm.tsx @@ -1,5 +1,14 @@ import { useState } from "react"; -import { Box, Button, IconButton, SxProps, Theme, Typography } from "@mui/material"; +import { + Box, + Button, + IconButton, + SxProps, + Theme, + Typography, + useTheme, + useMediaQuery, +} from "@mui/material"; import { SwitchSetting } from "./SwichResult"; import Info from "@icons/Info"; @@ -10,17 +19,35 @@ import ArrowCounterClockWise from "@icons/ArrowCounterClockWise.svg"; const buttonSetting: { title: string; sx: SxProps; type: string }[] = [ { - sx: { backgroundColor: "#7E2AEA", color: "white", width: "237px", height: "44px", border: "1px solid #9A9AAF" }, + sx: { + backgroundColor: "#7E2AEA", + color: "white", + width: "237px", + height: "44px", + border: "1px solid #9A9AAF", + }, title: "До формы контактов", type: "toContactForm", }, { - sx: { backgroundColor: "#F2F3F7", color: "#9A9AAF", width: "266px", height: "44px", border: "1px solid #9A9AAF" }, + sx: { + backgroundColor: "#F2F3F7", + color: "#9A9AAF", + width: "266px", + height: "44px", + border: "1px solid #9A9AAF", + }, title: "После формы контактов", type: "afterСontactForm", }, { - sx: { color: "#9A9AAF", backgroundColor: "#F2F3F7", width: "233px", height: "44px", border: "1px solid #9A9AAF" }, + sx: { + color: "#9A9AAF", + backgroundColor: "#F2F3F7", + width: "233px", + height: "44px", + border: "1px solid #9A9AAF", + }, title: "Отправить на E-mail", type: "e-mail", }, @@ -29,6 +56,8 @@ const buttonSetting: { title: string; sx: SxProps; type: string }[] = [ export const SettingForm = () => { const [activeIndex, setActiveIndex] = useState(0); const [typeActive, setTypeActive] = useState("toContactForm"); + const theme = useTheme(); + const isSmallMonitor = useMediaQuery(theme.breakpoints.down(1100)); const active = (index: number, type: string) => { setActiveIndex(index); @@ -36,7 +65,7 @@ export const SettingForm = () => { }; return ( - + Настройки результатов @@ -63,7 +92,13 @@ export const SettingForm = () => { Показывать результат - + { - + {buttonSetting.map(({ sx, title, type }, index) => (