From 3e4b6a9e3472cabc235570e812c201784b6f69b4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mat=C3=BA=C5=A1=20Hlav=C3=A1=C4=8Dik?=
 <hlavacik.matus@gmail.com>
Date: Sat, 23 Nov 2024 16:17:26 +0100
Subject: [PATCH] Hide tree logo (#467)

* unrelated: fix close button position and other undefined style

* resolve #383 - main menu will be always open on bigger screen
---
 .../PageLayout/MenuMain/MenuMain.tsx          |  8 ++++-
 .../StromLogo/StromLogo.module.scss           | 16 ---------
 .../StromLogo/StromLogo.module.scss.d.ts      | 10 ------
 .../PageLayout/StromLogo/StromLogo.tsx        | 36 +++++++++++++------
 src/components/Results/Results.tsx            |  6 ++--
 5 files changed, 36 insertions(+), 40 deletions(-)
 delete mode 100644 src/components/PageLayout/StromLogo/StromLogo.module.scss
 delete mode 100644 src/components/PageLayout/StromLogo/StromLogo.module.scss.d.ts

diff --git a/src/components/PageLayout/MenuMain/MenuMain.tsx b/src/components/PageLayout/MenuMain/MenuMain.tsx
index c0cb1a24..64321d2c 100644
--- a/src/components/PageLayout/MenuMain/MenuMain.tsx
+++ b/src/components/PageLayout/MenuMain/MenuMain.tsx
@@ -102,7 +102,13 @@ export const MenuMain: FC = () => {
           <CloseButton
             size={iconSize}
             onClick={toggleMenu}
-            sx={{position: 'absolute', top: 24, left: {xs: undefined, md: 24}, right: {xs: 24, md: undefined}}}
+            sx={{
+              position: 'absolute',
+              top: 24,
+              left: {xs: 'auto', md: 24},
+              right: {xs: 24, md: 'auto'},
+              display: {xs: 'block', md: 'none'},
+            }}
           />
           {menuItemsIsLoading && (
             <Box sx={{position: 'absolute', top: '50%', left: 0, right: 0, color: 'white'}}>
diff --git a/src/components/PageLayout/StromLogo/StromLogo.module.scss b/src/components/PageLayout/StromLogo/StromLogo.module.scss
deleted file mode 100644
index 719ce3c3..00000000
--- a/src/components/PageLayout/StromLogo/StromLogo.module.scss
+++ /dev/null
@@ -1,16 +0,0 @@
-.container{
-  position: fixed;
-  top: 12rem;
-  left: 0;
-  bottom: 0;
-  width: 25%;
-  padding-top: 100px;
-  z-index: -1;
-}
-
-.tree{
-  height: 100%;
-  width: 100%;
-  background-color: black;
-  clip-path: polygon(100% 0%, 100% 100%, 45% 100%, 96% 63%, 55% 63%, 96% 30%, 65% 30%);
-}
diff --git a/src/components/PageLayout/StromLogo/StromLogo.module.scss.d.ts b/src/components/PageLayout/StromLogo/StromLogo.module.scss.d.ts
deleted file mode 100644
index d35e3e92..00000000
--- a/src/components/PageLayout/StromLogo/StromLogo.module.scss.d.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-export type Styles = {
-  container: string
-  tree: string
-}
-
-export type ClassNames = keyof Styles
-
-declare const styles: Styles
-
-export default styles
diff --git a/src/components/PageLayout/StromLogo/StromLogo.tsx b/src/components/PageLayout/StromLogo/StromLogo.tsx
index 258fbe39..904884d3 100644
--- a/src/components/PageLayout/StromLogo/StromLogo.tsx
+++ b/src/components/PageLayout/StromLogo/StromLogo.tsx
@@ -1,15 +1,31 @@
-import {FC, MouseEvent} from 'react'
-
-import styles from './StromLogo.module.scss'
-
-const handleClick = (e: MouseEvent<HTMLElement>) => {
-  console.log('Clicked')
-}
+import {Box} from '@mui/material'
+import {FC} from 'react'
 
 export const StromLogo: FC = () => {
   return (
-    <div className={styles.container}>
-      <div className={styles.tree} onClick={handleClick} />
-    </div>
+    <Box
+      sx={{
+        position: 'fixed',
+        // tieto cisla su take dost ad-hoc, ale aj tak ten strom nebude vidno
+        top: {md: '204px', lg: '186px', xl: '222px'},
+        left: 0,
+        bottom: 0,
+        width: '25%',
+        paddingTop: 2,
+        zIndex: -1,
+      }}
+    >
+      <Box
+        sx={{
+          height: '100%',
+          width: '100%',
+          backgroundColor: 'black',
+          // toto je stary tomaskov stromcek
+          // clip-path: 'polygon(100% 0%, 100% 100%, 45% 100%, 96% 63%, 55% 63%, 96% 30%, 65% 30%)'
+          // toto je novy stromcek od Matusa Libaka
+          clipPath: 'polygon(100% 0, 100% 100%, 90% 100%, 90% 80%, 35% 80%, 90% 35%, 56% 35%)',
+        }}
+      />
+    </Box>
   )
 }
diff --git a/src/components/Results/Results.tsx b/src/components/Results/Results.tsx
index 2d92e0b8..36f93680 100644
--- a/src/components/Results/Results.tsx
+++ b/src/components/Results/Results.tsx
@@ -35,13 +35,13 @@ export const Results: FC = () => {
   }, [setBannerMessages, isBannerLoading, bannerMessages])
 
   return (
-    <div>
+    <>
       {resultsIsLoading && <Loading />}
       <Box
         sx={{
           display: 'grid',
           rowGap: {xs: '6px', sm: '10px'},
-          mx: {xs: 1, sm: 3, md: undefined},
+          mx: {xs: 1, sm: 3, md: 'auto'},
           gridTemplateColumns: 'max-content 1fr repeat(3, max-content)',
         }}
       >
@@ -49,6 +49,6 @@ export const Results: FC = () => {
           <ResultsRow result={result} key={index} />
         ))}
       </Box>
-    </div>
+    </>
   )
 }