Font sizes overhaul - first usages (#162)

* add responsive typography variants * use new fonts in Results * cleanup: remove old styles * cleanup: remove votes * use new fonts in MenuMain * use new fonts in Clickable * cleanup styles after discussion with Matus * use new fonts in Posts
ZdruzenieSTROM · Nov 11, 2023 · eff2703 · eff2703
1 parent 825173b
commit eff2703
Show file tree

Hide file tree

Showing 13 changed files with 223 additions and 204 deletions.
diff --git a/src/components/Clickable/Clickable.module.scss b/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;
   }
-}
+}
diff --git a/src/components/Clickable/Clickable.tsx b/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>
   )
 }
diff --git a/src/components/PageLayout/MenuMain/MenuMain.module.scss b/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,6 @@
 
   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;
   }
 }
diff --git a/src/components/PageLayout/MenuMain/MenuMain.tsx b/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="button1" fontStyle="normal">
+        <Link href={url}>{caption}</Link>
+      </Typography>
     </div>
   )
 }
diff --git a/src/components/Posts/Post.module.scss b/src/components/Posts/Post.module.scss
diff --git a/src/components/Posts/Post.module.scss.d.ts b/src/components/Posts/Post.module.scss.d.ts
diff --git a/src/components/Posts/Post.tsx b/src/components/Posts/Post.tsx
@@ -1,9 +1,9 @@
+import {Stack, Typography} from '@mui/material'
 import {FC} from 'react'
 
 import {useSeminarInfo} from '@/utils/useSeminarInfo'
 
 import {Link} from '../Clickable/Clickable'
-import styles from './Post.module.scss'
 
 export interface IPost {
   id: number
@@ -24,15 +24,20 @@ export const Post: FC<IPost> = ({id, caption, short_text, links, sites}) => {
 
   return (
     <li key={id}>
-      <h2 className={styles.title}>{caption}</h2>
-      <p className={styles.text}>{short_text}</p>
-      <div className={styles.links}>
+      <Typography variant="h2" textTransform="none" fontStyle="normal">
+        {caption}
+      </Typography>
+      <Typography variant="h2" component="p" textTransform="none" fontStyle="normal" fontWeight={400}>
+        {short_text}
+      </Typography>
+      {/* alignItems so the links don't stretch */}
+      <Stack gap={0.5} alignItems="start">
         {links.map(({id, url, caption}) => (
-          <p key={id}>
-            <Link href={url}>{caption}</Link>
-          </p>
+          <Link key={id} href={url}>
+            {caption}
+          </Link>
         ))}
-      </div>
+      </Stack>
     </li>
   )
 }
diff --git a/src/components/Results/Results.module.scss b/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);
 }
diff --git a/src/components/Results/ResultsRow.module.scss b/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;
-  }
-}
diff --git a/src/components/Results/ResultsRow.module.scss.d.ts b/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