Fixed behavior of size of dialogs

src/components/Dialog/Dialog.tsx

@@ -1,39 +1,33 @@
-import {
-  Dialog as MuiDialog,
-  DialogActions,
-  DialogContent,
-  DialogContentText,
-  DialogTitle,
-  Typography,
-} from '@mui/material'
+import {Dialog as MuiDialog, DialogActions, DialogContent, DialogContentText, DialogTitle} from '@mui/material'
 import {FC, ReactNode} from 'react'
 
 type DialogProps = {
   open: boolean
   close: () => void
   title?: ReactNode
-  contentText?: ReactNode
+  contentText?: string
+  children?: ReactNode
   actions?: ReactNode
 }
 
 // inspired by: https://mui.com/material-ui/react-dialog/#alerts
-export const Dialog: FC<DialogProps> = ({open, close, title, contentText, actions}) => {
+export const Dialog: FC<DialogProps> = ({open, close, title, contentText, children, actions}) => {
   return (
     <MuiDialog
       open={open}
       onClose={close}
       aria-labelledby="alert-dialog-title"
       aria-describedby="alert-dialog-description"
-      sx={{border: '10px solid black'}}
     >
       {title && (
-        <DialogTitle id="alert-dialog-title">
-          <Typography variant="h2">{title}</Typography>
+        <DialogTitle id="alert-dialog-title" variant="h2">
+          {title}
         </DialogTitle>
       )}
-      {contentText && (
+      {(contentText || children) && (
         <DialogContent>
-          <DialogContentText id="alert-dialog-description">{contentText}</DialogContentText>
+          {contentText && <DialogContentText id="alert-dialog-description">{contentText}</DialogContentText>}
+          {children}
         </DialogContent>
       )}
       {actions && <DialogActions>{actions}</DialogActions>}

src/components/PageLayout/Authentication/Authentication.tsx

@@ -35,12 +35,9 @@ export const Authentication: FC = () => {
           <Link href={`/${seminar}/registracia`}>Registrovať</Link>
           <span onClick={toggleDisplayAuthenticationDialog}>Prihlásiť</span>
         </div>
-        <Dialog
-          open={displayAuthenticationDialog}
-          close={toggleDisplayAuthenticationDialog}
-          title="Prihlásenie"
-          contentText={<LoginFormWrapper closeDialog={toggleDisplayAuthenticationDialog} />}
-        />
+        <Dialog open={displayAuthenticationDialog} close={toggleDisplayAuthenticationDialog} title="Prihlásenie">
+          <LoginFormWrapper closeDialog={toggleDisplayAuthenticationDialog} />
+        </Dialog>
       </>
     )
   } else {

src/components/PageLayout/LoginForm/LoginForm.tsx

@@ -40,20 +40,22 @@ export const LoginForm: FC<LoginFormWrapperProps> = ({closeDialog: closeDialog})
 
   return (
     <form onSubmit={handleSubmit(onSubmit)}>
-      <Stack gap={2}>
-        <FormInput
-          control={control}
-          name="email"
-          label="Email"
-          rules={{
-            ...requiredRule,
-            pattern: {
-              value: /^[\w%+.-]+@[\d.a-z-]+\.[a-z]{2,}$/iu,
-              message: '* Vložte správnu emailovú adresu.',
-            },
-          }}
-        />
-        <FormInput control={control} name="password" label="Heslo" type="password" rules={requiredRule} />
+      <Stack justifyContent="space-between" height="260px">
+        <Stack gap={2}>
+          <FormInput
+            control={control}
+            name="email"
+            label="Email"
+            rules={{
+              ...requiredRule,
+              pattern: {
+                value: /^[\w%+.-]+@[\d.a-z-]+\.[a-z]{2,}$/iu,
+                message: '* Vložte správnu emailovú adresu.',
+              },
+            }}
+          />
+          <FormInput control={control} name="password" label="Heslo" type="password" rules={requiredRule} />
+        </Stack>
         <Stack alignItems="center" mt={2}>
           <Button variant="button2" type="submit">
             Prihlásiť

src/components/PageLayout/LoginFormWrapper/LoginFormWrapper.tsx

@@ -12,7 +12,7 @@ export type LoginFormWrapperProps = {
   closeDialog: () => void
 }
 
-export const LoginFormWrapper: FC<LoginFormWrapperProps> = ({closeDialog: closeDialog}) => {
+export const LoginFormWrapper: FC<LoginFormWrapperProps> = ({closeDialog}) => {
   const router = useRouter()
   const [form, changeForm] = useState('login')
 
@@ -35,10 +35,21 @@ export const LoginFormWrapper: FC<LoginFormWrapperProps> = ({closeDialog: closeD
     )
 
   return (
-    <PasswordResetRequestForm
-      closeDialog={() => {
-        router.push(`/${seminar}/reset-sent`)
-      }}
-    />
+    <Stack gap={2}>
+      <PasswordResetRequestForm
+        closeDialog={() => {
+          router.push(`/${seminar}/reset-sent`)
+        }}
+      />
+      <Stack alignItems="center" mt={2}>
+        <Button
+          onClick={() => {
+            changeForm('login')
+          }}
+        >
+          Prihlásenie
+        </Button>
+      </Stack>
+    </Stack>
   )
 }

src/components/PageLayout/PasswordResetRequest/PasswordResetRequest.tsx

@@ -39,7 +39,7 @@ export const PasswordResetRequestForm: FC<LoginFormWrapperProps> = ({closeDialog
 
   return (
     <form onSubmit={handleSubmit(onSubmit)}>
-      <Stack gap={2}>
+      <Stack justifyContent="space-between" height="160px">
         <FormInput
           control={control}
           name="email"

src/components/Problems/Problems.tsx

@@ -17,7 +17,7 @@ import {useHasPermissions} from '@/utils/useHasPermissions'
 
 import {Dialog} from '../Dialog/Dialog'
 import {Loading} from '../Loading/Loading'
-import {LoginFormWrapper} from '../PageLayout/LoginFormWrapper/LoginFormWrapper'
+import {LoginForm} from '../PageLayout/LoginForm/LoginForm'
 import {Discussion} from './Discussion'
 import {Problem} from './Problem'
 import styles from './Problems.module.scss'
@@ -127,26 +127,6 @@ export const Problems: FC = () => {
         open={displayRegisterDialog}
         close={closeRegisterDialog}
         title="Skontroluj prosím, čí údaje o ročníku a škole sú správne."
-        contentText={
-          <Stack gap={2}>
-            <Stack direction={'row'} gap={1}>
-              <Typography variant="h3" component="span">
-                Škola
-              </Typography>
-              <Typography variant="h3" fontStyle="normal" fontWeight="400" textTransform="none" component="span">
-                {profile?.school.verbose_name}
-              </Typography>
-            </Stack>
-            <Stack direction={'row'} gap={1}>
-              <Typography variant="h3" component="span">
-                Ročník
-              </Typography>
-              <Typography variant="h3" fontStyle="normal" fontWeight="400" textTransform="none" component="span">
-                {profile?.grade_name}
-              </Typography>
-            </Stack>
-          </Stack>
-        }
         actions={
           <Stack direction="row" gap={2}>
             <Button variant="button2" onClick={editProfile}>
@@ -157,18 +137,34 @@ export const Problems: FC = () => {
             </Button>
           </Stack>
         }
-      />
-      <Dialog
-        open={displayLoginDialog}
-        close={closeLoginDialog}
-        title="Prihlásenie"
-        contentText={
-          <Stack alignItems={'center'} gap={3}>
-            <Typography variant="body1">Pre odovzdanie sa prihlás.</Typography>
-            <LoginFormWrapper closeDialog={closeLoginDialog} />
+      >
+        <Stack gap={2}>
+          <Stack direction={'row'} gap={1}>
+            <Typography variant="h3" component="span">
+              Škola
+            </Typography>
+            <Typography variant="h3" fontStyle="normal" fontWeight="400" textTransform="none" component="span">
+              {profile?.school.verbose_name}
+            </Typography>
           </Stack>
-        }
-      />
+          <Stack direction={'row'} gap={1}>
+            <Typography variant="h3" component="span">
+              Ročník
+            </Typography>
+            <Typography variant="h3" fontStyle="normal" fontWeight="400" textTransform="none" component="span">
+              {profile?.grade_name}
+            </Typography>
+          </Stack>
+        </Stack>
+      </Dialog>
+
+      <Dialog open={displayLoginDialog} close={closeLoginDialog} title="Prihlásenie">
+        <Stack alignItems={'center'} gap={3}>
+          <Typography variant="body1">Pre odovzdanie sa prihlás.</Typography>
+          <LoginForm closeDialog={closeLoginDialog} />
+        </Stack>
+      </Dialog>
+
       <Stack gap={5}>
         {(loading.semesterListIsLoading ||
           loading.currentSeriesIsLoading ||

src/components/Profile/PasswordChangeForm.tsx

@@ -72,44 +72,6 @@ export const PasswordChangeDialog: FC<PasswordChangeDialogProps> = ({open, close
       open={open}
       close={close}
       title="Zmena hesla"
-      contentText={
-        <form onSubmit={handleSubmit(onSubmit)}>
-          <Stack gap={2}>
-            <FormInput
-              control={control}
-              name="old_password"
-              label="aktuálne heslo"
-              type="password"
-              rules={requiredRule}
-            />
-            <FormInput
-              control={control}
-              name="new_password1"
-              label="nové heslo"
-              type="password"
-              rules={{
-                ...requiredRule,
-                minLength: {
-                  value: 8,
-                  message: '* Toto heslo je príliš krátke. Musí obsahovať aspoň 8 znakov.',
-                },
-              }}
-            />
-            <FormInput
-              control={control}
-              name="new_password2"
-              label="nové heslo znovu"
-              type="password"
-              rules={{
-                ...requiredRule,
-                validate: (val) => {
-                  if (val !== getValues().new_password1) return '* Zadané heslá sa nezhodujú.'
-                },
-              }}
-            />
-          </Stack>
-        </form>
-      }
       actions={
         <Stack direction="row" gap={2}>
           <Button onClick={onClose}>Zavrieť</Button>
@@ -118,6 +80,43 @@ export const PasswordChangeDialog: FC<PasswordChangeDialogProps> = ({open, close
           </Button>
         </Stack>
       }
-    />
+    >
+      <form onSubmit={handleSubmit(onSubmit)}>
+        <Stack gap={2} mt={4} height="350px">
+          <FormInput
+            control={control}
+            name="old_password"
+            label="aktuálne heslo"
+            type="password"
+            rules={requiredRule}
+          />
+          <FormInput
+            control={control}
+            name="new_password1"
+            label="nové heslo"
+            type="password"
+            rules={{
+              ...requiredRule,
+              minLength: {
+                value: 8,
+                message: '* Toto heslo je príliš krátke. Musí obsahovať aspoň 8 znakov.',
+              },
+            }}
+          />
+          <FormInput
+            control={control}
+            name="new_password2"
+            label="nové heslo znovu"
+            type="password"
+            rules={{
+              ...requiredRule,
+              validate: (val) => {
+                if (val !== getValues().new_password1) return '* Zadané heslá sa nezhodujú.'
+              },
+            }}
+          />
+        </Stack>
+      </form>
+    </Dialog>
   )
 }

src/theme.ts

@@ -76,13 +76,16 @@ const _theme = createTheme({
         paper: {
           '& > div.MuiDialogContent-root': {paddingTop: '20px'},
           border: '10px solid black',
+          width: '100%',
         },
       },
     },
     MuiDialogActions: {
       styleOverrides: {
         root: {
           paddingBottom: '20px',
+          paddingLeft: '20px',
+          paddingRight: '20px',
         },
       },
     },