fix #386 - restyle Results

src/components/Results/Results.tsx

@@ -37,7 +37,13 @@ export const Results: FC = () => {
   return (
     <div>
       {resultsIsLoading && <Loading />}
-      <Box sx={{display: 'grid', rowGap: '10px', gridTemplateColumns: 'max-content 1fr repeat(3, max-content)'}}>
+      <Box
+        sx={{
+          display: 'grid',
+          rowGap: {xs: '6px', sm: '10px'},
+          gridTemplateColumns: 'max-content 1fr repeat(3, max-content)',
+        }}
+      >
         {results.map((result, index) => (
           <ResultsRow result={result} key={index} />
         ))}

src/components/Results/ResultsRow.tsx

@@ -1,4 +1,4 @@
-import {Box, Stack, Typography} from '@mui/material'
+import {Box, Stack, Theme, Typography, useMediaQuery} from '@mui/material'
 import Tooltip from '@mui/material/Tooltip'
 import {FC} from 'react'
 
@@ -42,9 +42,11 @@ export interface Result {
 export const ResultsRow: FC<{result: Result}> = ({result}) => {
   const {solutions, rank_changed, rank_start, registration, subtotal, total} = result
 
+  const smUp = useMediaQuery<Theme>((theme) => theme.breakpoints.up('sm'))
+
   return (
     // `display: 'contents'` je taka HTML verzia fragmentu - tento div sa v strukture nepocita pre ucely parent gridu,
-    // miesto toho sa pouzivaju jednotlive children. preto aj hover tu targetuje children divy, lebo parent v podstate nema velkost
+    // miesto toho sa pouzivaju jednotlive children. preto aj hover tu targetuje children divy, lebo parent v podstate nema velkost.
     // takisto `justifyContent: 'center'` je na vsetkych elementoch osobitne
     <Box sx={{display: 'contents', ':hover > div': {bgcolor: 'black', color: 'white'}}}>
       <Stack
@@ -54,33 +56,42 @@ export const ResultsRow: FC<{result: Result}> = ({result}) => {
           pl: 1,
         }}
       >
-        <Typography variant="h1" component="span">
-          {rank_changed && rank_start + '.'}
-        </Typography>
+        <Typography variant="resultsOrder">{rank_changed && rank_start + '.'}</Typography>
       </Stack>
-      <Stack sx={{px: '10px', justifyContent: 'center'}}>
-        <Typography variant="h3" component="span">
+      <Stack sx={{px: {xs: '6px', sm: '10px'}, justifyContent: 'center'}}>
+        <Typography variant="resultsName">
           {registration.profile.first_name + ' ' + registration.profile.last_name}
         </Typography>
-        <Typography variant="body3">
-          {registration.school.name + ' ' + registration.school.street + ' ' + registration.school.city}
+        <Typography variant="resultsSchool">
+          {smUp
+            ? `${registration.school.name} ${registration.school.street} ${registration.school.city}`
+            : registration.school.abbreviation}
         </Typography>
       </Stack>
       <Stack sx={{justifyContent: 'center'}}>
-        <Typography variant="h3" component="span" fontWeight={400} fontStyle="italic">
+        {/* reused resultsName font */}
+        <Typography variant="resultsName" fontWeight={400}>
           {registration.grade.tag}
         </Typography>
       </Stack>
-      <Stack sx={{justifyContent: 'center', px: '10px'}}>
+      <Stack sx={{justifyContent: 'center', px: {xs: '6px', sm: '10px'}}}>
         {solutions.map((series, index) => (
           <Stack key={index} direction="row">
             {series.map((solution, index) => (
-              <Typography key={index} variant="body2" sx={{width: '18px', textAlign: 'center'}}>
+              <Typography
+                key={index}
+                variant="resultsScore"
+                sx={{width: {xs: '12px', sm: '18px'}, textAlign: 'center'}}
+              >
                 {solution.points}
               </Typography>
             ))}
             <Tooltip title={`Súčet bodov za ${index + 1}. sériu po uplatnení bonifikácie`}>
-              <Typography variant="body2" fontWeight={600} sx={{width: '25px', textAlign: 'center'}}>
+              <Typography
+                variant="resultsScore"
+                fontWeight={600}
+                sx={{width: {xs: '18px', sm: '25px'}, textAlign: 'center'}}
+              >
                 {subtotal[index]}
               </Typography>
             </Tooltip>
@@ -95,9 +106,7 @@ export const ResultsRow: FC<{result: Result}> = ({result}) => {
             pr: 1,
           }}
         >
-          <Typography variant="h3" component="span" fontStyle="italic">
-            {total}
-          </Typography>
+          <Typography variant="resultsTotal">{total}</Typography>
         </Stack>
       </Tooltip>
     </Box>

src/theme.ts

@@ -12,6 +12,11 @@ declare module '@mui/material/styles' {
     postTitle: React.CSSProperties
     postBody: React.CSSProperties
     postDate: React.CSSProperties
+    resultsOrder: React.CSSProperties
+    resultsName: React.CSSProperties
+    resultsSchool: React.CSSProperties
+    resultsScore: React.CSSProperties
+    resultsTotal: React.CSSProperties
   }
 
   // allow configuration using `createTheme`
@@ -24,6 +29,11 @@ declare module '@mui/material/styles' {
     postTitle?: React.CSSProperties
     postBody?: React.CSSProperties
     postDate?: React.CSSProperties
+    resultsOrder?: React.CSSProperties
+    resultsName?: React.CSSProperties
+    resultsSchool?: React.CSSProperties
+    resultsScore?: React.CSSProperties
+    resultsTotal?: React.CSSProperties
   }
 }
 
@@ -38,6 +48,11 @@ declare module '@mui/material/Typography' {
     postTitle: true
     postBody: true
     postDate: true
+    resultsOrder: true
+    resultsName: true
+    resultsSchool: true
+    resultsScore: true
+    resultsTotal: true
     // disable these variants
     h4: false
     h5: false
@@ -146,6 +161,30 @@ const _theme = createTheme({
       textTransform: 'uppercase',
       fontWeight: 300,
     },
+    resultsOrder: {
+      ...font.style,
+      fontWeight: 800,
+      fontStyle: 'italic',
+    },
+    resultsName: {
+      ...font.style,
+      textTransform: 'uppercase',
+      fontWeight: 800,
+      fontStyle: 'italic',
+    },
+    resultsSchool: {
+      ...font.style,
+      fontWeight: 400,
+    },
+    resultsScore: {
+      ...font.style,
+      fontWeight: 400,
+    },
+    resultsTotal: {
+      ...font.style,
+      fontWeight: 800,
+      fontStyle: 'italic',
+    },
   },
   components: {
     MuiTypography: {
@@ -161,6 +200,11 @@ const _theme = createTheme({
           postTitle: 'h1',
           postBody: 'span',
           postDate: 'span',
+          resultsOrder: 'span',
+          resultsName: 'span',
+          resultsSchool: 'span',
+          resultsScore: 'span',
+          resultsTotal: 'span',
         },
       },
     },
@@ -335,5 +379,50 @@ export const theme: Theme = {
       [xl]: {fontSize: pxToRem(20)},
       lineHeight: 1.5,
     },
+    resultsOrder: {
+      ..._theme.typography.resultsOrder,
+      fontSize: pxToRem(20), // design
+      [sm]: {fontSize: pxToRem(26)},
+      [md]: {fontSize: pxToRem(26)},
+      [lg]: {fontSize: pxToRem(32)},
+      [xl]: {fontSize: pxToRem(48)}, // design
+      lineHeight: 1.5,
+    },
+    resultsName: {
+      ..._theme.typography.resultsName,
+      fontSize: pxToRem(11), // design
+      [sm]: {fontSize: pxToRem(16)},
+      [md]: {fontSize: pxToRem(20)},
+      [lg]: {fontSize: pxToRem(24)},
+      [xl]: {fontSize: pxToRem(30)}, // design
+      lineHeight: 1.5,
+    },
+    resultsSchool: {
+      ..._theme.typography.resultsSchool,
+      fontSize: pxToRem(10), // design
+      [sm]: {fontSize: pxToRem(11)},
+      [md]: {fontSize: pxToRem(12)},
+      [lg]: {fontSize: pxToRem(13)},
+      [xl]: {fontSize: pxToRem(14)}, // design
+      lineHeight: 1.5,
+    },
+    resultsScore: {
+      ..._theme.typography.resultsScore,
+      fontSize: pxToRem(10), // design
+      [sm]: {fontSize: pxToRem(12)},
+      [md]: {fontSize: pxToRem(14)},
+      [lg]: {fontSize: pxToRem(16)},
+      [xl]: {fontSize: pxToRem(18)}, // design
+      lineHeight: 1.5,
+    },
+    resultsTotal: {
+      ..._theme.typography.resultsTotal,
+      fontSize: pxToRem(20), // design
+      [sm]: {fontSize: pxToRem(22)},
+      [md]: {fontSize: pxToRem(24)},
+      [lg]: {fontSize: pxToRem(26)},
+      [xl]: {fontSize: pxToRem(30)}, // design
+      lineHeight: 1.5,
+    },
   },
 }