127 fonsizes na celej stranke

src/components/Archive/Archive.tsx

@@ -1,13 +1,13 @@
+import {Stack, Typography} from '@mui/material'
 import {useQuery} from '@tanstack/react-query'
 import axios from 'axios'
 import {FC} from 'react'
 
 import {Event, Publication} from '@/types/api/competition'
 import {useSeminarInfo} from '@/utils/useSeminarInfo'
 
-import {Link} from '../Clickable/Clickable'
+import {Link} from '../Clickable/Link'
 import {Loading} from '../Loading/Loading'
-import styles from './Archive.module.scss'
 
 // TODO: check whether we can safely assume presence of these and either update it on BE so it gets generated that way, or update it in our `types/api/competition`
 type MyPublication = Publication & {
@@ -24,7 +24,7 @@ const PublicationButton: FC<{
   publicationName: string
 }> = ({publicationId, publicationName}) => {
   return (
-    <Link href={`/api/competition/publication/${publicationId}/download`} target="_blank">
+    <Link variant="button2" href={`/api/competition/publication/${publicationId}/download`} target="_blank">
       Časopis {publicationName}
     </Link>
   )
@@ -36,7 +36,11 @@ const ResultsButton: FC<{
 }> = ({eventYear, eventSeason}) => {
   const season = eventSeason === 0 ? 'zima' : 'leto'
   const url = `../vysledky/${eventYear}/${season}`
-  return <Link href={url}>Výsledky</Link>
+  return (
+    <Link variant="button2" href={url}>
+      Výsledky
+    </Link>
+  )
 }
 
 const ProblemsButton: FC<{
@@ -45,7 +49,11 @@ const ProblemsButton: FC<{
 }> = ({eventYear, eventSeason}) => {
   const season = eventSeason === 0 ? 'zima' : 'leto'
   const url = `../zadania/${eventYear}/${season}/1`
-  return <Link href={url}>Zadania</Link>
+  return (
+    <Link variant="button2" href={url}>
+      Zadania
+    </Link>
+  )
 }
 
 export const Archive: FC = () => {
@@ -58,16 +66,16 @@ export const Archive: FC = () => {
   const eventList = eventListData?.data ?? []
 
   return (
-    <div className={styles.archive}>
+    <Stack gap={2.5}>
       {eventListIsLoading && <Loading />}
       {eventList.map((event) => (
-        <div key={event.id} className={styles.archiveRow}>
-          <span className={styles.eventName}>
+        <Stack key={event.id} direction="row" justifyContent="space-between">
+          <Typography variant="h3" component="span">
             {event.year + '. ročník '}
             {event.season_code === 0 ? 'zimný' : 'letný'}
             {' semester'}
-          </span>
-          <div className={styles.actions}>
+          </Typography>
+          <Stack gap={2} direction="row" alignItems="center">
             <ResultsButton eventYear={event.year} eventSeason={event.season_code} />
             <ProblemsButton eventYear={event.year} eventSeason={event.season_code} />
             {event.publication_set.map((publication) => (
@@ -77,9 +85,9 @@ export const Archive: FC = () => {
                 publicationName={publication.name}
               />
             ))}
-          </div>
-        </div>
+          </Stack>
+        </Stack>
       ))}
-    </div>
+    </Stack>
   )
 }

src/components/Clickable/Button.tsx

@@ -0,0 +1,27 @@
+import {Typography, TypographyProps} from '@mui/material'
+import clsx from 'clsx'
+import {ButtonHTMLAttributes, FC, ReactNode} from 'react'
+
+import styles from './Clickable.module.scss'
+
+type ButtonProps = {
+  onClick?: () => void
+  disabled?: boolean
+  children: ReactNode
+  variant?: TypographyProps['variant']
+} & Pick<ButtonHTMLAttributes<HTMLButtonElement>, 'type'>
+
+export const Button: FC<ButtonProps> = ({children, onClick, disabled, type, variant}) => {
+  return (
+    <Typography
+      variant={variant ?? 'button3'}
+      component="button"
+      onClick={onClick}
+      className={clsx(styles.actionButton, disabled && styles.disabled)}
+      disabled={disabled}
+      type={type}
+    >
+      {children}
+    </Typography>
+  )
+}

src/components/Clickable/Clickable.tsx → src/components/Clickable/Link.tsx

@@ -1,42 +1,22 @@
-import {Typography} from '@mui/material'
+import {Typography, TypographyProps} from '@mui/material'
 import clsx from 'clsx'
 import NextLink from 'next/link'
-import {ButtonHTMLAttributes, ComponentProps, FC, ReactNode} from 'react'
+import {ComponentProps, FC, ReactNode} from 'react'
 
 import styles from './Clickable.module.scss'
 
-type ButtonProps = {
-  onClick?: () => void
-  disabled?: boolean
-  children: ReactNode
-} & Pick<ButtonHTMLAttributes<HTMLButtonElement>, 'type'>
-
-export const Button: FC<ButtonProps> = ({children, onClick, disabled, type}) => {
-  return (
-    <Typography
-      variant="button3"
-      component="button"
-      onClick={onClick}
-      className={clsx(styles.actionButton, disabled && styles.disabled)}
-      disabled={disabled}
-      type={type}
-    >
-      {children}
-    </Typography>
-  )
-}
-
 type LinkProps = {
   href?: string
   disabled?: boolean
   children: ReactNode
+  variant?: TypographyProps['variant']
 } & Pick<ComponentProps<typeof NextLink>, 'target'>
 
-export const Link: FC<LinkProps> = ({children, href, disabled, target}) => {
+export const Link: FC<LinkProps> = ({children, href, disabled, target, variant}) => {
   // https://a11y-guidelines.orange.com/en/articles/disable-elements/#disable-a-link
   return disabled ? (
     <Typography
-      variant="button3"
+      variant={variant ?? 'button3'}
       component="a"
       className={clsx(styles.actionButton, styles.disabled)}
       aria-disabled
@@ -46,7 +26,7 @@ export const Link: FC<LinkProps> = ({children, href, disabled, target}) => {
     </Typography>
   ) : (
     <Typography
-      variant="button3"
+      variant={variant ?? 'button3'}
       component={NextLink}
       href={href ?? ''}
       target={target}

src/components/CompetitionPage/CompetitionPage.tsx

@@ -1,10 +1,10 @@
 import {useRouter} from 'next/router'
 import {FC, Fragment} from 'react'
 
-import {Link} from '@/components/Clickable/Clickable'
+import {Link} from '@/components/Clickable/Link'
 import {Competition, Event} from '@/types/api/competition'
 import {BannerContainer} from '@/utils/BannerContainer'
-import {formatDate} from '@/utils/formatDate'
+import {formatDateTime} from '@/utils/formatDate'
 
 import styles from './competition.module.scss'
 
@@ -19,8 +19,8 @@ export const CompetitionPage: FC<CompetitionPageProps> = ({
 }) => {
   const {setBannerText} = BannerContainer.useContainer()
 
-  const startDate = upcoming_or_current_event ? formatDate(upcoming_or_current_event.start) : null
-  const endDate = upcoming_or_current_event ? formatDate(upcoming_or_current_event.end) : null
+  const startDate = upcoming_or_current_event ? formatDateTime(upcoming_or_current_event.start) : null
+  const endDate = upcoming_or_current_event ? formatDateTime(upcoming_or_current_event.end) : null
   setBannerText(startDate ? `${name} sa bude konať  ${startDate}` : '')
 
   const router = useRouter()

src/components/CompetitionPage/RulesPage.tsx

@@ -3,14 +3,14 @@ import {FC} from 'react'
 import {Markdown} from '@/components/StaticSites/Markdown'
 import {Competition} from '@/types/api/generated/competition'
 import {BannerContainer} from '@/utils/BannerContainer'
-import {formatDate} from '@/utils/formatDate'
+import {formatDateTime} from '@/utils/formatDate'
 
 type RulesPageProps = Pick<Competition, 'rules' | 'upcoming_or_current_event' | 'name'>
 
 export const RulesPage: FC<RulesPageProps> = ({name, rules, upcoming_or_current_event}) => {
   const {setBannerText} = BannerContainer.useContainer()
 
-  const startDate = formatDate(upcoming_or_current_event?.start)
+  const startDate = formatDateTime(upcoming_or_current_event?.start)
   setBannerText(upcoming_or_current_event ? `${name} sa bude konať  ${startDate}` : '')
 
   return <Markdown content={rules ?? ''} />

src/components/Latex/Latex.tsx

@@ -1,3 +1,4 @@
+import {Typography} from '@mui/material'
 import {MathComponentProps} from 'mathjax-react/dist/components/MathComponent'
 import dynamic from 'next/dynamic'
 import {FC, Fragment} from 'react'
@@ -25,15 +26,15 @@ export const Latex: FC<{children: string}> = ({children}) => {
   const matches = Array.from(children.matchAll(re))
 
   if (matches.length === 0) {
-    return <>{children}</>
+    return <Typography variant="body1" dangerouslySetInnerHTML={{__html: `${children}`}} />
   }
 
   const result = []
   let currentPosition = 0
 
   for (const m of matches) {
     result.push(
-      <span dangerouslySetInnerHTML={{__html: `${children.slice(currentPosition, m.index)}`}} />,
+      <Typography variant="body1" dangerouslySetInnerHTML={{__html: `${children.slice(currentPosition, m.index)}`}} />,
       <MathComponent tex={trim(m[0])} display={m[0].slice(0, 2) === '\\[' || m[0].slice(0, 2) === '$$'} />,
     )
 
@@ -42,7 +43,12 @@ export const Latex: FC<{children: string}> = ({children}) => {
     }
   }
 
-  result.push(<span dangerouslySetInnerHTML={{__html: `${children.slice(Math.max(0, currentPosition))}`}} />)
+  result.push(
+    <Typography
+      variant="body1"
+      dangerouslySetInnerHTML={{__html: `${children.slice(Math.max(0, currentPosition))}`}}
+    />,
+  )
 
   return (
     // nas globalny CSS reset nastavuje SVGcka na display:block, tak to tu resetneme nazad na inline

src/components/Latex/LatexExample.tsx

@@ -1,6 +1,6 @@
 import {ChangeEvent, FC, useState} from 'react'
 
-import {Link} from '../Clickable/Clickable'
+import {Link} from '../Clickable/Link'
 import {Latex} from './Latex'
 import styles from './LatexExample.module.scss'
 

src/components/PageLayout/LoginForm/LoginForm.tsx

@@ -1,9 +1,9 @@
+import {Stack} from '@mui/material'
 import {useRouter} from 'next/router'
 import {FC} from 'react'
 import {SubmitHandler, useForm} from 'react-hook-form'
 
-import {Button} from '@/components/Clickable/Clickable'
-import styles from '@/components/FormItems/Form.module.scss'
+import {Button} from '@/components/Clickable/Button'
 import {FormInput} from '@/components/FormItems/FormInput/FormInput'
 import {AuthContainer} from '@/utils/AuthContainer'
 
@@ -41,21 +41,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>
   )
 }