From 299f87f9492aea4c6f4d2e5d73edfd27996c94c8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fede=20=C3=81lvarez?= <fedealvarezcampos@gmail.com>
Date: Mon, 13 Jun 2022 19:18:49 +0200
Subject: [PATCH] Work on 404 LM, minor fixes

---
 .../sections/404/hero/hero.module.scss         | 17 +++++++++++++++++
 src/components/sections/404/hero/index.tsx     | 18 +++++++++++++++++-
 .../sections/about/hero/hero.module.scss       |  2 +-
 .../sections/community/hero/hero.module.scss   |  2 +-
 .../sections/products/hero/hero.module.scss    |  2 +-
 5 files changed, 37 insertions(+), 4 deletions(-)

diff --git a/src/components/sections/404/hero/hero.module.scss b/src/components/sections/404/hero/hero.module.scss
index b9f7434..75bc086 100644
--- a/src/components/sections/404/hero/hero.module.scss
+++ b/src/components/sections/404/hero/hero.module.scss
@@ -184,3 +184,20 @@
   width: tovw(36px, 'default', 22px);
   height: tovw(20px, 'default', 20px);
 }
+
+[data-theme='light'] {
+  .section {
+    &::after,
+    &::before {
+      display: none;
+    }
+  }
+
+  .video {
+    mix-blend-mode: darken;
+  }
+
+  .gradient {
+    visibility: hidden;
+  }
+}
diff --git a/src/components/sections/404/hero/index.tsx b/src/components/sections/404/hero/index.tsx
index 3a7ab40..457a032 100644
--- a/src/components/sections/404/hero/index.tsx
+++ b/src/components/sections/404/hero/index.tsx
@@ -1,4 +1,6 @@
 import clsx from 'clsx'
+import { useTheme } from 'next-themes'
+import { useEffect, useRef } from 'react'
 
 import Line from '~/components/icons/line'
 import Section from '~/components/layout/section'
@@ -8,10 +10,24 @@ import Heading from '~/components/primitives/heading'
 import s from './hero.module.scss'
 
 const Hero = () => {
+  const { theme } = useTheme()
+
+  const videoRef = useRef<HTMLVideoElement>(null)
+
+  useEffect(() => {
+    if (!videoRef.current) return
+
+    videoRef.current.src =
+      theme === 'dark'
+        ? '/videos/hero-grid.mp4'
+        : '/videos/Banner-Home-Light.mp4'
+  }, [theme])
+
   return (
     <Section className={s['section']} disableFadeIn>
       <video
         autoPlay
+        ref={videoRef}
         className={clsx('hide-on-mobile', s['video'])}
         controls={false}
         loop
@@ -19,7 +35,7 @@ const Hero = () => {
         playsInline={true}
         preload="true"
       >
-        <source src="/videos/hero-grid.mp4" type="video/mp4" />
+        <source type="video/mp4" />
       </video>
       <Heading as="h1" variant="xl" centered>
         Page not found
diff --git a/src/components/sections/about/hero/hero.module.scss b/src/components/sections/about/hero/hero.module.scss
index d12a1b0..ba08146 100644
--- a/src/components/sections/about/hero/hero.module.scss
+++ b/src/components/sections/about/hero/hero.module.scss
@@ -216,6 +216,6 @@
   }
 
   .gradient {
-    display: hidden;
+    visibility: hidden;
   }
 }
diff --git a/src/components/sections/community/hero/hero.module.scss b/src/components/sections/community/hero/hero.module.scss
index 1d8a5c7..0d3cd6b 100644
--- a/src/components/sections/community/hero/hero.module.scss
+++ b/src/components/sections/community/hero/hero.module.scss
@@ -221,6 +221,6 @@
   }
 
   .gradient {
-    display: hidden;
+    visibility: hidden;
   }
 }
diff --git a/src/components/sections/products/hero/hero.module.scss b/src/components/sections/products/hero/hero.module.scss
index 5c12b29..37852f6 100644
--- a/src/components/sections/products/hero/hero.module.scss
+++ b/src/components/sections/products/hero/hero.module.scss
@@ -253,6 +253,6 @@
   }
 
   .gradient {
-    display: none;
+    visibility: hidden;
   }
 }