feature(ui) - assist ui changes

frontend/app/components/Assist/Assist.tsx

@@ -1,12 +1,11 @@
 import React from 'react';
-import ChatWindow from './ChatWindow/ChatWindow';
+import ChatWindow from './ChatWindow';
 
 
 export default function Assist() {
-
   return (
     <div className="absolute">
-      <ChatWindow  />
+      <ChatWindow />
     </div>
   )
 }

frontend/app/components/Assist/ChatWindow/ChatWindow.tsx

@@ -1,14 +1,13 @@
-import React, { useState, useEffect } from 'react';
-//import { IconButton } from 'UI';
+import React, { useState, useEffect, FC } from 'react';
 import VideoContainer from '../components/VideoContainer';
 import stl from './chatWindow.css';
 import { callPeer } from 'App/player';
 
-// export interface Props {
-//   call: (oStream: MediaStream, cb: (iStream: MediaStream)=>void)=>void
-// }
+export interface Props {
+  // call: (oStream: MediaStream, cb: (iStream: MediaStream)=>void)=>void
+}
 
-function ChatWindow() {
+const ChatWindow: FC<Props> = function ChatWindow() {
   const [ inputStream, setInputStream ] = useState<MediaStream | null>(null);
   const [ outputStream, setOutputStream ] = useState<MediaStream | null>(null);
 
@@ -26,17 +25,16 @@ function ChatWindow() {
     .catch(console.log) // TODO: handle error in ui
   }, [])
 
-  return (
-    <div className="fixed border radius bg-white z-50 shadow-xl mt-16">
+  return (    
+    <div      
+      className="fixed border radius bg-white z-50 shadow-xl mt-16"
+    >
       <div className="p-2">
         <VideoContainer stream={ inputStream } />
         <div className="py-1" />
         <VideoContainer stream={ outputStream } muted/>
-        {/* <div className="cursor-pointer p-2 mr-2">
-          <IconButton icon="telephone" size="20"  onClick={ onCallClick }/>
-        </div> */}
       </div>
-    </div>
+    </div>    
   )
 }
 

frontend/app/components/Assist/assist.stories.js

@@ -0,0 +1,8 @@
+import { storiesOf } from '@storybook/react';
+import ChatWindow from './ChatWindow';
+
+storiesOf('Assist', module)
+  .add('ChatWindow', () => (
+    <ChatWindow />
+  ))
+

frontend/app/components/Assist/components/VideoContainer/VideoContainer.css

@@ -0,0 +1,25 @@
+.controls {
+  margin-bottom: 8px;
+  margin-right: 15px;
+}
+
+.btnWrapper {
+  width: 24px;
+  height: 24px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: white;
+  border-radius: 50%;
+  margin-left: 8px;  
+  /* &:hover {
+    background-color: $teal;
+  } */
+
+  &.disabled {
+    background-color: red;
+    & svg {
+      fill: white;
+    }
+  }
+}

frontend/app/components/Assist/components/VideoContainer/VideoContainer.tsx

@@ -1,5 +1,7 @@
 import React, { useState, useEffect, useRef } from 'react'
-import { Button, Icon } from 'UI'
+import { Button, Icon, IconButton } from 'UI'
+import cn from 'classnames'
+import stl from './VideoContainer.css'
 
 interface Props {
   stream: MediaStream | null
@@ -32,17 +34,21 @@ function VideoContainer({ stream, muted = false }: Props) {
   }
 
   return (
-    <div className="relative bg-gray-light-shade border p-1" style={{ height: '160px', width: '200px' }}>      
-      <div className="absolute inset-0 flex justify-center border border-gray-300 p-1 bg-white radius bg-opacity-25">
+    <div className="relative bg-gray-light-shade" style={{ height: '152px', width: '200px' }}>      
+      <div className="absolute inset-0 flex justify-center border border-gray-300 bg-white radius bg-opacity-25">
         <video autoPlay ref={ ref } muted={ muted } />
-        <div className="flex items-center absolute w-full justify-center bottom-0 bg-gray-lightest">
-          <Button plain size="small" onClick={toggleAudio}>
-            <Icon name={audioEnabled ? 'mic' : 'mic-mute'} size="16" />
-          </Button>
+        <div className={cn(stl.controls, "flex items-center absolute w-full justify-end bottom-0")}>
+          <div className={cn(stl.btnWrapper, { [stl.disabled]: !audioEnabled})}>
+            <Button plain size="small" onClick={toggleAudio} noPadding>
+              <Icon name={audioEnabled ? 'mic' : 'mic-mute'} size="14" />
+            </Button>
+          </div>
 
-          <Button plain size="small" onClick={toggleVideo}>
-            <Icon name={ videoEnabled ? 'camera-video' : 'camera-video-off' } size="16" />
-          </Button>
+          <div className={cn(stl.btnWrapper, { [stl.disabled]: !videoEnabled})}>
+            <Button plain size="small" onClick={toggleVideo} noPadding>
+              <Icon name={ videoEnabled ? 'camera-video' : 'camera-video-off' } size="14" />
+            </Button>
+          </div>
         </div>
       </div>
     </div>