Skip to content
Snippets Groups Projects
Commit c69ba596 authored by Joonas Seppä's avatar Joonas Seppä
Browse files

Added better favicons, made a better looking new message -field

parent 923212c4
No related branches found
No related tags found
No related merge requests found
Pipeline #61763 passed
messages-app-frontend/public/apple-touch-icon.png

7.11 KiB

messages-app-frontend/public/favicon-16x16.png

392 B

messages-app-frontend/public/favicon-32x32.png

719 B

messages-app-frontend/public/favicon.ico

15 KiB

...@@ -3,7 +3,9 @@ ...@@ -3,7 +3,9 @@
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<title>Messages Application</title> <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> </head>
<body> <body>
<noscript>You need to enable JavaScript to run this app.</noscript> <noscript>You need to enable JavaScript to run this app.</noscript>
......
...@@ -134,6 +134,7 @@ export class App extends React.Component{ ...@@ -134,6 +134,7 @@ export class App extends React.Component{
<Input <Input
value={this.state.editedMessage} value={this.state.editedMessage}
onChange={(e) => this.setState({editedMessage: e.target.value})} onChange={(e) => this.setState({editedMessage: e.target.value})}
//multiline={true}
/> />
<Button <Button
...@@ -179,11 +180,23 @@ export class App extends React.Component{ ...@@ -179,11 +180,23 @@ export class App extends React.Component{
{this.state.messages.map((p) => this.updatingMessage(p))} {this.state.messages.map((p) => this.updatingMessage(p))}
</Box> </Box>
<Box
sx={{
bgcolor: appColors.outsideBoxColor,
//color: "white",
marginX: 30,
padding: 1,
marginY: 3,
borderRadius: 5,
boxShadow: 20
}}
>
<NewMessage <NewMessage
inputValue={this.state.newMessage} inputValue={this.state.newMessage}
createMessage={this.createMessage} createMessage={this.createMessage}
onChangeValue={this.inputValueChanged} onChangeValue={this.inputValueChanged}
/> />
</Box>
</Container> </Container>
) )
} }
...@@ -204,11 +217,24 @@ export class App extends React.Component{ ...@@ -204,11 +217,24 @@ export class App extends React.Component{
)} )}
</Box> </Box>
<Box
sx={{
bgcolor: appColors.outsideBoxColor,
//color: "white",
marginX: 30,
padding: 1,
marginY: 3,
borderRadius: 5,
boxShadow: 20
}}
>
<NewMessage <NewMessage
inputValue={this.state.newMessage} inputValue={this.state.newMessage}
createMessage={this.createMessage} createMessage={this.createMessage}
onChangeValue={this.inputValueChanged} onChangeValue={this.inputValueChanged}
/> />
</Box>
</Container> </Container>
) )
......
import React from 'react'; 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'; import SendIcon from '@mui/icons-material/Send';
type IProps = { type IProps = {
inputValue: string, inputValue: string,
createMessage: Function, createMessage: Function,
onChangeValue: Function onChangeValue: Function
} }
const buttonMinWidth = 90;
export default class NewMessage extends React.Component<IProps>{ export default class NewMessage extends React.Component<IProps>{
render(){ render(){
return( return(
<Box sx={{textAlign: "center", paddingTop: 5}}> <Box sx={{textAlign: "center", paddingY: 3, display: "flex", flexDirection: "row"}}>
<Input <TextField
label="Tell me something interesting!"
multiline={true}
//fullWidth={true}
variant="outlined"
color="secondary"
//color="white"
value={this.props.inputValue} value={this.props.inputValue}
onChange={(p) => this.props.onChangeValue(p.target.value)} onChange={(p) => this.props.onChangeValue(p.target.value)}
sx={{width: "100%", marginLeft: 3, marginRight: 1}}
//type=""
/> />
<Button <Button
sx={{margin: 1.5}} color="secondary"
sx={{margin: 1.5, marginX: 3, minWidth: buttonMinWidth + "px"}}
variant="contained" variant="contained"
endIcon={<SendIcon />} endIcon={<SendIcon />}
onClick={() => this.props.createMessage()} onClick={() => this.props.createMessage()}
//type="submit"
//disabled={submitting}
> >
Send Send
</Button> </Button>
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment