Font sizes overhaul - first usages

src/components/Clickable/Clickable.module.scss

@@ -1,20 +1,15 @@
 .actionButton {
   cursor: pointer;
-  // TODO(#127): 20/16=1.25rem
-  font-size: .8rem;
-  font-style: italic;
-  font-weight: bold;
   text-transform: uppercase;
   border: 0;
-  // TODO(#127): 10px (10/16=0.625rem)
-  border-bottom: 3px solid black;
+  border-bottom: 5px solid black;
   color: black;
   background-color: white;
 
   &.disabled {
     cursor: default;
-    color: #CCC;
-    border-color: #CCC;
+    color: #ccc;
+    border-color: #ccc;
   }
 
   &:hover {
@@ -23,6 +18,6 @@
   }
 
   &.disabled:hover {
-    background-color: #CCC;
+    background-color: #ccc;
   }
-}
+}

src/components/Clickable/Clickable.tsx

@@ -1,3 +1,4 @@
+import {Typography} from '@mui/material'
 import clsx from 'clsx'
 import NextLink from 'next/link'
 import {ButtonHTMLAttributes, ComponentProps, FC, ReactNode} from 'react'
@@ -12,14 +13,16 @@ type ButtonProps = {
 
 export const Button: FC<ButtonProps> = ({children, onClick, disabled, type}) => {
   return (
-    <button
+    <Typography
+      variant="button3"
+      component="button"
       onClick={onClick}
       className={clsx(styles.actionButton, disabled && styles.disabled)}
       disabled={disabled}
       type={type}
     >
       {children}
-    </button>
+    </Typography>
   )
 }
 
@@ -32,12 +35,24 @@ type LinkProps = {
 export const Link: FC<LinkProps> = ({children, href, disabled, target}) => {
   // https://a11y-guidelines.orange.com/en/articles/disable-elements/#disable-a-link
   return disabled ? (
-    <a className={clsx(styles.actionButton, styles.disabled)} aria-disabled role="link">
+    <Typography
+      variant="button3"
+      component="a"
+      className={clsx(styles.actionButton, styles.disabled)}
+      aria-disabled
+      role="link"
+    >
       {children}
-    </a>
+    </Typography>
   ) : (
-    <NextLink href={href ?? ''} target={target} className={clsx(styles.actionButton)}>
+    <Typography
+      variant="button3"
+      component={NextLink}
+      href={href ?? ''}
+      target={target}
+      className={clsx(styles.actionButton)}
+    >
       {children}
-    </NextLink>
+    </Typography>
   )
 }

src/components/PageLayout/MenuMain/MenuMain.module.scss

@@ -63,10 +63,6 @@
 }
 
 .menuItem {
-  // TODO(#127): 30/16=1.875rem
-  font-size: 1.7rem;
-  font-weight: 800;
-  text-transform: uppercase;
   background-color: transparent;
   margin: 0px 40px;
   padding: 8px 0px;
@@ -76,8 +72,7 @@
   a {
     display: inline-block;
     padding: 0px 5px;
-    // TODO(#127): 5px (5/16=0.3125rem)
-    border-bottom: 0.3rem solid white;
+    border-bottom: 5px solid white;
     color: white;
     text-align: center;
   }
@@ -89,7 +84,7 @@
 
   a {
     color: black;
-    // TODO(#127): 10px (10/16=0.625rem). ale treba asi nastavit height celeho menu itemu, nech to neskace
-    border-bottom: 0.3rem solid black;
+    border-color: black;
+    border-width: 10px;
   }
 }

src/components/PageLayout/MenuMain/MenuMain.tsx

@@ -1,3 +1,4 @@
+import {Theme, Typography, useMediaQuery} from '@mui/material'
 import {useQuery} from '@tanstack/react-query'
 import axios from 'axios'
 import clsx from 'clsx'
@@ -31,15 +32,18 @@ export const MenuMain: FC = () => {
   })
   const menuItems = menuItemsData?.data ?? []
 
