diff --git a/messages-app-frontend/src/App.tsx b/messages-app-frontend/src/App.tsx index a9bb053ad1bbbfb0f6533d64e817646dc678b040..357fcf63fade254d97415a38877469e7be82e97a 100644 --- a/messages-app-frontend/src/App.tsx +++ b/messages-app-frontend/src/App.tsx @@ -48,12 +48,20 @@ const api = axios.create({ baseURL: `https://messages-app-backend.herokuapp.com/` }); +//justifyContent: "center" + const messageBox = { bgcolor: appColors.outsideBoxColor, - marginX: 10, - padding: 3, - display: "grid", - justifyContent: "center", + //marginX: 10, + marginX: 30, + //marginLeft: 20, + padding: 3, + //paddingY: 3, + //paddingX: 10, + //display: "grid", + display: "flex", + flexDirection: "column", + justifyContent: "left", boxShadow: 20, borderRadius: 5 } diff --git a/messages-app-frontend/src/Message.tsx b/messages-app-frontend/src/Message.tsx index 0d7beb4363a3d1cfae1946637120e4c6688a9085..6b98c18c969da30da9684a15cf516fda32e97af0 100644 --- a/messages-app-frontend/src/Message.tsx +++ b/messages-app-frontend/src/Message.tsx @@ -15,7 +15,9 @@ type IProps = { export default class Message extends React.Component<IProps>{ formatTime = (date: Date) => { + let today = new Date(); + let weekdays = ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday']; if(date.getDay() === today.getDay()){ return "today at " + date.toLocaleTimeString(); @@ -23,8 +25,8 @@ export default class Message extends React.Component<IProps>{ else if(date.getDay() === today.getDay()-1){ return "yesterday at " + date.toLocaleTimeString(); } - else{ - return date.toLocaleString(); + else{ + return "on " + weekdays[date.getDay()] + " " + date.toLocaleDateString() + " at " + date.toLocaleTimeString(); } } diff --git a/messages-app-frontend/src/Welcome.tsx b/messages-app-frontend/src/Welcome.tsx index 1c9515f077ec0319f809ef173e16ddccbf086bcd..818f0b46b76fb64f6cd0c2df4d6be51c8008e4a2 100644 --- a/messages-app-frontend/src/Welcome.tsx +++ b/messages-app-frontend/src/Welcome.tsx @@ -9,15 +9,15 @@ export default class Welcome extends React.Component{ sx={{ bgcolor: appColors.outsideBoxColor, //color: "white", - marginX: 10, + marginX: 30, padding: 1, - marginY: 2, + marginY: 3, borderRadius: 5, boxShadow: 20 }} > <Typography variant="h3" sx={{textAlign: "center", margin: 3, color: appColors.singleMessageBoxColor}}> - Welcome to my Messaging Application! + Messaging Application </Typography> </Box> )