From f360168a0c8945d59e6378f979d4e8a74836b6d2 Mon Sep 17 00:00:00 2001
From: Shekar Siri <sshekarsiri@gmail.com>
Date: Sat, 31 Jul 2021 01:17:52 +0530
Subject: [PATCH] feature(ui) - fixes

---
 .../Session_/PageInsightsPanel/PageInsightsPanel.tsx |  3 ++-
 .../shared/DateRangeDropdown/dateRangePopup.css      | 12 +++++++-----
 .../MessageDistributor/StatedScreen/StatedScreen.ts  |  2 +-
 frontend/app/player/Player.ts                        |  2 +-
 4 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/frontend/app/components/Session_/PageInsightsPanel/PageInsightsPanel.tsx b/frontend/app/components/Session_/PageInsightsPanel/PageInsightsPanel.tsx
index ae047a82e..7ccbdd213 100644
--- a/frontend/app/components/Session_/PageInsightsPanel/PageInsightsPanel.tsx
+++ b/frontend/app/components/Session_/PageInsightsPanel/PageInsightsPanel.tsx
@@ -6,6 +6,7 @@ import { fetchInsights } from 'Duck/sessions';
 import SelectorsList from './components/SelectorsList/SelectorsList';
 import { markTargets, Controls as Player } from 'Player';
 
+const JUMP_OFFSET = 1000;
 interface Props {
   filters: any
   fetchInsights: (filters) => void
@@ -37,7 +38,7 @@ function PageInsightsPanel({ filters, fetchInsights, events = [], insights, urlO
 
   const onPageSelect = (e, { name, value }) => {
     const event = events.find(item => item.url === value)    
-    Player.jump(event.time + 500)
+    Player.jump(event.time + JUMP_OFFSET)
     setInsightsFilters({ ...insightsFilters, url: value })
     markTargets([])
   };
diff --git a/frontend/app/components/shared/DateRangeDropdown/dateRangePopup.css b/frontend/app/components/shared/DateRangeDropdown/dateRangePopup.css
index a41fd1ef5..98b2bf7f4 100644
--- a/frontend/app/components/shared/DateRangeDropdown/dateRangePopup.css
+++ b/frontend/app/components/shared/DateRangeDropdown/dateRangePopup.css
@@ -1,9 +1,11 @@
 .wrapper {
-    & .body {
-        display: flex;
-        border-bottom: solid thin $gray-light;
-        padding: 5px;
-    }
+  background-color: white;
+  outline: solid thin #CCC;
+  & .body {
+      display: flex;
+      border-bottom: solid thin $gray-light;
+      padding: 5px;
+  }
 }
 
 .preSelections {
diff --git a/frontend/app/player/MessageDistributor/StatedScreen/StatedScreen.ts b/frontend/app/player/MessageDistributor/StatedScreen/StatedScreen.ts
index f306b05a0..763f3732c 100644
--- a/frontend/app/player/MessageDistributor/StatedScreen/StatedScreen.ts
+++ b/frontend/app/player/MessageDistributor/StatedScreen/StatedScreen.ts
@@ -35,7 +35,7 @@ export const INITIAL_STATE: State = {
   cssLoading: false,
   disconnected: false,
   userPageLoading: false,
-  markedTargets: [],
+  markedTargets: null,
   activeTargetIndex: 0
 };
 
diff --git a/frontend/app/player/Player.ts b/frontend/app/player/Player.ts
index 6c7e0193d..f99434be5 100644
--- a/frontend/app/player/Player.ts
+++ b/frontend/app/player/Player.ts
@@ -192,7 +192,7 @@ export default class Player extends MessageDistributor {
     }
   }
 
-  markTargets(targets: { selector: string, count: number }[] | null) {
+  markTargets(targets: { selector: string, count: number }[] | null) {    
     this.pause();
     this.setMarkedTargets(targets);
   }