feat(media): [closes #157] Improve media button styling (#164)

src/components/Room/MediaButton.tsx

@@ -0,0 +1,49 @@
+import Fab, { FabProps } from '@mui/material/Fab'
+import { forwardRef } from 'react'
+
+interface MediaButtonProps extends Partial<FabProps> {
+  isActive: boolean
+}
+
+export const MediaButton = forwardRef<HTMLButtonElement, MediaButtonProps>(
+  ({ isActive, ...props }: MediaButtonProps, ref) => {
+    return (
+      <Fab
+        {...props}
+        ref={ref}
+        sx={theme =>
+          theme.palette.mode === 'dark'
+            ? isActive
+              ? {
+                  color: theme.palette.common.white,
+                  background: theme.palette.success.main,
+                  '&:hover': {
+                    background: theme.palette.success.dark,
+                  },
+                }
+              : {
+                  background: theme.palette.grey[500],
+                  '&:hover': {
+                    background: theme.palette.grey[600],
+                  },
+                }
+            : isActive
+            ? {
+                color: theme.palette.common.white,
+                background: theme.palette.success.main,
+                '&:hover': {
+                  background: theme.palette.success.dark,
+                },
+              }
+            : {
+                color: theme.palette.common.black,
+                background: theme.palette.grey[400],
+                '&:hover': {
+                  background: theme.palette.grey[500],
+                },
+              }
+        }
+      />
+    )
+  }
+)

src/components/Room/RoomAudioControls.tsx

@@ -7,12 +7,12 @@ import ListItem from '@mui/material/ListItem'
 import ListItemText from '@mui/material/ListItemText'
 import Menu from '@mui/material/Menu'
 import MenuItem from '@mui/material/MenuItem'
-import Fab from '@mui/material/Fab'
 import Tooltip from '@mui/material/Tooltip'
 
 import { PeerRoom } from 'services/PeerRoom/PeerRoom'
 
 import { useRoomAudio } from './useRoomAudio'
+import { MediaButton } from './MediaButton'
 
 export interface RoomAudioControlsProps {
   peerRoom: PeerRoom
@@ -70,13 +70,13 @@ export function RoomAudioControls({ peerRoom }: RoomAudioControlsProps) {
             : 'Turn on microphone and speak to room'
         }
       >
-        <Fab
+        <MediaButton
-          color={isSpeakingToRoom ? 'error' : 'success'}
+          isActive={isSpeakingToRoom}
           aria-label="call"
           onClick={handleVoiceCallClick}
         >
-          {isSpeakingToRoom ? <VoiceOverOff /> : <RecordVoiceOver />}
+          {isSpeakingToRoom ? <RecordVoiceOver /> : <VoiceOverOff />}
-        </Fab>
+        </MediaButton>
       </Tooltip>
       {audioDevices.length > 0 && (
         <Box sx={{ mt: 1 }}>

src/components/Room/RoomFileUploadControls.tsx

@@ -1,8 +1,7 @@
 import { ChangeEventHandler, useContext, useRef } from 'react'
 import Box from '@mui/material/Box'
-import UploadFile from '@mui/icons-material/UploadFile'
+import Folder from '@mui/icons-material/Folder'
-import Cancel from '@mui/icons-material/Cancel'
+import FolderOff from '@mui/icons-material/FolderOff'
-import Fab from '@mui/material/Fab'
 import Tooltip from '@mui/material/Tooltip'
 import CircularProgress from '@mui/material/CircularProgress'
 
@@ -10,6 +9,7 @@ import { RoomContext } from 'contexts/RoomContext'
 import { PeerRoom } from 'services/PeerRoom/PeerRoom'
 
 import { useRoomFileShare } from './useRoomFileShare'
+import { MediaButton } from './MediaButton'
 
 export interface RoomFileUploadControlsProps {
   onInlineMediaUpload: (files: File[]) => void
@@ -61,7 +61,7 @@ export function RoomFileUploadControls({
 
   const disableFileUpload = !isFileSharingEnabled || isMessageSending
 
-  const buttonIcon = isSharingFile ? <Cancel /> : <UploadFile />
+  const buttonIcon = isSharingFile ? <Folder /> : <FolderOff />
 
   return (
     <Box
@@ -88,8 +88,8 @@ export function RoomFileUploadControls({
             : 'Share files with the room'
         }
       >
-        <Fab
+        <MediaButton
-          color={isSharingFile ? 'error' : 'success'}
+          isActive={isSharingFile}
           aria-label="share screen"
           onClick={handleToggleScreenShareButtonClick}
           disabled={disableFileUpload}
@@ -99,7 +99,7 @@ export function RoomFileUploadControls({
           ) : (
             <CircularProgress variant="indeterminate" color="inherit" />
           )}
-        </Fab>
+        </MediaButton>
       </Tooltip>
     </Box>
   )

src/components/Room/RoomScreenShareControls.tsx

@@ -1,12 +1,12 @@
 import Box from '@mui/material/Box'
 import ScreenShare from '@mui/icons-material/ScreenShare'
 import StopScreenShare from '@mui/icons-material/StopScreenShare'
-import Fab from '@mui/material/Fab'
 import Tooltip from '@mui/material/Tooltip'
 
 import { PeerRoom } from 'services/PeerRoom/PeerRoom'
 
 import { useRoomScreenShare } from './useRoomScreenShare'
+import { MediaButton } from './MediaButton'
 
 export interface RoomFileUploadControlsProps {
   peerRoom: PeerRoom
@@ -47,13 +47,13 @@ export function RoomScreenShareControls({
           isSharingScreen ? 'Stop sharing screen' : 'Share screen with room'
         }
       >
-        <Fab
+        <MediaButton
-          color={isSharingScreen ? 'error' : 'success'}
+          isActive={isSharingScreen}
           aria-label="share screen"
           onClick={handleToggleScreenShareButtonClick}
         >
-          {isSharingScreen ? <StopScreenShare /> : <ScreenShare />}
+          {isSharingScreen ? <ScreenShare /> : <StopScreenShare />}
-        </Fab>
+        </MediaButton>
       </Tooltip>
     </Box>
   )

src/components/Room/RoomShowMessagesControls.tsx

@@ -1,12 +1,13 @@
 import { useContext } from 'react'
 
-import Fab from '@mui/material/Fab'
 import Tooltip from '@mui/material/Tooltip'
 import { Comment, CommentsDisabled } from '@mui/icons-material'
 import { Badge, Box } from '@mui/material'
 
 import { RoomContext } from 'contexts/RoomContext'
 
+import { MediaButton } from './MediaButton'
+
 export function RoomShowMessagesControls() {
   const { isShowingMessages, setIsShowingMessages, unreadMessages } =
     useContext(RoomContext)
@@ -22,15 +23,15 @@ export function RoomShowMessagesControls() {
       }}
     >
       <Tooltip title={isShowingMessages ? 'Hide messages' : 'Show messages'}>
-        <Fab
+        <MediaButton
-          color={isShowingMessages ? 'error' : 'success'}
+          isActive={isShowingMessages}
           aria-label="show messages"
           onClick={() => setIsShowingMessages(!isShowingMessages)}
         >
           <Badge color="error" badgeContent={unreadMessages}>
-            {isShowingMessages ? <CommentsDisabled /> : <Comment />}
+            {isShowingMessages ? <Comment /> : <CommentsDisabled />}
           </Badge>
-        </Fab>
+        </MediaButton>
       </Tooltip>
     </Box>
   )

src/components/Room/RoomVideoControls.tsx

@@ -7,12 +7,12 @@ import ListItem from '@mui/material/ListItem'
 import ListItemText from '@mui/material/ListItemText'
 import Menu from '@mui/material/Menu'
 import MenuItem from '@mui/material/MenuItem'
-import Fab from '@mui/material/Fab'
 import Tooltip from '@mui/material/Tooltip'
 
 import { PeerRoom } from 'services/PeerRoom/PeerRoom'
 
 import { useRoomVideo } from './useRoomVideo'
+import { MediaButton } from './MediaButton'
 
 export interface RoomVideoControlsProps {
   peerRoom: PeerRoom
@@ -64,13 +64,13 @@ export function RoomVideoControls({ peerRoom }: RoomVideoControlsProps) {
       }}
     >
       <Tooltip title={isCameraEnabled ? 'Turn off camera' : 'Turn on camera'}>
-        <Fab
+        <MediaButton
-          color={isCameraEnabled ? 'error' : 'success'}
+          isActive={isCameraEnabled}
           aria-label="toggle camera"
           onClick={handleEnableCameraClick}
         >
-          {isCameraEnabled ? <VideocamOff /> : <Videocam />}
+          {isCameraEnabled ? <Videocam /> : <VideocamOff />}
-        </Fab>
+        </MediaButton>
       </Tooltip>
       {videoDevices.length > 0 && (
         <Box sx={{ mt: 1 }}>