From a2ccd7ae5076a26c5c37ad8c678ca0f1b8e707c6 Mon Sep 17 00:00:00 2001
From: Tamara <tamara.zelenko555@yandex.ru>
Date: Sat, 16 Dec 2023 03:31:40 +0300
Subject: [PATCH] =?UTF-8?q?=D0=BF=D1=80=D0=B0=D0=B2=D0=BA=D0=B8=20=D0=BF?=
 =?UTF-8?q?=D0=BE=20=D0=BC=D0=BE=D0=B1=D0=B8=D0=BB=D0=BA=D0=B5=20=D0=B2=20?=
 =?UTF-8?q?=D1=81=D1=82=D0=B0=D1=80=D1=82=D0=BE=D0=B2=D0=BE=D0=B9=20=D1=81?=
 =?UTF-8?q?=D1=82=D1=80=D0=B0=D0=BD=D0=B8=D1=86=D0=B5=20=D0=B8=20=D0=B2?=
 =?UTF-8?q?=D0=BE=D0=BF=D1=80=D0=BE=D1=81=D0=B0=D1=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/icons/ArrowLeftSP.tsx              |  27 ++
 src/pages/Questions/ButtonsOptionsAndPict.tsx |   1 +
 .../OptionsAndPicture/OptionsAndPicture.tsx   | 348 +++++++++---------
 src/pages/Questions/QuestionsPage.tsx         |   4 +-
 src/pages/startPage/EditPage.tsx              |  26 +-
 src/pages/startPage/StartPageSettings.tsx     |   9 +-
 6 files changed, 224 insertions(+), 191 deletions(-)
 create mode 100644 src/assets/icons/ArrowLeftSP.tsx

diff --git a/src/assets/icons/ArrowLeftSP.tsx b/src/assets/icons/ArrowLeftSP.tsx
new file mode 100644
index 00000000..1ba692e1
--- /dev/null
+++ b/src/assets/icons/ArrowLeftSP.tsx
@@ -0,0 +1,27 @@
+import {Box, SxProps, Theme, useTheme} from "@mui/material";
+
+
+interface Props {
+    right: boolean
+}
+
+export default function ArrowLeftSP({right} : Props) {
+    const theme = useTheme();
+
+    return (
+        <Box
+            sx={{
+                height: "14px",
+                width: "19px",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                transform: right ? "rotate(180deg)" : undefined
+            }}
+        >
+            <svg width="13" height="11" viewBox="0 0 13 11" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M8.12 10.808H5.24L0.855999 5.88L5.24 0.952H8.12L4.648 4.936H12.184V6.824H4.648L8.12 10.808Z" fill={theme.palette.brightPurple.main}/>
+            </svg>
+        </Box>
+    );
+}
\ No newline at end of file
diff --git a/src/pages/Questions/ButtonsOptionsAndPict.tsx b/src/pages/Questions/ButtonsOptionsAndPict.tsx
index 972e99cd..b1b8f1d6 100644
--- a/src/pages/Questions/ButtonsOptionsAndPict.tsx
+++ b/src/pages/Questions/ButtonsOptionsAndPict.tsx
@@ -73,6 +73,7 @@ export default function ButtonsOptionsAndPict({
                     display: "flex",
                     flexWrap: isMobile ? "wrap" : "nowrap",
                     gap: "6px",
+                    maxWidth: isMobile ? "200px" : undefined
                 }}
             >
                 <MiniButtonSetting
