адаптивность для тарифов и страницы пользователей

src/Components/LoggedIn/Content/Tariffs/Contractor/index.tsx

@@ -36,8 +36,7 @@ const Contractor: React.FC<MWProps> = ({ openModal }) =>  {
           onClick={ () => openModal(3, 1) }
           sx={{
             backgroundColor: theme.palette.menu.main,
-            width: "320px",
+            padding: '11px 65px',
-            height: "82px",
             fontWeight: "normal",
             fontSize: "17px",
             "&:hover": {
@@ -51,8 +50,7 @@ const Contractor: React.FC<MWProps> = ({ openModal }) =>  {
           onClick={ () => openModal(3, 1) }
           sx={{
             backgroundColor: theme.palette.menu.main,
-            width: "320px",
+            padding: '11px 65px',
-            height: "82px",
             fontWeight: "normal",
             fontSize: "17px",
             "&:hover": {
@@ -65,8 +63,7 @@ const Contractor: React.FC<MWProps> = ({ openModal }) =>  {
           variant = "contained"
           sx={{
             backgroundColor: theme.palette.menu.main,
-            width: "320px",
+            padding: '11px 65px',
-            height: "52px",
             fontWeight: "normal",
             fontSize: "17px",
             "&:hover": {

src/Components/LoggedIn/Content/Tariffs/DataGridElement/index.tsx

@@ -305,7 +305,7 @@ console.log(amount)
   }
 
   return (
-    <Box style={{ width: "100%" }}>
+    <Box style={{ width: "93%" }}>
       <Box style={{ height: 400 }}>
         <DataGrid 
           checkboxSelection={true} 
@@ -348,12 +348,13 @@ console.log(amount)
             onClick={ () => openModal() }
             sx={{
               backgroundColor: theme.palette.menu.main,
-              width: "320px",
+              padding: "6px 30px",
-              height: "42px",
               fontWeight: "normal",
               fontSize: "17px",
               marginTop: "45px",
               marginBottom: "15px",
+              maxWidth: '320px',
+              width: '100%',
               "&:hover": {
                 backgroundColor: theme.palette.grayMedium.main
               }
@@ -366,8 +367,7 @@ console.log(amount)
             onClick={ () => handleToBasket() }
             sx={{
               backgroundColor: theme.palette.menu.main,
-              width: "320px",
+              padding: "6px 69px",
-              height: "42px",
               fontWeight: "normal",
               fontSize: "17px",
               marginBottom: "95px",
@@ -387,7 +387,8 @@ console.log(amount)
           marginBottom: "45px",
         }}>
           <Box sx={{
-            width: "480px",
+            maxWidth: "480px",
+            width: '100%',
             display: "flex",
             justifyContent: "space-between",
           }}>
@@ -488,7 +489,8 @@ console.log(amount)
             display: "flex", 
             marginTop: "15px", 
             marginBottom: "15px",
-            width: "350px",
+            maxWidth: "350px",
+            width: '100%',
             justifyContent: "space-between"
           }}>
             <FormControlLabel control={
@@ -526,7 +528,9 @@ console.log(amount)
           
           <List sx={{
             border: "1px solid",
-            borderColor: theme.palette.secondary.main
+            borderColor: theme.palette.secondary.main,
+            maxWidth: '745px',
+            width: '100%',
           }}>
             <ListItem>
               <ListItemAvatar>
@@ -539,15 +543,28 @@ console.log(amount)
               </ListItemAvatar>
               <ListItemText
                 primary="Название"
-                sx={{ textAlign: "center", minWidth: "250px", maxWidth: "250px" }}
+                sx={{
+                  textAlign: "center",
+                  // minWidth: "250px",
+                  maxWidth: "250px",
+                  padding: '0 10px'
+                }}
               />
               <ListItemText
                 primary="Цена"
-                sx={{ textAlign: "center", minWidth: "200px", maxWidth: "200px" }}
+                sx={{
+                  textAlign: "center",
+                  // minWidth: "200px",
+                  padding: '0 10px',
+                  maxWidth: "200px" }}
               />
               <ListItemText
                 primary="Скидки"
-                sx={{ textAlign: "center", minWidth: "200px", maxWidth: "400px" }}
+                sx={{
+                  textAlign: "center",
+                  // minWidth: "200px",
+                  padding: '0 10px',
+                  maxWidth: "400px" }}
               />
               <IconButton edge="end" aria-label="delete">
                 <DeleteIcon sx={{ 

src/Components/LoggedIn/Content/Tariffs/Quiz/index.tsx

@@ -36,8 +36,7 @@ const Quiz: React.FC<MWProps> = ({ openModal }) =>  {
           onClick={ () => openModal(2, 1) }
           sx={{
             backgroundColor: theme.palette.menu.main,
-            width: "320px",
+            padding: "11px 43px",
-            height: "52px",
             fontWeight: "normal",
             fontSize: "17px",
             "&:hover": {
@@ -51,8 +50,7 @@ const Quiz: React.FC<MWProps> = ({ openModal }) =>  {
           onClick={ () => openModal(2, 0) }
           sx={{
             backgroundColor: theme.palette.menu.main,
-            width: "320px",
+            padding: '11px 43px',
-            height: "52px",
             fontWeight: "normal",
             fontSize: "17px",
             "&:hover": {
@@ -65,8 +63,7 @@ const Quiz: React.FC<MWProps> = ({ openModal }) =>  {
           variant = "contained"
           sx={{
             backgroundColor: theme.palette.menu.main,
-            width: "320px",
+            padding: '11px 43px',
-            height: "52px",
             fontWeight: "normal",
             fontSize: "17px",
             "&:hover": {

src/Components/LoggedIn/Content/Tariffs/Templater/index.tsx

@@ -36,10 +36,9 @@ const Templater: React.FC<MWProps> = ({ openModal }) =>  {
           onClick={ () => openModal(1, 1) }
           sx={{
             backgroundColor: theme.palette.menu.main,
-            width: "320px",
-            height: "52px",
             fontWeight: "normal",
             fontSize: "17px",
+            padding: '11px 25px',
             "&:hover": {
               backgroundColor: theme.palette.grayMedium.main
             }
@@ -51,8 +50,7 @@ const Templater: React.FC<MWProps> = ({ openModal }) =>  {
           onClick={ () => openModal(1, 0) }
           sx={{
             backgroundColor: theme.palette.menu.main,
-            width: "320px",
+            padding: '11px 25px',
-            height: "52px",
             fontWeight: "normal",
             fontSize: "17px",
             "&:hover": {
@@ -66,8 +64,7 @@ const Templater: React.FC<MWProps> = ({ openModal }) =>  {
           onClick={ () => openModal(1, 2) }
           sx={{
             backgroundColor: theme.palette.menu.main,
-            width: "320px",
+            padding: '11px 25px',
-            height: "52px",
             fontWeight: "normal",
             fontSize: "17px",
             "&:hover": {
@@ -80,8 +77,7 @@ const Templater: React.FC<MWProps> = ({ openModal }) =>  {
           variant = "contained"
           sx={{
             backgroundColor: theme.palette.menu.main,
-            width: "320px",
+            padding: '11px 25px',
-            height: "52px",
             fontWeight: "normal",
             fontSize: "17px",
             "&:hover": {

src/Components/LoggedIn/Content/Users/index.tsx

@@ -64,8 +64,7 @@ const Users: React.FC = () =>  {
           variant="text"  
           onClick={ () => navigate("/modalAdmin") }
           sx={{
-            width: "90%",
+            width: "84%",
-            height: "60px",
             display: "flex",
             flexDirection: "column",
             justifyContent: "center",
@@ -84,7 +83,7 @@ const Users: React.FC = () =>  {
 
       
         <Accordion sx={{
-          width: "90%",
+          width: "84%",
           backgroundColor: theme.palette.content.main
         }} expanded={ accordionState }>
           <AccordionSummary
@@ -256,12 +255,20 @@ const Users: React.FC = () =>  {
                 color: theme.palette.secondary.main
               } }} 
           />
+          <Box
+            sx={{
+              display: 'flex',
+              justifyContent: 'center',
+              maxWidth: '317px',
+              width: '100%'
+            }}
+          >
             <Button
               variant = "text"
               sx={{
                 backgroundColor: theme.palette.content.main,
                 color: theme.palette.secondary.main,
-              width: "20%",
+                // width: "20%",
                 "&:hover": {
                   backgroundColor: theme.palette.content.main
                 }
@@ -269,6 +276,7 @@ const Users: React.FC = () =>  {
                 НАЙТИ
             </Button>
           </Box>
+        </Box>
 
         <Box sx={{ display: "flex" }}>
           <TextField
@@ -291,6 +299,14 @@ const Users: React.FC = () =>  {
                 color: theme.palette.secondary.main
               } }} 
           />
+          <Box
+              sx={{
+                display: 'flex',
+                justifyContent: 'center',
+                maxWidth: '317px',
+                width: '100%'
+              }}
+          >
             <Button
               variant = "text"
               sx={{
@@ -305,6 +321,7 @@ const Users: React.FC = () =>  {
             </Button>
           </Box>
         </Box>
+      </Box>
 
 
       

src/Components/LoggedIn/Content/index.tsx

@@ -38,7 +38,7 @@ const Content: React.FC<MWProps> = ({ section }) =>  {
         alignItems: "center",
         overflow: "auto",
         overflowY: "auto",
-        padding: "60px"
+        padding: "60px 0"
       }}>
         
         { componentsArray[ section ] }

src/Components/LoggedIn/Header/index.tsx

@@ -11,11 +11,13 @@ const Header: React.FC = () =>  {
       <Box sx={{
         backgroundColor: theme.palette.menu.main,
         width: "100%",
-        height: "85px",
+        minHeight: "85px",
         borderBottom: "1px solid",
         borderColor: theme.palette.grayDark.main,
         display: "flex",
-        justifyContent: "space-between"
+        justifyContent: "space-between",
+        flexWrap: 'wrap',
+        paddingLeft: '5px'
       }}>
         <Box sx={{
           width: "150px",
@@ -32,7 +34,7 @@ const Header: React.FC = () =>  {
           <Typography 
             variant="h6"
             sx={{
-              width: "230px",
+              maxWidth: "230px",
               display: "flex",
               flexDirection: "column",
               justifyContent: "center",
@@ -44,12 +46,12 @@ const Header: React.FC = () =>  {
           </Typography>
 
           <Box sx={{
-            width: "85px",
             display: "flex",
             flexDirection: "column",
             justifyContent: "center",
             alignItems: "center",
-            cursor: "pointer"
+            cursor: "pointer",
+            padding: '0 31px'
           }}>
             <ExitToAppOutlinedIcon sx={{
               color: theme.palette.golden.main,

src/Components/Sections/index.tsx

@@ -71,11 +71,9 @@ const Authorization: React.FC = () =>  {
                 </Box>
 
                 <Button 
-                  variant = "contained"
+                  variant = "enter"
                   sx={{
                     backgroundColor: theme.palette.content.main,
-                    width: "50%",
-                    height: "62px",
                     "&:hover": {
                       backgroundColor: theme.palette.menu.main
                     }
@@ -99,11 +97,9 @@ const Authorization: React.FC = () =>  {
                 </Box>
 
                 <Button 
-                  variant = "contained"
+                  variant = "enter"
                   sx={{
                     backgroundColor: theme.palette.content.main,
-                    width: "50%",
-                    height: "62px",
                     "&:hover": {
                       backgroundColor: theme.palette.menu.main
                     }
@@ -127,11 +123,9 @@ const Authorization: React.FC = () =>  {
                 </Box>
 
                 <Button 
-                  variant = "contained"
+                  variant = "enter"
                   sx={{
                     backgroundColor: theme.palette.content.main,
-                    width: "50%",
-                    height: "62px",
                     "&:hover": {
                       backgroundColor: theme.palette.menu.main
                     }
@@ -155,11 +149,9 @@ const Authorization: React.FC = () =>  {
                 </Box>
 
                 <Button 
-                  variant = "contained"
+                  variant = "enter"
                   sx={{
                     backgroundColor: theme.palette.content.main,
-                    width: "50%",
-                    height: "62px",
                     "&:hover": {
                       backgroundColor: theme.palette.menu.main
                     }