Redesign Chcem riesit dialog

- solve #201 (#201)
ZdruzenieSTROM · Dec 8, 2023 · 88f35e8 · 88f35e8
1 parent 80bdadd
commit 88f35e8
Showing 1 changed file with 29 additions and 6 deletions.
diff --git a/src/components/Problems/Problems.tsx b/src/components/Problems/Problems.tsx
@@ -1,4 +1,4 @@
-import {Stack} from '@mui/material'
+import {Stack, Typography} from '@mui/material'
 import {useMutation, useQuery, useQueryClient} from '@tanstack/react-query'
 import axios from 'axios'
 import {useRouter} from 'next/router'
@@ -123,12 +123,35 @@ export const Problems: FC = () => {
         open={displayRegisterDialog}
         close={closeRegisterDialog}
         title="Skontroluj prosím, čí údaje o ročníku a škole sú správne."
-        contentText={`Škola: ${profile?.grade_name}, Ročník: ${profile?.school.verbose_name}`} // TODO: this is not styled, I suggest expanding the dialog component to support content as component
+        contentText={
+          <Stack gap={2}>
+            <Stack direction={'row'} spacing={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'} spacing={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={
-          <>
-            <Button onClick={editProfile}>Zmeniť údaje</Button>
-            <Button onClick={agree}>Údaje sú správne</Button>
-          </>
+          <Stack direction="row" gap={2}>
+            <Button variant="button2" onClick={editProfile}>
+              Zmeniť údaje
+            </Button>
+            <Button variant="button2" onClick={agree}>
+              Údaje sú správne
+            </Button>
+          </Stack>
         }
       />
       <Stack gap={5}>