commit ae655dd5c0d024f7a6daf1090bb7e379aedf21d4
author idillon <io.daza-dillon@savoirfairelinux.com> Fri Oct 14 18:11:02 2022 -0400
committer Adrien Béraud <adrien.beraud@savoirfairelinux.com> Fri Oct 28 15:17:52 2022 -0400
tree 96458cfc17cc272fcdb3d91f72832040d340315d
parent 9d12dc4920ab54c5df2b694a52e484585a95c94e

add names to conversation view and set header styles

Change-Id: Ic34b2cea754a5a82224a9fbf158b0126c7e44a5e

client/src/components/Button.tsx

diff --git a/client/src/components/Button.tsx b/client/src/components/Button.tsx
index 0d401a2..2325ecb 100644
--- a/client/src/components/Button.tsx
+++ b/client/src/components/Button.tsx
@@ -19,12 +19,13 @@
 import { Box, ClickAwayListener, IconButton, IconButtonProps, Popper, SvgIconProps } from '@mui/material';
 import { styled } from '@mui/material/styles';
 import EmojiPicker, { IEmojiData } from 'emoji-picker-react';
-import React, { ComponentType, MouseEvent, useCallback, useState } from 'react';
+import { ComponentType, MouseEvent, useCallback, useState } from 'react';
 
 import {
   Arrow2Icon,
   Arrow3Icon,
   ArrowIcon,
+  AudioCallIcon,
   CallEndIcon,
   CameraIcon,
   CameraInBubbleIcon,
@@ -39,13 +40,16 @@
   FullscreenIcon,
   GroupAddIcon,
   InfoIcon,
+  ListIcon,
   MicroIcon,
   MicroInBubbleIcon,
   PaperClipIcon,
   PenIcon,
+  PeopleWithPlusSignIcon,
   RecordingIcon,
   SaltireIcon,
   ScreenShareIcon,
+  VideoCallIcon,
   VideoCameraIcon,
   VolumeIcon,
 } from './SvgIcon';
@@ -284,6 +288,10 @@
   },
 }));
 
+export const AddParticipantButton = (props: IconButtonProps) => {
+  return <SquareButton {...props} aria-label="add participant" Icon={PeopleWithPlusSignIcon} />;
+};
+
 export const RecordVideoMessageButton = (props: IconButtonProps) => {
   return <SquareButton {...props} aria-label="record video message" Icon={CameraInBubbleIcon} />;
 };
@@ -292,6 +300,18 @@
   return <SquareButton {...props} aria-label="record voice message" Icon={MicroInBubbleIcon} />;
 };
 
+export const ShowOptionsMenuButton = (props: IconButtonProps) => {
+  return <SquareButton {...props} aria-label="show options menu" Icon={ListIcon} />;
+};
+
+export const StartVideoCallButton = (props: IconButtonProps) => {
+  return <SquareButton {...props} aria-label="start audio call" Icon={AudioCallIcon} />;
+};
+
+export const StartAudioCallButton = (props: IconButtonProps) => {
+  return <SquareButton {...props} aria-label="start video call" Icon={VideoCallIcon} />;
+};
+
 export const UploadFileButton = (props: IconButtonProps) => {
   return <SquareButton {...props} aria-label="upload file" Icon={PaperClipIcon} />;
 };
@@ -356,7 +376,12 @@
   return (
     <ClickAwayListener onClickAway={handleClose}>
       <Box>
-        <SquareButton aria-describedby={id} aria-label="select emoji" Icon={EmojiIcon} onClick={(e) => {}} />
+        <SquareButton
+          aria-describedby={id}
+          aria-label="select emoji"
+          Icon={EmojiIcon}
+          onClick={handleOpenEmojiPicker}
+        />
         <Popper id={id} open={open} anchorEl={anchorEl}>
           <EmojiPicker onEmojiClick={onEmojiClick} disableAutoFocus={true} disableSkinTonePicker={true} native />
         </Popper>