кнопка пополнить и адаптация для результатов

src/pages/Tariffs/Tariffs.tsx

@@ -15,7 +15,7 @@ import {
   Typography,
   useMediaQuery,
   useTheme,
-  IconButton
+  IconButton,
 } from "@mui/material";
 import { enqueueSnackbar } from "notistack";
 import { Tariff, getMessageFromFetchError } from "@frontend/kitui";
@@ -58,8 +58,8 @@ function TariffPage() {
       setUser(user);
       setTariffs(tariffs);
       setDiscounts(discounts.Discounts);
-      let c = currencyFormatter.format(Number(user.wallet.cash) / 100)
-      setCash(c)
+      let c = currencyFormatter.format(Number(user.wallet.cash) / 100);
+      setCash(c);
     };
     get();
   }, []);
@@ -85,9 +85,8 @@ function TariffPage() {
           method: "POST",
           url: "https://squiz.pena.digital/customer/cart/pay",
         });
-        setCash(currencyFormatter.format(Number(data.wallet.cash) / 100))
+        setCash(currencyFormatter.format(Number(data.wallet.cash) / 100));
         enqueueSnackbar("Тариф успешно приобретён");
-
       } catch (e) {
         enqueueSnackbar("Произошла ошибка. Попробуйте позже");
       }
@@ -98,8 +97,9 @@ function TariffPage() {
       // history.pushState({}, null, "https://hub.pena.digital/wallet?action=squizpay");
 
       var link = document.createElement("a");
-      link.href = `https://hub.pena.digital/payment?action=squizpay&dif=${(price - Number(user.wallet.cash)) * 100
-        }`;
+      link.href = `https://hub.pena.digital/payment?action=squizpay&dif=${
+        (price - Number(user.wallet.cash)) * 100
+      }`;
       document.body.appendChild(link);
       //   link.click();
     }
@@ -179,8 +179,9 @@ function TariffPage() {
           display: "grid",
           gap: "40px",
           p: "20px",
-          gridTemplateColumns: `repeat(auto-fit, minmax(300px, ${isTablet ? "436px" : "360px"
-            }))`,
+          gridTemplateColumns: `repeat(auto-fit, minmax(300px, ${
+            isTablet ? "436px" : "360px"
+          }))`,
         }}
       >
         {createTariffElements(
@@ -231,7 +232,7 @@ export const Tariffs = withErrorBoundary(TariffPage, {
       Ошибка загрузки тарифов
     </Typography>
   ),
-  onError: () => { },
+  onError: () => {},
 });
 
 const LoadingPage = () => (
@@ -269,7 +270,7 @@ export const inCart = () => {
       }
     });
   } else {
-    localStorage.setItem("saveCart", "[]")
+    localStorage.setItem("saveCart", "[]");
   }
 };
 const outCart = (cart: string[]) => {

src/pages/ViewPublicationPage/ResultForm.tsx

@@ -1,4 +1,10 @@
-import { Box, Typography, Button } from "@mui/material";
+import {
+  Box,
+  Typography,
+  Button,
+  useMediaQuery,
+  useTheme,
+} from "@mui/material";
 import { getQuestionByContentId } from "@root/questions/actions";
 
 import { useCurrentQuiz } from "@root/quizes/hooks";
@@ -24,6 +30,8 @@ export const ResultForm = ({
 }: ResultFormProps) => {
   const quiz = useCurrentQuiz();
   const mode = modes;
+  const theme = useTheme();
+  const isMobile = useMediaQuery(theme.breakpoints.down(650));
   const { questions } = useQuestionsStore();
   const resultQuestion = (questions.find(
     (question) =>
@@ -58,15 +66,16 @@ export const ResultForm = ({
           display: "flex",
           flexDirection: "column",
           alignItems: "start",
-          width: "490px",
+          width: isMobile ? "100%" : "490px",
+          padding: isMobile ? "0 16px" : undefined,
         }}
       >
         {!resultQuestion?.content.useImage && resultQuestion.content.video && (
           <YoutubeEmbedIframe
             videoUrl={resultQuestion.content.video}
             containerSX={{
-              width: "490px",
-              height: "280px",
+              width: isMobile ? "100%" : "490px",
+              height: isMobile ? "100%" : "280px",
             }}
           />
         )}
@@ -75,10 +84,10 @@ export const ResultForm = ({
             component="img"
             src={resultQuestion.content.back}
             sx={{
-              width: "490px",
-              height: "280px",
+              width: isMobile ? "100%" : "490px",
+              height: isMobile ? "100%" : "280px",
             }}
-          ></Box>
+          />
         )}
         {resultQuestion.description !== "" &&
           resultQuestion.description !== " " && (

src/ui_kit/Header/Header.tsx

@@ -131,7 +131,6 @@ export const Header = ({ setMobileSidebar }: HeaderProps) => {
           />
         ) : (
           <>
-            <ToTariffsButton />
             <Box
               sx={{
                 display: "flex",
@@ -139,6 +138,7 @@ export const Header = ({ setMobileSidebar }: HeaderProps) => {
                 gap: "15px",
               }}
             >
+              <ToTariffsButton color={"#7e2aea"} />
               <LogoutButton onClick={handleLogoutClick} />
             </Box>
           </>

src/ui_kit/Header/HeaderFull.tsx

@@ -58,7 +58,7 @@ export default function HeaderFull() {
         <Logotip width={124} />
       </Link>
       <Box sx={{ display: "flex", ml: "auto" }}>
-        <ToTariffsButton />
+        <ToTariffsButton color={"#7e2aea"} />
         <LogoutButton
           onClick={handleLogoutClick}
           sx={{