From ce5affddd692804a456727c4d69ceb7c8c325751 Mon Sep 17 00:00:00 2001
From: sylenien <nikita@openreplay.com>
Date: Tue, 24 May 2022 16:23:53 +0200
Subject: [PATCH] fix(ui): fix styles in player header

---
 .../AssistTabs/assistTabs.module.css          |  3 +-
 .../components/Session_/Autoplay/Autoplay.js  | 43 +++++++++++++++----
 .../Session_/EventsBlock/UserCard/UserCard.js | 14 +++---
 frontend/app/components/Session_/Subheader.js | 10 ++---
 .../Session_/playerBlockHeader.module.css     |  3 +-
 .../components/shared/Bookmark/Bookmark.tsx   | 11 +++--
 .../ui/CountryFlag/countryFlag.module.css     |  4 +-
 7 files changed, 60 insertions(+), 28 deletions(-)

diff --git a/frontend/app/components/Assist/components/AssistTabs/assistTabs.module.css b/frontend/app/components/Assist/components/AssistTabs/assistTabs.module.css
index 462879395..6bdc2f198 100644
--- a/frontend/app/components/Assist/components/AssistTabs/assistTabs.module.css
+++ b/frontend/app/components/Assist/components/AssistTabs/assistTabs.module.css
@@ -2,4 +2,5 @@
   cursor: pointer;
   color: $green;
   text-decoration: underline;
-}
\ No newline at end of file
+  white-space: nowrap;
+}
diff --git a/frontend/app/components/Session_/Autoplay/Autoplay.js b/frontend/app/components/Session_/Autoplay/Autoplay.js
index 109c65d2f..b42625c07 100644
--- a/frontend/app/components/Session_/Autoplay/Autoplay.js
+++ b/frontend/app/components/Session_/Autoplay/Autoplay.js
@@ -5,6 +5,8 @@ import { session as sessionRoute } from 'App/routes';
 import { Link, Icon, Slider, Toggler } from 'UI';
 import { connectPlayer } from 'Player/store';
 import { Controls as PlayerControls } from 'Player';
