Upravit TopGrid komponentu podla designu (#212)

* Use typography variants in TopGrid

* Refactor and improve TopGrid

Author: Matushl

src/components/PageLayout/Banner/Banner.module.scss

@@ -1,16 +1,14 @@
 .banner{
-  position: fixed;
   width: 100vw;
-  top: 10rem;
-  left: 0;
   height: 2rem;
   background-color: black;
   color: white;
   border: none;
   display: flex;
   align-items: center;
   padding: 0px;
-  z-index: 2;
+  z-index: 3;
+  margin-bottom: 0.5rem;
 }
 
 

src/components/PageLayout/PageLayout.module.scss

@@ -5,8 +5,6 @@
 .grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
-  // top offset because of sticky menu/title/banner
-  padding-top: 12rem;
   // bottom offset because of sticky debug footer
   padding-bottom: 1rem;
 }

src/components/PageLayout/PageLayout.tsx

@@ -4,7 +4,6 @@ import {FC, ReactNode} from 'react'
 import {BannerContainer} from '@/utils/BannerContainer'
 import {PageTitleContainer} from '@/utils/PageTitleContainer'
 
-import {Banner} from './Banner/Banner'
 import {Footer} from './Footer/Footer'
 import {MenuMain} from './MenuMain/MenuMain'
 import styles from './PageLayout.module.scss'
@@ -25,7 +24,6 @@ export const PageLayout: FC<PageLayoutProps> = ({contentWidth = 2, title = '', c
       <BannerContainer.Provider>
         <div className={styles.pageContainer}>
           <TopGrid />
-          <Banner />
           <MenuMain />
           <div className={styles.grid}>
             <StromLogo />

src/components/PageLayout/TopGrid/TopGrid.module.scss

@@ -1,13 +1,16 @@
 .container {
-  position: fixed;
+  position: sticky;
   top: 0;
   left: 0;
   right: 0;
-  height: 10rem;
+  height: auto;
   background-color: white;
   z-index: 3;
+}
+
+.grid {
   display: grid;
-  grid-template: 1fr 1fr / 1fr 2fr 1fr;
+  grid-template: 1fr auto / 1fr 2fr 1fr;
 }
 
 .menu {
@@ -22,13 +25,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 +39,6 @@
 }
 
 .menuItem {
-  font-size: 1.3rem;
-  font-weight: bold;
   padding: 8px;
   margin: 10px;
 }

src/components/PageLayout/TopGrid/TopGrid.module.scss.d.ts

@@ -1,6 +1,7 @@
 export type Styles = {
   active: string
   container: string
+  grid: string
   menu: string
   menuItem: string
   semesterPicker: string

src/components/PageLayout/TopGrid/TopGrid.tsx

@@ -1,3 +1,4 @@
+import {Stack, Typography} from '@mui/material'
 import clsx from 'clsx'
 import Link from 'next/link'
 import {useRouter} from 'next/router'
@@ -7,6 +8,7 @@ import {SemesterPicker} from '@/components/SemesterPicker/SemesterPicker'
 import {PageTitleContainer} from '@/utils/PageTitleContainer'
 import {useSeminarInfo} from '@/utils/useSeminarInfo'
 
+import {Banner} from '../Banner/Banner'
 import styles from './TopGrid.module.scss'
 
 export const TopGrid: FC = () => {
@@ -18,24 +20,35 @@ export const TopGrid: FC = () => {
   const {pageTitle} = PageTitleContainer.useContainer()
 
   return (
-    <div className={styles.container}>
-      <div className={styles.menu}>
-        <div className={clsx(styles.menuItem, seminar === 'malynar' && styles.active)}>
-          <Link href="/malynar">Malynár</Link>
-        </div>
-        <div className={clsx(styles.menuItem, seminar === 'matik' && styles.active)}>
-          <Link href="/matik">Matik</Link>
-        </div>
-        <div className={clsx(styles.menuItem, seminar === 'strom' && styles.active)}>
-          <Link href="/strom">Strom</Link>
+    <Stack className={styles.container}>
+      <div className={styles.grid}>
+        <div className={styles.menu}>
+          <div className={clsx(styles.menuItem, seminar === 'malynar' && styles.active)}>
+            <Typography variant="button1">
+              <Link href="/malynar">Malynár</Link>
+            </Typography>
+          </div>
+          <div className={clsx(styles.menuItem, seminar === 'matik' && styles.active)}>
+            <Typography variant="button1">
+              <Link href="/matik">Matik</Link>
+            </Typography>
+          </div>
+          <div className={clsx(styles.menuItem, seminar === 'strom' && styles.active)}>
+            <Typography variant="button1">
+              <Link href="/strom">Strom</Link>
+            </Typography>
+          </div>
         </div>
+        <Typography variant="h1" className={styles.title}>
+          {pageTitle}
+        </Typography>
+        {(page === 'zadania' || page === 'vysledky') && (
+          <div className={styles.semesterPicker}>
+            <SemesterPicker page={page} />
+          </div>
+        )}
       </div>
-      <div className={styles.title}>{pageTitle}</div>
-      {(page === 'zadania' || page === 'vysledky') && (
-        <div className={styles.semesterPicker}>
-          <SemesterPicker page={page} />
-        </div>
-      )}
-    </div>
+      <Banner />
+    </Stack>
   )
 }

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;
 

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>
           )
         })}