From b8d7ad23a73a92bb5067e86b3dbeb0d944a60aee Mon Sep 17 00:00:00 2001
From: IlyaDoronin <ryletd@gmail.com>
Date: Fri, 9 Feb 2024 17:04:38 +0300
Subject: [PATCH] fix: support

---
 src/ui_kit/FloatingSupportChat/Chat.tsx       |  1 +
 .../FloatingSupportChat/ChatMessage.tsx       | 11 ++--
 .../CircleDoubleDownIcon.tsx                  | 50 ---------------
 .../FloatingSupportChat.tsx                   | 64 +++++++------------
 .../FloatingSupportChat/QuestionIcon.tsx      | 36 +++++++++++
 5 files changed, 65 insertions(+), 97 deletions(-)
 delete mode 100644 src/ui_kit/FloatingSupportChat/CircleDoubleDownIcon.tsx
 create mode 100644 src/ui_kit/FloatingSupportChat/QuestionIcon.tsx

diff --git a/src/ui_kit/FloatingSupportChat/Chat.tsx b/src/ui_kit/FloatingSupportChat/Chat.tsx
index 75e992a6..14a12e43 100644
--- a/src/ui_kit/FloatingSupportChat/Chat.tsx
+++ b/src/ui_kit/FloatingSupportChat/Chat.tsx
@@ -218,6 +218,7 @@ export default function Chat({ sx }: Props) {
             display: "flex",
             flexDirection: "column",
             gap: "3px",
+            color: theme.palette.common.white,
           }}
         >
           <Typography>Мария</Typography>
