Text for tips how to upload solution (#361)

* add tips for uploading solution * Add styles to hint --------- Co-authored-by: matushl <[email protected]>
ZdruzenieSTROM · Apr 14, 2024 · 3e54014 · 3e54014
1 parent 766dd4a
commit 3e54014
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 3 deletions.
diff --git a/src/components/Clickable/Link.tsx b/src/components/Clickable/Link.tsx
@@ -1,4 +1,4 @@
-import {Typography, TypographyProps} from '@mui/material'
+import {SxProps, Theme, Typography, TypographyProps} from '@mui/material'
 import clsx from 'clsx'
 import NextLink from 'next/link'
 import {ComponentProps, FC, ReactNode} from 'react'
@@ -10,9 +10,10 @@ type LinkProps = {
   disabled?: boolean
   children: ReactNode
   variant?: TypographyProps['variant']
+  sx?: SxProps<Theme>
 } & Pick<ComponentProps<typeof NextLink>, 'target'>
 
-export const Link: FC<LinkProps> = ({children, href, disabled, target, variant}) => {
+export const Link: FC<LinkProps> = ({children, href, disabled, target, variant, sx}) => {
   // https://a11y-guidelines.orange.com/en/articles/disable-elements/#disable-a-link
   return disabled ? (
     <Typography
@@ -21,6 +22,7 @@ export const Link: FC<LinkProps> = ({children, href, disabled, target, variant})
       className={clsx(styles.actionButton, styles.disabled)}
       aria-disabled
       role="link"
+      sx={sx}
     >
       {children}
     </Typography>
@@ -31,6 +33,7 @@ export const Link: FC<LinkProps> = ({children, href, disabled, target, variant})
       href={href ?? ''}
       target={target}
       className={clsx(styles.actionButton)}
+      sx={sx}
     >
       {children}
     </Typography>

diff --git a/src/components/Problems/UploadProblemForm.tsx b/src/components/Problems/UploadProblemForm.tsx
@@ -1,4 +1,4 @@
-import {Stack} from '@mui/material'
+import {Typography} from '@mui/material'
 import {useMutation} from '@tanstack/react-query'
 import axios from 'axios'
 import {Dispatch, FC, SetStateAction, useState} from 'react'
@@ -8,6 +8,7 @@ import {CloseButton} from '@/components/CloseButton/CloseButton'
 import {niceBytes} from '@/utils/niceBytes'
 
 import {Button} from '../Clickable/Button'
+import {Link} from '../Clickable/Link'
 import {Dialog} from '../Dialog/Dialog'
 import {FileDropZone} from '../FileDropZone/FileDropZone'
 import styles from './UploadProblemForm.module.scss'
@@ -115,6 +116,15 @@ export const UploadProblemForm: FC<{
               getInputProps={getInputProps}
               text="Vlož riešenie vo formáte pdf"
             />
+            <Typography variant="body2" textAlign="center" component="div">
+              Dbaj na čitateľnosť riešenia - namiesto odfotenia zo zošita ho radšej napíš na čistý papier formátu A4,
+              oskenuj (prípadne využi mobilné aplikácie, ktoré skener nahradia) a nahraj ho správne orientované. Ak máš
+              riešenie v inom formáte ako PDF, skonvertuj ho napríklad pomocou stránky{' '}
+              <Link variant="button3" href="https://www.ilovepdf.com/" sx={{textTransform: 'unset'}}>
+                ilovepdf.com
+              </Link>
+              .
+            </Typography>
           </>
         )}
         {files?.name && (