add pfps, improve the looks of the client a bit

2 files changed, 58 insertions, 36 deletions

diff --git a/pages/main/page.js b/pages/main/page.js
index 9edb966..370b525 100644
--- a/pages/main/page.js
+++ b/pages/main/page.js
@@ -65,33 +65,42 @@ export function onload() {
     function createMessage(msg) {
         let elem = html('div')
             .class('message')
-            .for(msg.replies, r => html('div')
-                .class('reply')
-                .html(`→ ${getUsernameHTML(r)}: ${deHTML(String(r.content).slice(0, 50))}`))
             .child('div')
-                .class('message-header')
-                .child('span')
-                    .class('username')
-                    .html(getUsernameHTML(msg))
+                .class('message-container')
+                .child('img')
+                    .attr('src', msg.author.avatar)
                     .up()
                 .child('div')
-                    .class('action-buttons')
-                    .child('button')
-                        .text('reply')
-                        .ev('click', e => {
-                            if(msg.length >= 3) return;
-                            replies.push(msg);
-                            rednerReplyThingy();
-                        })
+                    .class('message-content-container')
+                    .for(msg.replies, r => html('div')
+                        .class('reply')
+                        .html(`→ ${getUsernameHTML(r)}: ${deHTML(String(r.content).slice(0, 50))}`))
+                    .child('div')
+                        .class('message-header')
+                        .child('span')
+                            .class('username')
+                            .html(getUsernameHTML(msg))
+                            .up()
+                        .child('div')
+                            .class('action-buttons')
+                            .child('button')
+                                .text('reply')
+                                .ev('click', e => {
+                                    if(msg.length >= 3) return;
+                                    replies.push(msg);
+                                    rednerReplyThingy();
+                                })
+                                .up()
+                            .up()
+                        .up()
+                    .child('span')
+                        .class('post-content')
+                        .html(md.render(msg?.content))
+                    .child('div')
+                        .for(msg.attachments, a => html('img').class('attachment').attr('src', a))
                         .up()
                     .up()
                 .up()
-            .child('span')
-                .class('post-content')
-                .html(md.render(msg?.content))
-            .child('div')
-                .for(msg.attachments, a => html('img').class('attachment').attr('src', a))
-                .up()
             .up()
         msgArea.appendChild(elem)
     }
diff --git a/styles.less b/styles.less
index 98bf87f..d67b084 100644
--- a/styles.less
+++ b/styles.less
@@ -9,6 +9,7 @@ body {
 		background: white;
 		display: flex;
 		justify-content: space-between;
+		border-bottom: gray inset 2px;
 	}
 	.main {
 		flex-grow: 1;
@@ -45,15 +46,33 @@ body {
 	display: flex;
 }
 
-.reply {
-	color: #000000aa
-}
-
-.attachment {
-	max-height: 25vw;
-	max-width: 25vw;
-	width: auto;
-	height: auto;
+.message {
+	.message-container {
+		display: flex;
+		img {
+			height: 5em;
+			aspect-ratio: 1/1;
+			border: gray inset 2px;
+		}
+		.message-content-container {
+			flex-grow: 1;
+			.reply {
+				color: #000000aa
+			}
+			.message-header {
+				width: 100%;
+			}
+			p, h1, h2, h3, h4, h5, h6 {
+				margin: 0;
+			}
+			.attachment {
+				max-height: 25vw;
+				max-width: 25vw;
+				width: auto;
+				height: auto;
+			}
+		}
+	}
 }
 
 #messageInput {
@@ -64,12 +83,6 @@ body {
     display: none;
 }
 
-.message {
-	p, h1, h2, h3, h4, h5, h6 {
-		margin: 0;
-	}
-}
-
 .message-header {
 	display: flex;
 	justify-content: space-between;