From 51be6cf8dbee4df309167e07484f67e2c0324ac0 Mon Sep 17 00:00:00 2001
From: Matan Kushner <hello@matchai.dev>
Date: Wed, 8 Dec 2021 18:20:46 +0300
Subject: [PATCH] fix(landing): set pointerEvents to avoid reset button overlap
 (#245)

* fix(landing): set pointerEvents to avoid reset button overlap

Fixes CSB-2014

* chore(landing): dim reset button when code is unchanged

Closes CSB-2015
---
 website/landing/components/Intro/Sections/Custom.tsx | 1 +
 website/landing/components/Intro/Sections/Editor.tsx | 1 +
 website/landing/components/Intro/Sections/common.tsx | 3 ++-
 3 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/website/landing/components/Intro/Sections/Custom.tsx b/website/landing/components/Intro/Sections/Custom.tsx
index 05850364a..184bff05d 100644
--- a/website/landing/components/Intro/Sections/Custom.tsx
+++ b/website/landing/components/Intro/Sections/Custom.tsx
@@ -130,6 +130,7 @@ export const CustomExample: React.FC = () => {
                 onClick={() => {
                   sandpack.updateCurrentFile(ORIGINAL_CODE);
                 }}
+                style={{ opacity: code === ORIGINAL_CODE ? 0.3 : 1 }}
               >
                 <svg
                   fill="currentColor"
diff --git a/website/landing/components/Intro/Sections/Editor.tsx b/website/landing/components/Intro/Sections/Editor.tsx
index de6a4b613..131bbcaae 100644
--- a/website/landing/components/Intro/Sections/Editor.tsx
+++ b/website/landing/components/Intro/Sections/Editor.tsx
@@ -132,6 +132,7 @@ export const EditorExample: React.FC = () => {
                   sandpack.updateCurrentFile(ORIGINAL_CODE);
                   setOptions(ORIGINAL_CUSTOM);
                 }}
+                style={{ opacity: code === ORIGINAL_CODE ? 0.3 : 1 }}
               >
                 <svg
                   fill="currentColor"
diff --git a/website/landing/components/Intro/Sections/common.tsx b/website/landing/components/Intro/Sections/common.tsx
index 552a33aa3..e3fc3ecf3 100644
--- a/website/landing/components/Intro/Sections/common.tsx
+++ b/website/landing/components/Intro/Sections/common.tsx
@@ -201,12 +201,13 @@ export const FadeAnimation: React.FC = ({ children }) => {
     ],
     [shouldAnimate ? 0 : 1, 1, 1, 1, 1, shouldAnimate ? 0 : 1]
   );
+  const pointerEvents = opacity.get() ? "auto" : "none";
 
   return (
     <motion.li
       ref={sectionRef}
       className="fade-animation"
-      style={{ opacity, width: "100%" }}
+      style={{ opacity, pointerEvents, width: "100%" }}
     >
       {children}
     </motion.li>