From 2ce2ae092dae40dde78729c8baad0c22d6aa11b0 Mon Sep 17 00:00:00 2001
From: Shekar Siri <sshekarsiri@gmail.com>
Date: Tue, 22 Feb 2022 21:53:02 +0100
Subject: [PATCH] feat(ui) - assist ui - review

---
 .../Assist/components/AssistActions/AssistActions.tsx  |  7 ++++---
 .../Assist/components/AssistTabs/AssistTabs.tsx        | 10 ++++++----
 .../components/Session_/Player/Controls/Controls.js    |  8 +++++---
 frontend/app/components/Session_/PlayerBlockHeader.js  |  7 ++++---
 .../Session_/SessionInfoItem/SessionInfoItem.tsx       |  4 ++--
 frontend/app/components/Session_/playerBlockHeader.css |  9 +--------
 .../components/shared/DropdownPlain/DropdownPlain.tsx  |  1 +
 .../FilterAutoCompleteLocal.tsx                        |  2 +-
 .../SessionItem/MetaMoreButton/MetaMoreButton.tsx      |  8 ++++----
 .../app/components/shared/SessionItem/SessionItem.js   |  7 ++++---
 frontend/app/components/ui/CountryFlag/CountryFlag.js  |  7 ++++++-
 frontend/app/components/ui/IconButton/iconButton.css   |  2 +-
 frontend/app/components/ui/Loader/loader.css           |  2 +-
 frontend/app/svg/openreplay-preloader.svg              |  8 +++++++-
 14 files changed, 47 insertions(+), 35 deletions(-)

