From 997a5421aee802c55f5de566cc5716344a0bd6ac Mon Sep 17 00:00:00 2001
From: sylenien <nikita@openreplay.com>
Date: Wed, 1 Jun 2022 11:37:43 +0200
Subject: [PATCH] fix(ui): small design fixes

---
 .../app/components/Session_/Autoplay/Autoplay.js  | 15 +++++++++------
 .../Session_/Player/Controls/Controls.js          |  2 +-
 .../Session_/Player/Controls/Timeline.js          | 14 +++++++-------
 .../Session_/Player/Controls/timeline.module.css  |  3 +--
 frontend/app/components/Session_/Player/Player.js |  2 +-
 frontend/app/components/Session_/PlayerBlock.js   |  4 ++--
 .../ui/EscapeButton/escapeButton.module.css       |  6 ++++--
 frontend/app/theme/colors.js                      |  1 +
 8 files changed, 26 insertions(+), 21 deletions(-)

diff --git a/frontend/app/components/Session_/Autoplay/Autoplay.js b/frontend/app/components/Session_/Autoplay/Autoplay.js
index f3f4c1ca9..7c111b2ba 100644
--- a/frontend/app/components/Session_/Autoplay/Autoplay.js
+++ b/frontend/app/components/Session_/Autoplay/Autoplay.js
@@ -7,6 +7,7 @@ import { connectPlayer } from 'Player/store';
 import { Controls as PlayerControls } from 'Player';
 import { Tooltip } from 'react-tippy';
 import cn from 'classnames';
+import { disabled } from '../Player/Controls/controlButton.css';
 
 function Autoplay(props) {
   const { previousId, nextId, autoplay } = props
@@ -34,12 +35,13 @@ function Autoplay(props) {
         title="Play Previous Session"
         disabled={!previousId}
         className={cn(
-          "p-1 bg-active-blue group rounded-full color-teal-light font-medium", 
-          previousId && 'cursor-pointer'
+          "p-1 bg-gray-bg group rounded-full color-gray-darkest font-medium", 
+          previousId && 'cursor-pointer',
+          !disabled && 'hover:bg-bg-blue'
         )}
       >
         <Link to={ sessionRoute(previousId) } disabled={!previousId}> 
-          <Icon name="prev1" className="group-hover:fill-main group-hover:bg-bg-blue" color="inherit" size="16" />
+          <Icon name="prev1" className="group-hover:fill-main" color="inherit" size="16" />
         </Link>
       </Tooltip>
 
@@ -51,12 +53,13 @@ function Autoplay(props) {
         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'
+          "p-1 bg-gray-bg group ml-1 rounded-full color-gray-darkest font-medium", 
+          nextId && 'cursor-pointer',
+          !disabled && 'hover:bg-bg-blue'
         )}
       >
         <Link to={ sessionRoute(nextId) } disabled={!nextId} >
-          <Icon name="next1" className="group-hover:fill-main group-hover:bg-bg-blue" color="inherit" size="16" />
+          <Icon name="next1" className="group-hover:fill-main" color="inherit" size="16" />
         </Link>
       </Tooltip>
     </div>
diff --git a/frontend/app/components/Session_/Player/Controls/Controls.js b/frontend/app/components/Session_/Player/Controls/Controls.js
index 0c0eb28e2..f59a2b887 100644
--- a/frontend/app/components/Session_/Player/Controls/Controls.js
+++ b/frontend/app/components/Session_/Player/Controls/Controls.js
@@ -492,7 +492,7 @@ export default class Controls extends React.Component {
                 <Tooltip
                   title="Fullscreen"
                   delay={0}
-                  position="top"
+                  position="top-end"
                   className="mx-4"
                 >
                   {this.controlIcon("arrows-angle-extend", 18, this.props.fullscreenOn, false, "rounded hover:bg-gray-light-shade color-gray-medium")}
diff --git a/frontend/app/components/Session_/Player/Controls/Timeline.js b/frontend/app/components/Session_/Player/Controls/Timeline.js
index d1036084e..c6562f49e 100644
--- a/frontend/app/components/Session_/Player/Controls/Timeline.js
+++ b/frontend/app/components/Session_/Player/Controls/Timeline.js
@@ -146,8 +146,8 @@ export default class Timeline extends React.PureComponent {
 
     return (
       <div
-        className={ cn("flex items-center absolute w-full") }
-        style={{ top: '-5px', zIndex: 100}}
+        className="flex items-center absolute w-full"
+        style={{ top: '-5px', zIndex: 100, padding: '0 15px'}}
       >
         <div
           className={ stl.progress }
@@ -197,7 +197,7 @@ export default class Timeline extends React.PureComponent {
                       </div>
                     }
                   >
-                    <Icon className="rounded-full p-px bg-white" name={iss.icon} size="16" />
+                    <Icon className=" p-px bg-white" name={iss.icon} size="16" />
                   </Tooltip>
                 </div>
               ))
@@ -222,7 +222,7 @@ export default class Timeline extends React.PureComponent {
                     </div>
                   }
                 >
-                  <Icon className="rounded-full p-px bg-white" name={getPointerIcon('click_rage')} size="16" />
+                  <Icon className=" p-px bg-white" name={getPointerIcon('click_rage')} size="16" />
                 </Tooltip>
               </div>
             ))}