+  const lg = useMediaQuery<Theme>((theme) => theme.breakpoints.up('lg'))
+  const iconSize = lg ? 40 : 30
+
   return (
     <>
       {!isVisible && (
         <div className={clsx(styles.menuButton, styles.menuOpenButton)} onClick={toggleMenu}>
-          <Menu width={40} height={40} />
+          <Menu width={iconSize} height={iconSize} />
         </div>
       )}
       <div className={clsx(styles.menu, isVisible && styles.visible)}>
-        <CloseButton size={40} onClick={toggleMenu} className={clsx(styles.menuButton, styles.menuCloseButton)} />
+        <CloseButton size={iconSize} onClick={toggleMenu} className={clsx(styles.menuButton, styles.menuCloseButton)} />
         {menuItemsIsLoading && (
           <div className={styles.loading}>
             <Loading />
@@ -70,7 +74,9 @@ const MenuMainItem: FC<{caption: string; url: string}> = ({caption, url}) => {
 
   return (
     <div className={clsx(styles.menuItem, active && styles.active)}>
-      <Link href={url}>{caption}</Link>
+      <Typography variant="h2" textTransform="uppercase">
+        <Link href={url}>{caption}</Link>
+      </Typography>
     </div>
   )
 }

src/components/Results/Results.module.scss

@@ -3,5 +3,5 @@
   margin-top: 80px;
   display: grid;
   row-gap: 10px;
-  grid-template-columns: max-content 1fr repeat(4, max-content);
+  grid-template-columns: max-content 1fr repeat(3, max-content);
 }

src/components/Results/ResultsRow.module.scss

@@ -12,9 +12,6 @@
 }
 
 .rank {
-  font-weight: bold;
-  font-style: italic;
-  font-size: 2rem;
   display: flex;
   justify-content: flex-start;
   align-items: center;
@@ -28,23 +25,17 @@
 
 .name {
   align-self: end;
-  font-weight: bold;
-  font-style: italic;
   text-transform: uppercase;
-  font-size: 1.2rem;
 }
 
 .school {
   align-self: start;
-  font-size: 0.6rem;
   padding-right: 20px;
   white-space: nowrap;
   overflow: hidden;
 }
 
 .grade {
-  font-style: italic;
-  font-size: 1.5rem;
   display: flex;
   justify-content: flex-start;
   align-items: center;
@@ -63,101 +54,15 @@
     display: grid;
     grid-template-columns: repeat(6, 18px) 25px;
     justify-items: center;
-    font-size: 0.75rem;
   }
 
   .subtotal {
     padding-left: 5px;
-    font-weight: bold;
   }
 }
 
 .totalScore {
-  font-weight: bold;
-  font-style: italic;
-  font-size: 1.5rem;
   display: flex;
   justify-content: center;
   align-items: center;
 }
-
-.votes {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  font-size: 1.5rem;
-}
-
-.menu {
-  position: fixed;
-  top: 5rem;
-  right: 0px;
-  width: 25vw;
-  height: 5rem;
-  z-index: 1000;
-  user-select: none;
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-}
-
-.dropdown {
-  border-bottom: 5px solid black;
-  width: fit-content;
-  display: flex;
-  align-items: center;
-  text-transform: uppercase;
-  font-weight: bold;
-  font-style: italic;
-  position: relative;
-  margin: 0px 20px;
-
-  .arrow {
-    margin-left: 1rem;
-    display: inline-block;
-    width: 0;
-    height: 0;
-    border-left: 0.5rem solid transparent;
-    border-right: 0.5rem solid transparent;
-
-    border-top: 0.8rem solid black;
-  }
-
-  .options {
-    background-color: white;
-    display: none;
-    position: absolute;
-    width: fit-content;
-    top: 100%;
-    right: 0px;
-    border: 5px solid black;
-    border-width: 5px 5px;
-
-    a {
-      text-decoration: none;
-    }
-  }
-
-  .displayOptions {
-    display: grid;
-    grid-template-columns: max-content;
-  }
-
-  .option {
-    background-color: white;
-    color: black;
-    display: inline-block;
-    white-space: nowrap;
-    width: 100%;
-    padding: 5px;
-  }
-
-  .option:hover {
-    background-color: #ccc;
-  }
-
-  .option.selectedOption {
-    background-color: black;
-    color: white;
-  }
-}

src/components/Results/ResultsRow.module.scss.d.ts

@@ -1,21 +1,13 @@
 export type Styles = {
-  arrow: string
-  displayOptions: string
-  dropdown: string
   grade: string
-  menu: string
   name: string
   nameAndSchool: string
-  option: string
-  options: string
   rank: string
   rowWrapper: string
   school: string
   score: string
-  selectedOption: string
   subtotal: string
   totalScore: string
-  votes: string
 }
 
 export type ClassNames = keyof Styles

src/components/Results/ResultsRow.tsx

@@ -1,4 +1,4 @@
-import clsx from 'clsx'
+import {Typography} from '@mui/material'
 import {FC} from 'react'
 
 import styles from './ResultsRow.module.scss'
@@ -38,46 +38,39 @@ export interface Result {
 export const ResultsRow: FC<{result: Result}> = ({result}) => {
   const {solutions, rank_changed, rank_start, registration, subtotal, total} = result
 
-  let votes_pos = 0
-  let votes_neg = 0
-
-  for (const seriesSolutions of result.solutions) {
-    for (const {votes} of seriesSolutions) {
-      if (votes > 0) {
-        votes_pos += votes
-      } else if (votes < 0) {
-        votes_neg += votes
-      }
-    }
-  }
-
-  const votes_total = votes_neg + votes_pos
-
   return (
     <div className={styles.rowWrapper}>
-      <div className={styles.rank}>{rank_changed && rank_start + '.'}</div>
+      <Typography variant="h1" component="span" fontStyle="italic" className={styles.rank}>
+        {rank_changed && rank_start + '.'}
+      </Typography>
       <div className={styles.nameAndSchool}>
-        <div className={styles.name}>{registration.profile.first_name + ' ' + registration.profile.last_name}</div>
-        <div className={styles.school}>
+        <Typography variant="h2" component="span" fontStyle="italic" className={styles.name}>
+          {registration.profile.first_name + ' ' + registration.profile.last_name}
+        </Typography>
+        <Typography variant="body3" className={styles.school}>
           {registration.school.name + ' ' + registration.school.street + ' ' + registration.school.city}
-        </div>
+        </Typography>
       </div>
-      <div className={styles.grade}>{registration.grade}</div>
+      <Typography variant="h3" component="span" fontWeight={400} fontStyle="italic" className={styles.grade}>
+        {registration.grade}
+      </Typography>
       <div className={styles.score}>
-        {solutions.map((series, key) => (
-          <div key={key}>
-            {series.map((solution, key) => (
-              <div key={key}>{solution.points}</div>
+        {solutions.map((series, index) => (
+          <div key={index}>
+            {series.map((solution, index) => (
+              <Typography variant="body2" key={index}>
+                {solution.points}
+              </Typography>
             ))}
-            <div className={styles.subtotal}>{subtotal[key]}</div>
+            <Typography variant="body2" fontWeight={600} className={styles.subtotal}>
+              {subtotal[index]}
+            </Typography>
           </div>
         ))}
       </div>
-      <div className={styles.totalScore}>{total}</div>
-      <div className={clsx(styles.votes, votes_total !== 0 && 'tooltip')}>
-        {votes_total !== 0 && votes_total}
-        {votes_total !== 0 && <span className="tooltiptext">Hlasy</span>}
-      </div>
+      <Typography variant="h3" component="span" fontStyle="italic" className={styles.totalScore}>
+        {total}
+      </Typography>
     </div>
   )
 }