From f7342825a4e89a42fa679c97bf845332cde04484 Mon Sep 17 00:00:00 2001
From: Shekar Siri <sshekarsiri@gmail.com>
Date: Fri, 26 Aug 2022 12:29:53 +0200
Subject: [PATCH] change(ui) - plaer controls spacing and alignment

---
 .../Session_/Player/Controls/ControlButton.js | 52 +++++++++++--------
 .../Session_/Player/Controls/Controls.js      | 33 ++----------
 .../Controls/components/PlayerControls.tsx    | 10 ++--
 .../Player/Controls/controlButton.module.css  |  3 +-
 .../Player/Controls/controls.module.css       | 12 +++--
 .../components/Session_/Storage/Storage.js    |  1 +
 6 files changed, 51 insertions(+), 60 deletions(-)

diff --git a/frontend/app/components/Session_/Player/Controls/ControlButton.js b/frontend/app/components/Session_/Player/Controls/ControlButton.js
index d438de32e..31672c301 100644
--- a/frontend/app/components/Session_/Player/Controls/ControlButton.js
+++ b/frontend/app/components/Session_/Player/Controls/ControlButton.js
@@ -3,32 +3,42 @@ import cn from 'classnames';
 import { Icon } from 'UI';
 import stl from './controlButton.module.css';
 
