From ef48692da42dfacb4f48997c41a649ffdc4e8b4d Mon Sep 17 00:00:00 2001
From: mrfry <mr.fry@tutanota.com>
Date: Tue, 6 Dec 2022 08:19:18 +0100
Subject: [PATCH] added snow toggle button

---
 src/components/layout.js         | 31 ++++++++++++++++++++-----------
 src/components/layout.module.css | 17 +++++++++++++++++
 2 files changed, 37 insertions(+), 11 deletions(-)

diff --git a/src/components/layout.js b/src/components/layout.js
index 869ba57..19148a4 100644
--- a/src/components/layout.js
+++ b/src/components/layout.js
@@ -22,6 +22,7 @@ const shouldRenderSnow = () => {
 
 function Snow() {
   const [windowSize, setWindowSize] = useState([100, 200])
+  const [snowShowing, setSnowShowing] = useState(true)
 
   useEffect(() => {
     setWindowSize([window.innerWidth, window.innerHeight])
@@ -35,17 +36,25 @@ function Snow() {
   if (typeof window !== 'object') return null
 
   return ReactDOM.createPortal(
-    <div
-      style={{
-        pointerEvents: 'none',
-        zIndex: 900,
-        position: 'fixed',
-        width: `${windowSize[0]}px`,
-        height: `${windowSize[1]}px`,
-      }}
-    >
-      <Snowfall snowflakeCount={snowflakeCount} />
-    </div>,
+    <>
+      <div
+        onClick={() => setSnowShowing(!snowShowing)}
+        className={styles.snowToggleButton}
+      >
+        Hó on/off
+      </div>
+      <div
+        style={{
+          pointerEvents: 'none',
+          zIndex: 900,
+          position: 'fixed',
+          width: `${windowSize[0]}px`,
+          height: `${windowSize[1]}px`,
+        }}
+      >
+        {snowShowing && <Snowfall snowflakeCount={snowflakeCount} />}
+      </div>
+    </>,
     document.body
   )
 }
diff --git a/src/components/layout.module.css b/src/components/layout.module.css
index 38651e1..2786e6a 100644
--- a/src/components/layout.module.css
+++ b/src/components/layout.module.css
@@ -246,3 +246,20 @@
     top: 10px;
   }
 }
+
+.snowToggleButton {
+  color: #fcdb8c;
+  background-color: #303030;
+  z-index: 901;
+  position: fixed;
+  border-radius: 4px;
+  padding: 4px;
+  bottom: 20px;
+  right: 20px;
+  cursor: pointer;
+  opacity: 50%;
+}
+
+.snowToggleButton:hover {
+  opacity: 100%;
+}