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
codesandbox · Dec 8, 2021 · 51be6cf · 51be6cf
1 parent c8da242
commit 51be6cf
Show file tree

Hide file tree

Showing 3 changed files with 4 additions and 1 deletion.
diff --git 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
@@ -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
@@ -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>