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

front/src/index.css

@@ -1,3 +1,7 @@
+html {
+    background-color: #FFE0E3;
+}
+
 .cat {
     width: 100px;
 }

front/src/pages/ChannelPage.tsx

@@ -1,9 +1,12 @@
 import { useParams, Link } from "react-router-dom";
 import React, { useEffect, useState } from "react";
 import { Channel, Messages, User } from "../types";
+import TopBar from "../components/TopBar";
 import MessageComponent from "../components/MessageComponent";
 import axios from "axios";
 
+import "../styles/ChannelPage.css";
+
 export default function ChannelPage() {
     const { name } = useParams();
     const [channel, setChannel] = useState<Channel>();
@@ -102,17 +105,24 @@ export default function ChannelPage() {
     }
 
     return (
-        <div>
+        <div className="channel-page">
-            <Link to="/">Home</Link>
+            <TopBar user={user} />
-            <h1>Channel {channel.name}</h1>
+            <div className="channel">
-            <p>{channel.description}</p>
+                <h2>Channel {channel.name}</h2>
-            <p>Owner: <Link to={`/u/${channel.owner_username}`}>{channel.owner_username}</Link></p>
+                <p>{channel.description}</p>
-            {channel.name.toLowerCase().includes("cat") && (
+                <p>Owner: <Link to={`/u/${channel.owner_username}`}>{channel.owner_username}</Link></p>
-                <img src="/cat.jpg" alt="cat" className="cat" />
+                {channel.name.toLowerCase().includes("cat") && (
-            )}
+                    <img src="/cat.jpg" alt="cat" className="cat" />
-            {
+                )}
-                token ? (
+                {token ? (
-                    <form onSubmit={handleSubmit}>
+                    <form onSubmit={handleSubmit} className="message-form">
+                        <input 
+                            type="text"
+                            placeholder="Message"
+                            value={message}
+                            onChange={(e) => setMessage(e.target.value)}
+                        />
+                        <button type="submit">Send</button>
                         {searchedUsers.length > 0 && (
                             <div>
                                 <p>Mentions:</p>
@@ -134,37 +144,28 @@ export default function ChannelPage() {
                                 ))}
                             </div>
                         )}
-                        <input 
-                            type="text"
-                            placeholder="Message"
-                            value={message}
-                            onChange={(e) => setMessage(e.target.value)}
-                        />
-                        <button type="submit">Send</button>
                     </form>
                 ) : (
-                    <div>
+                    <div className="login-prompt">
                         <Link to="/login">Login</Link>
                         <Link to="/register">Register</Link>
                     </div>
-                )
+                )}
-            }
+                <div className="messages-list">
-            <ul>
+                    {messages.slice(0, maxMessageToShown).map((message) => (
-                {messages.slice(0, maxMessageToShown).map((message) => (
+                        <MessageComponent
-                    <MessageComponent
+                            key={message.id}
-                        key={message.id}
+                            message={message}
-                        message={message}
+                            user={user}
-                        user={user}
+                            channel={channel}
-                        channel={channel}
+                            deleteMessage={deleteMessage}
-                        deleteMessage={deleteMessage}
+                        />
-                    />
+                    ))}
-                ))}
+                    {messages.length > maxMessageToShown && (
-            </ul>
+                        <button onClick={() => setMaxMessageToShown(maxMessageToShown + 10)}>Show more</button>
-            {
+                    )}
-                messages.length > maxMessageToShown && (
+                </div>
-                    <button onClick={() => setMaxMessageToShown(maxMessageToShown + 10)}>Show more</button>
+            </div>
-                )
-            }
         </div>
     );
 }

front/src/pages/ChannelsPage.tsx

@@ -1,13 +1,28 @@
 import { useState, useEffect } from "react"
 import { Link } from "react-router-dom"
-import { Channels } from "../types"
+import { Channels, User } from "../types"
 import axios from "axios"
