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