feat: updated calls UI

except for background color, waiting on designs

ts/components/calling/CallButtons.tsx

@@ -10,6 +10,47 @@ import { DropDownAndToggleButton } from '../icon/DropDownAndToggleButton';
 import styled from 'styled-components';
 import { SessionContextMenuContainer } from '../SessionContextMenuContainer';
 
+const VideoInputMenu = ({
+  triggerId,
+  camerasList,
+}: {
+  triggerId: string;
+  camerasList: Array<InputItem>;
+}) => {
+  return (
+    <SessionContextMenuContainer>
+      <Menu id={triggerId} animation={animation.fade}>
+        {camerasList.map(m => {
+          return (
+            <Item
+              key={m.deviceId}
+              onClick={() => {
+                void CallManager.selectCameraByDeviceId(m.deviceId);
+              }}
+            >
+              {m.label.substr(0, 40)}
+            </Item>
+          );
+        })}
+      </Menu>
+    </SessionContextMenuContainer>
+  );
+};
+
+const showVideoInputMenu = (
+  currentConnectedCameras: Array<InputItem>,
+  e: React.MouseEvent<HTMLDivElement>
+) => {
+  if (currentConnectedCameras.length === 0) {
+    ToastUtils.pushNoCameraFound();
+    return;
+  }
+  contextMenu.show({
+    id: videoTriggerId,
+    event: e,
+  });
+};
+
 const videoTriggerId = 'video-menu-trigger-id';
 const audioTriggerId = 'audio-menu-trigger-id';
 const audioOutputTriggerId = 'audio-output-menu-trigger-id';
@@ -42,6 +83,47 @@ export const VideoInputButton = ({
   );
 };
 
