From 9d8491dd6d203df40c3843a2fd2847ccb342b837 Mon Sep 17 00:00:00 2001
From: Tamara <tamara.zelenko555@yandex.ru>
Date: Sun, 10 Mar 2024 03:10:40 +0300
Subject: [PATCH] =?UTF-8?q?=D0=BC=D0=BE=D0=B1=D0=B8=D0=BB=D1=8C=D0=BD?=
 =?UTF-8?q?=D0=B0=D1=8F=20=D0=B0=D0=B4=D0=B0=D0=BF=D1=82=D0=B0=D1=86=D0=B8?=
 =?UTF-8?q?=D1=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/kitUI/Cart/Cart.tsx                       |  6 ++++--
 src/pages/Authorization/signin.tsx            |  5 +++--
 src/pages/Setting/FormCreateRoles.tsx         | 21 ++++++++++---------
 src/pages/Setting/SettingRoles.tsx            | 20 +++++++++++++++---
 .../DiscountManagement/ControlPanel.tsx       | 12 +++++++++--
 .../Content/Tariffs/CreateTariff.tsx          |  1 +
 src/pages/dashboard/Content/Users.tsx         |  2 +-
 src/pages/dashboard/Menu/index.tsx            |  4 ++--
 8 files changed, 49 insertions(+), 22 deletions(-)

diff --git a/src/kitUI/Cart/Cart.tsx b/src/kitUI/Cart/Cart.tsx
index fc3fc52..1dcb5c5 100644
--- a/src/kitUI/Cart/Cart.tsx
+++ b/src/kitUI/Cart/Cart.tsx
@@ -11,7 +11,7 @@ import {
     Alert,
     Checkbox,
     FormControlLabel,
-    useTheme
+    useTheme, useMediaQuery
 } from "@mui/material";
 import Input from "@kitUI/input";
 import { useState } from "react";
@@ -29,6 +29,7 @@ import { currencyFormatter } from "@root/utils/currencyFormatter";
 
 export default function Cart() {
     const theme = useTheme();
+    const mobile = useMediaQuery(theme.breakpoints.down(400));
     let discounts = useDiscountStore(state => state.discounts);
     const cartData = useCartStore((store) => store.cartData);
     const tariffs = useTariffStore(state => state.tariffs);
@@ -84,6 +85,7 @@ export default function Cart() {
                     alignItems: "center",
                     justifyContent: "space-between",
                     gap: "20px",
+                    flexDirection: mobile ? "column" : undefined
                 }}
             >
                 <FormControlLabel
@@ -143,7 +145,7 @@ export default function Cart() {
                         padding: "3px",
                         display: "flex",
                         flexDirection: "column",
-                        ml: "auto",
+                        ml: mobile ? 0 : "auto",
                     }}
                 >
                     <Input
diff --git a/src/pages/Authorization/signin.tsx b/src/pages/Authorization/signin.tsx
index 107ff22..c7defab 100644
--- a/src/pages/Authorization/signin.tsx
+++ b/src/pages/Authorization/signin.tsx
@@ -8,7 +8,7 @@ import {
   Checkbox,
   Typography,
   FormControlLabel,
-  Button,
+  Button, useMediaQuery,
 } from "@mui/material";
 import Logo from "@pages/Logo";
 import OutlinedInput from "@kitUI/outlinedInput";
