From 48ae1359ac39334e3baabbf8b0970078a9ece849 Mon Sep 17 00:00:00 2001
From: Nastya <nastyab015@yandex.ru>
Date: Mon, 23 Jun 2025 15:30:06 +0300
Subject: [PATCH] =?UTF-8?q?=D0=B2=D0=BE=D0=B7=D0=BC=D0=BE=D0=B6=D0=BD?=
 =?UTF-8?q?=D0=BE=D1=81=D1=82=D1=8C=20=D1=83=D0=B1=D1=80=D0=B0=D1=82=D1=8C?=
 =?UTF-8?q?=20=D1=81=D0=BC=D0=B0=D0=B9=D0=BB=D0=B8=D0=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .vscode/extensions.json                       |  5 +++++
 src/assets/icons/SmallAddPluse.tsx            | 18 +++++++++++++++
 .../AnswerDraggableList/AnswerItem.tsx        | 13 ++++++-----
 .../Emoji/EmojiAnswerItem/EmojiAnswerItem.tsx | 15 ++++++++++++-
 .../EmojiAnswerItem/VariantAdornment.tsx      | 21 +++++++++++++-----
 .../VariantAdornmentMobile.tsx                | 22 +++++++++++++++++--
 6 files changed, 80 insertions(+), 14 deletions(-)
 create mode 100644 .vscode/extensions.json
 create mode 100644 src/assets/icons/SmallAddPluse.tsx

diff --git a/.vscode/extensions.json b/.vscode/extensions.json
new file mode 100644
index 00000000..c4e3af0a
--- /dev/null
+++ b/.vscode/extensions.json
@@ -0,0 +1,5 @@
+{
+    "recommendations": [
+        "godrix.svgr-preview"
+    ]
+}
\ No newline at end of file
diff --git a/src/assets/icons/SmallAddPluse.tsx b/src/assets/icons/SmallAddPluse.tsx
new file mode 100644
index 00000000..d9e19069
--- /dev/null
+++ b/src/assets/icons/SmallAddPluse.tsx
@@ -0,0 +1,18 @@
+import { SvgIcon, SxProps } from "@mui/material";
+
+export default function SmallAddPluse({ sx }: { sx: SxProps }) {
+    return (
+        <SvgIcon
+            sx={{
+                width: "11px",
+                height: "11px",
+
+                ...sx
+            }}
+        >
+            <svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M4.518 9.612C4.398 9.612 4.296 9.576 4.212 9.504C4.14 9.42 4.104 9.318 4.104 9.198V5.454H0.414C0.294 5.454 0.192 5.418 0.108 5.346C0.036 5.262 0 5.16 0 5.04V4.464C0 4.344 0.036 4.248 0.108 4.176C0.192 4.092 0.294 4.05 0.414 4.05H4.104V0.414C4.104 0.294 4.14 0.198 4.212 0.126C4.296 0.0420001 4.398 0 4.518 0H5.148C5.268 0 5.364 0.0420001 5.436 0.126C5.52 0.198 5.562 0.294 5.562 0.414V4.05H9.27C9.39 4.05 9.486 4.092 9.558 4.176C9.642 4.248 9.684 4.344 9.684 4.464V5.04C9.684 5.16 9.642 5.262 9.558 5.346C9.486 5.418 9.39 5.454 9.27 5.454H5.562V9.198C5.562 9.318 5.52 9.42 5.436 9.504C5.364 9.576 5.268 9.612 5.148 9.612H4.518Z" fill="white" />
+            </svg>
+        </SvgIcon>
+    );
+}
\ No newline at end of file
diff --git a/src/pages/Questions/AnswerDraggableList/AnswerItem.tsx b/src/pages/Questions/AnswerDraggableList/AnswerItem.tsx
index e9f27d97..35ea548c 100644
--- a/src/pages/Questions/AnswerDraggableList/AnswerItem.tsx
+++ b/src/pages/Questions/AnswerDraggableList/AnswerItem.tsx
@@ -41,6 +41,7 @@ const AnswerItem = memo<AnswerItemProps>(
       });
     };
 
+
     return (
       <Draggable
         draggableId={String(index)}
@@ -63,7 +64,7 @@ const AnswerItem = memo<AnswerItemProps>(
               }}
             >
               <TextField
-                value={ isOwn ? ownPlaceholder : variant.answer}
+                value={isOwn ? ownPlaceholder : variant.answer}
                 fullWidth
                 focused={false}
                 placeholder={isOwn ? "Добавьте текст-подсказку для ввода “своего ответа”" : "Добавьте ответ"}
