From 9defa6abce460666eff126eacf1689ef954f38d4 Mon Sep 17 00:00:00 2001
From: ArtChaos189 <tvolkiska967@gmail.com>
Date: Tue, 12 Dec 2023 22:57:28 +0300
Subject: [PATCH] updated the login buttons

---
 src/pages/Landing/HeaderLanding.tsx | 142 ++++++++++++++------------
 src/pages/Landing/Hero.tsx          | 151 +++++++++++++++-------------
 2 files changed, 157 insertions(+), 136 deletions(-)

diff --git a/src/pages/Landing/HeaderLanding.tsx b/src/pages/Landing/HeaderLanding.tsx
index d801bc49..e363748a 100644
--- a/src/pages/Landing/HeaderLanding.tsx
+++ b/src/pages/Landing/HeaderLanding.tsx
@@ -1,72 +1,86 @@
-import React from 'react';
-import Box from '@mui/material/Box';
-import Button from '@mui/material/Button';
-import SectionStyled from './SectionStyled';
+import React from "react";
+import Box from "@mui/material/Box";
+import Button from "@mui/material/Button";
+import SectionStyled from "./SectionStyled";
 import NavMenuItem from "@ui_kit/Header/NavMenuItem";
 import QuizLogo from "./images/icons/QuizLogo";
 import { useMediaQuery, useTheme } from "@mui/material";
 import { setIsContactFormOpen } from "../../stores/contactForm";
+import { useUserStore } from "@root/user";
+import { useNavigate } from "react-router-dom";
 
