Restyle all form and dialog buttons

ZdruzenieSTROM · Dec 9, 2023 · 8901ea1 · 8901ea1
1 parent 1b6cf4b
commit 8901ea1
Show file tree

Hide file tree

Showing 9 changed files with 87 additions and 91 deletions.
diff --git a/src/components/FormItems/Form.module.scss b/src/components/FormItems/Form.module.scss
diff --git a/src/components/FormItems/Form.module.scss.d.ts b/src/components/FormItems/Form.module.scss.d.ts
diff --git a/src/components/PageLayout/LoginForm/LoginForm.tsx b/src/components/PageLayout/LoginForm/LoginForm.tsx
@@ -1,8 +1,8 @@
+import {Stack} from '@mui/material'
 import {FC} from 'react'
 import {SubmitHandler, useForm} from 'react-hook-form'
 
 import {Button} from '@/components/Clickable/Button'
-import styles from '@/components/FormItems/Form.module.scss'
 import {FormInput} from '@/components/FormItems/FormInput/FormInput'
 import {AuthContainer} from '@/utils/AuthContainer'
 
@@ -31,21 +31,27 @@ export const LoginForm: FC<ILoginForm> = ({closeOverlay}) => {
   const requiredRule = {required: '* Toto pole nemôže byť prázdne.'}
 
   return (
-    <form className={styles.form} onSubmit={handleSubmit(onSubmit)}>
-      <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} />
-      <Button type="submit">Prihlásiť</Button>
+    <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 alignItems="center" mt={2}>
+          <Button variant="button2" type="submit">
+            Prihlásiť
+          </Button>
+        </Stack>
+      </Stack>
     </form>
   )
 }