@@ -71,9 +72,9 @@ const AnswerItem = memo<AnswerItemProps>(
                 onChange={({ target }: ChangeEvent<HTMLInputElement>) => {
                   if (target.value.length <= 1000) {
                     isOwn ?
-                    setOwnPlaceholder(target.value || " ")
-                    :
-                    setQuestionVariantField(questionId, variant.id, "answer", target.value || " ");
+                      setOwnPlaceholder(target.value || " ")
+                      :
+                      setQuestionVariantField(questionId, variant.id, "answer", target.value || " ");
                   } else {
                     enqueueSnackbar("Превышена длина вводимого текста")
                   }
@@ -105,8 +106,8 @@ const AnswerItem = memo<AnswerItemProps>(
                           isOwn ? updateQuestion<QuizQuestionVariant>(questionId, (question) => {
                             question.content.own = false;
                           })
-                           : 
-                           deleteQuestionVariant(questionId, variant.id)
+                            :
+                            deleteQuestionVariant(questionId, variant.id)
                         }}
                       >
                         <DeleteIcon
diff --git a/src/pages/Questions/Emoji/EmojiAnswerItem/EmojiAnswerItem.tsx b/src/pages/Questions/Emoji/EmojiAnswerItem/EmojiAnswerItem.tsx
index 71e3e222..2dc6e7cb 100644
--- a/src/pages/Questions/Emoji/EmojiAnswerItem/EmojiAnswerItem.tsx
+++ b/src/pages/Questions/Emoji/EmojiAnswerItem/EmojiAnswerItem.tsx
@@ -1,4 +1,4 @@
-import { ComponentPropsWithoutRef, useMemo } from "react";
+import { ComponentPropsWithoutRef, MouseEvent, useMemo } from "react";
 import AnswerItem from "../../AnswerDraggableList/AnswerItem";
 import VariantAdornment from "./VariantAdornment";
 import VariantAdornmentMobile from "./VariantAdornmentMobile";
@@ -31,6 +31,17 @@ export default function EmojiAnswerItem({
 }: Props) {
 
 
+  const clearEmoji = (e: MouseEvent<HTMLButtonElement>) => {
+    e.stopPropagation()
+    updateQuestion(questionId, (question) => {
+      if (question.type !== "emoji") return;
+
+      const v = question.content.variants.find((v) => v.id === variant.id);
+      if (!v) return;
+
+      v.extendedText = "";
+    });
+  }
   const addOrEditImageButton = useMemo(() => {
     return (
       !isTablet && (
@@ -41,6 +52,7 @@ export default function EmojiAnswerItem({
             setSelectedVariant(variant.id);
             setOpen(true);
           }}
+          clearEmoji={clearEmoji}
         />
       )
     );
@@ -63,6 +75,7 @@ export default function EmojiAnswerItem({
             setSelectedVariant(variant.id);
             setOpen(true);
           }}
+          clearEmoji={clearEmoji}
         />
       )
     );
diff --git a/src/pages/Questions/Emoji/EmojiAnswerItem/VariantAdornment.tsx b/src/pages/Questions/Emoji/EmojiAnswerItem/VariantAdornment.tsx
index 701755c0..15e3a3f9 100644
--- a/src/pages/Questions/Emoji/EmojiAnswerItem/VariantAdornment.tsx
+++ b/src/pages/Questions/Emoji/EmojiAnswerItem/VariantAdornment.tsx
@@ -1,15 +1,19 @@
+import SmallAddPluse from "@/assets/icons/SmallAddPluse";
 import AddEmoji from "@icons/questionsPage/addEmoji";
 import PlusImage from "@icons/questionsPage/plus";
-import { Box } from "@mui/material";
+import { Box, useTheme, IconButton } from "@mui/material";
 import { MouseEventHandler } from "react";
 
 export default function VariantAdornment({
   onClick,
   extendedText,
+  clearEmoji,
 }: {
   onClick: MouseEventHandler<HTMLDivElement>;
   extendedText: string;
+  clearEmoji: () => void;
 }) {
+  const theme = useTheme();
 
   console.log("VariantAdornment extendedText", extendedText)
   return (
@@ -44,13 +48,20 @@ export default function VariantAdornment({
               >
                 {extendedText}
               </Box>
-              <Box>
-                <PlusImage 
+              <IconButton 
+              onClick={clearEmoji}
+              sx={{
+                height: "100%",
+                width: "20px",
+                borderRadius: "0 3px 3px 0",
+                bgcolor: theme.palette.brightPurple.main
+              }}>
+                <SmallAddPluse 
                 sx={{
-                  transform: extendedText ? "rotate(45)" : ""
+                  transform: extendedText ? "rotate(45deg)" : ""
                 }}
                 />
-              </Box>
+              </IconButton>
             </Box>
           ) : (
             <AddEmoji />
diff --git a/src/pages/Questions/Emoji/EmojiAnswerItem/VariantAdornmentMobile.tsx b/src/pages/Questions/Emoji/EmojiAnswerItem/VariantAdornmentMobile.tsx
index b24c586c..a008ed2e 100644
--- a/src/pages/Questions/Emoji/EmojiAnswerItem/VariantAdornmentMobile.tsx
+++ b/src/pages/Questions/Emoji/EmojiAnswerItem/VariantAdornmentMobile.tsx
@@ -1,14 +1,19 @@
+import SmallAddPluse from "@/assets/icons/SmallAddPluse";
 import { EmojiIcons } from "@icons/EmojiIocns";
-import { Box } from "@mui/material";
+import { Box, IconButton, useTheme } from "@mui/material";
 import { MouseEventHandler } from "react";
 
 export default function VariantAdornmentMobile({
   onClick,
   extendedText,
+  clearEmoji
 }: {
   onClick: MouseEventHandler<HTMLDivElement>;
   extendedText: string;
+  clearEmoji: () => void;
 }) {
+  const theme = useTheme();
+
   return (
     <Box
       onClick={onClick}
@@ -61,7 +66,20 @@ export default function VariantAdornmentMobile({
           backgroundColor: "#7E2AEA",
         }}
       >
-        +
+        <IconButton
+          onClick={clearEmoji}
+          sx={{
+            height: "100%",
+            width: "20px",
+            borderRadius: "0 3px 3px 0",
+            bgcolor: theme.palette.brightPurple.main
+          }}>
+          <SmallAddPluse
+            sx={{
+              transform: extendedText ? "rotate(45deg)" : ""
+            }}
+          />
+        </IconButton>
       </Box>
     </Box>
   );