Fine-tune appearance of buttons in calling interface UI
GitLab: #97
Change-Id: Iecf16921171196547e2a392ba6826971ca23ac47
diff --git a/client/src/components/CallButtons.tsx b/client/src/components/CallButtons.tsx
index 8c1660d..2392c00 100644
--- a/client/src/components/CallButtons.tsx
+++ b/client/src/components/CallButtons.tsx
@@ -16,11 +16,12 @@
* <https://www.gnu.org/licenses/>.
*/
+import { styled } from '@mui/material/styles';
import React, { useContext } from 'react';
import { Trans } from 'react-i18next';
import { WebRTCContext } from '../contexts/WebRTCProvider';
-import { ExpandableButton, ExpandableButtonProps, ToggleIconButton, ToggleIconButtonProps } from './Button';
+import { ExpandableButton, ExpandableButtonProps, ToggleIconButton } from './Button';
import {
CallEndIcon,
ChatBubbleIcon,
@@ -38,39 +39,59 @@
VideoCameraIcon,
VideoCameraOffIcon,
VolumeIcon,
+ WindowIcon,
} from './SvgIcon';
+const CallButton = styled((props: ExpandableButtonProps) => {
+ return <ExpandableButton {...props} />;
+})({
+ '&: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',
+ },
+});
+
export const CallingChatButton = (props: ExpandableButtonProps) => {
- return <ExpandableButton aria-label="chat" Icon={ChatBubbleIcon} {...props} />;
+ return <CallButton aria-label="chat" Icon={ChatBubbleIcon} {...props} />;
};
export const CallingEndButton = (props: ExpandableButtonProps) => {
- return <ExpandableButton aria-label="call end" Icon={CallEndIcon} sx={{ backgroundColor: 'red' }} {...props} />;
+ return <ColoredCallButton sx={{}} aria-label="call end" Icon={CallEndIcon} {...props} />;
};
export const CallingExtensionButton = (props: ExpandableButtonProps) => {
- return <ExpandableButton aria-label="extensions" Icon={ExtensionIcon} {...props} />;
+ return <CallButton aria-label="extensions" Icon={ExtensionIcon} {...props} />;
};
export const CallingFullScreenButton = (props: ExpandableButtonProps) => {
- return <ExpandableButton aria-label="full screen" Icon={FullScreenIcon} {...props} />;
+ return <CallButton aria-label="full screen" Icon={FullScreenIcon} {...props} />;
};
export const CallingGroupButton = (props: ExpandableButtonProps) => {
- return <ExpandableButton aria-label="group options" Icon={GroupAddIcon} {...props} />;
+ return <CallButton aria-label="group options" Icon={GroupAddIcon} {...props} />;
};
export const CallingMoreVerticalButton = (props: ExpandableButtonProps) => {
- return <ExpandableButton aria-label="more vertical" Icon={MoreVerticalIcon} {...props} />;
+ return <CallButton aria-label="more vertical" Icon={MoreVerticalIcon} {...props} />;
};
export const CallingRecordButton = (props: ExpandableButtonProps) => {
- return <ExpandableButton aria-label="recording options" Icon={RecordingIcon} {...props} />;
+ return <CallButton aria-label="recording options" Icon={RecordingIcon} {...props} />;
};
export const CallingScreenShareButton = (props: ExpandableButtonProps) => {
return (
- <ExpandableButton
+ <CallButton
aria-label="screen share"
Icon={ScreenShareArrowIcon}
expandMenuOptions={[
@@ -79,6 +100,10 @@
icon: <ScreenShareRegularIcon />,
},
{
+ description: <Trans i18nKey="share_window" />,
+ icon: <WindowIcon />,
+ },
+ {
description: <Trans i18nKey="share_screen_area" />,
icon: <ScreenShareScreenAreaIcon />,
},
@@ -94,7 +119,7 @@
export const CallingVolumeButton = (props: ExpandableButtonProps) => {
return (
- <ExpandableButton
+ <CallButton
aria-label="volume options"
Icon={VolumeIcon}
expandMenuOptions={[
@@ -111,33 +136,42 @@
/>
);
};
-export const CallingMicButton = (props: Partial<ToggleIconButtonProps>) => {
+
+export const CallingMicButton = (props: ExpandableButtonProps) => {
const { isAudioOn, setAudioStatus } = useContext(WebRTCContext);
return (
- <ToggleIconButton
+ <CallButton
aria-label="microphone options"
- sx={{ color: 'white' }}
- IconOn={MicroIcon}
- IconOff={MicroOffIcon}
- selected={isAudioOn}
- toggle={() => setAudioStatus(!isAudioOn)}
+ IconButtonComp={(props) => (
+ <ToggleIconButton
+ IconOn={MicroIcon}
+ IconOff={MicroOffIcon}
+ selected={isAudioOn}
+ toggle={() => setAudioStatus(!isAudioOn)}
+ {...props}
+ />
+ )}
{...props}
/>
);
};
-export const CallingVideoCameraButton = (props: Partial<ToggleIconButtonProps>) => {
+export const CallingVideoCameraButton = (props: ExpandableButtonProps) => {
const { isVideoOn, setVideoStatus } = useContext(WebRTCContext);
return (
- <ToggleIconButton
+ <CallButton
aria-label="camera options"
- sx={{ color: 'white' }}
- IconOn={VideoCameraIcon}
- IconOff={VideoCameraOffIcon}
- selected={isVideoOn}
- toggle={() => setVideoStatus(!isVideoOn)}
+ IconButtonComp={(props) => (
+ <ToggleIconButton
+ IconOn={VideoCameraIcon}
+ IconOff={VideoCameraOffIcon}
+ selected={isVideoOn}
+ toggle={() => setVideoStatus(!isVideoOn)}
+ {...props}
+ />
+ )}
{...props}
/>
);