mantine

client/src/pages/Settings.tsx

@@ -1,4 +1,3 @@
-import { Box, Stack } from "@mui/material"
 import UserService from "../services/UserService"
 import { setUserData, useAuthStore } from "../store/auth"
 import { useEffect, useState } from "react"
@@ -6,6 +5,7 @@ import { CreateField } from "../interfaces/create"
 import { IUser } from "../interfaces/user"
 import FormFields from "../components/FormFields"
 import AuthService from "../services/AuthService"
+import { Flex } from "@mantine/core"
 
 export default function Settings() {
     const { token } = useAuthStore()
@@ -39,37 +39,31 @@ export default function Settings() {
     ]
 
     return (
-        <Box
-            sx={{
-                display: "flex",
-                flexDirection: "column",
-                alignItems: "flex-start",
-                gap: "16px",
-            }}
+        <Flex
+            direction='column'
+            align='flex-start'
+            gap='sm'
+            p='sm'
         >
             {currentUser &&
-                <Stack spacing={2} width='100%'>
-                    <Stack width='100%'>
-                        <FormFields
-                            fields={profileFields}
-                            defaultValues={currentUser}
-                            mutateHandler={(data: any) => {
-                                setUserData(data)
-                            }}
-                            submitHandler={(data) => UserService.updateUser({ id: currentUser.id, ...data })}
-                            title="Пользователь"
-                        />
-                    </Stack>
+                <Flex direction='column' gap='sm' w='100%'>
+                    <FormFields
+                        fields={profileFields}
+                        defaultValues={currentUser}
+                        mutateHandler={(data: any) => {
+                            setUserData(data)
+                        }}
+                        submitHandler={(data) => UserService.updateUser({ id: currentUser.id, ...data })}
+                        title="Пользователь"
+                    />
 
-                    <Stack width='100%'>
-                        <FormFields
-                            fields={passwordFields}
-                            submitHandler={(data) => AuthService.updatePassword({ id: currentUser.id, ...data })}
-                            title="Смена пароля"
-                        />
-                    </Stack>
-                </Stack>
+                    <FormFields
+                        fields={passwordFields}
+                        submitHandler={(data) => AuthService.updatePassword({ id: currentUser.id, ...data })}
+                        title="Смена пароля"
+                    />
+                </Flex>
             }
-        </Box>
+        </Flex>
     )
 }