Style markdown component, competitionPage and Administration pages (#289

)

* Add typography to competition page

* fix typography

* fix typography in competition

* add typography to react component

* add typography to texts

* add typography to administration

* add div to typography component

* add paddings

* add to competition page

* add lists render

* remove ul from markdown

* Improve design on Semester administration

* Improve styles on CompetitionPage

* Improve markdown styles

* Add new styles to markdown

---------

Co-authored-by: matushl <[email protected]>

src/components/CompetitionPage/CompetitionPage.tsx

@@ -1,13 +1,12 @@
+import {Stack, Typography} from '@mui/material'
 import {useRouter} from 'next/router'
-import {FC, Fragment} from 'react'
+import {FC} from 'react'
 
 import {Link} from '@/components/Clickable/Link'
 import {Competition, Event} from '@/types/api/competition'
 import {BannerContainer} from '@/utils/BannerContainer'
 import {formatDateTime} from '@/utils/formatDate'
 
-import styles from './competition.module.scss'
-
 type OurCompetition = Omit<Competition, 'history_events'> & {history_events: Event[]}
 
 type CompetitionPageProps = {
@@ -27,81 +26,94 @@ export const CompetitionPage: FC<CompetitionPageProps> = ({
   const rulesLink = `${router.asPath}/pravidla`
 
   return (
-    <>
-      <div className={styles.mainText}>
-        {who_can_participate && <p>Pre koho? {who_can_participate}</p>}
-        <p>{description}</p>
-      </div>
-      <div className={styles.mainText}>
+    <Stack gap={3}>
+      {who_can_participate && <Typography variant="body1">Súťaž je určená pre {who_can_participate}</Typography>}
+
+      {description && <Typography variant="body1">{description}</Typography>}
+
+      <Stack alignSelf="center">
+        <Link variant="button2" href={rulesLink}>
+          Pravidlá
+        </Link>
+      </Stack>
+
+      <Stack gap={2}>
+        <Typography variant="h2">Nadchádzajúci ročník</Typography>
         {upcoming_or_current_event ? (
-          <div className={styles.mainText}>
-            <p>
-              <b>Nadchádzajúci ročník:</b>
-            </p>
-            {startDate && <p>Odkedy? {startDate} </p>}
-            {endDate && <p>Dokedy? {endDate}</p>}
+          <Stack gap={1}>
+            {startDate && (
+              <Typography variant="body1">
+                <b>Od:</b> {startDate}
+              </Typography>
+            )}
+            {endDate && (
+              <Typography variant="body1">
+                <b>Do:</b> {endDate}
+              </Typography>
+            )}
             {upcoming_or_current_event.publication_set.length > 0 && (
-              <p>
-                <Link href={`/api/${upcoming_or_current_event.publication_set[0].file}`}>Pozvánka</Link>
-              </p>
+              <Stack alignSelf="center">
+                <Link variant="button2" href={`/api/${upcoming_or_current_event.publication_set[0].file}`}>
+                  Pozvánka
+                </Link>
+              </Stack>
             )}
+            <Stack alignSelf="center">
+              <Link variant="button2" href={`/api/`}>
+                Pozvánka
+              </Link>
+            </Stack>
             {upcoming_or_current_event.registration_link && (
-              <div>
-                <p>
-                  Registrácia prebieha do:
-                  {upcoming_or_current_event.registration_link.end}
-                  <Link href={upcoming_or_current_event.registration_link.url}>Registračný formulár</Link>
-                </p>
-
-                <p>{upcoming_or_current_event.registration_link.additional_info}</p>
-              </div>
+              <>
+                <Typography variant="body1">
+                  <b>Registrácia prebieha do:</b> {formatDateTime(upcoming_or_current_event.registration_link.end)}
+                </Typography>
+                <Stack alignSelf="center">
+                  <Link variant="button2" href={upcoming_or_current_event.registration_link.url}>
+                    Registračný formulár
+                  </Link>
+                </Stack>
+                <Typography variant="body1">{upcoming_or_current_event.registration_link.additional_info}</Typography>
+              </>
             )}
-          </div>
+          </Stack>
         ) : (
-          <p>
-            <b>Nadchádzajúci ročník:</b> Pripravujeme
-          </p>
+          <Typography variant="body1" sx={{marginTop: 1}}>
+            Pripravujeme
+          </Typography>
         )}
-      </div>
-
-      <div className={styles.container}>
-        <div className={styles.actions}>
-          <div className={styles.actionButton}>
-            <Link href={rulesLink}>Pravidlá</Link>
-          </div>
-        </div>
-      </div>
+      </Stack>
 
-      <div className={styles.h2}>
-        <h2>Archív: </h2>
-      </div>
-      {/* TODO: asi zjednotit styly, neriesit with/without publications */}
-      {competition_type?.name === 'Tábor' ? (
-        <div className={styles.archiveWithoutPublications}>
-          {history_events.map((event) => (
-            <Fragment key={event.id}>
-              <div>
+      <Stack>
+        <Typography variant="h2">Archív</Typography>
+        {/* TODO: asi zjednotit styly, neriesit with/without publications */}
+        {competition_type?.name === 'Tábor' ? (
+          <Stack gap={1}>
+            {history_events.map((event) => (
+              <Typography key={event.id} variant="h3" component="span">
                 {name + ' '} {event.school_year}
-              </div>
-            </Fragment>
-          ))}
-        </div>
-      ) : (
-        <div className={styles.archiveWithPublications}>
-          {history_events.map((event) => (
-            <Fragment key={event.id}>
-              <div>
-                {name} {event.school_year}
-              </div>
-              {event.publication_set.map((publication) => (
-                <Link key={publication.id} href={`/api/${publication.file}`}>
-                  {publication.name}
-                </Link>
-              ))}
-            </Fragment>
-          ))}
-        </div>
-      )}
-    </>
+              </Typography>
+            ))}
+          </Stack>
+        ) : (
+          <Stack gap={1}>
+            {history_events.map((event) => (
+              <Stack key={event.id} direction="row" gap={20}>
+                <Typography variant="h3" component="span">
+                  {name} {event.school_year}
+                </Typography>
+                <Stack direction="row" gap={2}>
+                  {event.publication_set.map((publication) => (
+                    <Link variant="button2" key={publication.id} href={`/api/${publication.file}`}>
+                      {publication.name}
+                    </Link>
+                  ))}
+                </Stack>
+              </Stack>
+            ))}
+          </Stack>
+        )}
+      </Stack>
+    </Stack>
   )
 }

src/components/ProblemAdministration/ProblemAdministration.tsx

@@ -100,16 +100,20 @@ export const ProblemAdministration: FC = () => {
 
   return (
     <div className={styles.container}>
-      <h2>Opravovanie {problem.order}. úlohy</h2>
+      <Typography variant="h2">Opravovanie {problem.order}. úlohy</Typography>
 
       <div className={styles.rightButton}>
-        <Link href={`/strom/admin/opravovanie/${problem.series.semester}`}>Späť na semester</Link>
+        <Link variant="button2" href={`/strom/admin/opravovanie/${problem.series.semester}`}>
+          Späť na semester
+        </Link>
       </div>
 
       <Latex>{problem.text ?? 'Načítavam...'}</Latex>
 
       <div className={styles.row}>
-        Vzorové riešenie:
+        <Typography variant="body1" component="div">
+          Vzorové riešenie:
+        </Typography>
         {problem.solution_pdf ? (
           <a href={problem.solution_pdf} target="_blank" rel="noreferrer" className={styles.icon}>
             <FormatAlignJustify />
@@ -126,7 +130,9 @@ export const ProblemAdministration: FC = () => {
       </div>
 
       <div className={styles.rightButton}>
-        <Link href={`/api/competition/problem/${problemId}/download-solutions`}>Stiahnuť riešenia</Link>
+        <Link variant="button2" href={`/api/competition/problem/${problemId}/download-solutions`}>
+          Stiahnuť riešenia
+        </Link>
       </div>
 
       <FileDropZone
@@ -202,7 +208,9 @@ export const ProblemAdministration: FC = () => {
         </div>
 
         <div className={styles.rightButton}>
-          <Button onClick={handleSavePoints}>Uložiť body</Button>
+          <Button variant="button2" onClick={handleSavePoints}>
+            Uložiť body
+          </Button>
         </div>
       </form>
     </div>

src/components/PublicationUploader/PublicationUploader.tsx

@@ -1,4 +1,4 @@
-import {Stack} from '@mui/material'
+import {Stack, Typography} from '@mui/material'
 import {useQueryClient} from '@tanstack/react-query'
 import {FC} from 'react'
 
@@ -28,9 +28,11 @@ export const PublicationUploader: FC<PublicationUploaderProps> = ({semesterId, o
 
   return (
     <Stack direction="row" gap={2} alignItems="center">
-      <h4>{order}. Časopis:</h4>
+      <Typography variant="body1">{order}. Časopis:</Typography>
       {publication && (
-        <Link href={`/api/competition/publication/${publication.id}/download`}>{publication.name}.pdf</Link>
+        <Link variant="button2" href={`/api/competition/publication/${publication.id}/download`}>
+          {publication.name}.pdf
+        </Link>
       )}
       <FileUploader
         uploadLink={'/api/competition/publication/upload/'}

src/components/SemesterAdministration/SemesterAdministration.module.scss

@@ -1,6 +1,3 @@
-.actions {
-  margin-top: .5rem;
-  display: flex;
-  justify-content: flex-start;
-  column-gap: 20px;
+.textarea {
+  width: 100%;
 }

src/components/SemesterAdministration/SemesterAdministration.module.scss.d.ts

@@ -1,5 +1,5 @@
 export type Styles = {
-  actions: string
+  textarea: string
 }
 
 export type ClassNames = keyof Styles