From 54ebc487cc950926e05bc65c709b892e1ecc6551 Mon Sep 17 00:00:00 2001
From: Shekar Siri <sshekarsiri@gmail.com>
Date: Mon, 21 Feb 2022 17:40:54 +0100
Subject: [PATCH] feat(ui) - assist ui - wip

---
 .../Assist/ChatControls/ChatControls.css         |  2 +-
 .../Assist/ChatControls/ChatControls.tsx         | 12 ++++++------
 .../components/Assist/ChatWindow/ChatWindow.tsx  |  7 +++----
 .../components/Assist/ChatWindow/chatWindow.css  |  5 +++--
 .../components/AssistActions/AssistActions.tsx   |  2 +-
 .../app/components/Session_/PlayerBlockHeader.js | 16 ++++++++--------
 .../shared/SessionItem/MetaItem/MetaItem.tsx     |  2 +-
 .../MetaMoreButton/MetaMoreButton.tsx            |  2 +-
 .../components/ui/Confirmation/Confirmation.js   |  2 +-
 .../app/components/ui/CountryFlag/CountryFlag.js |  5 +++--
 frontend/app/styles/semantic.css                 |  9 +++++++++
 frontend/app/svg/icons/flag-na.svg               |  3 +++
 12 files changed, 40 insertions(+), 27 deletions(-)
 create mode 100644 frontend/app/svg/icons/flag-na.svg

diff --git a/frontend/app/components/Assist/ChatControls/ChatControls.css b/frontend/app/components/Assist/ChatControls/ChatControls.css
index 7ec77f758..b5a03ed10 100644
--- a/frontend/app/components/Assist/ChatControls/ChatControls.css
+++ b/frontend/app/components/Assist/ChatControls/ChatControls.css
@@ -15,7 +15,7 @@
   &.disabled {
     /* background-color: red; */
     & svg {
-      fill: red;
+      fill: $red;
     }
   }
 }