+import TopBar from "../components/TopBar"
+
+import "../styles/ChannelsPage.css"
 
 export default function ChannelsPage() {
     const [channels, setChannels] = useState<Channels>();
     const [search, setSearch] = useState<string>("");
+    const [user, setUser] = useState<User>();
 
     useEffect(() => {
+        const token = localStorage.getItem("token")
+
+        if (token) {
+            axios
+                .post("/api/auth/me", {
+                    token: token
+                })
+                .then((res) => {
+                    setUser(res.data)
+                })
+        }
         axios
             .get("/api/channels")
             .then((res) => {
@@ -31,22 +46,24 @@ export default function ChannelsPage() {
     }, [])
 
     return (
-        <div>
+        <div className="channels-page">
-            <Link to="/">Home</Link>
+            <TopBar user={user} />
-            <h1>Channels</h1>
+            <div className="channels-page-channels">
-            <input
+                <h2>Channels</h2>
-                type="text"
+                <input
-                placeholder="Search channels"
+                    type="text"
-                value={search}
+                    placeholder="Search channels"
-                onChange={(e) => setSearch(e.target.value)}
+                    value={search}
-            />
+                    onChange={(e) => setSearch(e.target.value)}
-            <ul>
+                />
-                {channels?.filter((channel) => channel.name.toLowerCase().includes(search.toLowerCase())).map((channel) => (
+                <ul>
-                    <li key={channel.id}>
+                    {channels?.filter((channel) => channel.name.toLowerCase().includes(search.toLowerCase())).map((channel) => (
-                        <Link to={`/c/${channel.name}`}>{channel.name}</Link>
+                        <li key={channel.id}>
-                    </li>
+                            <Link to={`/c/${channel.name}`}>{channel.name}</Link>
-                ))}
+                        </li>
-            </ul>
+                    ))}
+                </ul>
+            </div>
         </div>
     )
 }

front/src/pages/CreateChannel.tsx

@@ -1,17 +1,29 @@
 import { useState, useEffect } from "react";
 import { Link, useNavigate } from "react-router-dom";
+import { User } from "../types";
 import axios from "axios";
+import TopBar from "../components/TopBar";
 
+import "../styles/CreateChannel.css";
 
 export default function CreateChannel() {
     const navigate = useNavigate();
     const [name, setName] = useState("");
     const [description, setDescription] = useState("");
     const [token, setToken] = useState<string>("");
+    const [user , setUser] = useState<User>();
 
     useEffect(() => {
         const localToken = localStorage.getItem("token");
-        if (localToken) setToken(localToken);
+        if (localToken) {
+            setToken(localToken)
+
+            axios
+                .post("/api/auth/me", { token: localToken })
+                .then((res) => {
+                    setUser(res.data);
+                });
+        }
     }, []);
 
     function handleSubmit(e: React.FormEvent) {
@@ -27,31 +39,33 @@ export default function CreateChannel() {
     }
 
     return (
-        <div>
+        <div className="create-channel-page">
-            <Link to="/">Home</Link>
+            <TopBar user={user}/>
-            <h1>Create Channel</h1>
+            <div className="create-channel">
-            <form onSubmit={handleSubmit}>
+                <h1>Create Channel</h1>
-                <p>
+                <form onSubmit={handleSubmit}>
-                    {!/^[a-zA-Z0-9-_]+$/.test(name) && name.length != 0 && (
+                    <p>
-                        <span>Channel name can only contain letters, numbers, - and _</span>
+                        {!/^[a-zA-Z0-9-_]+$/.test(name) && name.length != 0 && (
-                    )}
+                            <span>Channel name can only contain letters, numbers, - and _</span>
-                </p>
+                        )}
-                <input
+                    </p>
-                    type="text"
+                    <input
-                    placeholder="Name"
+                        type="text"
-                    value={name}
+                        placeholder="Name"
-                    onChange={(e) => setName(e.target.value)}
+                        value={name}
-                />
+                        onChange={(e) => setName(e.target.value)}
-                <input
+                    />
-                    type="text"
+                    <input
-                    placeholder="Description"
+                        type="text"
-                    value={description}
+                        placeholder="Description"
-                    onChange={(e) => setDescription(e.target.value)}
+                        value={description}
-                />
+                        onChange={(e) => setDescription(e.target.value)}
-                <button type="submit" disabled={!/^[a-zA-Z0-9-_]+$/.test(name)}>
+                    />
-                    Create
+                    <button type="submit" disabled={!/^[a-zA-Z0-9-_]+$/.test(name)}>
-                </button>
+                        Create
-            </form>
+                    </button>
+                </form>
+            </div>
         </div>
     );
 }

front/src/pages/Home.tsx

@@ -1,9 +1,12 @@
 import { useState, useEffect } from "react"
 import { Link } from "react-router-dom"
 import { Channels, RecentChannels, User, Messages } from "../types"
+import TopBar from "../components/TopBar"
 import MessageComponent from "../components/MessageComponent"
 import axios from "axios"
 
+import "../styles/Home.css"
+
 export default function Home() {
     const [user, setUser] = useState<User>();
     const [channels, setChannels] = useState<RecentChannels>();
@@ -80,59 +83,66 @@ export default function Home() {
     }, [search])
 
     return (
-        <div>
+        <div className="home">
-            <h1>Home</h1>
+            <TopBar user={user} />
-            {user ? (
+            <div className="home-header">
-                <div>
+                <div className="home-header-text">
-                    <p>Welcome {user.username}</p>
+                    <h2>Welcome to Tanuki's forum !</h2>
-                    <button onClick={() => {
+                    <p>
-                        localStorage.removeItem("token")
+                        I don't know what to say, but I hope you will enjoy your stay here.
-                        window.location.reload()
+                    </p>
-                    }}>Logout</button>
-                    <Link to="/create-channel">Create Channel</Link>
                 </div>
-            ) : (
+                <img src="osaka_arch.png" alt="osaka" className="osaka"/>
-                <div>
+            </div>
-                    <Link to="/login">Login</Link>
+            <div className="main-content">
-                    <Link to="/register">Register</Link>
+                <div className="home-messages">
+                    <h2>Last messages</h2>
+                    <div className="messages-list">
+                        {messages?.map((message) => (
+                            <MessageComponent
+                                key={message.id}
+                                message={message}
+                                user={user}
+                                channel={undefined}
+                                deleteMessage={undefined}
+                            />
+                        ))}
+                    </div>
                 </div>
-            )}
+                <div className="channels">
-            <h2>Recent active channels</h2>
+                    <h2>Channels</h2>
-            <ul>
+                    <Link to={'/channels'}>All channels</Link>
-                {channels?.map((channel) => (
+                    {user && (
-                    <li key={channel.id}>
+                        <Link to={'/create-channel'}>Create channel</Link>
-                        <Link to={`/c/${channel.name}`}>{channel.name}</Link>
+                    )}
-                    </li>
+                    <div className="channels-recent">
-                ))}
+                        <h3>Recent active channels</h3>
-            </ul>
+                        <ul>
-            <h2>Search channels</h2>
+                            {channels?.map((channel) => (
-            <input
+                                <li key={channel.id}>
-                type="text"
+                                    <Link to={`/c/${channel.name}`}>{channel.name}</Link>
-                placeholder="Search channels"
+                                </li>
-                value={search}
+                            ))}
-                onChange={(e) => setSearch(e.target.value)}
+                        </ul>
-            />
+                    </div>
-            <ul>
+                    <div className="channels-search">   
-                {searchedChannels?.map((channel) => (
+                        <h3>Search channels</h3>
-                    <li key={channel.id}>
+                        <input
-                        <Link to={`/c/${channel.name}`}>{channel.name}</Link>
+                            type="text"
-                    </li>
+                            placeholder="Search channels"
-                ))}
+                            value={search}
-            </ul>
+                            onChange={(e) => setSearch(e.target.value)}
-            <Link to={'/channels'}>All channels</Link>
+                        />
-            <h2>Last messages</h2>
+                        <ul>
-            <ul>
+                            {searchedChannels?.map((channel) => (
-                {messages?.map((message) => (
+                                <li key={channel.id}>
-                    <MessageComponent
+                                    <Link to={`/c/${channel.name}`}>{channel.name}</Link>
-                        key={message.id}
+                                </li>
-                        message={message}
+                            ))}
-                        user={user}
+                        </ul>
-                        channel={undefined}
+                    </div>
-                        deleteMessage={undefined}
+                </div>
-                    />
+            </div>
-                ))}
-            </ul>
-            <img src="osaka_arch.png" alt="osaka" className="osaka"/>
         </div>
     )
 }

front/src/pages/Login.tsx

@@ -1,6 +1,9 @@
 import axios from "axios";
 import { useState } from "react";
 import { useNavigate, Link } from "react-router-dom";
+import TopBar from "../components/TopBar";
+
+import "../styles/Login.css";
 
 export default function Login() {
     const [username, setUsername] = useState("");
@@ -21,25 +24,27 @@ export default function Login() {
     }
 
     return (
-        <div>
+        <div className="login-page">
-            <Link to="/">Home</Link>
+            <TopBar user={undefined}/>
-            <h1>Login</h1>
+            <div className="login">
-            <form onSubmit={handleSubmit}>
+                <h2>Login</h2>
-                <input
+                <form onSubmit={handleSubmit}>
-                    type="text"
+                    <input
-                    placeholder="Username"
+                        type="text"
-                    value={username}
+                        placeholder="Username"
-                    onChange={(e) => setUsername(e.target.value)}
+                        value={username}
-                />
+                        onChange={(e) => setUsername(e.target.value)}
-                <input
+                    />
-                    type="password"
+                    <input
-                    placeholder="Password"
+                        type="password"
-                    value={password}
+                        placeholder="Password"
-                    onChange={(e) => setPassword(e.target.value)}
+                        value={password}
-                />
+                        onChange={(e) => setPassword(e.target.value)}
-                <button type="submit">Login</button>
+                    />
-            </form>
+                    <button type="submit">Login</button>
-            <Link to="/register">Register</Link>
+                </form>
+                <Link to="/register">Register</Link>
+            </div>
         </div>
     );
 }

front/src/pages/Register.tsx

@@ -1,6 +1,9 @@
 import axios from "axios";
 import { useState } from "react";
 import { useNavigate, Link } from "react-router-dom";
+import TopBar from "../components/TopBar";
+
+import "../styles/Register.css";
 
 export default function Register () {
     const [username, setUsername] = useState("");
@@ -28,32 +31,34 @@ export default function Register () {
     }
 
     return (
-        <div>
+        <div className="register-page">
-            <Link to="/">Home</Link>
+            <TopBar user={undefined}/>
-            <h1>Register</h1>
+            <div className="register">
-            <form onSubmit={handleSubmit}>
+                <h2>Register</h2>
-                <p>
+                <form onSubmit={handleSubmit}>
-                    {!/^[a-zA-Z0-9-_]+$/.test(username) && username.length != 0 && (
+                    <p>
-                        <span>Username can only contain letters, numbers, - and _</span>
+                        {!/^[a-zA-Z0-9-_]+$/.test(username) && username.length != 0 && (
-                    )}
+                            <span>Username can only contain letters, numbers, - and _</span>
-                </p>
+                        )}
-                <input
+                    </p>
-                    type="text"
+                    <input
-                    placeholder="Username"
+                        type="text"
-                    value={username}
+                        placeholder="Username"
-                    onChange={(e) => setUsername(e.target.value)}
+                        value={username}
-                />
+                        onChange={(e) => setUsername(e.target.value)}
-                <input
+                    />
-                    type="password"
+                    <input
-                    placeholder="Password"
+                        type="password"
-                    value={password}
+                        placeholder="Password"
-                    onChange={(e) => setPassword(e.target.value)}
+                        value={password}
-                />
+                        onChange={(e) => setPassword(e.target.value)}
-                <button type="submit" disabled={!/^[a-zA-Z0-9-_]+$/.test(username)}>
+                    />
-                    Register
+                    <button type="submit" disabled={!/^[a-zA-Z0-9-_]+$/.test(username)}>
-                </button>
+                        Register
-            </form>
+                    </button>
-            <Link to="/login">Login</Link>
+                </form>
+                <Link to="/login">Login</Link>
+            </div>
         </div>
     );
 }

front/src/pages/UserPage.tsx

@@ -1,17 +1,32 @@
 import { useParams, Link } from "react-router-dom";
 import { useEffect, useState } from "react";
 import { User, Messages } from "../types";
+import TopBar from "../components/TopBar";
 import MessageComponent from "../components/MessageComponent";
 import axios from "axios";
 
+import "../styles/UserPage.css";
+
 export default function UserPage() {
     const { username } = useParams();
-    const [user, setUser] = useState<User>();
+    const [pageUser, setPageUser] = useState<User>();
     const [messages, setMessages] = useState<Messages>();
+    const [user, setUser] = useState<User>();
+
+    useEffect(() => {
+        const localToken = localStorage.getItem("token");
+
+        if (localToken) {
+            axios
+                .post("/api/auth/me", { token: localToken }).then((res) => {
+                    setUser(res.data);
+                });
+        }
+    }, []);
 
     useEffect(() => {
         axios.get(`/api/users/${username}`).then((res) => {
-            setUser(res.data);
+            setPageUser(res.data);
         });
 
         axios.get(`/api/users/${username}/lastmessages`).then((res) => {
@@ -30,27 +45,31 @@ export default function UserPage() {
         return () => { clearInterval(id) }
     }, [username])
 
-    if (!user) {
+    if (!pageUser) {
         return <div>Loading...</div>;
     }
 
     return (
-        <div>
+        <div className="user-page">
-            <Link to="/">Home</Link>
+            <TopBar user={user} />
-            <h1>{user.username}</h1>
+            <div className="user">
-            {user.admin ? <p>Admin</p> : <p>User</p>}
+            <h2>{pageUser.username}</h2>
-            <h1>Last messages</h1>
+                {pageUser.admin ? <p>Admin</p> : <p>User</p>}
-            <ul>
+                <div className="user-messages">
-                {messages?.map((message) => (
+                    <h2>Last messages</h2>
-                    <MessageComponent
+                    <div className="messages-list">
-                        key={message.id}
+                        {messages?.map((message) => (
-                        message={message}
+                            <MessageComponent
-                        user={user}
+                                key={message.id}
-                        channel={undefined}
+                                message={message}
-                        deleteMessage={undefined}
+                                user={pageUser}
-                    />
+                                channel={undefined}
-                ))}
+                                deleteMessage={undefined}
-            </ul>
+                            />
+                        ))}
+                    </div>
+                </div>
+            </div>
         </div>
     );
 }

front/src/styles/ChannelPage.css

@@ -0,0 +1,35 @@
+.channel-page {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    min-height: 100vh;
+    gap: 20px;
+}
+
+.channel {
+    width: 97%;
+    border: 1px solid #270722;
+    padding: 10px;
+}
+
+.message-form {
+    margin: 16px 0;
+}
+
+.login-prompt {
+    margin: 16px 0;
+    display: flex;
+    flex-direction: row;
+    gap: 10px;
+}
+
+.messages-list {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+    gap: 10px;
+}

front/src/styles/ChannelsPage.css

@@ -0,0 +1,15 @@
+.channels-page {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    min-height: 100vh;
+    gap: 20px;
+}
+
+.channels-page-channels {
+    width: 97%;
+    border: 1px solid #270722;
+    padding: 10px;
+}

front/src/styles/CreateChannel.css

@@ -0,0 +1,14 @@
+.create-channel-page {
+    display: flex;
+    flex-direction: column;
+    justify-content: start;
+    align-items: center;
+    width: 100%;
+    gap: 20px;
+}
+
+.create-channel {
+    width: 97%;
+    border: 1px solid #270722;
+    padding: 10px;
+}

front/src/styles/Home.css

@@ -0,0 +1,71 @@
+.home {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    min-height: 100vh;
+    gap: 20px;
+}
+
+.main-content {
+    display: flex;
+    justify-content: space-around;
+    align-items: top;
+    width: 100%;
+    min-height: 100%;
+}
+
+.home-header {
+    width: 97%;
+    border: 1px solid #270722;
+    display: flex;
+    justify-content: space-between;
+    align-items: top;
+    padding: 10px;
+}
+
+.home-messages {
+    width: 60%;
+    border: 1px solid #270722;
+    padding: 10px;
+}
+
+.messages-list {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+    gap: 10px;
+}
+
+.channels {
+    width: 34%;
+    border: 1px solid #270722;
+    min-height: 100%;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+}
+
+@media (max-width: 800px) {
+    .home-header {
+        flex-direction: column;
+        align-items: center;
+    }
+
+    .main-content {
+        flex-direction: column;
+        align-items: center;
+        gap: 20px;
+    }
+
+    .home-messages {
+        width: 97%;
+    }
+
+    .channels {
+        width: 97%;
+    }
+}

front/src/styles/Login.css

@@ -0,0 +1,14 @@
+.login-page {
+    display: flex;
+    flex-direction: column;
+    justify-content: start;
+    align-items: center;
+    width: 100%;
+    gap: 20px;
+}
+
+.login {
+    width: 97%;
+    border: 1px solid #270722;
+    padding: 10px;
+}

front/src/styles/MessageComponent.css

@@ -0,0 +1,5 @@
+.message {
+    width: 95%;
+    border: 1px solid #270722;
+    padding: 10px;
+}

front/src/styles/Register.css

@@ -0,0 +1,14 @@
+.register-page {
+    display: flex;
+    flex-direction: column;
+    justify-content: start;
+    align-items: center;
+    width: 100%;
+    gap: 20px;
+}
+
+.register {
+    width: 97%;
+    border: 1px solid #270722;
+    padding: 10px;
+}

front/src/styles/TopBar.css

@@ -0,0 +1,39 @@
+.topbar {
+    width: 97%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    border: 1px solid #270722;
+    padding: 10px;
+}
+
+.topbar-left {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 10px;
+}
+
+.topbar-right {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 10px;
+}
+
+@media (max-width: 560px) {
+    .topbar {
+        flex-direction: column;
+        align-items: center;
+    }
+
+    .topbar-left {
+        flex-direction: column;
+        align-items: center;
+    }
+
+    .topbar-right {
+        flex-direction: column;
+        align-items: center;
+    }
+}

front/src/styles/UserPage.css

@@ -0,0 +1,30 @@
+.user-page {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    min-height: 100vh;
+    gap: 20px;
+}
+
+.user {
+    width: 97%;
+    border: 1px solid #270722;
+    padding: 10px;
+}
+
+.user-messages {
+    width: 97%;
+    border: 1px solid #270722;
+    padding: 10px;
+}
+
+.messages-list {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+    gap: 10px;
+}