From eba25c46ac5a4fabce9c35129bbd25bb38d23a8a Mon Sep 17 00:00:00 2001
From: ArtChaos189 <tvolkiska967@gmail.com>
Date: Thu, 25 May 2023 14:25:44 +0300
Subject: [PATCH] =?UTF-8?q?=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=B8=D0=BB=20?=
 =?UTF-8?q?=D0=B0=D0=BD=D0=B8=D0=BC=D0=B0=D1=86=D0=B8=D1=8E=20=D0=BA=D0=BD?=
 =?UTF-8?q?=D0=BE=D0=BF=D0=BA=D0=B5:=20"=D0=97=D0=B0=D0=B4=D0=B0=D0=B9?=
 =?UTF-8?q?=D1=82=D0=B5=20=D0=BD=D0=B0=D0=BC=20=D0=B2=D0=BE=D0=BF=D1=80?=
 =?UTF-8?q?=D0=BE=D1=81"?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../FloatingSupportChat.tsx                   | 124 ++++++++++++------
 src/pages/Landing/Landing.tsx                 |  41 +++---
 2 files changed, 107 insertions(+), 58 deletions(-)

diff --git a/src/components/FloatingSupportChat/FloatingSupportChat.tsx b/src/components/FloatingSupportChat/FloatingSupportChat.tsx
index de11e08..ccc792d 100644
--- a/src/components/FloatingSupportChat/FloatingSupportChat.tsx
+++ b/src/components/FloatingSupportChat/FloatingSupportChat.tsx
@@ -1,44 +1,92 @@
-import { Box, Fab } from "@mui/material";
+import { Box, Fab, Typography } from "@mui/material";
 import { useState } from "react";
 import CircleDoubleDown from "./CircleDoubleDownIcon";
 import Chat from "./Chat";
 
-
 export default function FloatingSupportChat() {
-    const [isChatOpened, setIsChatOpened] = useState<boolean>(false);
+  const [isChatOpened, setIsChatOpened] = useState<boolean>(false);
 
-    return (
-        <Box sx={{
-            position: "fixed",
-            right: "20px",
-            bottom: "10px",
-            display: "flex",
-            flexDirection: "column",
-            gap: "8px",
-            width: "clamp(200px, 100% - 40px, 454px)",
-            zIndex: 10,
-        }}>
-            {isChatOpened &&
-                <Chat sx={{
-                    alignSelf: "start",
-                    width: "clamp(200px, 100%, 400px)",
-                }} />
-            }
-            <Fab
-                variant={"extended"}
-                onClick={() => setIsChatOpened(prev => !prev)}
-                sx={{
-                    pl: "11px",
-                    pr: !isChatOpened ? "15px" : "11px",
-                    gap: "11px",
-                    height: "54px",
-                    borderRadius: "27px",
-                    alignSelf: "end",
-                }}
-            >
-                <CircleDoubleDown isUp={isChatOpened} />
-                {!isChatOpened && "Задайте нам вопрос"}
-            </Fab>
-        </Box>
-    );
-}
\ No newline at end of file
+  const animation = {
+    "@keyframes runningStripe": {
+      "0%": {
+        left: "0",
+        backgroundColor: "transparent",
+      },
+      "20%": {
+        backgroundColor: "#ffffff",
+      },
+      "50%": {
+        backgroundColor: "#ffffff",
+        transform: "translate(200px, 0)",
+      },
+      "80%": {
+        backgroundColor: "#ffffff",
+      },
+
+      "100%": {
+        backgroundColor: "transparent",
+        boxShadow: "none",
+        left: "100%",
+      },
+    },
+  };
+  return (
+    <Box
+      sx={{
+        position: "fixed",
+        right: "20px",
+        bottom: "10px",
+        display: "flex",
+        flexDirection: "column",
+        gap: "8px",
+        width: "clamp(200px, 100% - 40px, 454px)",
+        zIndex: 10,
+      }}
+    >
+      {isChatOpened && (
+        <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",
+          alignSelf: "end",
+          overflow: "hidden",
+          "&:hover": {
+            background: "rgba(255, 255, 255, 0.7)",
+          },
+        }}
+        variant={"extended"}
+        onClick={() => setIsChatOpened((prev) => !prev)}
+      >
+        {!isChatOpened && (
+          <Box
+            sx={{
+              position: "absolute",
+              bgcolor: "#FFFFFF",
+              height: "70px",
+              width: "30px",
+              animation: "runningStripe  linear 6s infinite",
+              transform: "rotate(45deg)  skewX(20deg) skewY(-10deg)",
+              ...animation,
+            }}
+          />
+        )}
+
+        <CircleDoubleDown isUp={isChatOpened} />
+        {!isChatOpened && <Typography sx={{ zIndex: "10000" }}>Задайте нам вопрос</Typography>}
+      </Fab>
+    </Box>
+  );
+}
diff --git a/src/pages/Landing/Landing.tsx b/src/pages/Landing/Landing.tsx
index 527ac5a..458e22c 100644
--- a/src/pages/Landing/Landing.tsx
+++ b/src/pages/Landing/Landing.tsx
@@ -10,26 +10,27 @@ import darkTheme from "@root/utils/themes/dark";
 import Navbar from "@root/components/Navbar/Navbar";
 
 interface Props {
-    templaterOnly?: boolean;
+  templaterOnly?: boolean;
 }
 
 export default function Landing({ templaterOnly = false }: Props) {
-
-    return (
-        <ThemeProvider theme={darkTheme}>
-            <CssBaseline />
-            <Box sx={{
-                position: "relative",
-            }}>
-                <Navbar isLoggedIn={false} />
-                <Section1 />
-                <Section2 templaterOnly={templaterOnly} />
-                <Section3 />
-                <Section4 />
-                <Section5 />
-                <Footer />
-                <FloatingSupportChat />
-            </Box>
-        </ThemeProvider>
-    );
-}
\ No newline at end of file
+  return (
+    <ThemeProvider theme={darkTheme}>
+      <CssBaseline />
+      <Box
+        sx={{
+          position: "relative",
+        }}
+      >
+        <Navbar isLoggedIn={false} />
+        <Section1 />
+        <Section2 templaterOnly={templaterOnly} />
+        <Section3 />
+        <Section4 />
+        <Section5 />
+        <Footer />
+        <FloatingSupportChat />
+      </Box>
+    </ThemeProvider>
+  );
+}