From 8579231f487b7544252fb394f82ca7ccd3d09d19 Mon Sep 17 00:00:00 2001
From: sylenien <nikita@openreplay.com>
Date: Fri, 25 Nov 2022 15:17:16 +0100
Subject: [PATCH] fix(ui): fix styling for guide popup

---
 .../components/StepsComponents/EventStep.tsx         |  2 +-
 .../app/components/Session_/components/NotePopup.tsx |  6 +-----
 .../app/components/shared/GuidePopup/GuidePopup.tsx  | 12 +++++++-----
 .../app/components/shared/XRayButton/XRayButton.tsx  |  5 ++++-
 4 files changed, 13 insertions(+), 12 deletions(-)

diff --git a/frontend/app/components/Session_/BugReport/components/StepsComponents/EventStep.tsx b/frontend/app/components/Session_/BugReport/components/StepsComponents/EventStep.tsx
index fb0dc5b98..255cac92b 100644
--- a/frontend/app/components/Session_/BugReport/components/StepsComponents/EventStep.tsx
+++ b/frontend/app/components/Session_/BugReport/components/StepsComponents/EventStep.tsx
@@ -50,7 +50,7 @@ function Step({ step, ind, isDefault }: { step: IStep; ind: number; isDefault?:
       >
         <div className="rounded-3xl px-4 bg-gray-lightest relative z-10">{ind + 1}</div>
         <div className="w-full">
-          <div className="flex items-center w-full gap-2">
+          <div className="flex items-start w-full gap-2">
             <div className="px-1 text-disabled-text">{durationFromMs(step.time)}</div>
             {/* @ts-ignore */}
             <Icon name={step.icon} size={16} color="gray-darkest" className="relative z-10" />
diff --git a/frontend/app/components/Session_/components/NotePopup.tsx b/frontend/app/components/Session_/components/NotePopup.tsx
index 7c5ea49f4..83201fc57 100644
--- a/frontend/app/components/Session_/components/NotePopup.tsx
+++ b/frontend/app/components/Session_/components/NotePopup.tsx
@@ -26,11 +26,7 @@ function NotePopup({
 
   return (
     <GuidePopup
-      title={
-        <div className="color-gray-dark">
-          Introducing <span className={''}>Notes</span>
-        </div>
-      }
+      title="Introducing Notes"
       description={'Annotate session replays and share your feedback with the rest of your team.'}
     >
       <Button icon="quotes" variant="text" disabled={tooltipActive} onClick={toggleNotePopup}>
diff --git a/frontend/app/components/shared/GuidePopup/GuidePopup.tsx b/frontend/app/components/shared/GuidePopup/GuidePopup.tsx
index fa7de66a0..52739144d 100644
--- a/frontend/app/components/shared/GuidePopup/GuidePopup.tsx
+++ b/frontend/app/components/shared/GuidePopup/GuidePopup.tsx
@@ -38,13 +38,13 @@ export default function GuidePopup({ children, title, description }: IProps) {
         style={{ zIndex: INDEXES.POPUP_GUIDE_BG, opacity: '0.7' }}
       ></div>
       <Tooltip
-        offset={30}
+        offset={20}
         className="!bg-white rounded text-center shadow !p-6"
         title={
           <div className="relative">
-            <div className="font-bold">{title}</div>
-            <div className="color-gray-medium w-80">{description}</div>
-            <div className="w-10 h-10 bg-white rotate-45 absolute right-0 left-0 m-auto" style={{ top: '-38px'}} />
+            <div className="font-bold text-figmaColors-text-primary">{title}</div>
+            <div className="color-gray-dark w-80">{description}</div>
+            <div className="w-4 h-4 bg-white rotate-45 absolute right-0 left-0 m-auto" style={{ top: '-28px'}} />
           </div>
         }
         open={true}
@@ -67,6 +67,8 @@ export default function GuidePopup({ children, title, description }: IProps) {
       </Tooltip>
     </div>
   ) : (
-    children
+    <>
+      {children}
+    </>
   );
 }
diff --git a/frontend/app/components/shared/XRayButton/XRayButton.tsx b/frontend/app/components/shared/XRayButton/XRayButton.tsx
index 98368da21..58daaa070 100644
--- a/frontend/app/components/shared/XRayButton/XRayButton.tsx
+++ b/frontend/app/components/shared/XRayButton/XRayButton.tsx
@@ -12,7 +12,10 @@ interface Props {
 }
 function XRayButton(props: Props) {
   const { isActive } = props;
-  const [showGuide, setShowGuide] = useState(!localStorage.getItem(FEATURE_KEYS.XRAY));
+  // const [showGuide, setShowGuide] = useState(!localStorage.getItem(FEATURE_KEYS.XRAY));
+  const showGuide = false;
+  const setShowGuide = (anyt: any) => anyt;
+
   useEffect(() => {
     if (!showGuide) {
       return;