From 3c818843c24de1f42efb6b26c2e1a39aad8d6be6 Mon Sep 17 00:00:00 2001
From: Shekar Siri <sshekarsiri@gmail.com>
Date: Fri, 28 Apr 2023 11:29:40 +0200
Subject: [PATCH] change(ui) - ui feedback on user steps

---
 .../components/Session_/EventsBlock/Event.tsx | 66 +++++++++----------
 .../Session_/EventsBlock/EventGroupWrapper.js | 18 ++---
 .../EventsBlock/eventGroupWrapper.module.css  |  2 +-
 .../Session_/EventsBlock/loadInfo.module.css  |  2 +-
 4 files changed, 44 insertions(+), 44 deletions(-)

diff --git a/frontend/app/components/Session_/EventsBlock/Event.tsx b/frontend/app/components/Session_/EventsBlock/Event.tsx
index 4f59ff9fa..4f5ca53a7 100644
--- a/frontend/app/components/Session_/EventsBlock/Event.tsx
+++ b/frontend/app/components/Session_/EventsBlock/Event.tsx
@@ -33,17 +33,17 @@ const isFrustrationEvent = (evt: any): boolean => {
 };
 
 const Event: React.FC<Props> = ({
-  event,
-  selected = false,
-  isCurrent = false,
-  onClick,
-  showSelection = false,
-  showLoadInfo,
-  toggleLoadInfo,
-  isRed = false,
-  presentInSearch = false,
-  whiteBg,
-}) => {
+                                  event,
+                                  selected = false,
+                                  isCurrent = false,
+                                  onClick,
+                                  showSelection = false,
+                                  showLoadInfo,
+                                  toggleLoadInfo,
+                                  isRed = false,
+                                  presentInSearch = false,
+                                  whiteBg
+                                }) => {
   const wrapperRef = useRef<HTMLDivElement>(null);
   const [menuOpen, setMenuOpen] = useState(false);
   const isLocation = event.type === TYPES.LOCATION;
@@ -81,9 +81,9 @@ const Event: React.FC<Props> = ({
         icon = isFrustration ? 'click_hesitation' : 'click';
         isFrustration
           ? Object.assign(tooltip, {
-              disabled: false,
-              text: `User hesitated to click for ${Math.round(event.hesitation / 1000)}s`,
-            })
+            disabled: false,
+            text: `User hesitated to click for ${Math.round(event.hesitation / 1000)}s`
+          })
           : null;
         break;
       case TYPES.INPUT:
@@ -92,9 +92,9 @@ const Event: React.FC<Props> = ({
         icon = isFrustration ? 'input_hesitation' : 'input';
         isFrustration
           ? Object.assign(tooltip, {
-              disabled: false,
-              text: `User hesitated to enter a value for ${Math.round(event.hesitation / 1000)}s`,
-            })
+            disabled: false,
+            text: `User hesitated to enter a value for ${Math.round(event.hesitation / 1000)}s`
+          })
           : null;
         break;
       case TYPES.CLICKRAGE:
@@ -122,23 +122,23 @@ const Event: React.FC<Props> = ({
         containerClassName={'w-full'}
       >
         <div className={cn(cls.main, 'flex flex-col w-full')}>
-          <div className={cn("flex items-center w-full", {'px-4' : isLocation })}>
-            {event.type && <Icon name={`event/${icon}`} size="16" color={'gray-dark'} />}
-            <div className="ml-3 w-full">
-              <div className="flex w-full items-first justify-between">
-                <div className="flex items-center w-full" style={{ minWidth: '0' }}>
-                  <span className={cn(cls.title, {'font-medium' : isLocation })}>{title}</span>
+          <div className={cn('flex items-center w-full', { 'px-4': isLocation })}>
+            {event.type && <Icon name={`event/${icon}`} size='16' color={'gray-dark'} />}
+            <div className='ml-3 w-full'>
+              <div className='flex w-full items-first justify-between'>
+                <div className='flex items-center w-full' style={{ minWidth: '0' }}>
+                  <span className={cn(cls.title, { 'font-medium': isLocation })}>{title}</span>
                   {body && !isLocation && (
                     <TextEllipsis
-                      maxWidth="60%"
-                      className="w-full ml-2 text-sm color-gray-medium"
+                      maxWidth='60%'
+                      className='w-full ml-2 text-sm color-gray-medium'
                       text={body}
                     />
                   )}
                 </div>
                 {isLocation && event.speedIndex != null && (
-                  <div className="color-gray-medium flex font-medium items-center leading-none justify-end">
-                    <div className="font-size-10 pr-2">{'Speed Index'}</div>
+                  <div className='color-gray-medium flex font-medium items-center leading-none justify-end'>
+                    <div className='font-size-10 pr-2'>{'Speed Index'}</div>
                     <div>{numberWithCommas(event.speedIndex || 0)}</div>
                   </div>
                 )}
@@ -149,8 +149,8 @@ const Event: React.FC<Props> = ({
             </div>
           </div>
           {isLocation && (
-            <div className="mt-1 px-4">
-              <span className="text-sm font-normal color-gray-medium">{body}</span>
+            <div className='mt-1 px-4'>
+              <span className='text-sm font-normal color-gray-medium'>{body}</span>
             </div>
           )}
         </div>
@@ -164,7 +164,7 @@ const Event: React.FC<Props> = ({
     <div
       ref={wrapperRef}
       onMouseLeave={onMouseLeave}
-      data-openreplay-label="Event"
+      data-openreplay-label='Event'
       data-type={event.type}
       className={cn(cls.event, {
         [cls.menuClosed]: !menuOpen,
@@ -177,7 +177,7 @@ const Event: React.FC<Props> = ({
         [cls.frustration]: isFrustration,
         [cls.highlight]: presentInSearch,
         [cls.lastInGroup]: whiteBg,
-        ['mx-4 rounded']: event.type !== TYPES.LOCATION,
+        ['mx-4 rounded']: event.type !== TYPES.LOCATION
       })}
       onClick={onClick}
       onContextMenu={onContextMenu}
@@ -201,10 +201,10 @@ const Event: React.FC<Props> = ({
               elements: {
                 a: event.fcpTime,
                 b: event.visuallyComplete,
-                c: event.timeToInteractive,
+                c: event.timeToInteractive
               },
               startDivisorFn: (elements) => elements / 1.2,
-              divisorFn: (elements, parts) => elements / (2 * parts + 1),
+              divisorFn: (elements, parts) => elements / (2 * parts + 1)
             })}
           />
         )}
diff --git a/frontend/app/components/Session_/EventsBlock/EventGroupWrapper.js b/frontend/app/components/Session_/EventsBlock/EventGroupWrapper.js
index c66e9a2fe..9ce12cb88 100644
--- a/frontend/app/components/Session_/EventsBlock/EventGroupWrapper.js
+++ b/frontend/app/components/Session_/EventsBlock/EventGroupWrapper.js
@@ -14,7 +14,7 @@ import { setEditNoteTooltip } from 'Duck/sessions';
 @connect(
   (state) => ({
     members: state.getIn(['members', 'list']),
-    currentUserId: state.getIn(['user', 'account', 'id']),
+    currentUserId: state.getIn(['user', 'account', 'id'])
   }),
   { setEditNoteTooltip }
 )
@@ -34,6 +34,7 @@ class EventGroupWrapper extends React.Component {
       this.props.mesureHeight();
     }
   }
+
   componentDidMount() {
     this.props.toggleLoadInfo(this.props.isFirst);
     this.props.mesureHeight();
@@ -56,7 +57,7 @@ class EventGroupWrapper extends React.Component {
       isFirst,
       presentInSearch,
       isNote,
-      filterOutNote,
+      filterOutNote
     } = this.props;
     const isLocation = event.type === TYPES.LOCATION;
 
@@ -73,19 +74,18 @@ class EventGroupWrapper extends React.Component {
             {
               [stl.last]: isLastInGroup,
               [stl.first]: event.type === TYPES.LOCATION,
-              [stl.dashAfter]: isLastInGroup && !isLastEvent,
+              [stl.dashAfter]: isLastInGroup && !isLastEvent
             },
             isLastInGroup && '!pb-2',
             event.type === TYPES.LOCATION && '!pt-2 !pb-2'
           )}
         >
           {isFirst && isLocation && event.referrer && (
-
-              <TextEllipsis>
-                <div className={stl.referrer}>
+            <TextEllipsis>
+              <div className={stl.referrer}>
                 Referrer: <span className={stl.url}>{safeRef}</span>
-                </div>
-              </TextEllipsis>
+              </div>
+            </TextEllipsis>
           )}
           {isNote ? (
             <NoteEvent
@@ -124,7 +124,7 @@ class EventGroupWrapper extends React.Component {
             />
           )}
         </div>
-        {isLastInGroup && <div className="border-t mx-5 border-color-gray-light-shade" />}
+        {isLastInGroup && <div className='border-t border-color-gray-light-shade' />}
       </>
     );
   }
diff --git a/frontend/app/components/Session_/EventsBlock/eventGroupWrapper.module.css b/frontend/app/components/Session_/EventsBlock/eventGroupWrapper.module.css
index 27f114129..552c44ab8 100644
--- a/frontend/app/components/Session_/EventsBlock/eventGroupWrapper.module.css
+++ b/frontend/app/components/Session_/EventsBlock/eventGroupWrapper.module.css
@@ -20,7 +20,7 @@
   display: flex;
   align-items: center;
   max-width: 280px;
-  margin: 0 20px;
+  margin: 0 14px;
   margin-bottom: 5px;
   & .url {
     margin-left: 5px;
diff --git a/frontend/app/components/Session_/EventsBlock/loadInfo.module.css b/frontend/app/components/Session_/EventsBlock/loadInfo.module.css
index 1e2a95927..254b3a041 100644
--- a/frontend/app/components/Session_/EventsBlock/loadInfo.module.css
+++ b/frontend/app/components/Session_/EventsBlock/loadInfo.module.css
@@ -35,7 +35,7 @@ $green-dark:  #3A625E;
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 12px 5px 12px 34px;
+  padding: 12px 26px 12px 34px;
   font-size: 13px;
   /* font-weight: 500; */