кнопки пополнить и выход в мобильной шапке, кликабельные тултипы для мобилки

src/pages/DesignPage/DesignPage.tsx

@@ -3,7 +3,7 @@ import { Box, useMediaQuery, useTheme, Skeleton } from "@mui/material";
 import { setQuizes, setCurrentStep } from "@root/quizes/actions";
 import { useCurrentQuiz } from "@root/quizes/hooks";
 import { useQuizStore } from "@root/quizes/store";
-import Sidebar from "@ui_kit/Sidebar";
+import Sidebar from "@ui_kit/Sidebar/Sidebar";
 import { useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";
 import { SidebarMobile } from "../../ui_kit/Sidebar/SidebarMobile";

src/pages/Questions/OwnTextField/OwnTextField.tsx

@@ -13,6 +13,7 @@ import InfoIcon from "../../../assets/icons/InfoIcon";
 import type { QuizQuestionText } from "../../../model/questionTypes/text";
 import ButtonsOptions from "../ButtonsOptions";
 import SwitchTextField from "./switchTextField";
+import TooltipClickInfo from "@ui_kit/Toolbars/TooltipClickInfo";
 
 interface Props {
   question: QuizQuestionText;
@@ -77,14 +78,20 @@ export default function OwnTextField({ question }: Props) {
           >
             Пользователю будет дано поле для ввода значения
           </Typography>
-          <Tooltip
-            title="Будет использоваться для ввода значения."
-            placement="top"
-          >
-            <Box>
-              <InfoIcon />
-            </Box>
-          </Tooltip>
+          {isMobile ? (
+            <TooltipClickInfo
+              title={"Будет использоваться для ввода значения."}
+            />
+          ) : (
+            <Tooltip
+              title="Будет использоваться для ввода значения."
+              placement="top"
+            >
+              <Box>
+                <InfoIcon />
+              </Box>
+            </Tooltip>
+          )}
         </Box>
       </Box>
       <ButtonsOptions

src/pages/Questions/QuestionsPage.tsx

@@ -96,7 +96,7 @@ export default function QuestionsPage({
           }}
           sx={{
             position: "fixed",
-            bottom: "140px",
+            bottom: "103px",
           }}
           data-cy="create-question"
         >

src/pages/createQuize/QuizCard.tsx

@@ -62,7 +62,7 @@ export default function QuizCard({
     const params = new URLSearchParams(window.location.search);
     const fromSquiz = params.get("action");
     if (fromSquiz === "fromhub") {
-      window.history.replaceState(null, '', "/list")
+      window.history.replaceState(null, "", "/list");
       pay();
     }
   }, []);

src/pages/main.tsx

@@ -1,5 +1,5 @@
 import { Header } from "@ui_kit/Header/Header";
-import Sidebar from "@ui_kit/Sidebar";
+import Sidebar from "@ui_kit/Sidebar/Sidebar";
 import Box from "@mui/material/Box";
 import { useTheme, useMediaQuery, IconButton } from "@mui/material";
 import HeaderFull from "@ui_kit/Header/HeaderFull";

src/pages/startPage/EditPage.tsx

@@ -14,7 +14,7 @@ import {
 import { setQuizes, updateQuiz, setCurrentStep } from "@root/quizes/actions";
 import { useCurrentQuiz } from "@root/quizes/hooks";
 import { useQuizStore } from "@root/quizes/store";
-import Sidebar from "@ui_kit/Sidebar";
+import Sidebar from "@ui_kit/Sidebar/Sidebar";
 import Stepper from "@ui_kit/Stepper";
 import SwitchStepPages from "@ui_kit/switchStepPages";
 import { useEffect, useState } from "react";

src/ui_kit/Sidebar/Sidebar.tsx

@@ -7,7 +7,7 @@ import { quizSetupSteps } from "@model/quizSettings";
 import { Box, IconButton, List, Typography, useTheme } from "@mui/material";
 import { useQuizStore } from "@root/quizes/store";
 import { useState } from "react";
-import MenuItem from "./MenuItem";
+import MenuItem from "../MenuItem";
 import { useCurrentQuiz } from "@root/quizes/hooks";
 import { useLocation, useNavigate } from "react-router-dom";
 import { setCurrentStep } from "@root/quizes/actions";

src/ui_kit/Sidebar/SidebarMobile.tsx

@@ -18,10 +18,16 @@ import { Question } from "./icons/Question";
 import { Settings } from "./icons/Settings";
 import { Pencil } from "./icons/Pencil";
 import { ArrowDown } from "./icons/ArrowDown";
-import Sidebar from "@ui_kit/Sidebar";
+import Sidebar from "@ui_kit/Sidebar/Sidebar";
 import { Link, useNavigate } from "react-router-dom";
 import { updateQuiz } from "@root/quizes/actions";
 import { useCurrentQuiz } from "@root/quizes/hooks";
+import { LogoutButton } from "@ui_kit/LogoutButton";
+import { ToTariffsButton } from "@ui_kit/Toolbars/ToTariffsButton";
+import { logout } from "@api/auth";
+import { enqueueSnackbar } from "notistack";
+import { clearAuthToken } from "@frontend/kitui";
+import { clearUserData } from "@root/user";
 
 interface Iprops {
   open: boolean;
@@ -45,10 +51,21 @@ export const SidebarMobile: FC<Iprops> = ({ open, changePage }) => {
   const [inputOpen, setInputOpen] = useState<boolean>(false);
   const quiz = useCurrentQuiz();
   const ref = useRef(null);
-
+  const navigate = useNavigate();
   const handleClick = (event) => {
     setAnchorEl(anchorEl ? null : event.currentTarget);
   };
+  async function handleLogoutClick() {
+    const [, logoutError] = await logout();
+
+    if (logoutError) {
+      return enqueueSnackbar(logoutError);
+    }
+
+    clearAuthToken();
+    clearUserData();
+    navigate("/");
+  }
 
   const clickInput = (event) => {
     if (ref.current && !ref.current.contains(event.target)) setInputOpen(false);
@@ -149,7 +166,7 @@ export const SidebarMobile: FC<Iprops> = ({ open, changePage }) => {
       <Box
         sx={{
           width: "100%",
-          justifyContent: "end",
+          justifyContent: "space-between",
           display: "flex",
           marginTop: "20px",
           flexWrap: "wrap",
@@ -173,6 +190,24 @@ export const SidebarMobile: FC<Iprops> = ({ open, changePage }) => {
         {/*    {sidebarIcon}*/}
         {/*  </Box>*/}
         {/*))}*/}
+        <Box sx={{ display: "flex" }}>
+          <Box
+            sx={{
+              display: "flex",
+              ml: "auto",
+              gap: "15px",
+            }}
+          >
+            <LogoutButton
+              onClick={handleLogoutClick}
+              sx={{
+                backgroundColor: "transparent",
+                border: "1px solid #9A9AAF",
+              }}
+            />
+          </Box>
+          <ToTariffsButton color={"#F2F3F7"} />
+        </Box>
         <Box
           aria-describedby={id}
           onClick={handleClick}

src/ui_kit/Sidebar/SidebarModal/index.tsx

@@ -1,6 +1,6 @@
 import { Box, Modal, Popper } from "@mui/material";
 
-import Sidebar from "@ui_kit/Sidebar";
+import Sidebar from "@ui_kit/Sidebar/Sidebar";
 
 type SidebarModalProps = {
   open: boolean;

src/ui_kit/Toolbars/ToTariffsButton.tsx

@@ -1,10 +1,10 @@
 import { Button } from "@mui/material";
 import { Link } from "react-router-dom";
 
-export const ToTariffsButton = () => {
+export const ToTariffsButton = (color?: string) => {
   return (
     <Link to="/tariffs">
-      <Button>Пополнить</Button>
+      <Button sx={{ color: color }}>Пополнить</Button>
     </Link>
   );
 };

src/ui_kit/Toolbars/TooltipClickInfo.tsx

@@ -0,0 +1,38 @@
+import { Button, ClickAwayListener, IconButton, Tooltip } from "@mui/material";
+import InfoIcon from "@icons/InfoIcon";
+import { useState } from "react";
+
+export default function TooltipClickInfo({ title }: string) {
+  const [open, setOpen] = useState(false);
+
+  const handleTooltipClose = () => {
+    setOpen(false);
+  };
+
+  const handleTooltipOpen = () => {
+    setOpen(true);
+  };
+  return (
+    <>
+      <ClickAwayListener onClickAway={handleTooltipClose}>
+        <div>
+          <Tooltip
+            PopperProps={{
+              disablePortal: true,
+            }}
+            onClose={handleTooltipClose}
+            open={open}
+            disableFocusListener
+            disableHoverListener
+            disableTouchListener
+            title={title}
+          >
+            <IconButton onClick={handleTooltipOpen}>
+              <InfoIcon />
+            </IconButton>
+          </Tooltip>
+        </div>
+      </ClickAwayListener>
+    </>
+  );
+}