fix(ui): design fixes

frontend/app/components/Session_/EventsBlock/EventsBlock.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { connect } from 'react-redux';
 import cn from 'classnames';
+import { Icon } from 'UI';
 import { List, AutoSizer, CellMeasurer, CellMeasurerCache } from "react-virtualized";
 import { TYPES } from 'Types/session/event';
 import { setSelected } from 'Duck/events';
@@ -185,6 +186,7 @@ export default class EventsBlock extends React.PureComponent {
 
     const _events = filteredEvents || events;
 
+    const isEmptySearch = query && (_events.size === 0 || !_events)
     return (
       <>
         <div className={ cn(styles.header, 'p-4') }>
@@ -207,6 +209,12 @@ export default class EventsBlock extends React.PureComponent {
           onMouseOver={ this.onMouseOver }
           onMouseLeave={ this.onMouseLeave }
         >
+          {isEmptySearch && (
+            <div className='flex items-center'> 
+              <Icon name="binoculars" size={18} />
+              <span className='ml-2'>No Matching Results</span>
+            </div>
+          )}
           <AutoSizer disableWidth>
             {({ height }) => (
               <List

frontend/app/components/Session_/EventsBlock/event.module.css

@@ -20,6 +20,7 @@
   /* box-shadow: 0px 1px 3px 0 $gray-light; */
   transition: all 0.2s;
   cursor: pointer;
+  border: 1px solid transparent;
   &:hover {
     background-color: $active-blue;
     border: 1px solid $active-blue-border;

frontend/app/components/Session_/PageInsightsPanel/components/SelectorCard/SelectorCard.tsx

@@ -3,6 +3,7 @@ import stl from './SelectorCard.module.css'
 import cn from 'classnames';
 import type { MarkedTarget } from 'Player/MessageDistributor/StatedScreen/StatedScreen';
 import { activeTarget } from 'Player';
+import { Tooltip } from 'react-tippy';
 
 interface Props {
   index?: number,
@@ -14,7 +15,8 @@ export default function SelectorCard({ index = 1, target, showContent } : Props)
   return (
     <div className={cn(stl.wrapper, { [stl.active]: showContent })} onClick={() => activeTarget(index)}>
       <div className={stl.top}>
-        <div className={stl.index}>{index + 1}</div>
+        {/* @ts-ignore */}
+        <Tooltip position='top' title="Rank of the most clicked element"><div className={stl.index}>{index + 1}</div></Tooltip>
         <div className="truncate">{target.selector}</div>
       </div>
       { showContent && (

frontend/app/components/Session_/Player/Controls/Timeline.js

@@ -87,6 +87,7 @@ export default class Timeline extends React.PureComponent {
     const { endTime } = this.props;
     const p = e.nativeEvent.offsetX / e.target.offsetWidth;
     const time = Math.max(Math.round(p * endTime), 0);
+    console.log(p, time, e, endTime)
     this.props.jump(time);
   }
 

frontend/app/components/ui/Toggler/toggler.module.css

@@ -41,7 +41,7 @@
   bottom: -2px;
   transition: .4s;
   border-radius: 50%;
-  background: inherit;
+  background: $gray-medium;
   box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px rgba(0, 0, 0, 0.14), 0px 1px 3px rgba(0, 0, 0, 0.12);
 }