all card Mobile version

src/pages/Questions/PageOptions/PageOptions.tsx

@@ -52,13 +52,14 @@ export default function PageOptions({ disableInput, totalIndex }: Props) {
           gap: isMobile ? "25px" : "20px",
         }}
       >
-        <Box sx={{ display: disableInput ? "none" : "" }}>
+        <Box sx={{ display: disableInput ? "none" : "", mt: isMobile ? "15px" : "0px" }}>
           <CustomTextField
             placeholder={"Можно добавить текст"}
             text={listQuestions[quizId][totalIndex].content.text}
             onChange={({ target }) => debounced(target.value)}
           />
         </Box>
+
         <Box
           sx={{
             mb: "20px",
@@ -79,7 +80,50 @@ export default function PageOptions({ disableInput, totalIndex }: Props) {
             }}
           >
             {isMobile ? (
-              <AddPlusImage />
+              <Box
+                sx={{
+                  display: "flex",
+                  alignItems: "center",
+                  width: "120px",
+                  position: "relative",
+                }}
+              >
+                <Box
+                  sx={{
+                    width: "100%",
+                    background: "#EEE4FC",
+                    height: "40px",
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    borderTopLeftRadius: "4px",
+                    borderBottomLeftRadius: "4px",
+                  }}
+                >
+                  <ImageAddIcons
+                    style={{
+                      color: "#7E2AEA",
+                      fontSize: "20px",
+                    }}
+                  />
+                </Box>
+                <Box
+                  sx={{
+                    display: "flex",
+                    justifyContent: "center",
+                    alignItems: "center",
+                    width: "20px",
+                    background: "#EEE4FC",
+                    height: "40px",
+                    color: "white",
+                    backgroundColor: "#7E2AEA",
+                    borderTopRightRadius: "4px",
+                    borderBottomRightRadius: "4px",
+                  }}
+                >
+                  +
+                </Box>
+              </Box>
             ) : (
               <Box
                 sx={{
@@ -146,7 +190,50 @@ export default function PageOptions({ disableInput, totalIndex }: Props) {
             }}
           >
             {isMobile ? (
-              <AddPlusVideo />
+              <Box
+                sx={{
+                  display: "flex",
+                  alignItems: "center",
+                  width: "120px",
+                  position: "relative",
+                }}
+              >
+                <Box
+                  sx={{
+                    width: "100%",
+                    background: "#EEE4FC",
+                    height: "40px",
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    borderTopLeftRadius: "4px",
+                    borderBottomLeftRadius: "4px",
+                  }}
+                >
+                  <VideofileIcon
+                    style={{
+                      color: "#7E2AEA",
+                      fontSize: "20px",
+                    }}
+                  />
+                </Box>
+                <Box
+                  sx={{
+                    display: "flex",
+                    justifyContent: "center",
+                    alignItems: "center",
+                    width: "20px",
+                    background: "#EEE4FC",
+                    height: "40px",
+                    color: "white",
+                    backgroundColor: "#7E2AEA",
+                    borderTopRightRadius: "4px",
+                    borderBottomRightRadius: "4px",
+                  }}
+                >
+                  +
+                </Box>
+              </Box>
             ) : (
               <Box
                 sx={{

src/pages/Questions/PageOptions/SettingPageOptions.tsx

@@ -1,11 +1,5 @@
 import { useParams } from "react-router-dom";
-import {
+import { Box, Typography, Tooltip, useMediaQuery, useTheme } from "@mui/material";
-  Box,
-  Typography,
-  Tooltip,
-  useMediaQuery,
-  useTheme,
-} from "@mui/material";
 import CustomCheckbox from "@ui_kit/CustomCheckbox";
 import CustomTextField from "@ui_kit/CustomTextField";
 import { useDebouncedCallback } from "use-debounce";
@@ -37,18 +31,19 @@ export default function SettingPageOptions({ totalIndex }: SettingPageOptionsPro
         pt: isMobile ? "25px" : "20px",
         pb: isMobile ? "25px" : "20px",
         pl: "20px",
+        pr: "20px",
         display: "flex",
         flexDirection: "column",
         gap: "14px",
-        width: "100%",
+        width: isMobile ? "auto" : "100%",
       }}
     >
       <Typography sx={{ height: isMobile ? "18px" : "auto", fontWeight: "500", fontSize: "18px", color: " #4D4D4D" }}>
         Настройки вопроса
       </Typography>
-      <Box sx={{ width: isMobile ? "90%" : "auto", display: "flex", alignItems: "center" }}>
+      <Box sx={{ display: "flex", alignItems: "flex-start" }}>
         <CustomCheckbox
-          sx={{ mr: isMobile ? "0px" : "16px" }}
+          sx={{ mr: isMobile ? "0px" : "16px", height: isMobile ? "100%" : "26px" }}
           label={"Внутреннее название вопроса"}
           checked={listQuestions[quizId][totalIndex].content.innerNameCheck}
           handleChange={({ target }) =>

src/pages/Questions/UploadFile/UploadFile.tsx

@@ -70,7 +70,7 @@ export default function UploadFile({ totalIndex }: Props) {
           flexDirection: "column",
         }}
       >
-        <Box sx={{ gap: "10px", display: "flex" }}>
+        <Box sx={{ gap: "10px", display: "flex", mt: isMobile ? "15px" : "0px" }}>
           <FormControl
             fullWidth
             size="small"
@@ -151,9 +151,9 @@ export default function UploadFile({ totalIndex }: Props) {
         <Box
           sx={{
             display: "flex",
-            alignItems: "center",
+            alignItems: "flex-start",
             marginBottom: "20px",
-            marginTop: isMobile ? "18px" : "15px",
+            marginTop: "15px",
           }}
         >
           <Typography

src/pages/Questions/UploadFile/settingUpload.tsx

@@ -26,20 +26,21 @@ export default function SettingsUpload({ totalIndex }: SettingsUploadProps) {
   return (
     <Box
       sx={{
-        pt: isMobile ? "25px" : "20px",
+        pt: isMobile ? "30px" : "20px",
-        pb: isMobile ? "25px" : "20px",
+        pb: "20px",
         pl: "20px",
+        pr: isMobile ? "20px" : "0px",
         display: "flex",
         flexDirection: "column",
         gap: "14px",
-        width: "100%",
+        width: isMobile ? "auto" : "100%",
       }}
     >
       <Typography sx={{ height: isMobile ? "18px" : "auto", fontWeight: "500", fontSize: "18px", color: " #4D4D4D" }}>
         Настройки вопроса
       </Typography>
       <CustomCheckbox
-        sx={{ display: "block", mr: isMobile ? "0px" : "16px" }}
+        sx={{ display: isMobile ? "flex" : "block", mr: isMobile ? "0px" : "16px" }}
         label={"Автозаполнение адреса"}
         checked={listQuestions[quizId][totalIndex].content.autofill}
         handleChange={({ target }) => {
@@ -49,7 +50,7 @@ export default function SettingsUpload({ totalIndex }: SettingsUploadProps) {
         }}
       />
       <CustomCheckbox
-        sx={{ display: "block", mr: isMobile ? "0px" : "16px" }}
+        sx={{ display: isMobile ? "flex" : "block", mr: isMobile ? "0px" : "16px" }}
         label={"Необязательный вопрос"}
         checked={!listQuestions[quizId][totalIndex].required}
         handleChange={(e) => {
@@ -58,9 +59,9 @@ export default function SettingsUpload({ totalIndex }: SettingsUploadProps) {
           });
         }}
       />
-      <Box sx={{ width: isMobile ? "90%" : "auto", display: "flex", alignItems: "center" }}>
+      <Box sx={{ display: isMobile ? "flex" : "block", alignItems: "flex-start" }}>
         <CustomCheckbox
-          sx={{ mr: isMobile ? "0px" : "16px" }}
+          sx={{ mr: isMobile ? "0px" : "16px", height: isMobile ? "100%" : "26px", alignItems: "flex-start" }}
           label={"Внутреннее название вопроса"}
           checked={listQuestions[quizId][totalIndex].content.innerNameCheck}
           handleChange={(e) => {