diff --git a/src/pages/Result/DescriptionForm/ButtinsOptionsForm.tsx b/src/pages/Result/DescriptionForm/ButtinsOptionsForm.tsx
index 27c8366e..b332bafd 100644
--- a/src/pages/Result/DescriptionForm/ButtinsOptionsForm.tsx
+++ b/src/pages/Result/DescriptionForm/ButtinsOptionsForm.tsx
@@ -1,5 +1,5 @@
import React from "react";
-import { Box, IconButton, useTheme } from "@mui/material";
+import { Box, IconButton, useTheme, useMediaQuery } from "@mui/material";
import MiniButtonSetting from "@ui_kit/MiniButtonSetting";
import SettingIcon from "@icons/questionsPage/settingIcon";
import Branching from "@icons/questionsPage/branching";
@@ -15,20 +15,39 @@ interface Props {
export default function ButtonsOptionsForm({ SSHC, switchState }: Props) {
const theme = useTheme();
+ const isTablet = useMediaQuery(theme.breakpoints.down(800));
const buttonSetting: { icon: JSX.Element; title: string; value: string }[] = [
{
- icon: ,
+ icon: (
+
+ ),
title: "Настройки",
value: "setting",
},
{
- icon: ,
+ icon: (
+
+ ),
title: "Ветвление",
value: "branching",
},
{
- icon: ,
+ icon: (
+
+ ),
title: "Баллы",
value: "points",
},
@@ -47,6 +66,7 @@ export default function ButtonsOptionsForm({ SSHC, switchState }: Props) {
sx={{
padding: "20px",
display: "flex",
+ flexWrap: "wrap",
gap: "10px",
}}
>
@@ -57,18 +77,23 @@ export default function ButtonsOptionsForm({ SSHC, switchState }: Props) {
SSHC(value);
}}
sx={{
- backgroundColor: switchState === value ? theme.palette.brightPurple.main : "transparent",
- color: switchState === value ? "#ffffff" : theme.palette.grey3.main,
+ backgroundColor:
+ switchState === value
+ ? theme.palette.brightPurple.main
+ : "transparent",
+ color:
+ switchState === value ? "#ffffff" : theme.palette.grey3.main,
}}
>
{icon}
- {title}
+ {!isTablet && title}
))}
diff --git a/src/pages/Result/DescriptionForm/DescriptionForm.tsx b/src/pages/Result/DescriptionForm/DescriptionForm.tsx
index 3ff90205..788078f3 100644
--- a/src/pages/Result/DescriptionForm/DescriptionForm.tsx
+++ b/src/pages/Result/DescriptionForm/DescriptionForm.tsx
@@ -31,10 +31,12 @@ export const DescriptionForm = () => {
return (
diff --git a/src/pages/Result/DescriptionForm/ImageAndVideoButtons.tsx b/src/pages/Result/DescriptionForm/ImageAndVideoButtons.tsx
index da289224..e66b8207 100644
--- a/src/pages/Result/DescriptionForm/ImageAndVideoButtons.tsx
+++ b/src/pages/Result/DescriptionForm/ImageAndVideoButtons.tsx
@@ -1,4 +1,4 @@
-import { Box, Typography, useTheme } from "@mui/material";
+import { Box, Typography, useTheme, useMediaQuery } from "@mui/material";
import AddImage from "@icons/questionsPage/addImage";
import AddVideofile from "@icons/questionsPage/addVideofile";
@@ -7,11 +7,20 @@ import { CropModal } from "@ui_kit/Modal/CropModal";
export default function ImageAndVideoButtons() {
const theme = useTheme();
+ const isMobile = useMediaQuery(theme.breakpoints.down(400));
const [opened, setOpened] = useState(false);
return (
-
+
setOpened(true)} />
setOpened(false)} />
- Изображение
+ {!isMobile && "Изображение"}
или
@@ -34,7 +43,7 @@ export default function ImageAndVideoButtons() {
color: theme.palette.grey2.main,
}}
>
- Видео
+ {!isMobile && "Видео"}
);