Use typography variants in TopGrid

ZdruzenieSTROM · Nov 12, 2023 · d494a90 · d494a90
1 parent 1f2be85
commit d494a90
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 15 deletions.
diff --git a/src/components/PageLayout/TopGrid/TopGrid.module.scss b/src/components/PageLayout/TopGrid/TopGrid.module.scss
@@ -22,13 +22,9 @@
   // second row center column
   grid-row: 2;
   grid-column: 2;
-  font-size: 1.7rem;
-  font-weight: bold;
   padding-left: 20px;
   display: flex;
   align-items: center;
-  text-transform: uppercase;
-  font-style: italic;
 }
 
 .semesterPicker {
@@ -40,8 +36,6 @@
 }
 
 .menuItem {
-  font-size: 1.3rem;
-  font-weight: bold;
   padding: 8px;
   margin: 10px;
 }

diff --git a/src/components/PageLayout/TopGrid/TopGrid.tsx b/src/components/PageLayout/TopGrid/TopGrid.tsx
@@ -1,3 +1,4 @@
+import {Typography} from '@mui/material'
 import clsx from 'clsx'
 import Link from 'next/link'
 import {useRouter} from 'next/router'
@@ -22,16 +23,24 @@ export const TopGrid: FC<TopGridProps> = ({title}) => {
     <div className={styles.container}>
       <div className={styles.menu}>
         <div className={clsx(styles.menuItem, seminar === 'malynar' && styles.active)}>
-          <Link href="/malynar">Malynár</Link>
+          <Typography variant="button1">
+            <Link href="/malynar">Malynár</Link>
+          </Typography>
         </div>
         <div className={clsx(styles.menuItem, seminar === 'matik' && styles.active)}>
-          <Link href="/matik">Matik</Link>
+          <Typography variant="button1">
+            <Link href="/matik">Matik</Link>
+          </Typography>
         </div>
         <div className={clsx(styles.menuItem, seminar === 'strom' && styles.active)}>
-          <Link href="/strom">Strom</Link>
+          <Typography variant="button1">
+            <Link href="/strom">Strom</Link>
+          </Typography>
         </div>
       </div>
-      <div className={styles.title}>{title}</div>
+      <Typography variant="h1" className={styles.title}>
+        {title}
+      </Typography>
       {(page === 'zadania' || page === 'vysledky') && (
         <div className={styles.semesterPicker}>
           <SemesterPicker page={page} />

diff --git a/src/components/SemesterPicker/Dropdown.module.scss b/src/components/SemesterPicker/Dropdown.module.scss
@@ -3,9 +3,6 @@
   width: fit-content;
   display: flex;
   align-items: center;
-  text-transform: uppercase;
-  font-weight: bold;
-  font-style: italic;
   position: relative;
   margin: 0px 20px;
 

diff --git a/src/components/SemesterPicker/Dropdown.tsx b/src/components/SemesterPicker/Dropdown.tsx
@@ -1,3 +1,4 @@
+import {Typography} from '@mui/material'
 import clsx from 'clsx'
 import Link from 'next/link'
 import {FC, MouseEvent, useState} from 'react'
@@ -25,7 +26,10 @@ export const Dropdown: FC<{title: string; options: DropdownOption[]}> = ({title,
 
   return (
     <div className={styles.dropdown} onClick={handleClick} onMouseLeave={handleMouseLeave}>
-      {title} <div className={styles.arrow} />
+      <Typography variant="button2">
+        {title}
+        <div className={styles.arrow} />
+      </Typography>
       <div className={clsx(styles.options, display && styles.displayOptions)}>
         {options.map((option) => {
           return (
@@ -34,7 +38,7 @@ export const Dropdown: FC<{title: string; options: DropdownOption[]}> = ({title,
               key={option.id}
               className={clsx(styles.option, option.selected && styles.selectedOption)}
             >
-              {option.text}
+              <Typography variant="button2">{option.text}</Typography>
             </Link>
           )
         })}