From 923212c4b22ed540a0cd8a8b64646e1507dc2ee0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Joonas=20Sepp=C3=A4?= <joasep@utu.fi> Date: Tue, 14 Mar 2023 16:53:04 +0200 Subject: [PATCH] Modified the layout: Text to left side of the box and larger margins to the sides of the box --- messages-app-frontend/src/App.tsx | 16 ++++++++++++---- messages-app-frontend/src/Message.tsx | 6 ++++-- messages-app-frontend/src/Welcome.tsx | 6 +++--- 3 files changed, 19 insertions(+), 9 deletions(-) diff --git a/messages-app-frontend/src/App.tsx b/messages-app-frontend/src/App.tsx index a9bb053..357fcf6 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 0d7beb4..6b98c18 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 1c9515f..818f0b4 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> ) -- GitLab