From 63de5e360dca8dc7cfbecf22a401c281c0526f97 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?L=C3=A9o?= <leopold.chappuis@savoirfairelinux.com> Date: Thu, 6 Feb 2025 13:13:03 -0500 Subject: [PATCH] send-message-form: update UI to align with directives Change-Id: I5a45cd41b4d3d02d4029acb1b9be7a1a3af2525b --- client/src/components/SendMessageForm.tsx | 14 +++++++++----- 1 file changed, 9 insertions(+), 5 deletions(-) diff --git a/client/src/components/SendMessageForm.tsx b/client/src/components/SendMessageForm.tsx index f5b5a8f1..05dc3aee 100644 --- a/client/src/components/SendMessageForm.tsx +++ b/client/src/components/SendMessageForm.tsx @@ -15,6 +15,7 @@ * License along with this program. If not, see * <https://www.gnu.org/licenses/>. */ +import DeleteIcon from '@mui/icons-material/Delete' import { Box, Card, CardContent, TextareaAutosize, useTheme } from '@mui/material' import { Stack, useMediaQuery } from '@mui/system' import { WebSocketMessageType } from 'jami-web-common' @@ -35,7 +36,6 @@ import { RecordVoiceMessageButton, SelectEmojiButton, SendMessageButton, - SquareCancelPictureButton, UploadFileButton, } from './Button' @@ -431,14 +431,14 @@ export default function SendMessageForm({ openFilePicker }: SendMessageFormProps onClick={voiceRecordingStatusChange} disabled={editMessage || isRecordingVoice ? true : false} /> - <UploadFileButton + <RecordVideoMessageButton sx={isReduced ? mobileOptionStyles : {}} disabled={editMessage || isRecordingVoice ? true : false} - onClick={openFilePicker} /> - <RecordVideoMessageButton + <UploadFileButton sx={isReduced ? mobileOptionStyles : {}} disabled={editMessage || isRecordingVoice ? true : false} + onClick={openFilePicker} /> </Box> {isRecordingVoice ? ( @@ -490,11 +490,15 @@ export default function SendMessageForm({ openFilePicker }: SendMessageFormProps )} <Box sx={{ display: 'flex', alignItems: 'center', alignContent: 'center' }}> {isRecordingVoice ? ( - <SquareCancelPictureButton onClick={voiceRecordingStatusChange} /> + <DeleteIcon + onClick={voiceRecordingStatusChange} + style={{ color: 'red', width: '30px', height: '30px', cursor: 'pointer' }} + /> ) : ( <SelectEmojiButton onEmojiSelected={onEmojiSelected} /> )} <SendMessageButton + sx={{ ml: '4px' }} disabled={!(currentMessage || fileHandlers.length > 0) && !isRecordingVoice} onClick={isRecordingVoice ? handleVoiceRecording : () => {}} type={isRecordingVoice ? undefined : 'submit'} -- GitLab