From 3e813938c6d5aedbcd0b8c65ea423fa31de07046 Mon Sep 17 00:00:00 2001
From: Shekar Siri <sshekarsiri@gmail.com>
Date: Tue, 3 Aug 2021 16:51:13 +0530
Subject: [PATCH] feature(ui) - heatmaps ui changes

---
 .../PageInsightsPanel/PageInsightsPanel.tsx   |  9 ++++----
 .../SelectorsList/SelectorsList.tsx           | 22 +++++++++----------
 .../Player/Overlay/ElementsMarker/Marker.css  |  4 ++--
 3 files changed, 17 insertions(+), 18 deletions(-)

diff --git a/frontend/app/components/Session_/PageInsightsPanel/PageInsightsPanel.tsx b/frontend/app/components/Session_/PageInsightsPanel/PageInsightsPanel.tsx
index 7ccbdd213..8929a3b5b 100644
--- a/frontend/app/components/Session_/PageInsightsPanel/PageInsightsPanel.tsx
+++ b/frontend/app/components/Session_/PageInsightsPanel/PageInsightsPanel.tsx
@@ -44,8 +44,8 @@ function PageInsightsPanel({ filters, fetchInsights, events = [], insights, urlO
   };
 
   return (
-    <div className="p-3 bg-gray-lightest">
-      <div className="mb-3 flex">
+    <div className="px-4 bg-gray-lightest">
+      <div className="my-3 flex">
         <DateRange
           // rangeValue={filters.rangeValue}
           startDate={filters.startDate}
@@ -55,7 +55,7 @@ function PageInsightsPanel({ filters, fetchInsights, events = [], insights, urlO
         />
       </div>
       <div className="mb-4 flex items-center">
-        <div className="mr-2 flex-shrink-0">In Page:</div>
+        <div className="mr-2 flex-shrink-0">In Page</div>
         <Dropdown
           labeled
           placeholder="change"
@@ -65,7 +65,8 @@ function PageInsightsPanel({ filters, fetchInsights, events = [], insights, urlO
           defaultValue={urlOptions[0].value}
           onChange={ onPageSelect }
           id="change-dropdown"
-          className="customDropdown"
+          className="customDropdown"          
+          style={{ minWidth: '80px', width: '100%' }}
         />
       </div>
       <Loader loading={ loading }>
diff --git a/frontend/app/components/Session_/PageInsightsPanel/components/SelectorsList/SelectorsList.tsx b/frontend/app/components/Session_/PageInsightsPanel/components/SelectorsList/SelectorsList.tsx
index ec90aa494..bc435b26b 100644
--- a/frontend/app/components/Session_/PageInsightsPanel/components/SelectorsList/SelectorsList.tsx
+++ b/frontend/app/components/Session_/PageInsightsPanel/components/SelectorsList/SelectorsList.tsx
@@ -10,18 +10,16 @@ interface Props {
 }
 
 function SelectorsList({ targets, activeTargetIndex }: Props) {     
-  return (
-    <div>
-      <NoContent
-        title="No data available."
-        size="small"
-        show={ targets && targets.length === 0 }
-      >
-        { targets && targets.map((target, index) => (
-          <SelectorCard target={target} index={index} showContent={activeTargetIndex === index} />
-        ))}
-      </NoContent>
-    </div>
+  return (    
+    <NoContent
+      title="No data available."
+      size="small"
+      show={ targets && targets.length === 0 }
+    >
+      { targets && targets.map((target, index) => (
+        <SelectorCard target={target} index={index} showContent={activeTargetIndex === index} />
+      ))}
+    </NoContent>    
   )
 }
 
diff --git a/frontend/app/components/Session_/Player/Overlay/ElementsMarker/Marker.css b/frontend/app/components/Session_/Player/Overlay/ElementsMarker/Marker.css
index f8d1b8079..28f9c5422 100644
--- a/frontend/app/components/Session_/Player/Overlay/ElementsMarker/Marker.css
+++ b/frontend/app/components/Session_/Player/Overlay/ElementsMarker/Marker.css
@@ -1,7 +1,7 @@
 .marker {
   position: absolute;
   z-index: 100;
-  border: 2px dashed transparent;
+  border: 2px dotted transparent;
   cursor: pointer;
   user-select: none;
 
@@ -57,7 +57,7 @@
 }
 
 .active {
-  border: 2px dashed $tealx;
+  border: 2px dotted $tealx;
 
   & .index {
     opacity: 1