change(ui): move popup guide button to shared

frontend/app/components/shared/GuidePopup/GuidePopup.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { Tooltip } from 'react-tippy';
+
+export const FEATURE_KEYS = {
+  XRAY: 'featureViewed'
+}
+
+interface IProps {
+  children: React.ReactNode
+  title: React.ReactNode
+  description: React.ReactNode
+  key?: keyof typeof FEATURE_KEYS
+}
+
+export default function GuidePopup({ children, title, description }: IProps) {
+  return (
+    // @ts-ignore
+    <Tooltip
+      html={
+        <div>
+          <div className="font-bold">
+            {title}
+          </div>
+          <div className="color-gray-medium">
+            {description}
+          </div>
+        </div>
+      }
+      distance={30}
+      theme={'light'}
+      open={true}
+      arrow={true}
+    >
+      {children}
+    </Tooltip>
+  );
+}

frontend/app/components/shared/GuidePopup/index.ts

@@ -0,0 +1 @@
+export { default, FEATURE_KEYS } from './GuidePopup'

frontend/app/components/shared/XRayButton/XRayButton.tsx

@@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react';
 import stl from './xrayButton.module.css';
 import cn from 'classnames';
 import { Popup } from 'UI';
-import { Tooltip } from 'react-tippy';
+import GuidePopup, { FEATURE_KEYS } from 'Shared/GuidePopup';
 import { Controls as Player } from 'Player';
 
 interface Props {
@@ -11,7 +11,7 @@ interface Props {
 }
 function XRayButton(props: Props) {
   const { isActive } = props;
-  const [showGuide, setShowGuide] = useState(!localStorage.getItem('featureViewed'));
+  const [showGuide, setShowGuide] = useState(!localStorage.getItem(FEATURE_KEYS.XRAY));
   useEffect(() => {
     if (!showGuide) {
       return;
@@ -38,7 +38,10 @@ function XRayButton(props: Props) {
       )}
       <div className="relative">
         {showGuide ? (
-          <GuidePopup>
+          <GuidePopup
+            title={<>Introducing <span className={stl.text}>X-Ray</span></>}
+            description={"Get a quick overview on the issues in this session."}
+          >
             <button
               className={cn(stl.wrapper, { [stl.default]: !isActive, [stl.active]: isActive })}
               onClick={onClick}
@@ -74,26 +77,3 @@ function XRayButton(props: Props) {
 }
 
 export default XRayButton;
-
-function GuidePopup({ children }: any) {
-  return (
-    <Tooltip
-      html={
-        <div>
-          <div className="font-bold">
-            Introducing <span className={stl.text}>X-Ray</span>
-          </div>
-          <div className="color-gray-medium">
-            Get a quick overview on the issues in this session.
-          </div>
-        </div>
-      }
-      distance={30}
-      theme={'light'}
-      open={true}
-      arrow={true}
-    >
-      {children}
-    </Tooltip>
-  );
-}

frontend/app/components/shared/XRayButton/xrayButton.module.css

@@ -24,4 +24,4 @@
     background: linear-gradient(90deg, rgba(57, 78, 255, 0.87) 0%, rgba(62, 170, 175, 0.87) 100%);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
-}
+  }