fix(ui): design review fixes

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 (

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>

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>

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>

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 }

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';

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',
   }
-}
+}