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