From 1fe72cd4f52d174082e21d65e47ec98ba52e4b8f Mon Sep 17 00:00:00 2001
From: Pau Costa <mico@micodev.es>
Date: Mon, 19 Feb 2024 20:00:58 +0100
Subject: [PATCH] :lipstick: UI adjustment

Signed-off-by: Pau Costa <mico@micodev.es>
---
 client/src/routes/post.tsx    |  2 +-
 client/src/routes/profile.tsx | 32 +++++++++++++++++++++++---------
 2 files changed, 24 insertions(+), 10 deletions(-)

diff --git a/client/src/routes/post.tsx b/client/src/routes/post.tsx
index 4d6f800..d4840a0 100644
--- a/client/src/routes/post.tsx
+++ b/client/src/routes/post.tsx
@@ -137,7 +137,7 @@ export default function PostView() {
           {postToDisplay?.comments?.map((comment) => (
             <Paper>
               <Box sx={{ margin: "1rem" }}>
-                <Box sx={{ display: "flex", mb: "0.3rem" }}>
+                <Box sx={{ display: "flex", mb: "0.3rem", pt: "0.3rem" }}>
                   <AppAvatar user={comment.createdBy!} small />
                   <Typography variant="subtitle2" sx={{ ml: "0.5rem" }}>
                     {comment.createdBy?.firstName} {comment.createdBy?.lastName}
diff --git a/client/src/routes/profile.tsx b/client/src/routes/profile.tsx
index c80aca4..f2055c9 100644
--- a/client/src/routes/profile.tsx
+++ b/client/src/routes/profile.tsx
@@ -85,6 +85,10 @@ export default function Profile(props: ProfileProps) {
             <Paper
               sx={{
                 width: "100%",
+                display: "flex",
+                flexDirection: "column",
+                justifyContent: "center",
+                alignItems: "center",
               }}
             >
               <Box>
@@ -138,15 +142,25 @@ export default function Profile(props: ProfileProps) {
                 </Box>
               </Box>
             </Paper>
-            <List sx={{ width: "75%" }}>
-              {userToDisplay!.posts?.map((post: Post) => (
-                <PostListItem post={post} postType="user" key={post.id} />
-              )) || (
-                <Typography variant="h3">
-                  This user has no posts yet!
-                </Typography>
-              )}
-            </List>
+            <Box
+              sx={{
+                width: "75%",
+                margin: "auto",
+                display: "flex",
+                justifyContent: "center",
+                alignItems: "center",
+              }}
+            >
+              <List>
+                {userToDisplay!.posts?.map((post: Post) => (
+                  <PostListItem post={post} postType="user" key={post.id} />
+                )) || (
+                  <Typography variant="h3">
+                    This user has no posts yet!
+                  </Typography>
+                )}
+              </List>
+            </Box>
           </>
         )}
       </Box>