set message bar styles
Change-Id: Iecb869964b83a7582228f2577502392d1fe9943d
diff --git a/client/src/components/ConversationView.js b/client/src/components/ConversationView.js
index 075e96a..5cf0e87 100644
--- a/client/src/components/ConversationView.js
+++ b/client/src/components/ConversationView.js
@@ -116,7 +116,7 @@
<Typography className="subtitle" variant="subtitle1" >{state.conversation.getId()}</Typography>
</Box>
</Stack>
- <Stack flexGrow={1} overflow="auto">
+ <Stack flexGrow={1} overflow="auto" direction="column-reverse">
<MessageList
conversationId={state.conversation.getId()}
loading={loadingMessages}
diff --git a/client/src/components/SendMessageForm.js b/client/src/components/SendMessageForm.js
index 8377575..f1cb2d6 100644
--- a/client/src/components/SendMessageForm.js
+++ b/client/src/components/SendMessageForm.js
@@ -1,39 +1,11 @@
import React from 'react'
-import makeStyles from '@mui/styles/makeStyles';
-import { Box, IconButton, InputBase, Paper, Popper } from '@mui/material'
-import { Send, EmojiEmotionsRounded } from '@mui/icons-material'
-import EmojiPicker from 'emoji-picker-react'
-
-const useStyles = makeStyles((theme) => ({
- root: {
- marginLeft: 16,
- marginRight: 16,
- padding: '2px 4px',
- display: 'flex',
- alignItems: 'center',
- borderRadius: 8
- },
- input: {
- marginLeft: theme.spacing(1),
- flex: 1,
- },
- iconButton: {
- padding: 10,
- },
- divider: {
- height: 28,
- margin: 4,
- },
-}))
+import { Divider, InputBase } from '@mui/material'
+import { RecordVideoMessageButton, RecordVoiceMessageButton, SelectEmojiButton, SendMessageButton, UploadFileButton } from './buttons';
+import { Stack } from '@mui/system';
export default function SendMessageForm(props) {
- const classes = useStyles()
- const [anchorEl, setAnchorEl] = React.useState(null)
const [currentMessage, setCurrentMessage] = React.useState("")
- const handleOpenEmojiPicker = e => setAnchorEl(anchorEl ? null : e.currentTarget)
- const handleClose = () => setAnchorEl(null)
-
const handleSubmit = e => {
e.preventDefault()
if (currentMessage) {
@@ -42,55 +14,56 @@
}
}
const handleInputChange = (event) => setCurrentMessage(event.target.value)
- const onEmojiClick = (e, emojiObject) => {
- setCurrentMessage(currentMessage + emojiObject.emoji)
- handleClose()
- }
- const open = Boolean(anchorEl)
- const id = open ? 'simple-popover' : undefined
+
+ const onEmojiSelected = React.useCallback(
+ (emoji) => setCurrentMessage((currentMessage) => currentMessage + emoji),
+ [setCurrentMessage],
+ )
return (
- <Box >
- <Paper component="form"
+ <Stack
+ padding="30px 16px 0px 16px"
+ >
+ <Divider
+ sx={{
+ bordeTop: "1px solid #E5E5E5",
+ }}
+ />
+ <Stack
+ component="form"
onSubmit={handleSubmit}
- className={classes.root}>
- <IconButton
- aria-describedby={id}
- variant="contained"
- color="primary"
- onClick={handleOpenEmojiPicker}
- size="large">
- <EmojiEmotionsRounded />
- </IconButton>
- <Popper
- id={id}
- open={open}
- anchorEl={anchorEl}
- onClose={handleClose}
- >
- <EmojiPicker.default
- onEmojiClick={onEmojiClick}
- disableAutoFocus={true}
- disableSkinTonePicker={true}
- native
- />
- </Popper>
+ direction="row"
+ alignItems="center"
+ flexGrow={1}
+ spacing="20px"
+ padding="16px 0px"
+ >
+ <UploadFileButton/>
+ <RecordVoiceMessageButton/>
+ <RecordVideoMessageButton/>
- <InputBase
- className={classes.input}
- placeholder="Write something nice"
- height="35"
- value={currentMessage}
- onChange={handleInputChange}
+ <Stack
+ flexGrow={1}
+ >
+ <InputBase
+ placeholder="Write something nice"
+ value={currentMessage}
+ onChange={handleInputChange}
+ sx={{
+ fontSize: "15px",
+ color: "black",
+ "& ::placeholder": {
+ color: "#7E7E7E",
+ opacity: 1,
+ },
+ }}
+ />
+ </Stack>
+ <SelectEmojiButton
+ onEmojiSelected={onEmojiSelected}
/>
- <IconButton
- type="submit"
- className={classes.iconButton}
- aria-label="search"
- size="large">
- <Send />
- </IconButton>
- </Paper>
- </Box>
+ { currentMessage && <SendMessageButton type="submit"/> }
+ </Stack>
+ </Stack>
);
}
diff --git a/client/src/components/avatar.js b/client/src/components/avatar.js
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/client/src/components/avatar.js
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>
+ )
+ }
diff --git a/client/src/components/svgIcons.js b/client/src/components/svgIcons.js
index bd14ced..5f5dc35 100644
--- a/client/src/components/svgIcons.js
+++ b/client/src/components/svgIcons.js
@@ -20,6 +20,14 @@
)
}
+export const Arrow2Icon = (props) => {
+ return (
+ <SvgIcon {...props} viewBox="0 0 21.776 20.23">
+ <path style={{fill:"none", stroke:"#7e7e7e", strokeMiterlimit:10, strokeWidth:"1.75px"}} d="M.219 18.221a.771.771 0 0 1-.143-.87l3.942-8.124L.076 1.1A.77.77 0 0 1 1.085.068l18.461 8.461a.765.765 0 0 1 0 1.394L1.085 18.385a.771.771 0 0 1-.867-.164Z" transform="translate(.903 .901)"/>
+ </SvgIcon>
+ )
+}
+
export const CameraIcon = (props) => {
return (
<SvgIcon {...props} viewBox="2 3 20 19">
@@ -28,6 +36,15 @@
)
}
+export const CameraInBubbleIcon = (props) => {
+ return (
+ <SvgIcon {...props} viewBox="0 0 25 25">
+ <path d="M25 25H12.5A12.379 12.379 0 0 1 0 12.5 12.379 12.379 0 0 1 12.5 0 12.379 12.379 0 0 1 25 12.5ZM12.5 1.75a11 11 0 0 0-7.625 3.125 10.865 10.865 0 0 0 0 15.25A10.781 10.781 0 0 0 12.5 23.25h10.75V12.5a11 11 0 0 0-3.125-7.625A11 11 0 0 0 12.5 1.75Z"/>
+ <path d="M15.125 18.375H6.75a1.329 1.329 0 0 1-1.5-1.25v-8a1.465 1.465 0 0 1 1.375-1.25H15a1.286 1.286 0 0 1 1.375 1.25v.75l1.375-.75A1.146 1.146 0 0 1 19.125 9a1.034 1.034 0 0 1 .625 1v6.25a1.248 1.248 0 0 1-.625 1.125 1.479 1.479 0 0 1-1.25-.125L16.5 16.5v.75a1.276 1.276 0 0 1-1.375 1.125Zm-8.25-1.625h8v-1.625a1.08 1.08 0 0 1 .375-.75.8.8 0 0 1 .75 0l2 1.125v-4.75l-1.875 1.125a.8.8 0 0 1-.75 0 .685.685 0 0 1-.5-.75V9.5h-8Zm11.875-.875Z"/>
+ </SvgIcon>
+ )
+}
+
export const CancelIcon = (props) => {
return (
<SvgIcon {...props} viewBox="2 2 20 20">
@@ -62,6 +79,15 @@
)
}
+export const EmojiIcon = (props) => {
+ return (
+ <SvgIcon {...props} viewBox="0 0 25 25">
+ <path d="M12.5 0A12.5 12.5 0 1 0 25 12.5 12.537 12.537 0 0 0 12.5 0Zm0 23.25A10.75 10.75 0 1 1 23.25 12.5 10.749 10.749 0 0 1 12.5 23.25Z"/>
+ <path d="M18.25 14a.688.688 0 0 0-.625.25 9.558 9.558 0 0 1-5.125 1.625 7.867 7.867 0 0 1-5.125-1.625C7.25 14 6.875 14 6.75 14a1.34 1.34 0 0 0-.75.25c-.125.125-.125.5-.125.75a.853.853 0 0 0 .375.625A10.559 10.559 0 0 0 12.5 17.5a11.419 11.419 0 0 0 6.25-1.875 1.726 1.726 0 0 0 .375-.5V15a.937.937 0 0 0-.125-.625ZM7.5 10.75a1.049 1.049 0 0 0 1.125-1.125A1.049 1.049 0 0 0 7.5 8.5a1.049 1.049 0 0 0-1.125 1.125A1.049 1.049 0 0 0 7.5 10.75ZM17.5 10.75a1.049 1.049 0 0 0 1.125-1.125A1.116 1.116 0 0 0 17.5 8.5a1.208 1.208 0 0 0-1.125 1.125.994.994 0 0 0 1.125 1.125Z"/>
+ </SvgIcon>
+ )
+}
+
export const EyeIcon = (props) => {
return (
<SvgIcon {...props} viewBox="0 0 15.931 10.568">
@@ -101,6 +127,33 @@
)
}
+export const MicroInBubbleIcon = (props) => {
+ return (
+ <SvgIcon {...props} viewBox="0 0 25 25">
+ <g transform="translate(-2 -2)">
+ <g transform="translate(2 2)">
+ <path d="M23.375,5.625A12.372,12.372,0,0,0,14.5,2,12.379,12.379,0,0,0,2,14.5,12.379,12.379,0,0,0,14.5,27H27V14.5A12.372,12.372,0,0,0,23.375,5.625ZM25.25,25.25H14.5a11,11,0,0,1-7.625-3.125A10.781,10.781,0,0,1,3.75,14.5,11,11,0,0,1,6.875,6.875a10.865,10.865,0,0,1,15.25,0A10.781,10.781,0,0,1,25.25,14.5Z" transform="translate(-2 -2)"/>
+ <path d="M16.6,10.35a.649.649,0,0,0-.25.5V12.6a3.125,3.125,0,0,1-6.25,0V10.85a.948.948,0,0,0-.25-.5.649.649,0,0,0-.5-.25h0a.649.649,0,0,0-.5.25.649.649,0,0,0-.25.5V12.6a4.563,4.563,0,0,0,3.875,4.5v.625H11.35a.625.625,0,0,0,0,1.25h3.5a.625.625,0,0,0,0-1.25H13.725V17.1A4.68,4.68,0,0,0,17.6,12.6V10.85a.948.948,0,0,0-.25-.5A.564.564,0,0,0,16.6,10.35Zm-7.25.125Z" transform="translate(-0.35 0.025)"/>
+ </g>
+ <g transform="translate(12.625 8.5)">
+ <path d="M12.75,15.575a2.241,2.241,0,0,1-2.25-2.25V9.45a2.25,2.25,0,0,1,4.5,0v4A2.138,2.138,0,0,1,12.75,15.575Zm0-6.875a.72.72,0,0,0-.75.75v4a.75.75,0,1,0,1.5,0v-4A.807.807,0,0,0,12.75,8.7Z" transform="translate(-10.5 -7.2)"/>
+ </g>
+ </g>
+ </SvgIcon>
+ )
+}
+
+export const PaperClipIcon = (props) => {
+ return(
+ <SvgIcon {...props} viewBox="0 0 12.208 25.75">
+ <path
+ style={{ fill:"#7e7e7e", stroke:"#7e7e7e", strokeMiterlimit:10, strokeWidth:".75px" }}
+ d="M5.729 25A5.736 5.736 0 0 1 0 19.271V4.167a4.167 4.167 0 0 1 8.333 0v13.541a2.6 2.6 0 0 1-5.208 0V5.7a.521.521 0 1 1 1.042 0v12.008a1.563 1.563 0 0 0 3.125 0V4.167a3.125 3.125 0 0 0-6.25 0v15.1a4.687 4.687 0 0 0 9.375 0V5.053a.521.521 0 0 1 1.042 0v14.218A5.736 5.736 0 0 1 5.729 25Z"
+ />
+ </SvgIcon>
+ )
+}
+
export const PenIcon = (props) => {
return (
<SvgIcon {...props} viewBox="0 0 14.863 14.863">
diff --git a/client/src/themes/ThemeDemonstrator.js b/client/src/themes/ThemeDemonstrator.js
index 7f4e0f3..968a2a5 100644
--- a/client/src/themes/ThemeDemonstrator.js
+++ b/client/src/themes/ThemeDemonstrator.js
@@ -1,5 +1,5 @@
import { Button, Stack, Switch, ThemeProvider, Typography } from "@mui/material"
-import { CancelButton, EditButton, UploadButton, TakePictureButton, InfoButton, TipButton, BackButton, CloseButton } from "../components/buttons"
+import { CancelPictureButton, EditPictureButton, UploadPictureButton, TakePictureButton, InfoButton, TipButton, BackButton, CloseButton } from "../components/buttons"
import { NickNameInput, PasswordInput, RegularInput, UsernameInput } from "../components/inputs"
import defaultTheme from './default'
@@ -24,9 +24,9 @@
<Button variant="contained" size="small">Bouton liste préférences</Button>
</Stack>
<Stack direction="row" spacing="5px">
- <CancelButton/>
- <EditButton/>
- <UploadButton/>
+ <CancelPictureButton/>
+ <EditPictureButton/>
+ <UploadPictureButton/>
<TakePictureButton/>
</Stack>
<Stack direction="row" spacing="5px">