From 35d258aa8c82ff679b2e821744a0246522979fe7 Mon Sep 17 00:00:00 2001
From: sylenien <nikita@openreplay.com>
Date: Wed, 25 May 2022 11:34:27 +0200
Subject: [PATCH] fix(ui): design review fixes

---
 .../app/components/Session/RightBlock.tsx     |  2 +-
 .../components/Session_/Autoplay/Autoplay.js  |  6 ++--
 .../Session_/EventsBlock/UserCard/UserCard.js | 16 ++++++----
 .../PageInsightsPanel/PageInsightsPanel.tsx   | 32 ++++++++++++-------
 .../components/Session_/PlayerBlockHeader.js  | 10 ++++--
 .../components/shared/Bookmark/Bookmark.tsx   |  8 ++---
 frontend/app/theme/colors.js                  |  3 +-
 7 files changed, 47 insertions(+), 30 deletions(-)

diff --git a/frontend/app/components/Session/RightBlock.tsx b/frontend/app/components/Session/RightBlock.tsx
index 3e74413d8..8a07bbf2e 100644
--- a/frontend/app/components/Session/RightBlock.tsx
+++ b/frontend/app/components/Session/RightBlock.tsx
@@ -19,7 +19,7 @@ export default function RightBlock(props) {
       case props.tabs.EVENTS:
         return <EventsBlockConnected setActiveTab={props.setActiveTab} player={PlayerControls}/>
       case props.tabs.HEATMAPS:
-        return <PageInsightsPanel />
+        return <PageInsightsPanel setActiveTab={props.setActiveTab} />
     }
   }
   return (
diff --git a/frontend/app/components/Session_/Autoplay/Autoplay.js b/frontend/app/components/Session_/Autoplay/Autoplay.js
index b42625c07..f3f4c1ca9 100644
--- a/frontend/app/components/Session_/Autoplay/Autoplay.js
+++ b/frontend/app/components/Session_/Autoplay/Autoplay.js
@@ -17,7 +17,7 @@ function Autoplay(props) {
 
   return (
     <div className="flex items-center">
-      <div onClick={props.toggleAutoplay} className="cursor-pointer flex items-center mr-2 hover:bg-gray-light-shade rounded-md p-2">
+      <div onClick={props.toggleAutoplay} className="cursor-pointer flex items-center mr-2 hover:bg-gray-light-shade rounded-md p-1">
         <Toggler
           name="sessionsLive"
           onChange={ props.toggleAutoplay }
@@ -39,7 +39,7 @@ function Autoplay(props) {
         )}
       >
         <Link to={ sessionRoute(previousId) } disabled={!previousId}> 
-          <Icon name="prev1" className="group-hover:fill-blue" color="inherit" size="16" />
+          <Icon name="prev1" className="group-hover:fill-main group-hover:bg-bg-blue" color="inherit" size="16" />
         </Link>
       </Tooltip>
 
@@ -56,7 +56,7 @@ function Autoplay(props) {
         )}
       >
         <Link to={ sessionRoute(nextId) } disabled={!nextId} >
-          <Icon name="next1" className="group-hover:fill-blue" color="inherit" size="16" />
+          <Icon name="next1" className="group-hover:fill-main group-hover:bg-bg-blue" color="inherit" size="16" />
         </Link>
       </Tooltip>
     </div>
diff --git a/frontend/app/components/Session_/EventsBlock/UserCard/UserCard.js b/frontend/app/components/Session_/EventsBlock/UserCard/UserCard.js
index 68eeefb7c..d4745d3c2 100644
--- a/frontend/app/components/Session_/EventsBlock/UserCard/UserCard.js
+++ b/frontend/app/components/Session_/EventsBlock/UserCard/UserCard.js
@@ -9,6 +9,7 @@ import cn from 'classnames'
 import { withRequest } from 'HOCs'
 import SessionInfoItem from '../../SessionInfoItem'
 import SessionList from '../Metadata/SessionList';
+import { Tooltip } from 'react-tippy'
 
 function UserCard({
   className,
@@ -71,11 +72,12 @@ function UserCard({
             <span className="mx-1 font-bold text-xl">&#183;</span>
             <span className='capitalize'>{userBrowser}, {userOs}, {userDevice}</span>
             <span className="mx-1 font-bold text-xl">&#183;</span>
-            <Popup
-                trigger={<span className="color-teal cursor-pointer">More</span>}
-
-                content={(
-                  <div className=''>
+            <Tooltip
+                theme='light'
+                arrow
+                interactive
+                html={(
+                  <div className='text-left'>
                     <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 } />
@@ -86,7 +88,9 @@ function UserCard({
                 hoverable
                 disabled={false}
                 on="hover"
-            />
+            >
+              <span className="color-teal cursor-pointer">More</span>
+            </Tooltip>
           </div>
         </div>
       </div>
diff --git a/frontend/app/components/Session_/PageInsightsPanel/PageInsightsPanel.tsx b/frontend/app/components/Session_/PageInsightsPanel/PageInsightsPanel.tsx
index 83392cde8..445d65b80 100644
--- a/frontend/app/components/Session_/PageInsightsPanel/PageInsightsPanel.tsx
+++ b/frontend/app/components/Session_/PageInsightsPanel/PageInsightsPanel.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { Dropdown, Loader } from 'UI';
+import { Dropdown, Loader, Icon } from 'UI';
 import DateRange from 'Shared/DateRange';
 import { connect } from 'react-redux';
 import { fetchInsights } from 'Duck/sessions';
@@ -19,10 +19,11 @@ interface Props {
   urlOptions: Array<any>
   loading: boolean
   host: string
+  setActiveTab: (tab) => void
 }
 
 function PageInsightsPanel({
-  filters, fetchInsights, events = [], insights, urlOptions, host, loading = true
+  filters, fetchInsights, events = [], insights, urlOptions, host, loading = true, setActiveTab
 }: Props) {
   const [insightsFilters, setInsightsFilters] = useState(filters)
   const defaultValue = (urlOptions && urlOptions[0]) ? urlOptions[0].value : ''
@@ -61,16 +62,23 @@ function PageInsightsPanel({
   };
 
   return (
-    <div className="px-4 bg-white" style={{ width: 270 }}>
-      <div className="my-3 flex -ml-2">
-        {/* <DateRange
-          rangeValue={insightsFilters.rangeValue}
-          startDate={insightsFilters.startDate}
-          endDate={insightsFilters.endDate}
-          onDateChange={onDateChange}
-          customHidden
-        /> */}
-        <SelectDateRange period={period} onChange={onDateChange} disableCustom />
+    <div className="p-4 bg-white" style={{ width: 270 }}>
+      <div className="pt-2 pb-3 flex items-center" style={{ maxWidth: '241px' }}>
+        <div className="-ml-1 text-lg">
+          <DateRange
+            rangeValue={insightsFilters.rangeValue}
+            startDate={insightsFilters.startDate}
+            endDate={insightsFilters.endDate}
+            onDateChange={onDateChange}
+            customHidden
+          />
+        </div>
+        <div
+            onClick={() => { setActiveTab('');  }}
+            className="ml-auto flex items-center justify-center bg-white cursor-pointer"
+          >
+            <Icon name="close" size="18" />
+          </div>
       </div>
       <div className="mb-4 flex items-center">
         <div className="mr-2 flex-shrink-0">In Page</div>
diff --git a/frontend/app/components/Session_/PlayerBlockHeader.js b/frontend/app/components/Session_/PlayerBlockHeader.js
index 2a4629ca6..e03cc9403 100644
--- a/frontend/app/components/Session_/PlayerBlockHeader.js
+++ b/frontend/app/components/Session_/PlayerBlockHeader.js
@@ -116,7 +116,7 @@ export default class PlayerBlockHeader extends React.PureComponent {
           />
           { isAssist && <AssistTabs userId={userId} userNumericHash={userNumericHash} />}
 
-          <div className={cn("ml-auto flex items-center", { 'hidden' : closedLive })}>
+          <div className={cn("ml-auto flex items-center h-full", { 'hidden' : closedLive })}>
             { live && !isAssist && (
               <>
                 <div className={stl.liveSwitchButton}>
@@ -128,13 +128,17 @@ export default class PlayerBlockHeader extends React.PureComponent {
               </>
             )}
 
-            <SessionMetaList className="" metaList={_metaList} maxLength={2} />
+            {_metaList.length > 0 && (
+              <div className="border-l h-full flex items-center px-2">
+                <SessionMetaList className="" metaList={_metaList} maxLength={2} />
+              </div>
+            )}
 
             { isAssist && <AssistActions userId={userId} /> }
             { !isAssist && jiraConfig && jiraConfig.token && <Issues sessionId={ sessionId } /> }
           </div>
         </div>
-        <div className="relative" style={{ minWidth: '270px' }}>
+        <div className="relative border-l" style={{ minWidth: '270px' }}>
           <Tabs
             tabs={ TABS }
             active={ activeTab }
diff --git a/frontend/app/components/shared/Bookmark/Bookmark.tsx b/frontend/app/components/shared/Bookmark/Bookmark.tsx
index 486c88618..feb0dcac3 100644
--- a/frontend/app/components/shared/Bookmark/Bookmark.tsx
+++ b/frontend/app/components/shared/Bookmark/Bookmark.tsx
@@ -16,10 +16,10 @@ interface Props {
 function Bookmark(props : Props ) {
   const { sessionId, favorite, isEnterprise } = props;
   const [isFavorite, setIsFavorite] = useState(favorite);
-  const ADDED_MESSAGE = isEnterprise ? 'Session added to vault' : 'Session added to your favorites';
-  const REMOVED_MESSAGE = isEnterprise ? 'Session removed from vault' : 'Session removed from your favorites';
-  const TOOLTIP_TEXT_ADD = isEnterprise ? 'Add to vault' : 'Add to favorites';
-  const TOOLTIP_TEXT_REMOVE = isEnterprise ? 'Remove from vault' : 'Remove from favorites';
+  const ADDED_MESSAGE = isEnterprise ? 'Session added to vault' : 'Session added to your bookmarks';
+  const REMOVED_MESSAGE = isEnterprise ? 'Session removed from vault' : 'Session removed from your bookmarks';
+  const TOOLTIP_TEXT_ADD = isEnterprise ? 'Add to vault' : 'Add to bookmarks';
+  const TOOLTIP_TEXT_REMOVE = isEnterprise ? 'Remove from vault' : 'Remove from bookmarks';
 
   const ACTIVE_ICON = isEnterprise ? 'safe-fill' : 'star-solid';
   const INACTIVE_ICON = isEnterprise ? 'safe' : 'star';
diff --git a/frontend/app/theme/colors.js b/frontend/app/theme/colors.js
index fd1b4864d..29e740634 100644
--- a/frontend/app/theme/colors.js
+++ b/frontend/app/theme/colors.js
@@ -28,6 +28,7 @@ module.exports = {
   blue: "#366CD9",
   blue2: "#0076FF",
   "active-blue": "#F6F7FF",
+  "bg-blue": "#e3e6ff",
   "active-blue-border": "#D0D4F2",
   pink: "#ffb9b9",
 
@@ -38,4 +39,4 @@ module.exports = {
     'gray-light-shade': '#EEEEEE',
     'primary': '#3490dc',
   }
-}
\ No newline at end of file
+}