Merge branch 'staging'

.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/assets/icons/questionsPage/plus.tsx

@@ -1,6 +1,6 @@
-import { Box } from "@mui/material";
+import { Box, type SxProps} from "@mui/material";
 
-export default function Plus() {
+export default function Plus(sx:SxProps) {
   return (
     <Box
       sx={{
@@ -9,6 +9,7 @@ export default function Plus() {
         display: "flex",
         alignItems: "center",
         justifyContent: "center",
+        ...sx
       }}
     >
       <svg

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 ? "Добавьте текст-подсказку для ввода “своего ответа”" : "Добавьте ответ"}

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,21 @@
+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 (
     <Box sx={{ cursor: "pointer" }}>
       <Box data-cy="choose-emoji-button" onClick={onClick}>
@@ -42,9 +48,20 @@ export default function VariantAdornment({
               >
                 {extendedText}
               </Box>
-              <Box>
-                <PlusImage />
-              </Box>
+              <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>
           ) : (
             <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>
   );