commit 2d3b6537ad6612a9d4efc7df9b7a06cbe3b34718
author simon <tran.simon2@gmail.com> Tue Nov 08 21:01:57 2022 -0500
committer Gabriel Rochon <rochon.gabriel1@gmail.com> Sat Nov 12 20:20:30 2022 -0500
tree 431928247605a992a323375db923caa774d18528
parent 8f99f0166452473ff2f7d7c5aaf95973d2189aec

Add pending and pending receiving user interfaces

GitLab: #101
GitLab: #102

Change-Id: I202372a92246c72225bb1fe277147fe5ee2f9981

client/src/components/CallButtons.tsx

diff --git a/client/src/components/CallButtons.tsx b/client/src/components/CallButtons.tsx
index 2392c00..79d5485 100644
--- a/client/src/components/CallButtons.tsx
+++ b/client/src/components/CallButtons.tsx
@@ -32,7 +32,9 @@
   MicroIcon,
   MicroOffIcon,
   MoreVerticalIcon,
+  PlaceAudioCallIcon,
   RecordingIcon,
+  RoundCloseIcon,
   ScreenShareArrowIcon,
   ScreenShareRegularIcon,
   ScreenShareScreenAreaIcon,
@@ -42,23 +44,33 @@
   WindowIcon,
 } from './SvgIcon';
 
+type ColoredCallButtonColor = 'red' | 'green';
+
 const CallButton = styled((props: ExpandableButtonProps) => {
   return <ExpandableButton {...props} />;
 })({
+  color: 'white',
   '&:hover': {
     backgroundColor: 'rgba(255, 255, 255, 0.15)',
   },
-  color: 'white',
 });
 
-const ColoredCallButton = styled((props: ExpandableButtonProps) => {
-  return <ExpandableButton {...props} />;
-})({
-  color: 'white',
-  backgroundColor: '#a30000',
-  '&:hover': {
-    backgroundColor: '#ff0000',
-  },
+const ColoredCallButton = styled(
+  ({
+    ...props
+  }: ExpandableButtonProps & {
+    buttonColor: ColoredCallButtonColor;
+  }) => {
+    return <ExpandableButton {...props} />;
+  }
+)(({ buttonColor }) => {
+  return {
+    color: 'white',
+    backgroundColor: buttonColor === 'green' ? '#183722' : '#5E070D',
+    '&:hover': {
+      backgroundColor: buttonColor === 'green' ? '#0B8271' : '#CC0022',
+    },
+  };
 });
 
 export const CallingChatButton = (props: ExpandableButtonProps) => {
@@ -66,7 +78,7 @@
 };
 
 export const CallingEndButton = (props: ExpandableButtonProps) => {
-  return <ColoredCallButton sx={{}} aria-label="call end" Icon={CallEndIcon} {...props} />;
+  return <ColoredCallButton buttonColor="red" aria-label="call end" Icon={CallEndIcon} {...props} />;
 };
 
 export const CallingExtensionButton = (props: ExpandableButtonProps) => {
@@ -159,7 +171,6 @@
 
 export const CallingVideoCameraButton = (props: ExpandableButtonProps) => {
   const { isVideoOn, setVideoStatus } = useContext(WebRTCContext);
-
   return (
     <CallButton
       aria-label="camera options"
@@ -176,3 +187,16 @@
     />
   );
 };
+
+// Calling pending/receiving interface
+export const CallingAnswerAudioButton = (props: ExpandableButtonProps) => {
+  return <ColoredCallButton aria-label="answer audio" buttonColor="green" Icon={PlaceAudioCallIcon} {...props} />;
+};
+
+export const CallingAnswerVideoButton = (props: ExpandableButtonProps) => {
+  return <ColoredCallButton aria-label="answer video" buttonColor="green" Icon={VideoCameraIcon} {...props} />;
+};
+
+export const CallingRefuseButton = (props: ExpandableButtonProps) => {
+  return <ColoredCallButton aria-label="reject" buttonColor="red" Icon={RoundCloseIcon} {...props} />;
+};