+import { Tooltip } from 'react-tippy';
+import cn from 'classnames';
 
 function Autoplay(props) {
   const { previousId, nextId, autoplay } = props
@@ -15,23 +17,48 @@ function Autoplay(props) {
 
   return (
     <div className="flex items-center">
-      <div onClick={props.toggleAutoplay} className="cursor-pointer flex items-center mr-2">
+      <div onClick={props.toggleAutoplay} className="cursor-pointer flex items-center mr-2 hover:bg-gray-light-shade rounded-md p-2">
         <Toggler
           name="sessionsLive"
           onChange={ props.toggleAutoplay }
           checked={ autoplay }
-          plain
         />
         <span className="ml-2">Auto-Play</span>
       </div>
 
-      <Link className="mr-1 cursor-pointer p-2 bg-tealx-light rounded-full color-tealx font-medium" to={ sessionRoute(previousId) } disabled={!previousId}>
-		  	<Icon name="prev1" className="hover:fill-teal" color="inherit" size="16" />
-		  </Link>
+      <Tooltip
+        delay={0}
+        arrow
+        animation="fade"
+        position="bottom center"
+        title="Play Previous Session"
+        disabled={!previousId}
+        className={cn(
+          "p-1 bg-active-blue group rounded-full color-teal-light font-medium", 
+          previousId && 'cursor-pointer'
+        )}
+      >
+        <Link to={ sessionRoute(previousId) } disabled={!previousId}> 
+          <Icon name="prev1" className="group-hover:fill-blue" color="inherit" size="16" />
+        </Link>
+      </Tooltip>
 
-      <Link className="cursor-pointer p-2 bg-tealx-light rounded-full color-tealx font-medium" to={ sessionRoute(nextId) } disabled={!nextId}>
-		  	<Icon name="next1" className="hover:fill-teal" color="inherit" size="16" />
-		  </Link>
+      <Tooltip
+        delay={0}
+        arrow
+        animation="fade"
+        position="bottom center"
+        title="Play Next Session"
+        disabled={!nextId}
+        className={cn(
+          "p-1 bg-active-blue group ml-1 rounded-full color-teal-light font-medium", 
+          nextId && 'cursor-pointer'
+        )}
+      >
+        <Link to={ sessionRoute(nextId) } disabled={!nextId} >
+          <Icon name="next1" className="group-hover:fill-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 f1a3c556b..68eeefb7c 100644
--- a/frontend/app/components/Session_/EventsBlock/UserCard/UserCard.js
+++ b/frontend/app/components/Session_/EventsBlock/UserCard/UserCard.js
@@ -64,19 +64,19 @@ function UserCard({
             { userDisplayName }
           </TextEllipsis>
 
-          <div className="text-sm color-gray-medium">
-            <span>{formatDateTimeDefault(startedAt)}</span>
-            <span className="mx-1">·</span>
-            <span>{userBrowser}, {userDevice}</span>
-            <span className="mx-1">·</span>
+          <div className="text-sm color-gray-medium flex items-center">
+            <span style={{ whiteSpace: 'nowrap' }}>{formatDateTimeDefault(startedAt)}</span>
+            <span className="mx-1 font-bold text-xl">&#183;</span>
             <span>{countries[userCountry]}</span>
-            <span className="mx-1">·</span>
+            <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=''>
-                    <SessionInfoItem comp={<CountryFlag country={ userCountry } />} label={countries[userCountry]} value={ formatTimeOrDate(startedAt) } />
+                    <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 } />
                     <SessionInfoItem icon={deviceTypeIcon(userDeviceType)} label={userDeviceType} value={ getDimension(width, height) } isLast />
diff --git a/frontend/app/components/Session_/Subheader.js b/frontend/app/components/Session_/Subheader.js
index b22817c95..8441ca40a 100644
--- a/frontend/app/components/Session_/Subheader.js
+++ b/frontend/app/components/Session_/Subheader.js
@@ -18,7 +18,7 @@ function SubHeader(props) {
         <div className="w-full px-4 py-2 flex items-center">
             {location && (
                 <div
-                    className="flex items-center cursor-pointer color-gray-medium text-lg"
+                    className="flex items-center cursor-pointer color-gray-medium text-xs p-2 hover:bg-gray-light-shade rounded-md"
                     onClick={() => {
                         copy(props.currentLocation);
                         setCopied(true)
@@ -38,14 +38,14 @@ function SubHeader(props) {
                     </Tooltip>
                 </div>
             )}
-            <div className="ml-auto flex items-center color-gray-medium" style={{ width: 'max-content' }}>
+            <div className="ml-auto text-xs flex items-center color-gray-medium" style={{ width: 'max-content' }}>
                 <div className="cursor-pointer">
                     <SharePopup
                         entity="sessions"
                         id={ props.sessionId }
                         showCopyLink={true}
                         trigger={
-                            <div className="flex items-center">
+                            <div className="flex items-center hover:bg-gray-light-shade rounded-md p-2">
                                 <Icon
                                     className="mr-2"
                                     disabled={ props.disabled }
@@ -58,8 +58,8 @@ function SubHeader(props) {
                         }
                     />
                 </div>
-                <div className="mx-4">
-                    <Bookmark />
+                <div className="mx-2 hover:bg-gray-light-shade rounded-md p-2">
+                    <Bookmark noMargin />
                 </div>
                 <div>
                     <Autoplay />
diff --git a/frontend/app/components/Session_/playerBlockHeader.module.css b/frontend/app/components/Session_/playerBlockHeader.module.css
index bec261a1d..da6f7eaf8 100644
--- a/frontend/app/components/Session_/playerBlockHeader.module.css
+++ b/frontend/app/components/Session_/playerBlockHeader.module.css
@@ -16,4 +16,5 @@
   cursor: pointer;
   color: $green;
   text-decoration: underline;
-}
\ No newline at end of file
+  white-space: nowrap;
+}
diff --git a/frontend/app/components/shared/Bookmark/Bookmark.tsx b/frontend/app/components/shared/Bookmark/Bookmark.tsx
index 89bcbbd72..486c88618 100644
--- a/frontend/app/components/shared/Bookmark/Bookmark.tsx
+++ b/frontend/app/components/shared/Bookmark/Bookmark.tsx
@@ -3,12 +3,15 @@ import { Popup, Button, Icon } from 'UI'
 import { toggleFavorite } from 'Duck/sessions'
 import { connect } from 'react-redux'
 import { toast } from 'react-toastify';
+import { Tooltip } from 'react-tippy';
+import cn from 'classnames';
 
 interface Props {
-  toggleFavorite: (sessionId: string) => Promise<void>,
-  favorite: Boolean,
-  sessionId: any,
-  isEnterprise: Boolean
+  toggleFavorite: (sessionId: string) => Promise<void>;
+  favorite: Boolean;
+  sessionId: any;
+  isEnterprise: Boolean;
+  noMargin?: boolean;
 }
 function Bookmark(props : Props ) {
   const { sessionId, favorite, isEnterprise } = props;
diff --git a/frontend/app/components/ui/CountryFlag/countryFlag.module.css b/frontend/app/components/ui/CountryFlag/countryFlag.module.css
index 4cbc1f39b..aa331ee77 100644
--- a/frontend/app/components/ui/CountryFlag/countryFlag.module.css
+++ b/frontend/app/components/ui/CountryFlag/countryFlag.module.css
@@ -1,8 +1,8 @@
 .default {
   width: 22px !important;
-  height: 14px !important;
+  height: 12px !important;
 }
 
 .label {
   line-height: 0 !important;
-}
\ No newline at end of file
+}