diff --git a/frontend/app/components/Assist/ChatControls/ChatControls.tsx b/frontend/app/components/Assist/ChatControls/ChatControls.tsx
index 61803bc2f..fd0430282 100644
--- a/frontend/app/components/Assist/ChatControls/ChatControls.tsx
+++ b/frontend/app/components/Assist/ChatControls/ChatControls.tsx
@@ -28,17 +28,17 @@ function ChatControls({ stream, endCall, videoEnabled, setVideoEnabled } : Props
   return (
     <div className={cn(stl.controls, "flex items-center w-full justify-start bottom-0 px-2")}>
       <div className="flex items-center">
-        <div className={cn(stl.btnWrapper, { [stl.disabled]: !audioEnabled})}>
-          <Button plain size="small" onClick={toggleAudio} noPadding className="flex items-center">
+        <div className={cn(stl.btnWrapper, { [stl.disabled]: audioEnabled})}>
+          <Button plain size="small" onClick={toggleAudio} noPadding className="flex items-center" hover>
             <Icon name={audioEnabled ? 'mic' : 'mic-mute'} size="16" />
-            <span className="ml-2 color-gray-medium text-sm">{audioEnabled ? 'Mute' : 'Unmute'}</span>
+            <span className={cn("ml-1 color-gray-medium text-sm", { 'color-red' : audioEnabled })}>{audioEnabled ? 'Mute' : 'Unmute'}</span>
           </Button>
         </div>
 
-        <div className={cn(stl.btnWrapper, { [stl.disabled]: !videoEnabled})}>
-          <Button plain size="small" onClick={toggleVideo} noPadding className="flex items-center">
+        <div className={cn(stl.btnWrapper, { [stl.disabled]: videoEnabled})}>
+          <Button plain size="small" onClick={toggleVideo} noPadding className="flex items-center" hover>
             <Icon name={ videoEnabled ? 'camera-video' : 'camera-video-off' } size="16" />
-            <span className="ml-2 color-gray-medium text-sm">{videoEnabled ? 'Stop Video' : 'Start Video'}</span>
+            <span className={cn("ml-1 color-gray-medium text-sm", { 'color-red' : videoEnabled })}>{videoEnabled ? 'Stop Video' : 'Start Video'}</span>
           </Button>
         </div>
       </div>
diff --git a/frontend/app/components/Assist/ChatWindow/ChatWindow.tsx b/frontend/app/components/Assist/ChatWindow/ChatWindow.tsx
index 6da23c7e8..36bc0765b 100644
--- a/frontend/app/components/Assist/ChatWindow/ChatWindow.tsx
+++ b/frontend/app/components/Assist/ChatWindow/ChatWindow.tsx
@@ -20,7 +20,6 @@ const ChatWindow: FC<Props> = function ChatWindow({ userId, incomeStream, localS
   const [localVideoEnabled, setLocalVideoEnabled] = useState(false)
   const [remoteVideoEnabled, setRemoteVideoEnabled] = useState(false)
 
-
   useEffect(() => {
     if (!incomeStream) { return }
     const iid = setInterval(() => {
@@ -42,9 +41,9 @@ const ChatWindow: FC<Props> = function ChatWindow({ userId, incomeStream, localS
         className={cn(stl.wrapper, "fixed radius bg-white shadow-xl mt-16")}
         style={{ width: '280px' }}
       >
-        <div className="handle flex items-center p-2 cursor-move select-none">
-          <div className={stl.headerTitle}><b>Meeting</b> {userId}</div>
-          <Counter startTime={new Date().getTime() } className="text-sm ml-auto" />          
+        <div className="handle flex items-center p-2 cursor-move select-none border-b">
+          <div className={stl.headerTitle}><b>Talking to </b> {userId ? userId : 'Anonymous User'}</div>
+          <Counter startTime={new Date().getTime() } className="text-sm ml-auto" />
         </div>
         <div className={cn(stl.videoWrapper, {'hidden' : minimize}, 'relative')}>
           <VideoContainer stream={ incomeStream } />
diff --git a/frontend/app/components/Assist/ChatWindow/chatWindow.css b/frontend/app/components/Assist/ChatWindow/chatWindow.css
index 0f1f7694b..8bb359695 100644
--- a/frontend/app/components/Assist/ChatWindow/chatWindow.css
+++ b/frontend/app/components/Assist/ChatWindow/chatWindow.css
@@ -1,9 +1,10 @@
 .wrapper {
   background-color: white;
-  border: solid thin #000;
+  border: solid thin $gray-light;
   border-radius: 3px;
   position: fixed;  
-  width: 300px;  
+  width: 300px;
+  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
 }
 
 .headerTitle {
diff --git a/frontend/app/components/Assist/components/AssistActions/AssistActions.tsx b/frontend/app/components/Assist/components/AssistActions/AssistActions.tsx
index d3390e47c..b9ea38f47 100644
--- a/frontend/app/components/Assist/components/AssistActions/AssistActions.tsx
+++ b/frontend/app/components/Assist/components/AssistActions/AssistActions.tsx
@@ -117,7 +117,7 @@ function AssistActions({ toggleChatWindow, userId, calling, peerConnectionStatus
               color={ onCall ? "red" : "gray-darkest" }
             />
             <span className={cn("ml-2", { 'color-red' : onCall })}>{ onCall ? 'End Call' : 'Call' }</span> */}
-            <IconButton size="small" primary={!onCall} red={onCall} label="Call" icon="headset" />
+            <IconButton size="small" primary={!onCall} red={onCall} label={onCall ? 'End' : 'Call'} icon="headset" />
           </div>
         }
         content={ cannotCall ? "You don’t have the permissions to perform this action." : `Call ${userId ? userId : 'User'}` }
diff --git a/frontend/app/components/Session_/PlayerBlockHeader.js b/frontend/app/components/Session_/PlayerBlockHeader.js
index e32fd2bb6..631a3a3c8 100644
--- a/frontend/app/components/Session_/PlayerBlockHeader.js
+++ b/frontend/app/components/Session_/PlayerBlockHeader.js
@@ -126,6 +126,11 @@ export default class PlayerBlockHeader extends React.PureComponent {
           <HeaderInfo icon={ osIcon(userOs) } label={ userOs } /> */}
 
           <div className='ml-auto flex items-center'>
+            { live && hasSessionsPath && (
+              <div className={stl.liveSwitchButton} onClick={() => this.props.setSessionPath('')}>
+                This Session is Now Continuing Live
+              </div>
+            )}
             <div className={ stl.divider } />
             <Popup
                 trigger={(
@@ -144,19 +149,13 @@ export default class PlayerBlockHeader extends React.PureComponent {
                 hideOnScroll
             />
             <div className={ stl.divider } />
-
-            { live && hasSessionsPath && (
-              <div className={stl.liveSwitchButton} onClick={() => this.props.setSessionPath('')}>
-                This Session is Now Continuing Live
-              </div>
-            )}
             { _live && <AssistActions isLive userId={userId} /> }
             { !_live && (
               <>
                 <Autoplay />
                 <div className={ stl.divider } />
                 <IconButton
-                  className="mr-2"
+                  // className="mr-2"
                   tooltip="Bookmark"
                   tooltipPosition="top right"
                   onClick={ this.toggleFavorite }
@@ -164,13 +163,14 @@ export default class PlayerBlockHeader extends React.PureComponent {
                   icon={ favorite ? 'star-solid' : 'star' }                  
                   plain
                 />
+                <div className={ stl.divider } />
                 <SharePopup
                   entity="sessions"
                   id={ sessionId }
                   showCopyLink={true}
                   trigger={
                     <IconButton
-                      className="mr-2"
+                      // className="mr-2"
                       tooltip="Share Session"
                       tooltipPosition="top right"
                       disabled={ disabled }
diff --git a/frontend/app/components/shared/SessionItem/MetaItem/MetaItem.tsx b/frontend/app/components/shared/SessionItem/MetaItem/MetaItem.tsx
index 1d2df4b04..94089520c 100644
--- a/frontend/app/components/shared/SessionItem/MetaItem/MetaItem.tsx
+++ b/frontend/app/components/shared/SessionItem/MetaItem/MetaItem.tsx
@@ -11,7 +11,7 @@ export default function MetaItem(props: Props) {
     const { className = '', label, value } = props
     return (
         <div className={cn("flex items-center rounded", className)}>
-            <span className="rounded-tl rounded-bl bg-gray-light-shade px-2 color-gray-medium capitalize" style={{ maxWidth: "80px"}}>
+            <span className="rounded-tl rounded-bl bg-gray-light-shade px-2 color-gray-medium capitalize" style={{ maxWidth: "100px"}}>
                 <TextEllipsis text={label} className="p-0" popupProps={{ size: 'small' }}  />
             </span>
             <span className="rounded-tr rounded-br bg-gray-lightest px-2 color-gray-dark capitalize" style={{ maxWidth: "100px"}}>
diff --git a/frontend/app/components/shared/SessionItem/MetaMoreButton/MetaMoreButton.tsx b/frontend/app/components/shared/SessionItem/MetaMoreButton/MetaMoreButton.tsx
index 21a5f38f1..514192273 100644
--- a/frontend/app/components/shared/SessionItem/MetaMoreButton/MetaMoreButton.tsx
+++ b/frontend/app/components/shared/SessionItem/MetaMoreButton/MetaMoreButton.tsx
@@ -20,7 +20,7 @@ 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-2" />
+                    <MetaItem key={index} label={label} value={value} className="mb-3" />
                 ))}
                 </div>
             }
diff --git a/frontend/app/components/ui/Confirmation/Confirmation.js b/frontend/app/components/ui/Confirmation/Confirmation.js
index d791b7fe2..563f383eb 100644
--- a/frontend/app/components/ui/Confirmation/Confirmation.js
+++ b/frontend/app/components/ui/Confirmation/Confirmation.js
@@ -22,7 +22,7 @@ const Confirmation = ({
       content={confirmation}
       header={header}
       className="confirmCustom"
-      confirmButton={<Button size="small" id="confirm-button" primary>{ confirmButton }</Button>}
+      confirmButton={<Button size="small" id="confirm-button" className="ml-0" primary>{ confirmButton }</Button>}
       cancelButton={<Button size="small" id="cancel-button" plain className={ stl.cancelButton }>{ cancelButton }</Button>}
       onCancel={() => proceed(false)}
       onConfirm={() => proceed(true)}
diff --git a/frontend/app/components/ui/CountryFlag/CountryFlag.js b/frontend/app/components/ui/CountryFlag/CountryFlag.js
index 04cfaf38d..6bcc6672b 100644
--- a/frontend/app/components/ui/CountryFlag/CountryFlag.js
+++ b/frontend/app/components/ui/CountryFlag/CountryFlag.js
@@ -1,6 +1,6 @@
 import cn from 'classnames';
 import { countries } from 'App/constants';
-import { Popup } from 'UI';
+import { Popup, Icon } from 'UI';
 import stl from './countryFlag.css';
 
 const CountryFlag = React.memo(({ country, className, style = {}, label = false }) => {
@@ -13,7 +13,8 @@ const CountryFlag = React.memo(({ country, className, style = {}, label = false
 			<Popup
 				trigger={ knownCountry 
 				?  <div className={ cn(`flag flag-${ countryFlag }`, className, stl.default) } />
-				: <div className={ cn('text-sm', className) }>{ "N/A" }</div>
+				: <Icon name="flag-na" size="22" className="-mx-1" />
+				// : <div className={ cn('text-sm', className) }>{ "N/A" }</div>
 				}
 				content={ countryName }
 				inverted
diff --git a/frontend/app/styles/semantic.css b/frontend/app/styles/semantic.css
index 7fe14933b..0bfa64bf4 100644
--- a/frontend/app/styles/semantic.css
+++ b/frontend/app/styles/semantic.css
@@ -336,4 +336,13 @@ a:hover {
   overflow: hidden;
   text-overflow: ellipsis;
   margin-right: 15px;
+}
+
+.ui.mini.modal>.header:not(.ui) {
+  padding: 10px 17px !important;
+  font-size: 16px !important;
+}
+
+.ui.modal>.content {
+  padding: 10px 17px !important; 
 }
\ No newline at end of file
diff --git a/frontend/app/svg/icons/flag-na.svg b/frontend/app/svg/icons/flag-na.svg
new file mode 100644
index 000000000..ca42ac405
--- /dev/null
+++ b/frontend/app/svg/icons/flag-na.svg
@@ -0,0 +1,3 @@
+<svg width="22" height="14" viewBox="0 0 22 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2 0C0.895431 0 0 0.89543 0 2V12C0 13.1046 0.89543 14 2 14H20C21.1046 14 22 13.1046 22 12V2C22 0.895431 21.1046 0 20 0H2ZM11.0757 10V3.60156H9.98145V8.19385L7.10303 3.60156H6V10H7.10303V5.4165L9.97266 10H11.0757ZM15.0396 3.60156H15.3032L17.7202 10H16.5601L16.0423 8.50146H13.5654L13.0488 10H11.8931L14.3013 3.60156H14.5605H15.0396ZM13.8668 7.62695H15.7402L14.8024 4.91255L13.8668 7.62695Z" fill="#C4C4C4"/>
+</svg>