diff --git a/frontend/app/components/Assist/components/AssistActions/AssistActions.tsx b/frontend/app/components/Assist/components/AssistActions/AssistActions.tsx
index b9ea38f47..2d7a7baf1 100644
--- a/frontend/app/components/Assist/components/AssistActions/AssistActions.tsx
+++ b/frontend/app/components/Assist/components/AssistActions/AssistActions.tsx
@@ -84,7 +84,8 @@ function AssistActions({ toggleChatWindow, userId, calling, peerConnectionStatus
       <div
         className={
           cn(
-            'cursor-pointer p-2 mr-2 flex items-center',
+            'cursor-pointer p-2 flex items-center',
+            {[stl.disabled]: cannotCall}
           )
         }
         onClick={ requestReleaseRemoteControl }
@@ -98,13 +99,13 @@ function AssistActions({ toggleChatWindow, userId, calling, peerConnectionStatus
         <span className={cn("ml-2", { 'color-green' : remoteControlStatus === RemoteControlStatus.Enabled })}>{ 'Remote Control' }</span> */}
         <IconButton label={`${remoteActive ? 'Stop ' : ''} Remote Control`} icon="remote-control" primaryText redText={remoteActive} />
       </div>
-      <div className="divider" />
+      
       <Popup
         trigger={
           <div
             className={
               cn(
-                'cursor-pointer p-2 mr-2 flex items-center',
+                'cursor-pointer p-2 flex items-center',
                 {[stl.disabled]: cannotCall}
               )
             }
diff --git a/frontend/app/components/Assist/components/AssistTabs/AssistTabs.tsx b/frontend/app/components/Assist/components/AssistTabs/AssistTabs.tsx
index 5c1641f78..07af99e24 100644
--- a/frontend/app/components/Assist/components/AssistTabs/AssistTabs.tsx
+++ b/frontend/app/components/Assist/components/AssistTabs/AssistTabs.tsx
@@ -1,10 +1,11 @@
 import React, { useEffect, useState } from 'react';
-import { SlideModal, Icon } from 'UI';
+import { SlideModal, Avatar, Icon } from 'UI';
 import SessionList from '../SessionList';
 import stl from './assistTabs.css'
 
 interface Props {
   userId: any,
+  userNumericHash: any,
 }
 
 const AssistTabs = (props: Props) => {
@@ -16,14 +17,15 @@ const AssistTabs = (props: Props) => {
         {props.userId && (
           <>
             <div className="flex items-center mr-3">
-              <Icon name="user-alt" color="gray-darkest" />
-              <div className="ml-2">{props.userId}</div>
+              {/* <Icon name="user-alt" color="gray-darkest" /> */}
+              <Avatar iconSize="20" width="30px" height="30px" seed={ props.userNumericHash } />
+              <div className="ml-2 font-medium">{props.userId}'s</div>
             </div>
             <div
               className={stl.btnLink}
               onClick={() => setShowMenu(!showMenu)}
             >
-              All Active Sessions
+              Active Sessions
             </div>
           </>
         )}
diff --git a/frontend/app/components/Session_/Player/Controls/Controls.js b/frontend/app/components/Session_/Player/Controls/Controls.js
index fdada40e7..b21d45f77 100644
--- a/frontend/app/components/Session_/Player/Controls/Controls.js
+++ b/frontend/app/components/Session_/Player/Controls/Controls.js
@@ -297,7 +297,7 @@ export default class Controls extends React.Component {
                   >
                     <div>{ speed + 'x' }</div>
                   </button>
-                  <div className={ styles.divider } /> 
+                  
                   <button
                     className={ cn(styles.skipIntervalButton, { [styles.withCheckIcon]: skip }) }
                     onClick={ this.props.toggleSkip }
@@ -308,7 +308,9 @@ export default class Controls extends React.Component {
                   </button>
                 </React.Fragment>
               }
-              <div className={ styles.divider } />
+
+              { !live && <div className={ styles.divider } /> }
+              
               { !live &&
                 <ControlButton
                   disabled={ disabled }
@@ -413,7 +415,7 @@ export default class Controls extends React.Component {
                   icon="business-time"
                 />
               } */}
-              <div className={ styles.divider } /> 
+              
               { !live && 
                 <React.Fragment>
                   <ControlButton
diff --git a/frontend/app/components/Session_/PlayerBlockHeader.js b/frontend/app/components/Session_/PlayerBlockHeader.js
index 697b2d8b3..72732a534 100644
--- a/frontend/app/components/Session_/PlayerBlockHeader.js
+++ b/frontend/app/components/Session_/PlayerBlockHeader.js
@@ -62,7 +62,7 @@ export default class PlayerBlockHeader extends React.PureComponent {
       <div className="flex items-center">
         { width || 'x' } <Icon name="close" size="12" className="mx-1" /> { height || 'x' }
       </div>
-    ) : <span className="text-sm">Not Available</span>;
+    ) : <span className="">Resolution N/A</span>;
   }
 
   backHandler = () => {
@@ -87,6 +87,7 @@ export default class PlayerBlockHeader extends React.PureComponent {
         sessionId,
         userCountry,
         userId,
+        userNumericHash,
         favorite,
         startedAt,
         userBrowser,
@@ -120,7 +121,7 @@ export default class PlayerBlockHeader extends React.PureComponent {
           <BackLink	onClick={this.backHandler} label="Back" />
           
           <div className={ stl.divider } />
-          { _live && <AssistTabs userId={userId} />}
+          { _live && <AssistTabs userId={userId} userNumericHash={userNumericHash} />}
           
           {/* <div className="mx-4 flex items-center">
             <CountryFlag country={ userCountry } />
@@ -144,7 +145,7 @@ export default class PlayerBlockHeader extends React.PureComponent {
               </>
             )}
             
-            { live && (
+            { _live && (
               <>
                 <SessionMetaList className="" metaList={_metaList} />
                 <div className={ stl.divider } />
diff --git a/frontend/app/components/Session_/SessionInfoItem/SessionInfoItem.tsx b/frontend/app/components/Session_/SessionInfoItem/SessionInfoItem.tsx
index f89bfb9cd..e4e481067 100644
--- a/frontend/app/components/Session_/SessionInfoItem/SessionInfoItem.tsx
+++ b/frontend/app/components/Session_/SessionInfoItem/SessionInfoItem.tsx
@@ -17,8 +17,8 @@ export default function SessionInfoItem(props: Props) {
                 { icon && <Icon name={icon} size="16" /> }
                 { comp && comp }
             </div>
-            <div className="px-2 whitespace-nowrap capitalize" style={{ minWidth: '130px' }}>{label}</div>
-            <div className="color-gray-medium px-2" style={{ minWidth: '100px' }}>{value}</div>
+            <div className="px-2 capitalize" style={{ minWidth: '160px' }}>{label}</div>
+            <div className="color-gray-medium px-2" style={{ minWidth: '130px' }}>{value}</div>
         </div>
     )
 }
diff --git a/frontend/app/components/Session_/playerBlockHeader.css b/frontend/app/components/Session_/playerBlockHeader.css
index 764933a16..3aa858053 100644
--- a/frontend/app/components/Session_/playerBlockHeader.css
+++ b/frontend/app/components/Session_/playerBlockHeader.css
@@ -14,13 +14,6 @@
 
 .liveSwitchButton {
   cursor: pointer;
-  padding: 3px 8px;
-  border: solid thin $green;
   color: $green;
-  border-radius: 3px;
-  margin-right: 10px;
-  &:hover {
-    background-color: $green;
-    color: white;
-  }
+  text-decoration: underline;
 }
\ No newline at end of file
diff --git a/frontend/app/components/shared/DropdownPlain/DropdownPlain.tsx b/frontend/app/components/shared/DropdownPlain/DropdownPlain.tsx
index fc71a8743..f4f21b1c8 100644
--- a/frontend/app/components/shared/DropdownPlain/DropdownPlain.tsx
+++ b/frontend/app/components/shared/DropdownPlain/DropdownPlain.tsx
@@ -21,6 +21,7 @@ export default function DropdownPlain(props: Props) {
                 direction={direction}
                 options={ options }
                 onChange={ props.onChange }
+                scrolling
                 // defaultValue={ value }
                 icon={ icon ? <Icon name="chevron-down" color="gray-dark" size="14" className={stl.dropdownIcon} /> : null }
             />
diff --git a/frontend/app/components/shared/Filters/FilterAutoCompleteLocal/FilterAutoCompleteLocal.tsx b/frontend/app/components/shared/Filters/FilterAutoCompleteLocal/FilterAutoCompleteLocal.tsx
index 3226bac38..96156e6db 100644
--- a/frontend/app/components/shared/Filters/FilterAutoCompleteLocal/FilterAutoCompleteLocal.tsx
+++ b/frontend/app/components/shared/Filters/FilterAutoCompleteLocal/FilterAutoCompleteLocal.tsx
@@ -18,7 +18,7 @@ interface Props {
 function FilterAutoCompleteLocal(props: Props) {
   const {
       showCloseButton = false,
-      placeholder = 'Type to search',
+      placeholder = 'Enter',
       showOrButton = false,
       onRemoveValue = () => null,
       onAddValue = () => null,
diff --git a/frontend/app/components/shared/SessionItem/MetaMoreButton/MetaMoreButton.tsx b/frontend/app/components/shared/SessionItem/MetaMoreButton/MetaMoreButton.tsx
index 514192273..5cf1f95dd 100644
--- a/frontend/app/components/shared/SessionItem/MetaMoreButton/MetaMoreButton.tsx
+++ b/frontend/app/components/shared/SessionItem/MetaMoreButton/MetaMoreButton.tsx
@@ -19,13 +19,13 @@ export default function MetaMoreButton(props: Props) {
             ) }
             content={ 
                 <div className="flex flex-col">
-                {list.slice(maxLength).map(({ label, value }, index) => (
-                    <MetaItem key={index} label={label} value={value} className="mb-3" />
-                ))}
+                    {list.slice(maxLength).map(({ label, value }, index) => (
+                        <MetaItem key={index} label={label} value={value} className="mb-3" />
+                    ))}
                 </div>
             }
             on="click"
-            position="top right"
+            position="center center"
             hideOnScroll
         />
     )
diff --git a/frontend/app/components/shared/SessionItem/SessionItem.js b/frontend/app/components/shared/SessionItem/SessionItem.js
index bb639a04e..324c6b723 100644
--- a/frontend/app/components/shared/SessionItem/SessionItem.js
+++ b/frontend/app/components/shared/SessionItem/SessionItem.js
@@ -21,6 +21,7 @@ import { withRouter } from 'react-router-dom';
 import SessionMetaList from './SessionMetaList';
 import ErrorBars from './ErrorBars';
 import { assist as assistRoute, isRoute } from "App/routes";
+import { capitalize } from 'App/utils';
 
 const ASSIST_ROUTE = assistRoute();
 
@@ -114,15 +115,15 @@ export default class SessionItem extends React.PureComponent {
               <CountryFlag country={ userCountry } className="mr-2" label />
               <div className="color-gray-medium flex items-center">
                 <span className="capitalize" style={{ maxWidth: '70px'}}>
-                  <TextEllipsis text={ userBrowser } popupProps={{ inverted: true, size: "tiny" }} />
+                  <TextEllipsis text={ capitalize(userBrowser) } popupProps={{ inverted: true, size: "tiny" }} />
                 </span> 
                 <div className="mx-2 text-4xl">·</div>
                 <span className="capitalize" style={{ maxWidth: '70px'}}>
-                  <TextEllipsis text={ userOs } popupProps={{ inverted: true, size: "tiny" }} />
+                  <TextEllipsis text={ capitalize(userOs) } popupProps={{ inverted: true, size: "tiny" }} />
                 </span>
                 <div className="mx-2 text-4xl">·</div>
                 <span className="capitalize" style={{ maxWidth: '70px'}}>
-                  <TextEllipsis text={ userDeviceType } popupProps={{ inverted: true, size: "tiny" }} />
+                  <TextEllipsis text={ capitalize(userDeviceType) } popupProps={{ inverted: true, size: "tiny" }} />
                 </span>
               </div>
             </div>
diff --git a/frontend/app/components/ui/CountryFlag/CountryFlag.js b/frontend/app/components/ui/CountryFlag/CountryFlag.js
index f817cf65f..db6a4491b 100644
--- a/frontend/app/components/ui/CountryFlag/CountryFlag.js
+++ b/frontend/app/components/ui/CountryFlag/CountryFlag.js
@@ -13,7 +13,12 @@ const CountryFlag = React.memo(({ country, className, style = {}, label = false
 			<Popup
 				trigger={ knownCountry 
 				?  <div className={ cn(`flag flag-${ countryFlag }`, className, stl.default) } />
-				: <Icon name="flag-na" size="22" className="" />
+				: (
+					<div className="flex items-center w-full">
+						<Icon name="flag-na" size="22" className="" />
+						<div className="ml-2 leading-none" style={{ whiteSpace: 'nowrap'}}>Unknown Country</div>
+					</div>
+				)
 				// : <div className={ cn('text-sm', className) }>{ "N/A" }</div>
 				}
 				content={ countryName }
diff --git a/frontend/app/components/ui/IconButton/iconButton.css b/frontend/app/components/ui/IconButton/iconButton.css
index 11b3dd51f..b34909039 100644
--- a/frontend/app/components/ui/IconButton/iconButton.css
+++ b/frontend/app/components/ui/IconButton/iconButton.css
@@ -67,7 +67,7 @@
 
   &.primary {
     background-color: $teal;
-    box-shadow: 0 0 0 1px rgba(62, 170, 175, .8) inset !important;
+    box-shadow: 0 0 0 1px $teal inset !important;
   
     & .icon {
       fill: white;
diff --git a/frontend/app/components/ui/Loader/loader.css b/frontend/app/components/ui/Loader/loader.css
index 454e8f2db..76f31da26 100644
--- a/frontend/app/components/ui/Loader/loader.css
+++ b/frontend/app/components/ui/Loader/loader.css
@@ -1,7 +1,7 @@
 .loader {
   display: block;
   margin: auto;
-  background-image: svg-load(openreplay-preloader.svg, fill=#CCC);
+  background-image: svg-load(openreplay-preloader.svg, fill=#ffffff00);
   background-repeat: no-repeat;
   background-size: contain;
   background-position: center center;
diff --git a/frontend/app/svg/openreplay-preloader.svg b/frontend/app/svg/openreplay-preloader.svg
index 6bf6be13f..9a2cf1c33 100644
--- a/frontend/app/svg/openreplay-preloader.svg
+++ b/frontend/app/svg/openreplay-preloader.svg
@@ -1 +1,7 @@
-<svg id="e8s3e2insbce1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 70 70" shape-rendering="geometricPrecision" text-rendering="geometricPrecision"><style><![CDATA[#e8s3e2insbce2_tr {animation: e8s3e2insbce2_tr__tr 2200ms linear infinite normal forwards}@keyframes e8s3e2insbce2_tr__tr { 0% {transform: translate(35px,35px) rotate(-359deg)} 50% {transform: translate(35px,35px) rotate(0deg)} 100% {transform: translate(35px,35px) rotate(359deg)} }#e8s3e2insbce2_ts {animation: e8s3e2insbce2_ts__ts 2200ms linear infinite normal forwards}@keyframes e8s3e2insbce2_ts__ts { 0% {transform: scale(0.510000,0.510000)} 50% {transform: scale(1,1)} 100% {transform: scale(0.510000,0.510000)} }#e8s3e2insbce3 {animation: e8s3e2insbce3_c_o 2200ms linear infinite normal forwards}@keyframes e8s3e2insbce3_c_o { 0% {opacity: 0} 27.272727% {opacity: 0;animation-timing-function: cubic-bezier(0.420000,0,0.580000,1)} 40.909091% {opacity: 1;animation-timing-function: cubic-bezier(0.420000,0,0.580000,1)} 59.090909% {opacity: 1;animation-timing-function: cubic-bezier(0.420000,0,0.580000,1)} 100% {opacity: 0} }#e8s3e2insbce4 {animation: e8s3e2insbce4_c_o 2200ms linear infinite normal forwards}@keyframes e8s3e2insbce4_c_o { 0% {opacity: 0} 18.181818% {opacity: 0;animation-timing-function: cubic-bezier(0.420000,0,0.580000,1)} 40.909091% {opacity: 1;animation-timing-function: cubic-bezier(0.420000,0,0.580000,1)} 59.090909% {opacity: 1;animation-timing-function: cubic-bezier(0.420000,0,0.580000,1)} 90.909091% {opacity: 0} 100% {opacity: 0} }#e8s3e2insbce5 {animation: e8s3e2insbce5_c_o 2200ms linear infinite normal forwards}@keyframes e8s3e2insbce5_c_o { 0% {opacity: 0} 9.090909% {opacity: 0;animation-timing-function: cubic-bezier(0.420000,0,0.580000,1)} 40.909091% {opacity: 1;animation-timing-function: cubic-bezier(0.420000,0,0.580000,1)} 59.090909% {opacity: 1;animation-timing-function: cubic-bezier(0.420000,0,0.580000,1)} 81.818182% {opacity: 0} 100% {opacity: 0} }#e8s3e2insbce6 {animation: e8s3e2insbce6_c_o 2200ms linear infinite normal forwards}@keyframes e8s3e2insbce6_c_o { 0% {opacity: 0;animation-timing-function: cubic-bezier(0.420000,0,0.580000,1)} 40.909091% {opacity: 1;animation-timing-function: cubic-bezier(0.420000,0,0.580000,1)} 59.090909% {opacity: 1;animation-timing-function: cubic-bezier(0.420000,0,0.580000,1)} 72.727273% {opacity: 0} 100% {opacity: 0} }]]></style><g id="e8s3e2insbce2_tr" transform="translate(35,35) rotate(-359)"><g id="e8s3e2insbce2_ts" transform="scale(0.510000,0.510000)"><g id="e8s3e2insbce2" transform="translate(-35,-35)"><circle id="e8s3e2insbce3" r="10.500000" transform="matrix(1 0 0 1 19.50000000000000 50.50000000000000)" opacity="0" fill="rgb(66,174,94)" fill-rule="evenodd" stroke="none" stroke-width="1"/><circle id="e8s3e2insbce4" r="10.500000" transform="matrix(1 0 0 1 50.50000000000000 50.50000000000000)" opacity="0" fill="rgb(57,177,255)" fill-rule="evenodd" stroke="none" stroke-width="1"/><circle id="e8s3e2insbce5" r="10.500000" transform="matrix(1 0 0 1 50.50000000000000 19.50000000000000)" opacity="0" fill="rgb(57,78,255)" fill-rule="evenodd" stroke="none" stroke-width="1"/><circle id="e8s3e2insbce6" r="10.500000" transform="matrix(1 0 0 1 19.50000000000000 19.50000000000000)" opacity="0" fill="rgb(0,145,147)" fill-rule="evenodd" stroke="none" stroke-width="1"/></g></g></g></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 55 55" fill="none" height="55" width="55"><style>
+@keyframes uro78awc4tzn00dgpjdreb25_t { 0% { transform: translate(27.5px,27.5px) rotate(0deg) scale(1,1) translate(0px,0px); } 100% { transform: translate(27.5px,27.5px) rotate(355deg) scale(1,1) translate(0px,0px); } }
+@keyframes uro78awc4tzn00dgpjdreb25_sw { 0% { stroke-width: 3px; } 100% { stroke-width: 3px; } }
+@keyframes xsc8rs7q380bevvc8x83et5f_t { 0% { transform: translate(29.7px,27.5px) scale(1,1) translate(-15.2px,-18px); } 50% { transform: translate(29.7px,27.5px) scale(1,1) translate(-15.2px,-18px); } 100% { transform: translate(29.7px,27.5px) scale(1,1) translate(-15.2px,-18px); } }
+@keyframes xsc8rs7q380bevvc8x83et5f_o { 0% { opacity: .1; } 50% { opacity: 1; } 100% { opacity: .1; } }
+@keyframes xsc8rs7q380bevvc8x83et5f_d { 0% { d: path('M20.2,18L9.8,11.9L9.8,24.1L20.2,18ZM21.7,16.7C21.9,16.9,22.1,17.1,22.2,17.3C22.3,17.5,22.4,17.7,22.4,18C22.4,18.3,22.3,18.5,22.2,18.7C22.1,18.9,21.9,19.1,21.7,19.3L10.2,25.9C9.3,26.4,8,25.8,8,24.6L8,11.4C8,10.2,9.3,9.6,10.2,10.1L21.7,16.7Z'); } 50% { d: path('M23,18L6.9,8.7L6.9,27.3L23,18ZM25.2,16.1C25.5,16.3,25.8,16.5,26,16.9C26.2,17.2,26.3,17.6,26.3,18C26.3,18.4,26.2,18.8,26,19.1C25.8,19.5,25.5,19.7,25.2,19.9L7.5,30.2C6.1,31,4.1,30,4.1,28.2L4.1,7.8C4.1,6,6.1,5,7.5,5.8L25.2,16.1Z'); } 100% { d: path('M20.2,18L9.8,11.9L9.8,24.1L20.2,18ZM21.7,16.7C21.9,16.9,22.1,17.1,22.2,17.3C22.3,17.5,22.4,17.7,22.4,18C22.4,18.3,22.3,18.5,22.2,18.7C22.1,18.9,21.9,19.1,21.7,19.3L10.2,25.9C9.3,26.4,8,25.8,8,24.6L8,11.4C8,10.2,9.3,9.6,10.2,10.1L21.7,16.7Z'); } }
+</style><ellipse stroke="#6070f8" stroke-width="3" stroke-dasharray="6 6" rx="25" ry="25" transform="translate(27.5,27.5)" style="animation: 1s linear infinite both uro78awc4tzn00dgpjdreb25_t, 1s linear infinite both uro78awc4tzn00dgpjdreb25_sw;"/><path d="M20.2 18l-10.4-6.1v12.2l10.4-6.1Zm1.5-1.3c.2 .2 .4 .4 .5 .6c.1 .2 .2 .4 .2 .7c0 .3-0.1 .5-0.2 .7c-0.1 .2-0.3 .4-0.5 .6l-11.5 6.6c-0.9 .5-2.2-0.1-2.2-1.3v-13.2c0-1.2 1.3-1.8 2.2-1.3l11.5 6.6Z" fill="#122af5" opacity=".1" transform="translate(29.7,27.5) translate(-15.2,-18)" style="animation: 1s linear infinite both xsc8rs7q380bevvc8x83et5f_t, 1s linear infinite both xsc8rs7q380bevvc8x83et5f_o, 1s linear infinite both xsc8rs7q380bevvc8x83et5f_d;"/></svg>
\ No newline at end of file