diff --git a/messages-app-frontend/public/apple-touch-icon.png b/messages-app-frontend/public/apple-touch-icon.png new file mode 100644 index 0000000000000000000000000000000000000000..4b30e8071270ac254ca7ab54f296dfdfaf6732ba Binary files /dev/null and b/messages-app-frontend/public/apple-touch-icon.png differ diff --git a/messages-app-frontend/public/favicon-16x16.png b/messages-app-frontend/public/favicon-16x16.png new file mode 100644 index 0000000000000000000000000000000000000000..15bdaef400811d4c95f0807e80598f91a6d78781 Binary files /dev/null and b/messages-app-frontend/public/favicon-16x16.png differ diff --git a/messages-app-frontend/public/favicon-32x32.png b/messages-app-frontend/public/favicon-32x32.png new file mode 100644 index 0000000000000000000000000000000000000000..3518af3ca65715dfdbc381d6b2bdc9791c19be44 Binary files /dev/null and b/messages-app-frontend/public/favicon-32x32.png differ diff --git a/messages-app-frontend/public/favicon.ico b/messages-app-frontend/public/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..f72be261832dfcc0ce393116647288074759f7d5 Binary files /dev/null and b/messages-app-frontend/public/favicon.ico differ diff --git a/messages-app-frontend/public/index.html b/messages-app-frontend/public/index.html index 699c64ffecee021e087503a3540d6d5d36fbf16d..aa7ea84ac5fff49329001867cefd2308e8fe8ee2 100644 --- a/messages-app-frontend/public/index.html +++ b/messages-app-frontend/public/index.html @@ -3,7 +3,9 @@ <head> <meta charset="utf-8" /> <title>Messages Application</title> - <link rel="icon" type="image/png" href="https://e7.pngegg.com/pngimages/198/585/png-clipart-chatbox-icon-computer-icons-message-sms-icon-message-miscellaneous-grass.png" /> + <link rel="apple-touch-icon" sizes="180x180" href="./apple-touch-icon.png"> + <link rel="icon" type="image/png" sizes="32x32" href="./favicon-32x32.png"> + <link rel="icon" type="image/png" sizes="16x16" href="./favicon-16x16.png"> </head> <body> <noscript>You need to enable JavaScript to run this app.</noscript> diff --git a/messages-app-frontend/src/App.tsx b/messages-app-frontend/src/App.tsx index 357fcf63fade254d97415a38877469e7be82e97a..aa5fb7c7f46ddde5ebecd41b79e5382911cd2bba 100644 --- a/messages-app-frontend/src/App.tsx +++ b/messages-app-frontend/src/App.tsx @@ -134,6 +134,7 @@ export class App extends React.Component{ <Input value={this.state.editedMessage} onChange={(e) => this.setState({editedMessage: e.target.value})} + //multiline={true} /> <Button @@ -179,11 +180,23 @@ export class App extends React.Component{ {this.state.messages.map((p) => this.updatingMessage(p))} </Box> - <NewMessage - inputValue={this.state.newMessage} - createMessage={this.createMessage} - onChangeValue={this.inputValueChanged} - /> + <Box + sx={{ + bgcolor: appColors.outsideBoxColor, + //color: "white", + marginX: 30, + padding: 1, + marginY: 3, + borderRadius: 5, + boxShadow: 20 + }} + > + <NewMessage + inputValue={this.state.newMessage} + createMessage={this.createMessage} + onChangeValue={this.inputValueChanged} + /> + </Box> </Container> ) } @@ -204,11 +217,24 @@ export class App extends React.Component{ )} </Box> - <NewMessage - inputValue={this.state.newMessage} - createMessage={this.createMessage} - onChangeValue={this.inputValueChanged} - /> + <Box + sx={{ + bgcolor: appColors.outsideBoxColor, + //color: "white", + marginX: 30, + padding: 1, + marginY: 3, + borderRadius: 5, + boxShadow: 20 + }} + > + <NewMessage + inputValue={this.state.newMessage} + createMessage={this.createMessage} + onChangeValue={this.inputValueChanged} + /> + + </Box> </Container> ) diff --git a/messages-app-frontend/src/NewMessage.tsx b/messages-app-frontend/src/NewMessage.tsx index d235a0efa642f28c70c7de0168f1fb07a9680b4f..0021465030ed8faec083892e0b31cc847d2d71cb 100644 --- a/messages-app-frontend/src/NewMessage.tsx +++ b/messages-app-frontend/src/NewMessage.tsx @@ -1,32 +1,47 @@ import React from 'react'; -import {Button, Box, Input} from '@mui/material'; +import {Button, Box, TextField} from '@mui/material'; import SendIcon from '@mui/icons-material/Send'; + type IProps = { inputValue: string, createMessage: Function, onChangeValue: Function } +const buttonMinWidth = 90; + export default class NewMessage extends React.Component<IProps>{ + render(){ return( - <Box sx={{textAlign: "center", paddingTop: 5}}> - - <Input - value={this.props.inputValue} - onChange={(p) => this.props.onChangeValue(p.target.value)} - /> + <Box sx={{textAlign: "center", paddingY: 3, display: "flex", flexDirection: "row"}}> + + <TextField + label="Tell me something interesting!" + multiline={true} + //fullWidth={true} + variant="outlined" + color="secondary" + //color="white" + value={this.props.inputValue} + onChange={(p) => this.props.onChangeValue(p.target.value)} + sx={{width: "100%", marginLeft: 3, marginRight: 1}} + //type="" + /> - <Button - sx={{margin: 1.5}} - variant="contained" - endIcon={<SendIcon />} - onClick={() => this.props.createMessage()} - > - Send - </Button> + <Button + color="secondary" + sx={{margin: 1.5, marginX: 3, minWidth: buttonMinWidth + "px"}} + variant="contained" + endIcon={<SendIcon />} + onClick={() => this.props.createMessage()} + //type="submit" + //disabled={submitting} + > + Send + </Button> </Box> )