-const ControlButton = ({ 
-  label, 
-  icon = '', 
-  disabled=false, 
-  onClick, 
-  count = 0, 
-  hasErrors=false, 
-  active=false, 
-  size = 20, 
-  noLabel, 
+const ControlButton = ({
+  label,
+  icon = '',
+  disabled = false,
+  onClick,
+  count = 0,
+  hasErrors = false,
+  active = false,
+  size = 20,
+  noLabel,
   labelClassName,
   containerClassName,
   noIcon,
- }) => (
-	<button
-    className={ cn(stl.controlButton, { [stl.disabled]: disabled }, "relative", active ? 'border-b-2 border-main' : 'rounded',containerClassName) }
-    onClick={ onClick }
-    id={"control-button-" + label.toLowerCase()}
+}) => (
+  <button
+    className={cn(
+      stl.controlButton,
+      { [stl.disabled]: disabled },
+      'relative',
+      active ? 'border-b-2 border-main' : 'rounded',
+      containerClassName
+    )}
+    onClick={onClick}
+    id={'control-button-' + label.toLowerCase()}
     disabled={disabled}
   >
-      <div className={stl.labels}>
-        { hasErrors && <div className={ stl.errorSymbol } /> }
-        { count > 0 && <div className={ stl.countLabel }>{ count }</div>}
-      </div>
-	    {!noIcon && <Icon name={ icon } size={size} color="gray-dark"/>}
-    {!noLabel && <span className={ cn(stl.label, labelClassName, active ? 'color-main' : 'color-gray-darkest') }>{ label }</span>}
+    <div className={stl.labels}>
+      {hasErrors && <div className={stl.errorSymbol} />}
+      {count > 0 && <div className={stl.countLabel}>{count}</div>}
+    </div>
+    {!noIcon && <Icon name={icon} size={size} color="gray-dark" />}
+    {!noLabel && (
+      <span className={cn(stl.label, labelClassName, active ? 'color-main' : 'color-gray-darkest')}>
+        {label}
+      </span>
+    )}
   </button>
 );
 
diff --git a/frontend/app/components/Session_/Player/Controls/Controls.js b/frontend/app/components/Session_/Player/Controls/Controls.js
index ead10433c..0601e092f 100644
--- a/frontend/app/components/Session_/Player/Controls/Controls.js
+++ b/frontend/app/components/Session_/Player/Controls/Controls.js
@@ -266,7 +266,7 @@ export default class Controls extends React.Component {
   controlIcon = (icon, size, action, isBackwards, additionalClasses) => (
     <div
       onClick={action}
-      className={cn('py-1 px-2 hover-main cursor-pointer', additionalClasses)}
+      className={cn('py-1 px-2 hover-main cursor-pointer bg-gray-lightest', additionalClasses)}
       style={{ transform: isBackwards ? 'rotate(180deg)' : '' }}
     >
       <Icon name={icon} size={size} color="inherit" />
@@ -352,8 +352,7 @@ export default class Controls extends React.Component {
                     setSkipInterval={changeSkipInterval}
                     currentInterval={skipInterval}
                   />
-                  {/* <Button variant="text" onClick={() => toggleBottomTools(OVERVIEW)}>X-RAY</Button> */}
-                  <div className={cn('h-14 border-r bg-gray-light mx-6')} />
+                  <div className={cn('mx-2')} />
                   <XRayButton
                     isActive={bottomBlock === OVERVIEW && !inspectorMode}
                     onClick={() => toggleBottomTools(OVERVIEW)}
@@ -381,30 +380,6 @@ export default class Controls extends React.Component {
             </div>
 
             <div className="flex items-center h-full">
-              {/* { !live && <div className={cn(styles.divider, 'h-full')} /> } */}
-              {/* ! TEMP DISABLED !
-              {!live && (
-                <ControlButton
-                  disabled={ disabled && !inspectorMode }
-                  active={ inspectorMode }
-                  onClick={ () => toggleBottomTools(INSPECTOR) }
-                  noIcon
-                  labelClassName="!text-base font-semibold"
-                  label="INSPECT"
-                  containerClassName="mx-2"
-                />
-              )} */}
-              {/* <ControlButton
-                // disabled={ disabled && !inspectorMode }
-                onClick={ () => toggleBottomTools(OVERVIEW) }
-                active={ bottomBlock === OVERVIEW && !inspectorMode}
-                label="OVERVIEW"
-                noIcon
-                labelClassName="!text-base font-semibold"
-                // count={ logCount }
-                // hasErrors={ logRedCount > 0 }
-                containerClassName="mx-2"
-              /> */}
               <ControlButton
                 disabled={disabled && !inspectorMode}
                 onClick={() => toggleBottomTools(CONSOLE)}
@@ -514,12 +489,12 @@ export default class Controls extends React.Component {
                   containerClassName="mx-2"
                 />
               )}
-              {!live && <div className={cn('h-14 border-r bg-gray-light ml-6')} />}
+              {/* {!live && <div className={cn('h-14 border-r bg-gray-light ml-6')} />} */}
               {!live && (
                 <Tooltip title="Fullscreen" delay={0} position="top-end" className="mx-4">
                   {this.controlIcon(
                     'arrows-angle-extend',
-                    18,
+                    16,
                     this.props.fullscreenOn,
                     false,
                     'rounded hover:bg-gray-light-shade color-gray-medium'
diff --git a/frontend/app/components/Session_/Player/Controls/components/PlayerControls.tsx b/frontend/app/components/Session_/Player/Controls/components/PlayerControls.tsx
index a1d3dd87c..6ad43c2b5 100644
--- a/frontend/app/components/Session_/Player/Controls/components/PlayerControls.tsx
+++ b/frontend/app/components/Session_/Player/Controls/components/PlayerControls.tsx
@@ -112,7 +112,9 @@ function PlayerControls(props: Props) {
             className="cursor-pointer select-none"
             distance={20}
             html={
-              <OutsideClickDetectingDiv onClickOutside={() => showTooltip ? toggleTooltip() : null}>
+              <OutsideClickDetectingDiv
+                onClickOutside={() => (showTooltip ? toggleTooltip() : null)}
+              >
                 <div className="flex flex-col bg-white border border-borderColor-gray-light-shade text-figmaColors-text-primary rounded">
                   <div className="font-semibold py-2 px-4 w-full text-left">
                     Jump <span className="text-disabled-text">(Secs)</span>
@@ -162,7 +164,8 @@ function PlayerControls(props: Props) {
       </div>
 
       {!live && (
-        <div className="flex items-center ml-4">
+        <div className="flex items-center">
+          <div className="mx-2" />
           {/* @ts-ignore */}
           <Tooltip title="Control play back speed (↑↓)" delay={0} position="top">
             <button
@@ -174,12 +177,11 @@ function PlayerControls(props: Props) {
               <div>{speed + 'x'}</div>
             </button>
           </Tooltip>
-
+          <div className="mx-2" />
           <button
             className={cn(
               styles.skipIntervalButton,
               { [styles.withCheckIcon]: skip, [styles.active]: skip },
-              'ml-4'
             )}
             onClick={toggleSkip}
             data-disabled={disabled}
diff --git a/frontend/app/components/Session_/Player/Controls/controlButton.module.css b/frontend/app/components/Session_/Player/Controls/controlButton.module.css
index b72ec0bd7..ff9bb2a19 100644
--- a/frontend/app/components/Session_/Player/Controls/controlButton.module.css
+++ b/frontend/app/components/Session_/Player/Controls/controlButton.module.css
@@ -43,8 +43,7 @@
   }
 
   & .label {
-    /* padding-top: 5px; */
-    font-size: 10px;
+    font-size: 14px !important;
     height: 16px;
 
     &:hover {
diff --git a/frontend/app/components/Session_/Player/Controls/controls.module.css b/frontend/app/components/Session_/Player/Controls/controls.module.css
index ba04b3396..6be3ab2c2 100644
--- a/frontend/app/components/Session_/Player/Controls/controls.module.css
+++ b/frontend/app/components/Session_/Player/Controls/controls.module.css
@@ -16,7 +16,7 @@
   justify-content: space-between;
   align-items: center;
   height: 65px;
-  padding-left: 30px;
+  padding-left: 10px;
   padding-right: 0;
 }
 
@@ -38,9 +38,12 @@
   padding: 0 10px;
   height: 30px;
   border-radius: 3px;
+  background-color: $gray-lightest;
+
   
   &:hover {
-    background-color: $gray-lightest;
+    background-color: $active-blue;
+    color: $teal;
     transition: all 0.2s;
   }
 }
@@ -53,14 +56,15 @@
   cursor: pointer;
   font-size: 12px;
   color: $gray-darkest;
-  /* margin-right: 5px; */
+  background-color: $gray-lightest;
   padding: 0 10px;
   height: 30px;
   border-radius: 3px;
   /* margin: 0 5px; */
   &:hover {
-    background-color: $gray-lightest;
+    background-color: $active-blue;
     transition: all 0.2s;
+    color: $teal;
   }
   &.active {
     background: repeating-linear-gradient( 125deg, #efefef, #efefef 3px, #ddd 3px, #efefef 5px );
diff --git a/frontend/app/components/Session_/Storage/Storage.js b/frontend/app/components/Session_/Storage/Storage.js
index 6e51bc36a..df9c4c2b3 100644
--- a/frontend/app/components/Session_/Storage/Storage.js
+++ b/frontend/app/components/Session_/Storage/Storage.js
@@ -194,6 +194,7 @@ export default class Storage extends React.PureComponent {
 		return (
 			<BottomBlock>
 				<BottomBlock.Header>
+					<span className="font-semibold color-gray-medium mr-4">State</span>
 					{ list.length > 0 &&
 						<div className="flex w-full">
 							{ showStore &&