From 21713dfe53f91a4ce1669c6d884bba353b8fa872 Mon Sep 17 00:00:00 2001
From: sylenien <nikita@openreplay.com>
Date: Fri, 8 Jul 2022 10:14:23 +0200
Subject: [PATCH] fix(ui): fix revId position, fix issue icons on timeline

---
 .../Session_/EventsBlock/UserCard/UserCard.js |  8 ++---
 .../Session_/Player/Controls/Timeline.js      | 30 +++++++++++--------
 2 files changed, 20 insertions(+), 18 deletions(-)

diff --git a/frontend/app/components/Session_/EventsBlock/UserCard/UserCard.js b/frontend/app/components/Session_/EventsBlock/UserCard/UserCard.js
index e663be9cc..9045491ac 100644
--- a/frontend/app/components/Session_/EventsBlock/UserCard/UserCard.js
+++ b/frontend/app/components/Session_/EventsBlock/UserCard/UserCard.js
@@ -87,7 +87,8 @@ function UserCard({
                     <SessionInfoItem comp={<CountryFlag country={ userCountry } />} label={countries[userCountry]} value={<span style={{ whiteSpace: 'nowrap' }}>{formatTimeOrDate(startedAt)}</span> } />
                     <SessionInfoItem icon={browserIcon(userBrowser)} label={userBrowser} value={ `v${ userBrowserVersion }` } />
                     <SessionInfoItem icon={osIcon(userOs)} label={userOs} value={ userOsVersion } />
-                    <SessionInfoItem icon={deviceTypeIcon(userDeviceType)} label={userDeviceType} value={ getDimension(width, height) } isLast />
+                    <SessionInfoItem icon={deviceTypeIcon(userDeviceType)} label={userDeviceType} value={ getDimension(width, height) } isLast={!revId} />
+                    {revId && <SessionInfoItem icon="info" label="Rev ID:" value={revId} isLast />}
                   </div>
                 )}
                 position="bottom center"
@@ -104,11 +105,6 @@ function UserCard({
           </div>
         </div>
       </div>
-      {revId && (
-        <div className="border-l py-2 px-3">
-          <span className="font-medium">Rev ID:</span> {revId}
-        </div>
-      )}
 
       <SlideModal
         title={ <div>User Sessions</div> }
diff --git a/frontend/app/components/Session_/Player/Controls/Timeline.js b/frontend/app/components/Session_/Player/Controls/Timeline.js
index 6d75bfec6..01b6d8351 100644
--- a/frontend/app/components/Session_/Player/Controls/Timeline.js
+++ b/frontend/app/components/Session_/Player/Controls/Timeline.js
@@ -310,19 +310,22 @@ export default class Timeline extends React.PureComponent {
                 <div
                   key={ e.key }
                   className={ cn(stl.markup, stl.error) }
-                  style={ { left: `${ e.time * scale }%`, top: '-5px' } }
+                  style={ { left: `${ e.time * scale }%`, top: '0px' } }
                   onClick={ this.createEventClickHandler(e) }
                 >
-                  <TimelinePointer
-                    icon={getPointerIcon('fetch')}
-                    content={
+                  <Tooltip
+                    delay={0}
+                    position="top"
+                    html={
                       <div className={ stl.popup }>
-                        <b>{ "Failed Fetch" }</b>
+                        <b>Failed Fetch</b>
                         <br/>
                         { e.name }
                       </div>
                     }
-                  />
+                  >
+                    <Icon className=" rounded-full bg-white" name={getPointerIcon('fetch')} size="16" />
+                  </Tooltip>
                 </div>
               ))
             }
@@ -332,19 +335,22 @@ export default class Timeline extends React.PureComponent {
                 <div
                   key={ e.key }
                   className={ cn(stl.markup, stl.error) }
-                  style={ { left: `${ e.time * scale }%`, top: '-5px' } }
+                  style={ { left: `${ e.time * scale }%`, top: '0px' } }
                   onClick={ this.createEventClickHandler(e) }
                 >
-                  <TimelinePointer
-                    icon={getPointerIcon('stack')}
-                    content={
+                  <Tooltip
+                    delay={0}
+                    position="top"
+                    html={
                       <div className={ stl.popup }>
-                        <b> { "Stack Event" }</b>
+                        <b>Stack Event</b>
                         <br/>
                         { e.name }
                       </div>
                     }
-                  />
+                  >
+                    <Icon className=" rounded-full bg-white" name={getPointerIcon('stack')} size="16" />
+                  </Tooltip>
                 </div>
               ))
             }