diff --git a/src/pages/Questions/OptionsAndPicture/OptionsAndPicture.tsx b/src/pages/Questions/OptionsAndPicture/OptionsAndPicture.tsx
index c203f580..ab440cb9 100644
--- a/src/pages/Questions/OptionsAndPicture/OptionsAndPicture.tsx
+++ b/src/pages/Questions/OptionsAndPicture/OptionsAndPicture.tsx
@@ -151,181 +151,181 @@ export default function OptionsAndPicture({ question }: Props) {
                     onClose={closeCropModal}
                     onSaveImageClick={handleCropModalSaveClick}
                 />
-                <Box
-                    sx={{
-                        width: "100%",
-                        border: "1px solid #9A9AAF",
-                        borderRadius: "8px",
-                        display: isTablet ? "block" : "none",
-                    }}
-                >
-                    <TextField
-                        fullWidth
-                        focused={false}
-                        placeholder={"Добавьте ответ"}
-                        multiline={question.content.largeCheck}
-                        InputProps={{
-                            startAdornment: (
-                                <>
-                                    <InputAdornment position="start">
-                                        <PointsIcon
-                                            style={{ color: "#9A9AAF", fontSize: "30px" }}
-                                        />
-                                    </InputAdornment>
-                                    {!isMobile && (
-                                        <Box
-                                            sx={{
-                                                width: "60px",
-                                                height: "40px",
-                                                background: "#EEE4FC",
-                                                display: "flex",
-                                                justifyContent: "space-between",
-                                                marginRight: "20px",
-                                                marginLeft: "12px",
-                                            }}
-                                        >
-                                            <Box
-                                                sx={{
-                                                    display: "flex",
-                                                    alignItems: "center",
-                                                    justifyContent: "center",
-                                                    width: "100%",
-                                                }}
-                                            >
-                                                <ImageAddIcons fontSize="22px" color="#7E2AEA" />
-                                            </Box>
-                                            <span
-                                                style={{
-                                                    display: "flex",
-                                                    alignItems: "center",
-                                                    justifyContent: "center",
-                                                    background: "#7E2AEA",
-                                                    height: "100%",
-                                                    width: "25px",
-                                                    color: "white",
-                                                    fontSize: "15px",
-                                                }}
-                                            >
-                                                +
-                                            </span>
-                                        </Box>
-                                    )}
-                                </>
-                            ),
-                            endAdornment: (
-                                <InputAdornment position="end">
-                                    <IconButton
-                                        sx={{ padding: "0" }}
-                                        aria-describedby="my-popover-id"
-                                    >
-                                        <MessageIcon
-                                            style={{
-                                                color: "#9A9AAF",
-                                                fontSize: "30px",
-                                                marginRight: "6.5px",
-                                            }}
-                                        />
-                                    </IconButton>
-                                    <Popover
-                                        id="my-popover-id"
-                                        anchorOrigin={{ vertical: "bottom", horizontal: "left" }}
-                                        open={false}
-                                    >
-                                        <TextareaAutosize
-                                            style={{ margin: "10px" }}
-                                            placeholder="Подсказка для этого ответа"
-                                        />
-                                    </Popover>
-                                    <IconButton sx={{ padding: "0" }}>
-                                        <DeleteIcon
-                                            style={{
-                                                color: theme.palette.grey2.main,
-                                                marginRight: "-1px",
-                                            }}
-                                        />
-                                    </IconButton>
-                                </InputAdornment>
-                            ),
-                        }}
-                        sx={{
-                            "& .MuiInputBase-root": {
-                                padding: "13.5px",
-                                borderRadius: "10px",
-                                background: "#ffffff",
-                                height: "48px",
-                            },
-                            "& .MuiOutlinedInput-notchedOutline": {
-                                border: "none",
-                            },
-                        }}
-                        inputProps={{
-                            sx: { fontSize: "18px", lineHeight: "21px", py: 0 },
-                        }}
-                    />
+                {/*<Box*/}
+                {/*    sx={{*/}
+                {/*        width: "100%",*/}
+                {/*        border: "1px solid #9A9AAF",*/}
+                {/*        borderRadius: "8px",*/}
+                {/*        display: isTablet ? "block" : "none",*/}
+                {/*    }}*/}
+                {/*>*/}
+                {/*    <TextField*/}
+                {/*        fullWidth*/}
+                {/*        focused={false}*/}
+                {/*        placeholder={"Добавьте ответ"}*/}
+                {/*        multiline={question.content.largeCheck}*/}
+                {/*        InputProps={{*/}
+                {/*            startAdornment: (*/}
+                {/*                <>*/}
+                {/*                    <InputAdornment position="start">*/}
+                {/*                        <PointsIcon*/}
+                {/*                            style={{ color: "#9A9AAF", fontSize: "30px" }}*/}
+                {/*                        />*/}
+                {/*                    </InputAdornment>*/}
+                {/*                    {!isMobile && (*/}
+                {/*                        <Box*/}
+                {/*                            sx={{*/}
+                {/*                                width: "60px",*/}
+                {/*                                height: "40px",*/}
+                {/*                                background: "#EEE4FC",*/}
+                {/*                                display: "flex",*/}
+                {/*                                justifyContent: "space-between",*/}
+                {/*                                marginRight: "20px",*/}
+                {/*                                marginLeft: "12px",*/}
+                {/*                            }}*/}
+                {/*                        >*/}
+                {/*                            <Box*/}
+                {/*                                sx={{*/}
+                {/*                                    display: "flex",*/}
+                {/*                                    alignItems: "center",*/}
+                {/*                                    justifyContent: "center",*/}
+                {/*                                    width: "100%",*/}
+                {/*                                }}*/}
+                {/*                            >*/}
+                {/*                                <ImageAddIcons fontSize="22px" color="#7E2AEA" />*/}
+                {/*                            </Box>*/}
+                {/*                            <span*/}
+                {/*                                style={{*/}
+                {/*                                    display: "flex",*/}
+                {/*                                    alignItems: "center",*/}
+                {/*                                    justifyContent: "center",*/}
+                {/*                                    background: "#7E2AEA",*/}
+                {/*                                    height: "100%",*/}
+                {/*                                    width: "25px",*/}
+                {/*                                    color: "white",*/}
+                {/*                                    fontSize: "15px",*/}
+                {/*                                }}*/}
+                {/*                            >*/}
+                {/*                                +*/}
+                {/*                            </span>*/}
+                {/*                        </Box>*/}
+                {/*                    )}*/}
+                {/*                </>*/}
+                {/*            ),*/}
+                {/*            endAdornment: (*/}
+                {/*                <InputAdornment position="end">*/}
+                {/*                    <IconButton*/}
+                {/*                        sx={{ padding: "0" }}*/}
+                {/*                        aria-describedby="my-popover-id"*/}
+                {/*                    >*/}
+                {/*                        <MessageIcon*/}
+                {/*                            style={{*/}
+                {/*                                color: "#9A9AAF",*/}
+                {/*                                fontSize: "30px",*/}
+                {/*                                marginRight: "6.5px",*/}
+                {/*                            }}*/}
+                {/*                        />*/}
+                {/*                    </IconButton>*/}
+                {/*                    <Popover*/}
+                {/*                        id="my-popover-id"*/}
+                {/*                        anchorOrigin={{ vertical: "bottom", horizontal: "left" }}*/}
+                {/*                        open={false}*/}
+                {/*                    >*/}
+                {/*                        <TextareaAutosize*/}
+                {/*                            style={{ margin: "10px" }}*/}
+                {/*                            placeholder="Подсказка для этого ответа"*/}
+                {/*                        />*/}
+                {/*                    </Popover>*/}
+                {/*                    <IconButton sx={{ padding: "0" }}>*/}
+                {/*                        <DeleteIcon*/}
+                {/*                            style={{*/}
+                {/*                                color: theme.palette.grey2.main,*/}
+                {/*                                marginRight: "-1px",*/}
+                {/*                            }}*/}
+                {/*                        />*/}
+                {/*                    </IconButton>*/}
+                {/*                </InputAdornment>*/}
+                {/*            ),*/}
+                {/*        }}*/}
+                {/*        sx={{*/}
+                {/*            "& .MuiInputBase-root": {*/}
+                {/*                padding: "13.5px",*/}
+                {/*                borderRadius: "10px",*/}
+                {/*                background: "#ffffff",*/}
+                {/*                height: "48px",*/}
+                {/*            },*/}
+                {/*            "& .MuiOutlinedInput-notchedOutline": {*/}
+                {/*                border: "none",*/}
+                {/*            },*/}
+                {/*        }}*/}
+                {/*        inputProps={{*/}
+                {/*            sx: { fontSize: "18px", lineHeight: "21px", py: 0 },*/}
+                {/*        }}*/}
+                {/*    />*/}
 
-                    {isMobile && (
-                        <Box
-                            sx={{
-                                display: "flex",
-                                alignItems: "center",
-                                m: "8px",
-                                position: "relative",
-                            }}
-                        >
-                            <Box
-                                sx={{ width: "100%", background: "#EEE4FC", height: "40px" }}
-                            />
-                            <ImageAddIcons
-                                style={{
-                                    position: "absolute",
-                                    color: "#7E2AEA",
-                                    fontSize: "20px",
-                                    left: "45%",
-                                    right: "55%",
-                                }}
-                            />
-                            <Box
-                                sx={{
-                                    display: "flex",
-                                    justifyContent: "center",
-                                    alignItems: "center",
-                                    width: "20px",
-                                    background: "#EEE4FC",
-                                    height: "40px",
-                                    color: "white",
-                                    backgroundColor: "#7E2AEA",
-                                }}
-                            >
-                                <Box
-                                    sx={{ width: "100%", background: "#EEE4FC", height: "40px" }}
-                                />
-                                <ImageAddIcons
-                                    style={{
-                                        position: "absolute",
-                                        color: "#7E2AEA",
-                                        fontSize: "20px",
-                                        left: "45%",
-                                        right: "55%",
-                                    }}
-                                />
-                                <Box
-                                    sx={{
-                                        display: "flex",
-                                        justifyContent: "center",
-                                        alignItems: "center",
-                                        width: "20px",
-                                        background: "#EEE4FC",
-                                        height: "40px",
-                                        color: "white",
-                                        backgroundColor: "#7E2AEA",
-                                    }}
-                                >
-                                    +
-                                </Box>
-                            </Box>
-                        </Box>
-                    )}
-                </Box>
+                    {/*{isMobile && (*/}
+                    {/*    <Box*/}
+                    {/*        sx={{*/}
+                    {/*            display: "flex",*/}
+                    {/*            alignItems: "center",*/}
+                    {/*            m: "8px",*/}
+                    {/*            position: "relative",*/}
+                    {/*        }}*/}
+                    {/*    >*/}
+                    {/*        <Box*/}
+                    {/*            sx={{ width: "100%", background: "#EEE4FC", height: "40px" }}*/}
+                    {/*        />*/}
+                    {/*        <ImageAddIcons*/}
+                    {/*            style={{*/}
+                    {/*                position: "absolute",*/}
+                    {/*                color: "#7E2AEA",*/}
+                    {/*                fontSize: "20px",*/}
+                    {/*                left: "45%",*/}
+                    {/*                right: "55%",*/}
+                    {/*            }}*/}
+                    {/*        />*/}
+                    {/*        <Box*/}
+                    {/*            sx={{*/}
+                    {/*                display: "flex",*/}
+                    {/*                justifyContent: "center",*/}
+                    {/*                alignItems: "center",*/}
+                    {/*                width: "20px",*/}
+                    {/*                background: "#EEE4FC",*/}
+                    {/*                height: "40px",*/}
+                    {/*                color: "white",*/}
+                    {/*                backgroundColor: "#7E2AEA",*/}
+                    {/*            }}*/}
+                    {/*        >*/}
+                    {/*            <Box*/}
+                    {/*                sx={{ width: "100%", background: "#EEE4FC", height: "40px" }}*/}
+                    {/*            />*/}
+                    {/*            <ImageAddIcons*/}
+                    {/*                style={{*/}
+                    {/*                    position: "absolute",*/}
+                    {/*                    color: "#7E2AEA",*/}
+                    {/*                    fontSize: "20px",*/}
+                    {/*                    left: "45%",*/}
+                    {/*                    right: "55%",*/}
+                    {/*                }}*/}
+                    {/*            />*/}
+                    {/*            <Box*/}
+                    {/*                sx={{*/}
+                    {/*                    display: "flex",*/}
+                    {/*                    justifyContent: "center",*/}
+                    {/*                    alignItems: "center",*/}
+                    {/*                    width: "20px",*/}
+                    {/*                    background: "#EEE4FC",*/}
+                    {/*                    height: "40px",*/}
+                    {/*                    color: "white",*/}
+                    {/*                    backgroundColor: "#7E2AEA",*/}
+                    {/*                }}*/}
+                    {/*            >*/}
+                    {/*                +*/}
+                    {/*            </Box>*/}
+                    {/*        </Box>*/}
+                    {/*    </Box>*/}
+                    {/*)}*/}
+                {/*</Box>*/}
                 <Box
                     sx={{
                         display: "flex",
diff --git a/src/pages/Questions/QuestionsPage.tsx b/src/pages/Questions/QuestionsPage.tsx
index 082b204a..20b72b5c 100755
--- a/src/pages/Questions/QuestionsPage.tsx
+++ b/src/pages/Questions/QuestionsPage.tsx
@@ -23,7 +23,7 @@ import { useUiTools } from "@root/uiTools/store";
 export default function QuestionsPage() {
     const theme = useTheme();
     const { openedModalSettingsId, openBranchingPanel } = useUiTools();
-    const isMobile = false//useMediaQuery(theme.breakpoints.down(660));
+    const isMobile = useMediaQuery(theme.breakpoints.down(660));
     const quiz = useCurrentQuiz();
     useLayoutEffect(() => {
         updateOpenBranchingPanel(false)
@@ -79,7 +79,7 @@ export default function QuestionsPage() {
                     sx={{
                         position: "fixed",
                         left: isMobile ? "20px" : "250px",
-                        bottom: "20px",
+                        bottom: isMobile ? "140px" : "20px",
                     }}
                     data-cy="create-question"
                 >
diff --git a/src/pages/startPage/EditPage.tsx b/src/pages/startPage/EditPage.tsx
index 27f791bf..81bb9d00 100755
--- a/src/pages/startPage/EditPage.tsx
+++ b/src/pages/startPage/EditPage.tsx
@@ -245,7 +245,7 @@ export default function EditPage() {
                             left: 0,
                             bottom: 0,
                             width: "100%",
-                            padding: "20px 40px",
+                            padding: isMobile ? "20px 16px" : "20px 40px",
                             display: "flex",
                             justifyContent: "flex-end",
                             gap: "15px",
@@ -320,16 +320,20 @@ export default function EditPage() {
                                 </Box>
                             </Box>
                         )}
-                        <Button
-                            variant="contained"
-                            sx={{
-                                fontSize: "14px",
-                                lineHeight: "18px",
-                                height: "34px",
-                            }}
-                        >
-                            Опубликовать
-                        </Button>
+                        <a href={`/view`} target="_blank" rel="noreferrer" style={{ textDecoration: "none" }}>
+                            <Button
+                                variant="contained"
+                                sx={{
+                                    fontSize: "14px",
+                                    lineHeight: "18px",
+                                    height: "34px",
+                                    minWidth: "130px"
+                                }}
+                            >
+                                Опубликовать
+                            </Button>
+                        </a>
+
                     </Box>
                 }
 
diff --git a/src/pages/startPage/StartPageSettings.tsx b/src/pages/startPage/StartPageSettings.tsx
index fa64b178..f6fa0f0f 100755
--- a/src/pages/startPage/StartPageSettings.tsx
+++ b/src/pages/startPage/StartPageSettings.tsx
@@ -2,6 +2,7 @@ import AlignCenterIcon from "@icons/AlignCenterIcon";
 import AlignLeftIcon from "@icons/AlignLeftIcon";
 import AlignRightIcon from "@icons/AlignRightIcon";
 import ArrowDown from "@icons/ArrowDownIcon";
+import ArrowLeft from "@icons/ArrowLeftSP";
 import LayoutCenteredIcon from "@icons/LayoutCenteredIcon";
 import LayoutExpandedIcon from "@icons/LayoutExpandedIcon";
 import LayoutStandartIcon from "@icons/LayoutStandartIcon";
@@ -652,7 +653,7 @@ export default function StartPageSettings() {
                         <Button
                             onClick={() => setFormState("design")}
                             sx={{
-                                display: "block",
+                                display: "flex",
                                 marginTop: "20px",
                                 padding: "0",
                                 fontWeight: "bold",
@@ -662,14 +663,14 @@ export default function StartPageSettings() {
                                 textUnderlineOffset: "2px",
                             }}
                         >
-                            🡰 Вернуться к дизайну
+                            <ArrowLeft right={false}/> Вернуться к дизайну
                         </Button>
                     )}
                     {formState === "design" && (
                         <Button
                             onClick={() => setFormState("content")}
                             sx={{
-                                display: "block",
+                                display: "flex",
                                 marginLeft: "auto",
                                 marginTop: "20px",
                                 padding: "0",
@@ -680,7 +681,7 @@ export default function StartPageSettings() {
                                 textUnderlineOffset: "2px",
                             }}
                         >
-                            Далее заполнить контент 🡲
+                            Далее заполнить контент <ArrowLeft right={true}/>
                         </Button>
                     )}
                 </Box>