Styling hacker greentext formatting

src/App.css

@@ -1,38 +1,8 @@
+body {
+  background-color: black;
+  color: #00FF33;
+}
 .App {
-  text-align: center;
+  margin: 3%;
-}
-
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-.App-header {
-  background-color: #282c34;
   min-height: 100vh;
-  display: flex;
+}
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}

src/App.tsx

@@ -1,5 +1,6 @@
 import React, { useState } from "react";
 import ChatWrapper from "./Chat/Chat";
+import "./App.css";
 const App = (): React.ReactElement => {
     const [username, setUsername] = useState<string>()
     if (!username) {

src/Chat/Chat.css

@@ -0,0 +1,14 @@
+#chat-inner {
+    height: 250px;
+    overflow-y: auto;
+    overflow-wrap: normal;
+}
+.entry-box {
+    position: absolute;
+    bottom: 0;
+    min-height: 20%;
+}
+.chat {
+    min-height: 80vh;
+    position: relative;
+}

src/Chat/Chat.tsx

@@ -1,8 +1,9 @@
 import React, { useEffect, useState } from "react";
-import { Message } from "./Message";
+import { MessageContainer } from "./MessageContainer";
-import { Client, Stomp } from "@stomp/stompjs";
+import { Client, Stomp, StompHeaders } from "@stomp/stompjs";
-import { MessageType } from "./types";
+import { Message, MessageType } from "./types";
 import { renderToStaticMarkup } from 'react-dom/server';
+import './Chat.css';
 // The last bit of magic sauce to make this work
 // EXPLANATION
 // 
@@ -31,8 +32,9 @@ const ChatWrapper = (
     stompClient.onConnect = (frame) => {
         stompClient.subscribe(endpoints.subscription, (message) => {
             console.log(`Collected new message: ${message.body}`);
-            const {fromUserId, toUserId, content, timeMillis} = JSON.parse(message.body) as MessageType
+            const messageBody = JSON.parse(message.body) as Message
-            const messageElement = <Message sender={fromUserId} text={content} />
+            if (messageBody.type === MessageType.MESSAGE) {return;}
+            const messageElement = <MessageContainer {...messageBody} />
             console.log(messageElement);
 
             // Temporary solution
@@ -70,8 +72,9 @@ const ChatWrapper = (
         // TODO Explore
         const entryElement: HTMLInputElement = document.getElementById("data-entry") as HTMLInputElement
         if (!entryElement.value) {alert("Message cannot be empty!"); return;}
-        const messageData: MessageType = 
+        const messageData: Message = 
         {
+            type: MessageType.HELLO,
             fromUserId: user,
             toUserId: "everyone",
             content: entryElement.value,
@@ -80,7 +83,10 @@ const ChatWrapper = (
         console.log(`STOMP connection status: ${stompClient.connected}`); 
         stompClient.publish({
             body: JSON.stringify(messageData),
-            destination: endpoints.destination
+            destination: endpoints.destination,
+            headers: {
+                'Content-Type': 'application/json; charset=utf-8'
+            }
         });
         entryElement.value = "";
     }
@@ -102,7 +108,7 @@ const ChatWrapper = (
         <div className="chat">
             <div id="chat-inner">
             </div>
-            <span><input id="data-entry"></input><button onClick={() => sendData()}>Send</button></span>
+            <span className="entry-box"><input id="data-entry"></input><button onClick={() => sendData()}>Send</button></span>
         </div>
     )
 }

src/Chat/Message.tsx

@@ -1,13 +0,0 @@
-import React from "react";
-
-export const Message = (
-    {
-        sender, text,
-    }: {
-        sender: string;
-        text: string;
-    }
-): React.ReactElement<{ sender: string; text: string; }> => {
-
-    return (<p>Message from {sender}: {text}</p>);
-};

src/Chat/MessageContainer.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+import { Message, MessageType } from "./types";
+
+export const MessageContainer = (
+    {
+        type,
+        fromUserId,
+        toUserId,
+        content,
+        timeMillis,
+    }: Message
+): React.ReactElement<{ sender: string; text: string; }> => {
+    const dateTime: Date = new Date(timeMillis);
+    return (<p>[{dateTime.toLocaleString(Intl.DateTimeFormat().resolvedOptions().timeZone)}] Message from {fromUserId}: {content}</p>);
+};

src/Chat/types.tsx

@@ -1,4 +1,11 @@
-export type MessageType = {
+export enum MessageType {
+    MESSAGE,
+    SYSTEM,
+    HELLO,
+    DATA,
+}
+export type Message = {
+    type: MessageType,
     fromUserId: string,
     toUserId: string,
     content: string,