-const buttonMenu = ['Меню 1', 'Меню 2', 'Меню 3', 'Меню 4', 'Меню 5', 'Меню 1', 'Меню 2']
+const buttonMenu = ["Меню 1", "Меню 2", "Меню 3", "Меню 4", "Меню 5", "Меню 1", "Меню 2"];
 
 export default function Component() {
-    const theme = useTheme();
-    const isMobile = useMediaQuery(theme.breakpoints.down(600));
-    const isTablet = useMediaQuery(theme.breakpoints.down(1000))
-    const [select, setSelect] = React.useState(0)
-    return (
-        <SectionStyled tag={'header'} bg={'#F2F3F7'} mwidth={'1160px'}
-                       sxsect={{
-                           minHeight: '80px',
-                           borderBottom: '1px solid #E3E3E3',
-                           position: "relative",
-                           padding: isMobile ? "0 16px" : isTablet ? "0 40px" : 0,
-                           zIndex: 3
-                       }}
-                       sxcont={{
-                           display: 'flex',
-                           justifyContent: 'space-between',
-                           alignItems: 'center',
-                           padding: 0
-                       }}>
-            <QuizLogo width={isMobile ? 100 : 150} />
-            {/*<Box*/}
-            {/*    sx={{*/}
-            {/*        maxWidth: '595px',*/}
-            {/*        width: '100%',*/}
-            {/*        display: 'flex',*/}
-            {/*        justifyContent: 'space-between',*/}
-            {/*        flexWrap: 'wrap',*/}
-            {/*        marginRight: "138px",*/}
+  const theme = useTheme();
+  const isMobile = useMediaQuery(theme.breakpoints.down(600));
+  const isTablet = useMediaQuery(theme.breakpoints.down(1000));
+  const [select, setSelect] = React.useState(0);
+  const userId = useUserStore((state) => state.userId);
+  const navigate = useNavigate();
 
-            {/*    }}*/}
-            {/*>*/}
-            {/*    {buttonMenu.map( (element, index) => (*/}
-            {/*        <NavMenuItem*/}
-            {/*            text={element}*/}
-            {/*            // component={Link}*/}
-            {/*            // to={url}*/}
-            {/*            key={index}*/}
-            {/*            onClick={() => {*/}
-            {/*                setSelect(index);*/}
-            {/*            }}*/}
-            {/*            isActive={select === index}*/}
-            {/*        />*/}
-            {/*    ))}*/}
-            {/*</Box>*/}
-            <Button variant="outlined"
-                onClick={() => setIsContactFormOpen(true)}
-                    sx={{
-                        color: 'black',
-                        border: '1px solid black',
-                        textTransform: 'none',
-                        fontWeight: '400',
-                        fontSize: '18px',
-                        lineHeight: '24px',
-                        borderRadius: '8px',
-                        padding: '8px 17px',
-                    }}
-            >Предрегистрация</Button>
-        </SectionStyled>
-    )
-}
\ No newline at end of file
+  const onClick = () => (userId ? navigate("/list") : setIsContactFormOpen(true));
+
+  return (
+    <SectionStyled
+      tag={"header"}
+      bg={"#F2F3F7"}
+      mwidth={"1160px"}
+      sxsect={{
+        minHeight: "80px",
+        borderBottom: "1px solid #E3E3E3",
+        position: "relative",
+        padding: isMobile ? "0 16px" : isTablet ? "0 40px" : 0,
+        zIndex: 3,
+      }}
+      sxcont={{
+        display: "flex",
+        justifyContent: "space-between",
+        alignItems: "center",
+        padding: 0,
+      }}
+    >
+      <QuizLogo width={isMobile ? 100 : 150} />
+      {/*<Box*/}
+      {/*    sx={{*/}
+      {/*        maxWidth: '595px',*/}
+      {/*        width: '100%',*/}
+      {/*        display: 'flex',*/}
+      {/*        justifyContent: 'space-between',*/}
+      {/*        flexWrap: 'wrap',*/}
+      {/*        marginRight: "138px",*/}
+
+      {/*    }}*/}
+      {/*>*/}
+      {/*    {buttonMenu.map( (element, index) => (*/}
+      {/*        <NavMenuItem*/}
+      {/*            text={element}*/}
+      {/*            // component={Link}*/}
+      {/*            // to={url}*/}
+      {/*            key={index}*/}
+      {/*            onClick={() => {*/}
+      {/*                setSelect(index);*/}
+      {/*            }}*/}
+      {/*            isActive={select === index}*/}
+      {/*        />*/}
+      {/*    ))}*/}
+      {/*</Box>*/}
+      <Button
+        variant="outlined"
+        onClick={onClick}
+        sx={{
+          color: "black",
+          border: "1px solid black",
+          textTransform: "none",
+          fontWeight: "400",
+          fontSize: "18px",
+          lineHeight: "24px",
+          borderRadius: "8px",
+          padding: "8px 17px",
+        }}
+      >
+        {userId ? "Войти" : " Регистрация / Войти"}
+      </Button>
+    </SectionStyled>
+  );
+}
diff --git a/src/pages/Landing/Hero.tsx b/src/pages/Landing/Hero.tsx
index 9bae131e..6e784075 100644
--- a/src/pages/Landing/Hero.tsx
+++ b/src/pages/Landing/Hero.tsx
@@ -1,75 +1,82 @@
-import React from 'react';
-import Box from '@mui/material/Box';
-import Button from '@mui/material/Button';
-import {Typography, useMediaQuery, useTheme} from "@mui/material";
-import abstraction from '../../assets/Quiz-main.png'
-import SectionStyled from './SectionStyled';
-import { Link, redirect } from 'react-router-dom';
-import {setIsContactFormOpen} from "@root/contactForm";
+import React from "react";
+import Box from "@mui/material/Box";
+import Button from "@mui/material/Button";
+import { Typography, useMediaQuery, useTheme } from "@mui/material";
+import abstraction from "../../assets/Quiz-main.png";
+import SectionStyled from "./SectionStyled";
+import { Link, redirect, useNavigate } from "react-router-dom";
+import { setIsContactFormOpen } from "@root/contactForm";
+import { useUserStore } from "@root/user";
 
 export default function Component() {
-    const theme = useTheme();
-    const isMobile = useMediaQuery(theme.breakpoints.down(600));
-    const isTablet = useMediaQuery(theme.breakpoints.down(1000))
-    return(
-        <SectionStyled tag={'section'} bg={'#f2f3f7'} mwidth={'1160px'}
-                       sxsect={{
-                           height: isMobile ? '702px' : (isTablet ? '986px' : '660px'),
-                       }}
-                       sxcont={{
-                           display: 'flex',
-                           justifyContent: 'space-between',
-                           alignItems: 'center',
-                           padding: isMobile ? "300px 16px 0 16px" : (isTablet ? "494px 40px 0 40px" : 0),
-                           marginBottom: isMobile ? '55px' : (isTablet ? 0 : "55px"),
-                       }}>
-            <Box
-                sx={{
-                    display: 'flex',
-                    flexDirection: 'column',
-                    gap: '30px',
-                    height: '100%',
-                    justifyContent: 'space-between',
-                    alignItems: "flex-start",
-                    position: 'relative',
-                }}
-            >
-                <Typography variant='h2'>
-                    Pena Quiz
-                </Typography>
-                <Box
-                    sx={{
-                        maxWidth: isTablet ? '715px' : '420px',
-                        minHeight: '64px',
-                    }}>
-                    <Typography variant='body1'>
-                        Помогаем посетителю оставить заявку. <br style={{display: isTablet ? 'flex' : "none"}}/> Готовые шаблоны квизов с легкой установкой на любой сайт и социальные сети
-                    </Typography>
-                </Box>
-                    {/*<Link */}
-                    {/*    to="/list"*/}
-                    {/*    style={{textDecoration: "none"}}>*/}
-                <Button variant="contained"
-                        onClick={() => setIsContactFormOpen(true)}
-                >
-                    Попробуйте бесплатно
-                    
-                </Button>
-                    {/*</Link>*/}
+  const theme = useTheme();
+  const isMobile = useMediaQuery(theme.breakpoints.down(600));
+  const isTablet = useMediaQuery(theme.breakpoints.down(1000));
+  const userId = useUserStore((state) => state.userId);
+  const navigate = useNavigate();
 
-                <Box
-                    component={"img"}
-                    src={abstraction}
-                    sx={{
-                        position: "absolute",
-                        bottom: isMobile ? undefined : (isTablet? "138px" : "-291px"),
-                        maxWidth: isMobile ? "403px" : "810px",
-                        width: isMobile ? "100%" : undefined,
-                        left: isMobile ? "-20px" : (isTablet? "54px" : "401px"),
-                        top: isMobile ? "-345px" : undefined
-                    }}
-                />
-            </Box>
-        </SectionStyled>
-    )
-}
\ No newline at end of file
+  const tryItForFreeonClick = () => (userId ? navigate("/list") : setIsContactFormOpen(true));
+
+  return (
+    <SectionStyled
+      tag={"section"}
+      bg={"#f2f3f7"}
+      mwidth={"1160px"}
+      sxsect={{
+        height: isMobile ? "702px" : isTablet ? "986px" : "660px",
+      }}
+      sxcont={{
+        display: "flex",
+        justifyContent: "space-between",
+        alignItems: "center",
+        padding: isMobile ? "300px 16px 0 16px" : isTablet ? "494px 40px 0 40px" : 0,
+        marginBottom: isMobile ? "55px" : isTablet ? 0 : "55px",
+      }}
+    >
+      <Box
+        sx={{
+          display: "flex",
+          flexDirection: "column",
+          gap: "30px",
+          height: "100%",
+          justifyContent: "space-between",
+          alignItems: "flex-start",
+          position: "relative",
+        }}
+      >
+        <Typography variant="h2">Pena Quiz</Typography>
+        <Box
+          sx={{
+            maxWidth: isTablet ? "715px" : "420px",
+            minHeight: "64px",
+          }}
+        >
+          <Typography variant="body1">
+            Помогаем посетителю оставить заявку. <br style={{ display: isTablet ? "flex" : "none" }} /> Готовые шаблоны
+            квизов с легкой установкой на любой сайт и социальные сети
+          </Typography>
+        </Box>
+        {/*<Link */}
+        {/*    to="/list"*/}
+        {/*    style={{textDecoration: "none"}}>*/}
+        <Button variant="contained" onClick={tryItForFreeonClick}>
+          Попробуйте бесплатно
+        </Button>
+        {/*</Link>*/}
+
+        <Box
+          component={"img"}
+          src={abstraction}
+          sx={{
+            position: "absolute",
+            bottom: isMobile ? undefined : isTablet ? "138px" : "-291px",
+            maxWidth: isMobile ? "403px" : "810px",
+            width: isMobile ? "100%" : undefined,
+            left: isMobile ? "-20px" : isTablet ? "54px" : "401px",
+            top: isMobile ? "-345px" : undefined,
+          }}
+        />
+      </Box>
+    </SectionStyled>
+  );
+}