diff --git a/src/ui_kit/FloatingSupportChat/ChatMessage.tsx b/src/ui_kit/FloatingSupportChat/ChatMessage.tsx
index 3f6c15e0..58419860 100644
--- a/src/ui_kit/FloatingSupportChat/ChatMessage.tsx
+++ b/src/ui_kit/FloatingSupportChat/ChatMessage.tsx
@@ -24,10 +24,11 @@ export default function ChatMessage({
       : theme.palette.grey1.main;
 
   const date = new Date(createdAt);
+  const today = isDateToday(date);
   const time = date.toLocaleString([], {
     hour: "2-digit",
     minute: "2-digit",
-    ...(!isDateToday(date) && {
+    ...(!today && {
       year: "2-digit",
       month: "2-digit",
       day: "2-digit",
@@ -38,10 +39,8 @@ export default function ChatMessage({
     <Box
       sx={{
         display: "flex",
-        alignSelf: isSelf ? "end" : "start",
         gap: "9px",
-        pl: isSelf ? undefined : "8px",
-        pr: isSelf ? "8px" : undefined,
+        padding: isSelf ? "0 8px 0 0" : "0 0 0 8px",
       }}
     >
       <Typography
@@ -51,6 +50,7 @@ export default function ChatMessage({
           fontSize: "14px",
           lineHeight: "17px",
           order: isSelf ? 1 : 2,
+          margin: isSelf ? "0 0 0 auto" : "0 auto 0 0",
           color: theme.palette.grey1.main,
           mb: "-4px",
           whiteSpace: "nowrap",
@@ -67,9 +67,10 @@ export default function ChatMessage({
           order: isSelf ? 2 : 1,
           p: upMd ? "18px" : "12px",
           borderRadius: "8px",
-          maxWidth: "464px",
           color: isSelf || unAuthenticated ? theme.palette.grey1.dark : "white",
           position: "relative",
+          maxWidth: `calc(100% - ${today ? 45 : 110}px)`,
+          overflowWrap: "break-word",
         }}
       >
         <svg
diff --git a/src/ui_kit/FloatingSupportChat/CircleDoubleDownIcon.tsx b/src/ui_kit/FloatingSupportChat/CircleDoubleDownIcon.tsx
deleted file mode 100644
index d7797ea9..00000000
--- a/src/ui_kit/FloatingSupportChat/CircleDoubleDownIcon.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-import { Box } from "@mui/material";
-
-interface Props {
-  isUp?: boolean;
-}
-export default function CircleDoubleDown({ isUp = false }: Props) {
-  return (
-    <Box
-      sx={{
-        width: "32px",
-        height: "32px",
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        flexShrink: 0,
-        transform: isUp ? "scale(1, -1)" : undefined,
-      }}
-    >
-      <svg
-        width="33"
-        height="32"
-        viewBox="0 0 33 32"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M16.9004 4C10.273 4 4.90039 9.37258 4.90039 16C4.90039 22.6274 10.273 28 16.9004 28C23.5278 28 28.9004 22.6274 28.9004 16C28.9004 9.37258 23.5278 4 16.9004 4Z"
-          stroke="#252734"
-          strokeWidth="2"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-        />
-        <path
-          d="M12.9004 21L16.9004 17L20.9004 21"
-          stroke="#252734"
-          strokeWidth="2"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-        />
-        <path
-          d="M12.9004 14L16.9004 10L20.9004 14"
-          stroke="#252734"
-          strokeWidth="2"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-        />
-      </svg>
-    </Box>
-  );
-}
diff --git a/src/ui_kit/FloatingSupportChat/FloatingSupportChat.tsx b/src/ui_kit/FloatingSupportChat/FloatingSupportChat.tsx
index c984ec00..1286f72f 100644
--- a/src/ui_kit/FloatingSupportChat/FloatingSupportChat.tsx
+++ b/src/ui_kit/FloatingSupportChat/FloatingSupportChat.tsx
@@ -1,35 +1,24 @@
-import { Box, Fab, Typography } from "@mui/material";
+import { Box, Fab, useTheme, useMediaQuery } from "@mui/material";
 import { useState } from "react";
-import CircleDoubleDown from "./CircleDoubleDownIcon";
+import CircleDoubleDown from "./QuestionIcon";
+
 import Chat from "./Chat";
 
+const animation = {
+  "@keyframes runningStripe": {
+    "0%": { left: "10%", backgroundColor: "transparent" },
+    "10%": { backgroundColor: "#ffffff" },
+    "50%": { backgroundColor: "#ffffff", transform: "translate(400px, 0)" },
+    "80%": { backgroundColor: "#ffffff" },
+    "100%": { backgroundColor: "transparent", boxShadow: "none", left: "100%" },
+  },
+};
+
 export default function FloatingSupportChat() {
   const [isChatOpened, setIsChatOpened] = useState<boolean>(false);
+  const theme = useTheme();
+  const isMobile = useMediaQuery(theme.breakpoints.down(800));
 
-  const animation = {
-    "@keyframes runningStripe": {
-      "0%": {
-        left: "10%",
-        backgroundColor: "transparent",
-      },
-      "10%": {
-        backgroundColor: "#ffffff",
-      },
-      "50%": {
-        backgroundColor: "#ffffff",
-        transform: "translate(400px, 0)",
-      },
-      "80%": {
-        backgroundColor: "#ffffff",
-      },
-
-      "100%": {
-        backgroundColor: "transparent",
-        boxShadow: "none",
-        left: "100%",
-      },
-    },
-  };
   return (
     <Box
       sx={{
@@ -44,25 +33,20 @@ export default function FloatingSupportChat() {
       }}
     >
       {isChatOpened && (
-        <Chat
-          sx={{
-            alignSelf: "start",
-            width: "clamp(200px, 100%, 400px)",
-          }}
-        />
+        <Chat sx={{ alignSelf: "start", width: "clamp(200px, 100%, 400px)" }} />
       )}
       <Fab
         disableRipple
         sx={{
           position: "relative",
           backgroundColor: "rgba(255, 255, 255, 0.7)",
-          pl: "11px",
-          pr: !isChatOpened ? "15px" : "11px",
-          gap: "11px",
-          height: "54px",
-          borderRadius: "27px",
+          borderRadius: "50%",
           alignSelf: "end",
+          padding: "0px",
           overflow: "hidden",
+          height: "54px",
+          width: "54px",
+          transform: !isMobile ? "scale(1.2)" : null,
           "&:hover": {
             background: "rgba(255, 255, 255, 0.7)",
           },
@@ -86,11 +70,7 @@ export default function FloatingSupportChat() {
             }}
           />
         )}
-
-        <CircleDoubleDown isUp={isChatOpened} />
-        {!isChatOpened && (
-          <Typography sx={{ zIndex: "10000" }}>Задайте нам вопрос</Typography>
-        )}
+        <CircleDoubleDown />
       </Fab>
     </Box>
   );
diff --git a/src/ui_kit/FloatingSupportChat/QuestionIcon.tsx b/src/ui_kit/FloatingSupportChat/QuestionIcon.tsx
new file mode 100644
index 00000000..538da694
--- /dev/null
+++ b/src/ui_kit/FloatingSupportChat/QuestionIcon.tsx
@@ -0,0 +1,36 @@
+import { Box } from "@mui/material";
+
+export default function CircleDoubleDown() {
+  return (
+    <Box
+      sx={{
+        width: "32px",
+        height: "32px",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        flexShrink: 0,
+      }}
+    >
+      <svg
+        width="26"
+        height="26"
+        viewBox="0 0 26 26"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M12.6094 16.3844C12.5062 16.3844 12.4203 16.3557 12.3516 16.2984C12.2828 16.2297 12.2484 16.138 12.2484 16.0234C12.2484 15.9089 12.2484 15.7943 12.2484 15.6797C12.2484 15.5651 12.2484 15.4505 12.2484 15.3359C12.2714 14.8432 12.3802 14.4078 12.575 14.0297C12.7698 13.6516 13.0047 13.3078 13.2797 12.9984C13.5661 12.6891 13.8526 12.3969 14.1391 12.1219C14.4255 11.8354 14.6661 11.549 14.8609 11.2625C15.0672 10.976 15.1932 10.6724 15.2391 10.3516C15.2849 9.93906 15.2047 9.59531 14.9984 9.32031C14.7922 9.03385 14.5115 8.81615 14.1562 8.66719C13.801 8.51823 13.4344 8.44375 13.0563 8.44375C12.449 8.44375 11.9276 8.60417 11.4922 8.925C11.0682 9.23437 10.7875 9.76146 10.65 10.5062C10.6156 10.6437 10.5583 10.7411 10.4781 10.7984C10.3979 10.8557 10.3063 10.8844 10.2031 10.8844H9.37813C9.275 10.8844 9.18333 10.85 9.10313 10.7813C9.03438 10.7125 9 10.6208 9 10.5062C9.01146 10.0365 9.11458 9.58958 9.30938 9.16562C9.50417 8.74167 9.77917 8.36927 10.1344 8.04844C10.501 7.7276 10.9307 7.47552 11.4234 7.29219C11.9276 7.0974 12.4891 7 13.1078 7C13.8068 7 14.4026 7.0974 14.8953 7.29219C15.3995 7.47552 15.8005 7.7276 16.0984 8.04844C16.4078 8.35781 16.6313 8.70156 16.7688 9.07969C16.9062 9.45781 16.9635 9.83594 16.9406 10.2141C16.9062 10.6724 16.7917 11.0849 16.5969 11.4516C16.4021 11.8068 16.1672 12.1391 15.8922 12.4484C15.6172 12.7464 15.3365 13.0443 15.05 13.3422C14.775 13.6286 14.5344 13.9323 14.3281 14.2531C14.1333 14.5625 14.0245 14.9005 14.0016 15.2672C13.9901 15.3932 13.9786 15.5193 13.9672 15.6453C13.9672 15.7599 13.9672 15.8745 13.9672 15.9891C13.9443 16.1151 13.8984 16.2125 13.8297 16.2812C13.7609 16.35 13.6635 16.3844 13.5375 16.3844H12.6094ZM12.4719 19.2031C12.3573 19.2031 12.2599 19.1687 12.1797 19.1C12.1109 19.0198 12.0766 18.9224 12.0766 18.8078V17.7594C12.0766 17.6448 12.1109 17.5531 12.1797 17.4844C12.2599 17.4042 12.3573 17.3641 12.4719 17.3641H13.5891C13.7151 17.3641 13.8125 17.4042 13.8812 17.4844C13.9615 17.5531 14.0016 17.6448 14.0016 17.7594V18.8078C14.0016 18.9224 13.9615 19.0198 13.8812 19.1C13.8125 19.1687 13.7151 19.2031 13.5891 19.2031H12.4719Z"
+          fill="black"
+        />
+        <path
+          d="M13 25C19.6274 25 25 19.6274 25 13C25 6.37258 19.6274 1 13 1C6.37258 1 1 6.37258 1 13C1 19.6274 6.37258 25 13 25Z"
+          stroke="#252734"
+          stroke-width="1.5"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+      </svg>
+    </Box>
+  );
+}