+const AudioInputMenu = ({
+  triggerId,
+  audioInputsList,
+}: {
+  triggerId: string;
+  audioInputsList: Array<InputItem>;
+}) => {
+  return (
+    <SessionContextMenuContainer>
+      <Menu id={triggerId} animation={animation.fade}>
+        {audioInputsList.map(m => {
+          return (
+            <Item
+              key={m.deviceId}
+              onClick={() => {
+                void CallManager.selectAudioInputByDeviceId(m.deviceId);
+              }}
+            >
+              {m.label.substr(0, 40)}
+            </Item>
+          );
+        })}
+      </Menu>
+    </SessionContextMenuContainer>
+  );
+};
+
+const showAudioInputMenu = (
+  currentConnectedAudioInputs: Array<any>,
+  e: React.MouseEvent<HTMLDivElement>
+) => {
+  if (currentConnectedAudioInputs.length === 0) {
+    ToastUtils.pushNoAudioInputFound();
+    return;
+  }
+  contextMenu.show({
+    id: audioTriggerId,
+    event: e,
+  });
+};
+
 export const AudioInputButton = ({
   currentConnectedAudioInputs,
   isAudioMuted,
@@ -70,53 +152,22 @@ export const AudioInputButton = ({
   );
 };
 
-export const AudioOutputButton = ({
+const AudioOutputMenu = ({
-  currentConnectedAudioOutputs,
-  isAudioOutputMuted,
-  hideArrowIcon = false,
-}: {
-  currentConnectedAudioOutputs: Array<InputItem>;
-  isAudioOutputMuted: boolean;
-  hideArrowIcon?: boolean;
-}) => {
-  return (
-    <>
-      <DropDownAndToggleButton
-        iconType="volume"
-        isMuted={isAudioOutputMuted}
-        onMainButtonClick={() => {
-          void handleSpeakerToggle(currentConnectedAudioOutputs, isAudioOutputMuted);
-        }}
-        onArrowClick={e => {
-          showAudioOutputMenu(currentConnectedAudioOutputs, e);
-        }}
-        hidePopoverArrow={hideArrowIcon}
-      />
-
-      <AudioOutputMenu
-        triggerId={audioOutputTriggerId}
-        audioOutputsList={currentConnectedAudioOutputs}
-      />
-    </>
-  );
-};
-
-const VideoInputMenu = ({
   triggerId,
-  camerasList,
+  audioOutputsList,
 }: {
   triggerId: string;
-  camerasList: Array<InputItem>;
+  audioOutputsList: Array<InputItem>;
 }) => {
   return (
     <SessionContextMenuContainer>
       <Menu id={triggerId} animation={animation.fade}>
-        {camerasList.map(m => {
+        {audioOutputsList.map(m => {
           return (
             <Item
               key={m.deviceId}
               onClick={() => {
-                void CallManager.selectCameraByDeviceId(m.deviceId);
+                void CallManager.selectAudioOutputByDeviceId(m.deviceId);
               }}
             >
               {m.label.substr(0, 40)}
@@ -128,57 +179,48 @@ const VideoInputMenu = ({
   );
 };
 
-const AudioInputMenu = ({
+const showAudioOutputMenu = (
-  triggerId,
+  currentConnectedAudioOutputs: Array<any>,
-  audioInputsList,
+  e: React.MouseEvent<HTMLDivElement>
-}: {
+) => {
-  triggerId: string;
+  if (currentConnectedAudioOutputs.length === 0) {
-  audioInputsList: Array<InputItem>;
+    ToastUtils.pushNoAudioOutputFound();
-}) => {
+    return;
-  return (
+  }
-    <SessionContextMenuContainer>
+  contextMenu.show({
-      <Menu id={triggerId} animation={animation.fade}>
+    id: audioOutputTriggerId,
-        {audioInputsList.map(m => {
+    event: e,
-          return (
+  });
-            <Item
-              key={m.deviceId}
-              onClick={() => {
-                void CallManager.selectAudioInputByDeviceId(m.deviceId);
-              }}
-            >
-              {m.label.substr(0, 40)}
-            </Item>
-          );
-        })}
-      </Menu>
-    </SessionContextMenuContainer>
-  );
 };
 
-const AudioOutputMenu = ({
+export const AudioOutputButton = ({
-  triggerId,
+  currentConnectedAudioOutputs,
-  audioOutputsList,
+  isAudioOutputMuted,
+  hideArrowIcon = false,
 }: {
-  triggerId: string;
+  currentConnectedAudioOutputs: Array<InputItem>;
-  audioOutputsList: Array<InputItem>;
+  isAudioOutputMuted: boolean;
+  hideArrowIcon?: boolean;
 }) => {
   return (
-    <SessionContextMenuContainer>
+    <>
-      <Menu id={triggerId} animation={animation.fade}>
+      <DropDownAndToggleButton
-        {audioOutputsList.map(m => {
+        iconType="volume"
-          return (
+        isMuted={isAudioOutputMuted}
-            <Item
+        onMainButtonClick={() => {
-              key={m.deviceId}
+          void handleSpeakerToggle(currentConnectedAudioOutputs, isAudioOutputMuted);
-              onClick={() => {
-                void CallManager.selectAudioOutputByDeviceId(m.deviceId);
         }}
-            >
+        onArrowClick={e => {
-              {m.label.substr(0, 40)}
+          showAudioOutputMenu(currentConnectedAudioOutputs, e);
-            </Item>
+        }}
-          );
+        hidePopoverArrow={hideArrowIcon}
-        })}
+      />
-      </Menu>
+
-    </SessionContextMenuContainer>
+      <AudioOutputMenu
+        triggerId={audioOutputTriggerId}
+        audioOutputsList={currentConnectedAudioOutputs}
+      />
+    </>
   );
 };
 
@@ -198,10 +240,10 @@ const ShowInFullScreenButton = ({ isFullScreen }: { isFullScreen: boolean }) =>
       iconSize={60}
       iconPadding="20px"
       iconType="fullscreen"
-      backgroundColor="white"
+      backgroundColor="var(--white-color)"
       borderRadius="50%"
       onClick={showInFullScreen}
-      iconColor="black"
+      iconColor="var(--black-color)"
       margin="10px"
     />
   );
@@ -222,57 +264,15 @@ export const HangUpButton = () => {
       iconSize={60}
       iconPadding="20px"
       iconType="hangup"
-      backgroundColor="white"
+      backgroundColor="var(--white-color)"
       borderRadius="50%"
       onClick={handleEndCall}
-      iconColor="red"
+      iconColor="var(--red-color)"
       margin="10px"
     />
   );
 };
 
-const showAudioInputMenu = (
-  currentConnectedAudioInputs: Array<any>,
-  e: React.MouseEvent<HTMLDivElement>
-) => {
-  if (currentConnectedAudioInputs.length === 0) {
-    ToastUtils.pushNoAudioInputFound();
-    return;
-  }
-  contextMenu.show({
-    id: audioTriggerId,
-    event: e,
-  });
-};
-
-const showAudioOutputMenu = (
-  currentConnectedAudioOutputs: Array<any>,
-  e: React.MouseEvent<HTMLDivElement>
-) => {
-  if (currentConnectedAudioOutputs.length === 0) {
-    ToastUtils.pushNoAudioOutputFound();
-    return;
-  }
-  contextMenu.show({
-    id: audioOutputTriggerId,
-    event: e,
-  });
-};
-
-const showVideoInputMenu = (
-  currentConnectedCameras: Array<InputItem>,
-  e: React.MouseEvent<HTMLDivElement>
-) => {
-  if (currentConnectedCameras.length === 0) {
-    ToastUtils.pushNoCameraFound();
-    return;
-  }
-  contextMenu.show({
-    id: videoTriggerId,
-    event: e,
-  });
-};
-
 const handleCameraToggle = async (
   currentConnectedCameras: Array<InputItem>,
   localStreamVideoIsMuted: boolean

ts/components/calling/CallInFullScreenContainer.tsx

@@ -21,8 +21,8 @@ const CallInFullScreenVisible = styled.div`
   left: 0;
   display: flex;
   flex-direction: column;
-  background-color: black;
+  background-color: var(--black-color);
-  border: var(--session-border);
+  border: var(--border-color);
   opacity: 1;
 `;
 

ts/components/calling/DraggableCallContainer.tsx

@@ -15,13 +15,13 @@ import { SectionType } from '../../state/ducks/section';
 export const DraggableCallWindow = styled.div`
   position: absolute;
   z-index: 9;
-  box-shadow: 0px 0px 10px 0px #000000;
+  box-shadow: 0px 0px 10px 0px var(--black-color);
   max-height: 300px;
   width: 12vw;
   display: flex;
   flex-direction: column;
-  background-color: var(--color-modal-background);
+  background-color: var(--modal-background-color);
-  border: var(--session-border);
+  border: var(--border-color);
 `;
 
 export const StyledVideoElement = styled.video<{ isVideoMuted: boolean }>`

ts/components/calling/InConversationCallContainer.tsx

@@ -34,6 +34,7 @@ const InConvoCallWindow = styled.div`
   padding: 1rem;
   display: flex;
 
+  /* TODO Theming - Update? */
   background-color: hsl(0, 0%, 15.7%);
 
   flex-shrink: 1;
@@ -68,7 +69,8 @@ const StyledCenteredLabel = styled.div`
   transform: translateX(-50%);
   height: min-content;
   white-space: nowrap;
-  color: white;
+  /* TODO Theming - Update? */
+  color: var(--white-color);
   text-shadow: 0px 0px 8px white;
   z-index: 5;
 `;

ts/components/calling/IncomingCallDialog.tsx

@@ -20,8 +20,8 @@ export const CallWindow = styled.div`
   transform: translate(-50%, -50%);
   display: flex;
   flex-direction: column;
-  background-color: var(--color-modal-background);
+  background-color: var(--modal-background-color);
-  border: var(--session-border);
+  border: var(--border-color);
 `;
 
 const IncomingCallAvatarContainer = styled.div`

ts/components/dialog/SessionConfirm.tsx

@@ -140,7 +140,7 @@ export const SessionConfirm = (props: SessionConfirmDialogProps) => {
         {!hideCancel && (
           <SessionButton
             text={cancelText}
-            buttonColor={closeTheme}
+            buttonColor={!okTheme ? closeTheme : undefined}
             buttonType={SessionButtonType.Simple}
             onClick={onClickCancelHandler}
             dataTestId="session-confirm-cancel-button"

ts/components/icon/DropDownAndToggleButton.tsx

@@ -12,8 +12,8 @@ type SProps = {
 };
 
 const StyledRoundedButton = styled.div<{ isMuted: boolean }>`
-  background-color: ${props => (props.isMuted ? 'hsl(0,0%,40%)' : 'white')};
+  background-color: ${props => (props.isMuted ? 'hsl(0,0%,40%)' : 'var(--white-color)')};
-  color: ${props => (props.isMuted ? 'white' : 'black')};
+  color: ${props => (props.isMuted ? 'var(--white-color)' : 'var(--black-color)')};
   border-radius: 50%;
   cursor: pointer;
 

ts/components/icon/SessionIcon.tsx

@@ -101,7 +101,7 @@ const animation = (props: {
 }) => {
   if (props.rotateDuration) {
     return css`
-      ${rotate} ${props.rotateDuration}s infinite linear;
+      ${rotate} ${props.rotateDuration}s linear infinite;
     `;
   }
   if (props.noScale) {