add: improved UI by adding CSS files

front/src/components/MessageComponent.tsx

@@ -1,6 +1,8 @@
 import { Link } from "react-router-dom";
 import { Message, User, Channel } from "../types";
 
+import "../styles/MessageComponent.css";
+
 export default function MessageComponent({ message, user, channel, deleteMessage }: {
         message: Message;
         user: User | undefined;
@@ -9,7 +11,7 @@ export default function MessageComponent({ message, user, channel, deleteMessage
     }) {
     
     return (
-        <li key={message.id}>
+        <div key={message.id} className="message">
             <Link to={`/u/${message.username}`}>{message.username}</Link>:{" "}
             {message.content.split(" ").map((word, index) => {
                 if (word.startsWith("@")) {
@@ -28,6 +30,6 @@ export default function MessageComponent({ message, user, channel, deleteMessage
                     <p>In <Link to={`/c/${message.channel_name}`}>{message.channel_name}</Link></p>
                 )
             }
-        </li>
+        </div>
     );
 }