From 9ebf1875385ca154b80de293a153f935fb28157d Mon Sep 17 00:00:00 2001
From: Shekar Siri <sshekarsiri@gmail.com>
Date: Thu, 25 Aug 2022 18:00:39 +0200
Subject: [PATCH] change(ui) - x-ray - bg click

---
 .../app/components/shared/XRayButton/XRayButton.tsx  | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/frontend/app/components/shared/XRayButton/XRayButton.tsx b/frontend/app/components/shared/XRayButton/XRayButton.tsx
index 2b54e2d66..b50a5ecb2 100644
--- a/frontend/app/components/shared/XRayButton/XRayButton.tsx
+++ b/frontend/app/components/shared/XRayButton/XRayButton.tsx
@@ -13,6 +13,9 @@ function XRayButton(props: Props) {
   const { isActive } = props;
   const [showGuide, setShowGuide] = useState(!localStorage.getItem('featureViewed'));
   useEffect(() => {
+    if (!showGuide) {
+      return;
+    }
     Player.pause();
   }, []);
 
@@ -25,6 +28,10 @@ function XRayButton(props: Props) {
     <>
       {showGuide && (
         <div
+          onClick={() => {
+            setShowGuide(false);
+            localStorage.setItem('featureViewed', 'true');
+          }}
           className="bg-gray-darkest fixed inset-0 z-10 w-full h-screen"
           style={{ zIndex: 9999, opacity: '0.7' }}
         ></div>
@@ -74,10 +81,7 @@ function GuidePopup({ children }: any) {
       html={
         <div>
           <div className="font-bold">
-            Introducing{' '}
-            <span className={stl.text}>
-              X-Ray
-            </span>
+            Introducing <span className={stl.text}>X-Ray</span>
           </div>
           <div className="color-gray-medium">
             Get a quick overview on the issues in this session.