@@ -44,7 +44,7 @@ function validate(values: Values) {
 const SigninForm = () => {
   const theme = useTheme();
   const navigate = useNavigate();
-
+  const isMobile = useMediaQuery(theme.breakpoints.down(600));
   const initialValues: Values = {
     email: "",
     password: "",
@@ -99,6 +99,7 @@ const SigninForm = () => {
                 "> *": {
                   marginTop: "15px",
                 },
+                padding: isMobile ? "0 16px" : undefined
               }}
             >
               <Logo />
diff --git a/src/pages/Setting/FormCreateRoles.tsx b/src/pages/Setting/FormCreateRoles.tsx
index 2621fec..b70cbe8 100644
--- a/src/pages/Setting/FormCreateRoles.tsx
+++ b/src/pages/Setting/FormCreateRoles.tsx
@@ -1,14 +1,14 @@
 import { useState } from "react";
 
 import {
-  Button,
-  Checkbox,
-  FormControl,
-  ListItemText,
-  MenuItem,
-  Select,
-  SelectChangeEvent,
-  TextField,
+    Button,
+    Checkbox,
+    FormControl,
+    ListItemText,
+    MenuItem,
+    Select,
+    SelectChangeEvent,
+    TextField, useMediaQuery, useTheme,
 } from "@mui/material";
 import { MOCK_DATA_USERS } from "@root/api/roles";
 
@@ -24,7 +24,8 @@ const MenuProps = {
 
 export default function CreateForm() {
   const [personName, setPersonName] = useState<string[]>([]);
-
+    const theme = useTheme();
+    const mobile = useMediaQuery(theme.breakpoints.down(400));
   const handleChange = (event: SelectChangeEvent<typeof personName>) => {
     const {
       target: { value },
@@ -39,7 +40,7 @@ export default function CreateForm() {
         fullWidth
         sx={{
           alignItems: "center",
-          width: "400px",
+          width: mobile ? "320px" : "400px",
           "& .MuiInputBase-root": {
             backgroundColor: "#F2F3F7",
             height: "48px",
diff --git a/src/pages/Setting/SettingRoles.tsx b/src/pages/Setting/SettingRoles.tsx
index 5937b40..ef7f5d0 100644
--- a/src/pages/Setting/SettingRoles.tsx
+++ b/src/pages/Setting/SettingRoles.tsx
@@ -1,4 +1,14 @@
-import { AccordionDetails, Table, TableBody, TableCell, TableHead, TableRow, Typography } from "@mui/material";
+import {
+    AccordionDetails,
+    Table,
+    TableBody,
+    TableCell,
+    TableHead,
+    TableRow,
+    Typography,
+    useMediaQuery,
+    useTheme
+} from "@mui/material";
 
 import { CustomWrapper } from "@root/kitUI/CustomWrapper";
 
@@ -9,15 +19,19 @@ import { PrivilegesWrapper } from "./PrivilegiesWrapper";
 import theme from "../../theme";
 
 export const SettingRoles = (): JSX.Element => {
+    const theme = useTheme();
+    const mobile = useMediaQuery(theme.breakpoints.down(400));
   return (
-    <AccordionDetails sx={{ width: "890px" }}>
+    <AccordionDetails sx={{ maxWidth: "890px",
+        width: "100%", }}>
       <CustomWrapper
         text="Роли"
         children={
           <>
             <Table
               sx={{
-                width: "890px",
+                maxWidth: "890px",
+                width: "100%",
                 border: "2px solid",
                 borderColor: "gray",
               }}
diff --git a/src/pages/dashboard/Content/DiscountManagement/ControlPanel.tsx b/src/pages/dashboard/Content/DiscountManagement/ControlPanel.tsx
index a13298f..9a40332 100644
--- a/src/pages/dashboard/Content/DiscountManagement/ControlPanel.tsx
+++ b/src/pages/dashboard/Content/DiscountManagement/ControlPanel.tsx
@@ -1,6 +1,6 @@
 import { enqueueSnackbar } from "notistack";
 import { GridSelectionModel } from "@mui/x-data-grid";
-import { Box, Button } from "@mui/material";
+import {Box, Button, useMediaQuery, useTheme} from "@mui/material";
 
 import { changeDiscount } from "@root/api/discounts";
 import { findDiscountsById } from "@root/stores/discounts";
@@ -11,6 +11,8 @@ interface Props {
   selectedRows: GridSelectionModel;
 }
 export default function DiscountDataGrid({ selectedRows }: Props) {
+  const theme = useTheme();
+  const mobile = useMediaQuery(theme.breakpoints.down(400));
   const changeData = async (isActive: boolean) => {
     let done = 0;
     let fatal = 0;
@@ -46,7 +48,13 @@ export default function DiscountDataGrid({ selectedRows }: Props) {
   };
 
   return (
-    <Box width="400px" display="flex" justifyContent="space-between">
+    <Box
+        sx={{
+          width: mobile ? "250px" : "400px",
+          display: "flex",
+          justifyContent: "space-between",
+          flexDirection: mobile ? "column" : undefined,
+          gap: "10px"}}>
       <Button onClick={() => changeData(false)}>Активировать</Button>
       <Button onClick={() => changeData(true)}>Деактивировать</Button>
     </Box>
diff --git a/src/pages/dashboard/Content/Tariffs/CreateTariff.tsx b/src/pages/dashboard/Content/Tariffs/CreateTariff.tsx
index 1ba890b..f3785e1 100644
--- a/src/pages/dashboard/Content/Tariffs/CreateTariff.tsx
+++ b/src/pages/dashboard/Content/Tariffs/CreateTariff.tsx
@@ -187,6 +187,7 @@ export default function CreateTariff() {
                               data-cy={`select-option-${privilege.description}`}
                               key={privilege.description}
                               value={privilege._id}
+                              sx={{whiteSpace: "normal", wordBreak: "break-world"}}
                           >
                             {privilege.serviceKey}:{privilege.description}
                           </MenuItem>
diff --git a/src/pages/dashboard/Content/Users.tsx b/src/pages/dashboard/Content/Users.tsx
index 4eece62..1426cf5 100644
--- a/src/pages/dashboard/Content/Users.tsx
+++ b/src/pages/dashboard/Content/Users.tsx
@@ -159,7 +159,7 @@ const Users: React.FC = () => {
             {accordionText}
           </Typography>
         </AccordionSummary>
-        <AccordionDetails>
+        <AccordionDetails sx={{overflowX: "auto"}}>
           <Table
             sx={{
               width: "100%",
diff --git a/src/pages/dashboard/Menu/index.tsx b/src/pages/dashboard/Menu/index.tsx
index aec86e4..08d436a 100644
--- a/src/pages/dashboard/Menu/index.tsx
+++ b/src/pages/dashboard/Menu/index.tsx
@@ -172,9 +172,9 @@ const Navigation = (props: Props) => {
 };
 
 const Menu: React.FC = () => {
-  const tablet = useMediaQuery("(max-width:600px)");
+  const tablet = useMediaQuery("(max-width:900px)");
 
-  const mobile = useMediaQuery("(max-width:340px)");
+  const mobile = useMediaQuery("(max-width:600px)");
 
   const theme = useTheme();
   const [open, setOpen] = React.useState(tablet ? false : true);