diff --git a/src/components/Problems/Discussion.tsx b/src/components/Problems/Discussion.tsx
@@ -109,14 +109,14 @@ export const Discussion: FC<DiscussionProps> = ({problemId, problemNumber, close
         title="Vymazať komentár?"
         contentText="Komentár bude nenávratne vymazaný."
         actions={
-          <>
+          <Stack direction="row" gap={2}>
             <Button variant="button2" onClick={close}>
               Zavrieť
             </Button>
             <Button variant="button2" onClick={agree}>
               Potvrdiť
             </Button>
-          </>
+          </Stack>
         }
       />
       <Stack my={1} mx={2} gap={1} sx={{overflow: 'hidden'}}>

diff --git a/src/components/Problems/UploadProblemForm.tsx b/src/components/Problems/UploadProblemForm.tsx
@@ -1,3 +1,4 @@
+import {Stack} from '@mui/material'
 import {useMutation} from '@tanstack/react-query'
 import axios from 'axios'
 import {Dispatch, FC, SetStateAction, useState} from 'react'
@@ -95,14 +96,14 @@ export const UploadProblemForm: FC<{
         title="Pozor"
         contentText={alertMessage}
         actions={
-          <>
+          <Stack direction="row" gap={2}>
             <Button variant="button2" onClick={cancel}>
               Zrušiť
             </Button>
             <Button variant="button2" onClick={closeAlertDialog}>
               Pokračovať
             </Button>
-          </>
+          </Stack>
         }
       />
       <div className={styles.inputWrapper}>

diff --git a/src/components/Profile/PasswordChangeForm.tsx b/src/components/Profile/PasswordChangeForm.tsx
@@ -1,9 +1,9 @@
+import {Stack} from '@mui/material'
 import {useMutation} from '@tanstack/react-query'
 import axios, {AxiosError} from 'axios'
 import {FC} from 'react'
 import {SubmitHandler, useForm} from 'react-hook-form'
 
-import styles from '@/components/FormItems/Form.module.scss'
 import {IGeneralPostResponse} from '@/types/api/general'
 
 import {Button} from '../Clickable/Button'
@@ -73,48 +73,50 @@ export const PasswordChangeDialog: FC<PasswordChangeDialogProps> = ({open, close
       close={close}
       title="Zmena hesla"
       contentText={
-        <form className={styles.form} onSubmit={handleSubmit(onSubmit)}>
-          <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ú.'
-              },
-            }}
-          />
+        <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>
           <Button type="submit" onClick={handleSubmit(onSubmit)}>
             Potvrdiť
           </Button>
-        </>
+        </Stack>
       }
     />
   )

diff --git a/src/components/Profile/ProfileForm.tsx b/src/components/Profile/ProfileForm.tsx
@@ -112,7 +112,7 @@ export const ProfileForm: FC = () => {
       <Stack spacing={5}>
         <FormInput control={control} name="first_name" label="krstné meno*" rules={requiredRule} />
         <FormInput control={control} name="last_name" label="priezvisko*" rules={requiredRule} />
-        <SchoolSubForm control={control} watch={watch} setValue={setValue} />
+        <SchoolSubForm control={control} watch={watch} setValue={setValue} spacing={5} />
         <FormInput control={control} name="phone" label="telefónne číslo" rules={phoneRule} />
         <FormInput control={control} name="parent_phone" label="telefónne číslo na rodiča" rules={phoneRule} />
         <p style={{fontWeight: 'bold'}}>* takto označéné polia sú povinné</p>

diff --git a/src/components/RegisterForm/RegisterForm.tsx b/src/components/RegisterForm/RegisterForm.tsx
@@ -1,10 +1,10 @@
+import {Stack, Typography} from '@mui/material'
 import {useMutation} from '@tanstack/react-query'
 import axios, {AxiosError} from 'axios'
 import {useRouter} from 'next/router'
 import {FC} from 'react'
 import {SubmitHandler, useForm} from 'react-hook-form'
 
-import styles from '@/components/FormItems/Form.module.scss'
 import {FormInput} from '@/components/FormItems/FormInput/FormInput'
 import {IGeneralPostResponse} from '@/types/api/general'
 import {useSeminarInfo} from '@/utils/useSeminarInfo'
@@ -102,8 +102,8 @@ export const RegisterForm: FC = () => {
     },
   }
   return (
-    <div>
-      <form className={styles.form} onSubmit={handleSubmit(onSubmit)}>
+    <form onSubmit={handleSubmit(onSubmit)}>
+      <Stack gap={2}>
         <FormInput
           control={control}
           name="email"
@@ -143,18 +143,22 @@ export const RegisterForm: FC = () => {
         />
         <FormInput control={control} name="first_name" label="krstné meno*" rules={requiredRule} />
         <FormInput control={control} name="last_name" label="priezvisko*" rules={requiredRule} />
-        <SchoolSubForm control={control} watch={watch} setValue={setValue} />
+        <SchoolSubForm control={control} watch={watch} setValue={setValue} spacing={2} />
         <FormInput control={control} name="phone" label="telefónne číslo" rules={phoneRule} />
         <FormInput control={control} name="parent_phone" label="telefónne číslo na rodiča" rules={phoneRule} />
-        <p style={{fontWeight: 'bold'}}>* takto označéné polia sú povinné</p>
-        <p>
+        <Typography variant="body2" fontWeight={800}>
+          * takto označéné polia sú povinné
+        </Typography>
+        <Typography variant="body2">
           Vyplnením a odoslaním registrácie beriem na vedomie, že moje osobné údaje budú spracované v súlade so zákonom
           o ochrane osobných údajov. Bližšie informácie nájdete <Link href={`./gdpr`}>tu</Link>.
-        </p>
-        <Button type="submit" onClick={scrollToTop}>
-          Registrovať
-        </Button>
-      </form>
-    </div>
+        </Typography>
+        <Stack alignItems="center" mt={2}>
+          <Button variant="button2" type="submit" onClick={scrollToTop}>
+            Registrovať
+          </Button>
+        </Stack>
+      </Stack>
+    </form>
   )
 }
diff --git a/src/components/SchoolSubForm/SchoolSubForm.tsx b/src/components/SchoolSubForm/SchoolSubForm.tsx
@@ -1,10 +1,10 @@
+import {Stack} from '@mui/material'
 import {useQuery} from '@tanstack/react-query'
 import axios from 'axios'
 import {useRef} from 'react'
 import {Control, UseFormSetValue, UseFormWatch} from 'react-hook-form'
 import {useUpdateEffect} from 'usehooks-ts'
 
-import styles from '@/components/FormItems/Form.module.scss'
 import {IGrade} from '@/types/api/competition'
 import {ISchool} from '@/types/api/personal'
 
@@ -25,9 +25,10 @@ type SchoolSubFormProps<T extends SchoolSubFormValues> = {
   control: Control<T, unknown>
   watch: UseFormWatch<T>
   setValue: UseFormSetValue<T>
+  spacing: number
 }
 
-export const SchoolSubForm = ({control, watch, setValue}: SchoolSubFormProps<SchoolSubFormValues>) => {
+export const SchoolSubForm = ({control, watch, setValue, spacing}: SchoolSubFormProps<SchoolSubFormValues>) => {
   const [school_not_found, without_school] = watch(['school_not_found', 'without_school'])
 
   const otherSchoolItem = useRef<SelectOption>()
@@ -80,7 +81,7 @@ export const SchoolSubForm = ({control, watch, setValue}: SchoolSubFormProps<Sch
 
   const requiredRule = {required: '* Toto pole nemôže byť prázdne.'}
   return (
-    <div className={styles.form}>
+    <Stack gap={spacing}>
       <FormCheckbox control={control} name="without_school" label="nie som študent základnej ani strednej školy." />
       <FormAutocomplete
         control={control}
@@ -113,6 +114,6 @@ export const SchoolSubForm = ({control, watch, setValue}: SchoolSubFormProps<Sch
         disabled={!gradeItems.length || without_school}
         rules={requiredRule}
       />
-    </div>
+    </Stack>
   )
 }