@@ -244,7 +244,7 @@ export default class Timeline extends React.PureComponent {
                     </div>
                   }
                 >
-                  <Icon className="rounded-full p-px bg-white" name={getPointerIcon('click_rage')} size="16" />
+                  <Icon className=" p-px bg-white" name={getPointerIcon('click_rage')} size="16" />
                 </Tooltip>
               </div>
             }
@@ -267,7 +267,7 @@ export default class Timeline extends React.PureComponent {
                       </div>
                   }
                   >
-                    <Icon className="rounded-full p-px bg-white" name={getPointerIcon('exception')} size="16" />
+                    <Icon className=" p-px bg-white" name={getPointerIcon('exception')} size="16" />
                   </Tooltip>
                 </div>
               ))
@@ -295,7 +295,7 @@ export default class Timeline extends React.PureComponent {
                       </div>
                   }
                   >
-                    <Icon className="rounded-full p-px bg-white" name={getPointerIcon('resource')} size="16" />
+                    <Icon className=" p-px bg-white" name={getPointerIcon('resource')} size="16" />
                   </Tooltip>
                 </div>
               ))
diff --git a/frontend/app/components/Session_/Player/Controls/timeline.module.css b/frontend/app/components/Session_/Player/Controls/timeline.module.css
index 1180b6849..2493d4388 100644
--- a/frontend/app/components/Session_/Player/Controls/timeline.module.css
+++ b/frontend/app/components/Session_/Player/Controls/timeline.module.css
@@ -114,8 +114,7 @@
   left: 0;
   right: 0;
   height: 10px;
-  border-top: 1px solid $gray-light;
-  border-bottom: 1px solid $gray-light;
+  border: 1px solid $gray-light;
   display: flex;
   align-items: center;
 }
diff --git a/frontend/app/components/Session_/Player/Player.js b/frontend/app/components/Session_/Player/Player.js
index d8db7a819..4b5006338 100644
--- a/frontend/app/components/Session_/Player/Player.js
+++ b/frontend/app/components/Session_/Player/Player.js
@@ -91,7 +91,7 @@ export default class Player extends React.PureComponent {
     const maxWidth = activeTab ? 'calc(100vw - 270px)' : '100vw'
     return (
       <div
-        className={ cn(className, stl.playerBody, "flex flex-col relative") }
+        className={ cn(className, stl.playerBody, "flex flex-col relative", fullscreen && 'pb-2') }
         data-bottom-block={ bottomBlockIsActive }
       >
         {fullscreen && <EscapeButton onClose={ fullscreenOff } />}
diff --git a/frontend/app/components/Session_/PlayerBlock.js b/frontend/app/components/Session_/PlayerBlock.js
index 0dc636856..9d405650e 100644
--- a/frontend/app/components/Session_/PlayerBlock.js
+++ b/frontend/app/components/Session_/PlayerBlock.js
@@ -30,11 +30,11 @@ export default class PlayerBlock extends React.PureComponent {
 
     return (
       <div className={ cn(styles.playerBlock, "flex flex-col") }>
-          <SubHeader
+          {!fullscreen && <SubHeader
             sessionId={sessionId}
             disabled={disabled}
             jiraConfig={jiraConfig}
-          />
+          />}
         <Player
           className="flex-1"
           bottomBlockIsActive={ !fullscreen && bottomBlock !== NONE }
diff --git a/frontend/app/components/ui/EscapeButton/escapeButton.module.css b/frontend/app/components/ui/EscapeButton/escapeButton.module.css
index d7507a724..ca0386e97 100644
--- a/frontend/app/components/ui/EscapeButton/escapeButton.module.css
+++ b/frontend/app/components/ui/EscapeButton/escapeButton.module.css
@@ -17,7 +17,9 @@ $padding: 23px;
   flex-direction: column;
   cursor: pointer;
   transition: all 0.3s ease-out;
-  opacity: 0.5;
+  color: #333;
+  border: 1px solid #ddd;
+  opacity: 0.7;
   &:hover {
     opacity: 1
   }
@@ -26,4 +28,4 @@ $padding: 23px;
     font-size: 8px;
     line-height: 12px;
   }
-}
\ No newline at end of file
+}
diff --git a/frontend/app/theme/colors.js b/frontend/app/theme/colors.js
index 342a35757..f40799e8d 100644
--- a/frontend/app/theme/colors.js
+++ b/frontend/app/theme/colors.js
@@ -4,6 +4,7 @@ module.exports = {
   "gray-light-shade": "#EEEEEE",
   "gray-lightest": "#f6f6f6",
   "gray-light": "#ddd",
+  "gray-bg": "#CCC",
   "gray-medium": "#888",
   "gray-dark": "#666",
   "gray-darkest": "#333",