cosmetic changes for calling buttons

ts/components/session/calling/CallContainer.tsx

@@ -54,7 +54,7 @@ export const InConvoCallWindow = styled.div`
   display: flex;
   height: 50%;
 
-  background: radial-gradient(black, #505050);
+  background-color: hsl(0, 0%, 15.7%);
 
   flex-shrink: 0;
   min-height: 200px;
@@ -65,10 +65,11 @@ const InConvoCallWindowControls = styled.div`
   position: absolute;
 
   bottom: 0px;
-  width: fit-content;
+  width: 100%;
+  height: 100%;
+  align-items: flex-end;
   padding: 10px;
   border-radius: 10px;
-  height: 60px;
   margin-left: auto;
   margin-right: auto;
   left: 0;
@@ -77,7 +78,6 @@ const InConvoCallWindowControls = styled.div`
 
   display: flex;
 
-  align-items: center;
   justify-content: center;
   opacity: 0;
   &:hover {
@@ -182,8 +182,10 @@ export const DraggableCallContainer = () => {
 const VideoInputMenu = ({
   triggerId,
   camerasList,
+  onUnmute,
 }: {
   triggerId: string;
+  onUnmute: () => void;
   camerasList: Array<InputItem>;
 }) => {
   return (
@@ -193,6 +195,7 @@ const VideoInputMenu = ({
           <Item
             key={m.deviceId}
             onClick={() => {
+              onUnmute();
               void CallManager.selectCameraByDeviceId(m.deviceId);
             }}
           >
@@ -207,9 +210,11 @@ const VideoInputMenu = ({
 const AudioInputMenu = ({
   triggerId,
   audioInputsList,
+  onUnmute,
 }: {
   triggerId: string;
   audioInputsList: Array<InputItem>;
+  onUnmute: () => void;
 }) => {
   return (
     <Menu id={triggerId} animation={animation.fade}>
@@ -218,6 +223,7 @@ const AudioInputMenu = ({
           <Item
             key={m.deviceId}
             onClick={() => {
+              onUnmute();
               void CallManager.selectAudioInputByDeviceId(m.deviceId);
             }}
           >
@@ -357,10 +363,11 @@ export const InConversationCallContainer = () => {
             iconSize={60}
             iconPadding="20px"
             iconType="hangup"
-            backgroundColor="var(--color-cell-background)"
+            backgroundColor="white"
             borderRadius="50%"
             onClick={handleEndCall}
             iconColor="red"
+            margin="10px"
           />
           <DropDownAndToggleButton
             iconType="camera"
@@ -375,8 +382,16 @@ export const InConversationCallContainer = () => {
             onArrowClick={showAudioInputMenu}
           />
         </InConvoCallWindowControls>
-        <VideoInputMenu triggerId={videoTriggerId} camerasList={currentConnectedCameras} />
-        <AudioInputMenu triggerId={audioTriggerId} audioInputsList={currentConnectedAudioInputs} />
+        <VideoInputMenu
+          triggerId={videoTriggerId}
+          onUnmute={() => setVideoMuted(false)}
+          camerasList={currentConnectedCameras}
+        />
+        <AudioInputMenu
+          triggerId={audioTriggerId}
+          onUnmute={() => setAudioMuted(false)}
+          audioInputsList={currentConnectedAudioInputs}
+        />
       </RelativeCallWindow>
     </InConvoCallWindow>
   );

ts/components/session/icon/DropDownAndToggleButton.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import _ from 'lodash';
 import styled from 'styled-components';
+import { contextMenu } from 'react-contexify';
 
 type SProps = {
   onArrowClick: (e: React.MouseEvent<HTMLDivElement>) => void;
@@ -10,11 +11,10 @@ type SProps = {
   iconType: 'microphone' | 'camera';
 };
 
-const StyledRoundedButton = styled.div`
-  background-color: var(--color-cell-background);
-  color: var(--color-text);
+const StyledRoundedButton = styled.div<{ isMuted: boolean }>`
+  background-color: ${props => (props.isMuted ? 'black' : 'white')};
+  color: ${props => (props.isMuted ? 'white' : 'black')};
   border-radius: 50%;
-  box-shadow: var(--color-session-shadow);
   cursor: pointer;
 
   transition-duration: 0.25s;
@@ -44,6 +44,7 @@ const StyledArrowIcon = styled(StyledRoundedButton)`
   position: relative;
   top: -35%;
   right: -65%;
+  box-shadow: 0 0 4px 0 #b4b4b4;
 `;
 
 const CameraIcon = (
@@ -67,16 +68,17 @@ export const DropDownAndToggleButton = (props: SProps) => {
 
   const mainButtonClickHandler = (e: React.MouseEvent<HTMLDivElement>) => {
     e.stopPropagation();
+    contextMenu.hideAll();
     onMainButtonClick(e);
   };
   const iconToRender =
     iconType === 'microphone' ? MicrophoneIcon : iconType === 'camera' ? CameraIcon : null;
 
   return (
-    <StyledContainer>
+    <StyledContainer isMuted={isMuted || false}>
       <StyledMainIcon onClick={mainButtonClickHandler}>{iconToRender}</StyledMainIcon>
       {!hidePopoverArrow && (
-        <StyledArrowIcon onClick={arrowClickHandler}>
+        <StyledArrowIcon isMuted={false} onClick={arrowClickHandler}>
           <svg viewBox="-200 -200 640 640" fill="currentColor">
             <path d="M127.5 191.25L255 63.75L0 63.75L127.5 191.25Z" />
           </svg>

ts/components/session/icon/SessionIconButton.tsx

@@ -9,6 +9,7 @@ interface SProps extends SessionIconProps {
   notificationCount?: number;
   isSelected?: boolean;
   isHidden?: boolean;
+  margin?: string;
 }
 
 const SessionIconButtonInner = (props: SProps) => {
@@ -26,6 +27,7 @@ const SessionIconButtonInner = (props: SProps) => {
     backgroundColor,
     borderRadius,
     iconPadding,
+    margin,
   } = props;
   const clickHandler = (e: React.MouseEvent<HTMLDivElement>) => {
     if (props.onClick) {
@@ -39,7 +41,7 @@ const SessionIconButtonInner = (props: SProps) => {
       className={classNames('session-icon-button', iconSize, isSelected ? 'no-opacity' : '')}
       role="button"
       onClick={clickHandler}
-      style={{ display: isHidden ? 'none' : 'flex' }}
+      style={{ display: isHidden ? 'none' : 'flex', margin: margin ? margin : '' }}
     >
       <SessionIcon
         iconType={iconType}