set message bar styles
Change-Id: Iecb869964b83a7582228f2577502392d1fe9943d
diff --git a/client/src/components/buttons.js b/client/src/components/buttons.js
index bf4700f..771033b 100644
--- a/client/src/components/buttons.js
+++ b/client/src/components/buttons.js
@@ -1,7 +1,10 @@
import { QuestionMark } from "@mui/icons-material";
-import { IconButton } from "@mui/material";
+import { Box, IconButton, Popper } from "@mui/material";
+import { blue } from "@mui/material/colors";
import { styled } from "@mui/styles";
-import { ArrowIcon, CameraIcon, CancelIcon, CrossedEyeIcon, CrossIcon, EyeIcon, FolderIcon, InfoIcon, PenIcon } from "./svgIcons";
+import EmojiPicker from "emoji-picker-react";
+import React from "react";
+import { Arrow2Icon, ArrowIcon, CameraIcon, CameraInBubbleIcon, CancelIcon, CrossedEyeIcon, CrossIcon, EmojiIcon, EyeIcon, FolderIcon, InfoIcon, MicroInBubbleIcon, PaperClipIcon, PenIcon } from "./svgIcons";
const RoundButton = styled(
({Icon, ...props}) => (
@@ -34,7 +37,7 @@
}
}));
-export const CancelButton = (props) => {
+export const CancelPictureButton = (props) => {
return (
<RoundButton {...props}
aria-label="remove picture"
@@ -44,7 +47,7 @@
)
}
-export const EditButton = (props) => {
+export const EditPictureButton = (props) => {
return (
<RoundButton {...props}
aria-label="edit picture"
@@ -54,7 +57,7 @@
)
}
-export const UploadButton = (props) => {
+export const UploadPictureButton = (props) => {
return (
<RoundButton {...props}
aria-label="upload picture"
@@ -87,7 +90,7 @@
export const TipButton = (props) => {
return (
<RoundButton {...props}
- aria-label="informations"
+ aria-label="tip"
Icon={QuestionMark}
size="medium"
/>
@@ -97,7 +100,11 @@
export const BackButton = styled(
(props) => {
return (
- <IconButton {...props} disableRipple={true}>
+ <IconButton
+ {...props}
+ disableRipple={true}
+ aria-label="back"
+ >
<ArrowIcon fontSize="inherit"/>
</IconButton>
)
@@ -116,7 +123,11 @@
export const CloseButton = styled(
(props) => {
return (
- <IconButton {...props} disableRipple={true}>
+ <IconButton
+ {...props}
+ disableRipple={true}
+ aria-label="close"
+ >
<CrossIcon fontSize="inherit"/>
</IconButton>
)
@@ -150,3 +161,105 @@
background: theme.palette.primary.light,
},
}))
+
+const SquareButton = styled(
+ ({Icon, ...props}) => (
+ <IconButton {...props} disableRipple={true}>
+ <Icon fontSize="inherit"/>
+ </IconButton>
+ )
+)(({theme}) => ({
+ color: "#7E7E7E",
+ fontSize: "25px",
+ height: "36px",
+ width: "36px",
+ borderRadius: "5px",
+ "&:hover": {
+ background: "#E5E5E5",
+ },
+}));
+
+export const RecordVideoMessageButton = (props) => {
+ return (
+ <SquareButton {...props}
+ aria-label="record video message"
+ Icon={CameraInBubbleIcon}
+ />
+ )
+}
+
+export const RecordVoiceMessageButton = (props) => {
+ return (
+ <SquareButton {...props}
+ aria-label="record voice message"
+ Icon={MicroInBubbleIcon}
+ />
+ )
+}
+
+export const UploadFileButton = (props) => {
+ return (
+ <SquareButton {...props}
+ aria-label="upload file"
+ Icon={PaperClipIcon}
+ />
+ )
+}
+
+export const SendMessageButton = (props) => {
+ return (
+ <SquareButton {...props}
+ aria-label="send message"
+ Icon={Arrow2Icon}
+ />
+ )
+}
+
+export const SelectEmojiButton = (props) => {
+ const [anchorEl, setAnchorEl] = React.useState(null)
+
+ const handleOpenEmojiPicker = React.useCallback(
+ e => setAnchorEl(anchorEl ? null : e.currentTarget),
+ [anchorEl],
+ )
+
+ const handleClose = React.useCallback(
+ () => setAnchorEl(null),
+ [setAnchorEl],
+ )
+
+ const onEmojiClick = React.useCallback(
+ (e, emojiObject) => {
+ props.onEmojiSelected(emojiObject.emoji)
+ handleClose()
+ },
+ [handleClose, props.onEmojiSelected],
+ )
+
+ const open = Boolean(anchorEl)
+ const id = open ? 'simple-popover' : undefined
+
+ return (
+ <Box>
+ <SquareButton
+ aria-describedby={id}
+ aria-label="select emoji"
+ Icon={EmojiIcon}
+ onClick={handleOpenEmojiPicker}
+ />
+ <Popper
+ id={id}
+ open={open}
+ anchorEl={anchorEl}
+ onClose={handleClose}
+ >
+ <EmojiPicker.default
+ onEmojiClick={onEmojiClick}
+ disableAutoFocus={true}
+ disableSkinTonePicker={true}
+ native
+ />
+ </Popper>
+ </Box>
+ )
+ }