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() {
-
+
-
+
{priceButtonsArray.map(({ title, type, sx }, index) => (
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - -
-
-
+
+
+
-
-
-
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) => (
{
...sx,
bgcolor: activeIndex === index ? " #7E2AEA" : "#F2F3F7",
color: activeIndex === index ? " white" : "#9A9AAF",
+ minWidth: isSmallMonitor ? "300px" : "auto",
}}
>
{title}
@@ -92,16 +136,27 @@ export const SettingForm = () => {
))}
{typeActive === "e-mail" ? (
-
+
) : (
<>
-
+
-
+
>
)}
-
+
Создайте результат
diff --git a/src/ui_kit/CustomWrapper.tsx b/src/ui_kit/CustomWrapper.tsx
index 0efbbe66..b8624d25 100644
--- a/src/ui_kit/CustomWrapper.tsx
+++ b/src/ui_kit/CustomWrapper.tsx
@@ -22,7 +22,7 @@ export default function CustomWrapper({ text, sx, result }: Props) {
return (