commit e3ec0d2faea69be096fb3b18a463ca56154b69cf
author Gabriel Rochon <rochon.gabriel1@gmail.com> Sat Oct 08 14:27:03 2022 -0400
committer simon <tran.simon2@gmail.com> Fri Oct 21 15:43:21 2022 -0400
tree c413b360bfaad039455ed57c59bdc931027511e1
parent f796a09936006fc38403e803f27a24281b6d3e60

Add basic call interface UI

GitLab: #25
Change-Id: I1d1eda0947dcdc40195dbdd7c9f8548cf4062b76

client/src/components/Button.tsx

diff --git a/client/src/components/Button.tsx b/client/src/components/Button.tsx
index 3c147d6..25ddf39 100644
--- a/client/src/components/Button.tsx
+++ b/client/src/components/Button.tsx
@@ -25,19 +25,29 @@
   Arrow2Icon,
   Arrow3Icon,
   ArrowIcon,
+  CallEndIcon,
   CameraIcon,
   CameraInBubbleIcon,
   CancelIcon,
+  ChatBubbleIcon,
   CrossedEyeIcon,
   CrossIcon,
   EmojiIcon,
+  ExtensionIcon,
   EyeIcon,
   FolderIcon,
+  FullscreenIcon,
+  GroupAddIcon,
   InfoIcon,
+  MicroIcon,
   MicroInBubbleIcon,
   PaperClipIcon,
   PenIcon,
+  RecordingIcon,
   SaltireIcon,
+  ScreenShareIcon,
+  VideoCameraIcon,
+  VolumeIcon,
 } from './SvgIcon';
 
 type ShapedButtonProps = IconButtonProps & {
@@ -135,6 +145,85 @@
   },
 }));
 
+export const CallingChatButton = (props: IconButtonProps) => {
+  return (
+    <IconButton {...props} aria-label="chat" sx={{ color: 'white' }}>
+      <ChatBubbleIcon />
+    </IconButton>
+  );
+};
+
+export const CallingEndButton = (props: IconButtonProps) => {
+  return (
+    <IconButton {...props} aria-label="end call" sx={{ color: 'white', backgroundColor: 'red' }}>
+      <CallEndIcon />
+    </IconButton>
+  );
+};
+
+export const CallingExtensionButton = (props: IconButtonProps) => {
+  return (
+    <IconButton {...props} aria-label="extensions" sx={{ color: 'white' }}>
+      <ExtensionIcon />
+    </IconButton>
+  );
+};
+
+export const CallingFullscreenButton = (props: IconButtonProps) => {
+  return (
+    <IconButton {...props} aria-label="fullscreen" sx={{ color: 'white' }}>
+      <FullscreenIcon />
+    </IconButton>
+  );
+};
+
+export const CallingGroupButton = (props: IconButtonProps) => {
+  return (
+    <IconButton {...props} aria-label="group options" sx={{ color: 'white' }}>
+      <GroupAddIcon />
+    </IconButton>
+  );
+};
+
+export const CallingMicButton = (props: IconButtonProps) => {
+  return (
+    <IconButton {...props} aria-label="microphone options" sx={{ color: 'white' }}>
+      <MicroIcon />
+    </IconButton>
+  );
+};
+
+export const CallingRecordButton = (props: IconButtonProps) => {
+  return (
+    <IconButton {...props} aria-label="recording options" sx={{ color: 'white' }}>
+      <RecordingIcon />
+    </IconButton>
+  );
+};
+
+export const CallingScreenShareButton = (props: IconButtonProps) => {
+  return (
+    <IconButton {...props} aria-label="screen share" sx={{ color: 'white' }}>
+      <ScreenShareIcon />
+    </IconButton>
+  );
+};
+
+export const CallingVideoCameraButton = (props: IconButtonProps) => {
+  return (
+    <IconButton {...props} aria-label="camera options" sx={{ color: 'white' }}>
+      <VideoCameraIcon />
+    </IconButton>
+  );
+};
+export const CallingVolumeButton = (props: IconButtonProps) => {
+  return (
+    <IconButton {...props} aria-label="volume options" sx={{ color: 'white' }}>
+      <VolumeIcon />
+    </IconButton>
+  );
+};
+
 export const CloseButton = styled((props: IconButtonProps) => {
   return (
     <IconButton {...props} disableRipple={true} aria-label="close">