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

front/src/components/TopBar.tsx

@@ -0,0 +1,32 @@
+import { Link } from "react-router-dom"
+import { User } from "../types"
+
+import "../styles/TopBar.css"
+
+export default function TopBar({ user }: { user: User | undefined }) {
+    return (
+        <div className="topbar">
+            <div className="topbar-left">
+                <h1>Tanuki's Forum</h1>
+                <Link to="/">Home</Link>
+                <Link to="/channels">Channels</Link>
+            </div>
+            {user ? (
+                <div className="topbar-right">
+                    <Link to={`/u/${user.username}`}>{user.username}</Link>
+                    <button onClick={() => {
+                        localStorage.removeItem("token")
+                        window.location.reload()
+                    }}>
+                        Logout
+                    </button>
+                </div>
+            ) : (
+                <div className="topbar-right">
+                    <Link to="/login">Login</Link>
+                    <Link to="/register">Register</Link>
+                </div>
+            )}
+        </div>
+    )
+}