возможность убрать смайлик

.vscode/extensions.json

@@ -0,0 +1,5 @@
+{
+    "recommendations": [
+        "godrix.svgr-preview"
+    ]
+}

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>
+    );
+}

src/pages/Questions/AnswerDraggableList/AnswerItem.tsx

@@ -41,6 +41,7 @@ const AnswerItem = memo<AnswerItemProps>(
       });
     };
 
+
     return (
       <Draggable
         draggableId={String(index)}

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}
         />
       )
     );

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={{
-                  transform: extendedText ? "rotate(45)" : ""
+                height: "100%",
+                width: "20px",
+                borderRadius: "0 3px 3px 0",
+                bgcolor: theme.palette.brightPurple.main
+              }}>
+                <SmallAddPluse 
+                sx={{
+                  transform: extendedText ? "rotate(45deg)" : ""
                 }}
                 />
-              </Box>
+              </IconButton>
             </Box>
           ) : (
             <AddEmoji />

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>
   );