From edc6f3473394d3295571a90dc37e82acf24b22b5 Mon Sep 17 00:00:00 2001
From: Lukian <lulul7018@gmail.com>
Date: Tue, 8 Apr 2025 22:51:16 +0200
Subject: [PATCH] fix: centered some titles

---
 front/src/pages/Home.tsx  | 80 ++++++++++++++++++++-------------------
 front/src/styles/Home.css | 12 ++++++
 2 files changed, 53 insertions(+), 39 deletions(-)

diff --git a/front/src/pages/Home.tsx b/front/src/pages/Home.tsx
index 334f3bb..e5ee3de 100644
--- a/front/src/pages/Home.tsx
+++ b/front/src/pages/Home.tsx
@@ -156,45 +156,47 @@ export default function Home() {
                 </div>
                 <div className="channels">
                     <h2>Channels</h2>
-                    <Link to={'/channels'}>All channels</Link>
-                    {user && (
-                        <Link to={'/create-channel'}>Create channel</Link>
-                    )}
-                    <div className="channels-recent">
-                        <h3>Recent active channels</h3>
-                        <ul>
-                            {channels?.map((channel) => (
-                                <li key={channel.id}>
-                                    <Link to={`/c/${channel.name}`}>{channel.name}</Link>
-                                </li>
-                            ))}
-                        </ul>
-                    </div>
-                    <div className="channels-new">
-                        <h3>Last created channels</h3>
-                        <ul>
-                            {newChannels?.map((channel) => (
-                                <li key={channel.id}>
-                                    <Link to={`/c/${channel.name}`}>{channel.name}</Link>
-                                </li>
-                            ))}
-                        </ul>
-                    </div>
-                    <div className="channels-search">   
-                        <h3>Search channels</h3>
-                        <input
-                            type="text"
-                            placeholder="Search channels"
-                            value={search}
-                            onChange={(e) => setSearch(e.target.value)}
-                        />
-                        <ul>
-                            {searchedChannels?.map((channel) => (
-                                <li key={channel.id}>
-                                    <Link to={`/c/${channel.name}`}>{channel.name}</Link>
-                                </li>
-                            ))}
-                        </ul>
+                    <div className="channels-content">
+                        <Link to={'/channels'}>All channels</Link>
+                        {user && (
+                            <Link to={'/create-channel'}>Create channel</Link>
+                        )}
+                        <div className="channels-recent">
+                            <h3>Recent active channels</h3>
+                            <ul>
+                                {channels?.map((channel) => (
+                                    <li key={channel.id}>
+                                        <Link to={`/c/${channel.name}`}>{channel.name}</Link>
+                                    </li>
+                                ))}
+                            </ul>
+                        </div>
+                        <div className="channels-new">
+                            <h3>Last created channels</h3>
+                            <ul>
+                                {newChannels?.map((channel) => (
+                                    <li key={channel.id}>
+                                        <Link to={`/c/${channel.name}`}>{channel.name}</Link>
+                                    </li>
+                                ))}
+                            </ul>
+                        </div>
+                        <div className="channels-search">   
+                            <h3>Search channels</h3>
+                            <input
+                                type="text"
+                                placeholder="Search channels"
+                                value={search}
+                                onChange={(e) => setSearch(e.target.value)}
+                            />
+                            <ul>
+                                {searchedChannels?.map((channel) => (
+                                    <li key={channel.id}>
+                                        <Link to={`/c/${channel.name}`}>{channel.name}</Link>
+                                    </li>
+                                ))}
+                            </ul>
+                        </div>
                     </div>
                 </div>
             </div>
diff --git a/front/src/styles/Home.css b/front/src/styles/Home.css
index f958fcf..e6bd200 100644
--- a/front/src/styles/Home.css
+++ b/front/src/styles/Home.css
@@ -31,6 +31,9 @@
     border: 1px solid #270722;
     padding: 10px;
     background-color: #fff6fd;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
 }
 
 .messages-list {
@@ -50,8 +53,17 @@
     display: flex;
     flex-direction: column;
     background-color: #fff6fd;
+    align-items: center;
 }
 
+.channels-content {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: left;
+}
+
+
 @media (max-width: 800px) {
     .home-header {
         flex-direction: column;