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

@@ -48,12 +48,20 @@ const api = axios.create({
   baseURL: `https://messages-app-backend.herokuapp.com/`
 });
 
+//justifyContent: "center" 
+
 const messageBox = {
   bgcolor: appColors.outsideBoxColor, 
-  marginX: 10, 
+  //marginX: 10, 
+  marginX: 30,
+  //marginLeft: 20,
   padding: 3,
-  display: "grid", 
-  justifyContent: "center", 
+  //paddingY: 3, 
+  //paddingX: 10,
+  //display: "grid",
+  display: "flex",
+  flexDirection: "column",
+  justifyContent: "left", 
   boxShadow: 20, 
   borderRadius: 5
 }

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();
@@ -24,7 +26,7 @@ export default class Message extends React.Component<IProps>{
             return "yesterday at " + date.toLocaleTimeString();
         }
         else{
-            return date.toLocaleString();
+            return "on " + weekdays[date.getDay()] + " " + date.toLocaleDateString() + " at " + date.toLocaleTimeString(); 
         }
     }
 

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>
         )