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 && "Видео"} );