From 64d42378004c4fe6bd436fb148a0e4d0b9f5fa07 Mon Sep 17 00:00:00 2001
From: matushl <hlavacik.matus@gmail.com>
Date: Fri, 8 Dec 2023 16:34:06 +0100
Subject: [PATCH] Add typography to `Banner`

---
 src/components/PageLayout/Banner/Banner.module.scss | 2 +-
 src/components/PageLayout/Banner/Banner.tsx         | 5 ++++-
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/components/PageLayout/Banner/Banner.module.scss b/src/components/PageLayout/Banner/Banner.module.scss
index adcfcefd..62d4c8e1 100644
--- a/src/components/PageLayout/Banner/Banner.module.scss
+++ b/src/components/PageLayout/Banner/Banner.module.scss
@@ -1,6 +1,5 @@
 .banner{
   width: 100vw;
-  height: 2rem;
   background-color: black;
   color: white;
   border: none;
@@ -9,6 +8,7 @@
   padding: 0px;
   z-index: 3;
   margin-bottom: 0.5rem;
+  padding: 0.2rem;
 }
 
 
diff --git a/src/components/PageLayout/Banner/Banner.tsx b/src/components/PageLayout/Banner/Banner.tsx
index a9dc9182..26c2bdce 100644
--- a/src/components/PageLayout/Banner/Banner.tsx
+++ b/src/components/PageLayout/Banner/Banner.tsx
@@ -1,3 +1,4 @@
+import {Typography} from '@mui/material'
 import {FC} from 'react'
 
 import {Marquee} from '@/components/Marquee/Marquee'
@@ -10,7 +11,9 @@ export const Banner: FC = () => {
   return (
     <div className={styles.banner}>
       <Marquee gradient={false} speed={100}>
-        <div className={styles.marqueeTextContainer}>{bannerText}</div>
+        <Typography variant="h2" component="span" className={styles.marqueeTextContainer}>
+          {bannerText}
+        </Typography>
       </Marquee>
     </div>
   )