From 5b3da138bac91b49c5cb26907d03816acf23112c Mon Sep 17 00:00:00 2001
From: IlyaDoronin <ryletd@gmail.com>
Date: Thu, 28 Sep 2023 16:52:50 +0300
Subject: [PATCH] fix: emoji displaying

---
 src/assets/icons/questionsPage/plus.tsx | 32 +++++++++++++++++++++++++
 src/pages/Questions/Emoji/Emoji.tsx     | 22 ++++++++++++++---
 2 files changed, 51 insertions(+), 3 deletions(-)
 create mode 100644 src/assets/icons/questionsPage/plus.tsx

diff --git a/src/assets/icons/questionsPage/plus.tsx b/src/assets/icons/questionsPage/plus.tsx
new file mode 100644
index 00000000..eddbe273
--- /dev/null
+++ b/src/assets/icons/questionsPage/plus.tsx
@@ -0,0 +1,32 @@
+import { Box } from "@mui/material";
+
+export default function Plus() {
+  return (
+    <Box
+      sx={{
+        height: "30px",
+        width: "20px",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+      }}
+    >
+      <svg
+        width="20"
+        height="30"
+        viewBox="0 0 15 40"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M18 0H0V40H18C18.4602 40 20 39.1046 20 38V2C20 0.89543 18.4602 0 18 0Z"
+          fill="#7E2AEA"
+        />
+        <path
+          d="M9.518 24.612C9.398 24.612 9.296 24.576 9.212 24.504C9.14 24.42 9.104 24.318 9.104 24.198V20.454H5.414C5.294 20.454 5.192 20.418 5.108 20.346C5.036 20.262 5 20.16 5 20.04V19.464C5 19.344 5.036 19.248 5.108 19.176C5.192 19.092 5.294 19.05 5.414 19.05H9.104V15.414C9.104 15.294 9.14 15.198 9.212 15.126C9.296 15.042 9.398 15 9.518 15H10.148C10.268 15 10.364 15.042 10.436 15.126C10.52 15.198 10.562 15.294 10.562 15.414V19.05H14.27C14.39 19.05 14.486 19.092 14.558 19.176C14.642 19.248 14.684 19.344 14.684 19.464V20.04C14.684 20.16 14.642 20.262 14.558 20.346C14.486 20.418 14.39 20.454 14.27 20.454H10.562V24.198C10.562 24.318 10.52 24.42 10.436 24.504C10.364 24.576 10.268 24.612 10.148 24.612H9.518Z"
+          fill="white"
+        />
+      </svg>
+    </Box>
+  );
+}
diff --git a/src/pages/Questions/Emoji/Emoji.tsx b/src/pages/Questions/Emoji/Emoji.tsx
index d01f7cc7..cdfa43c8 100644
--- a/src/pages/Questions/Emoji/Emoji.tsx
+++ b/src/pages/Questions/Emoji/Emoji.tsx
@@ -19,6 +19,7 @@ import { EmojiIcons } from "@icons/EmojiIocns";
 import { questionStore, updateQuestionsList } from "@root/questions";
 
 import AddEmoji from "../../../assets/icons/questionsPage/addEmoji";
+import PlusImage from "../../../assets/icons/questionsPage/plus";
 
 interface Props {
   totalIndex: number;
@@ -64,10 +65,25 @@ export default function Emoji({ totalIndex }: Props) {
                         gap: "5px",
                       }}
                     >
-                      {variant.emoji && (
-                        <Box sx={{ width: "30px" }}>{variant.emoji}</Box>
+                      {variant.emoji ? (
+                        <Box
+                          sx={{
+                            width: "30px",
+                            display: "flex",
+                            alignItems: "center",
+                            background: "#EEE4FC",
+                            borderRadius: "3px",
+                            marginRight: "15px",
+                          }}
+                        >
+                          <Box sx={{ marginLeft: "3px" }}>{variant.emoji}</Box>
+                          <Box sx={{ marginLeft: "-3px" }}>
+                            <PlusImage />
+                          </Box>
+                        </Box>
+                      ) : (
+                        <AddEmoji />
                       )}
-                      <AddEmoji />
                     </Box>
                   </Box>
                 </Box>