From 0ba1bf4159991e849b07dbb198b4648fc528d8ca Mon Sep 17 00:00:00 2001
From: Silas Owu <owusilasyp00@gmail.com>
Date: Thu, 3 Oct 2024 17:49:41 -0700
Subject: [PATCH] style: update comments ui

---
 .../comments/comments.component.html          |  10 +-
 .../comments/comments.component.scss          | 109 +++++++-----------
 .../components/comments/comments.component.ts |  16 ++-
 .../fireblog-page.component.scss              |   4 +-
 4 files changed, 66 insertions(+), 73 deletions(-)

diff --git a/src/app/components/comments/comments.component.html b/src/app/components/comments/comments.component.html
index ea3a8d1..0a737ac 100644
--- a/src/app/components/comments/comments.component.html
+++ b/src/app/components/comments/comments.component.html
@@ -2,8 +2,14 @@
   <div class="comments-list">
     <mat-card *ngFor="let comment of comments" class="comment-card">
       <mat-card-header>
-        <img mat-card-avatar [src]="comment.user.image" [alt]="comment.user.username">
-        <mat-card-title>{{ (comment.user.username || 'Anonymous') | prependAt}}</mat-card-title>
+        <img mat-card-avatar [src]="comment.user.image || randomAvatarUrl" [alt]="comment.user.username">
+        <mat-card-title>
+          @if( currentUser?.uid == comment.user.uid){
+             <p>You</p>
+          } @else {
+            {{ (comment.user.username || 'Anonymous') | prependAt}}
+          }
+        </mat-card-title>
         <mat-card-subtitle>{{ comment.createdAt | date:'medium' }}</mat-card-subtitle>
       </mat-card-header>
       <mat-card-content>
diff --git a/src/app/components/comments/comments.component.scss b/src/app/components/comments/comments.component.scss
index 5a975e5..e3cbb17 100644
--- a/src/app/components/comments/comments.component.scss
+++ b/src/app/components/comments/comments.component.scss
@@ -1,88 +1,63 @@
+@use '../../../partials/variables' as *;
+
 .comments-container {
   display: flex;
   flex-direction: column;
   align-items: center;
   width: 100%;
-  max-width: 600px;
+  max-width: 37.5rem;
   margin: 0 auto;
-  padding: 16px;
-}
+  padding: 1rem;
+  .comments-list {
+    padding-left: 2rem;
+    border-left: 1.75px solid $palesky !important;
+    width: 100%;
+    margin-bottom: 1rem;
+  }
 
-.comments-list {
-  width: 100%;
-  margin-bottom: 16px;
-}
+  .comment-card {
+    margin-bottom: 1rem;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  }
 
-.comment-card {
-  margin-bottom: 16px;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-}
+  .comment-form {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
 
-.comment-form {
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
+  .full-width {
+    width: 100%;
+  }
 
-.full-width {
-  width: 100%;
-}
+  button {
+    margin-top: .5rem;
+  }
 
-button {
-  margin-top: 8px;
-}
-.comments-container {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  width: 100%;
-  max-width: 600px;
-  margin: 0 auto;
-  padding: 16px;
-}
+  .mat-card-header {
+    align-items: center;
+  }
 
-.comments-list {
-  width: 100%;
-  margin-bottom: 16px;
-}
+  .mat-card-avatar {
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    object-fit: cover;
+  }
 
-.comment-card {
-  margin-bottom: 16px;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-}
+  .mat-card-title {
+    margin-bottom: 4px;
+    font-weight: bold;
+  }
 
-.mat-card-header {
-  align-items: center;
+  .mat-card-subtitle {
+    color: rgba(0, 0, 0, 0.54);
+  }
 }
 
-.mat-card-avatar {
-  width: 40px;
-  height: 40px;
-  border-radius: 50%;
-  object-fit: cover;
-}
 
-.mat-card-title {
-  margin-bottom: 4px;
-  font-weight: bold;
-}
 
-.mat-card-subtitle {
-  color: rgba(0, 0, 0, 0.54);
-}
 
-.comment-form {
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
 
-.full-width {
-  width: 100%;
-}
 
-button {
-  margin-top: 8px;
-}
diff --git a/src/app/components/comments/comments.component.ts b/src/app/components/comments/comments.component.ts
index 65b2b20..ff7b6c8 100644
--- a/src/app/components/comments/comments.component.ts
+++ b/src/app/components/comments/comments.component.ts
@@ -1,6 +1,6 @@
 import { Component, Input } from '@angular/core';
 import { FireblogFacadeService } from '../../services/fireblog/fireblog-facade.service';
-import { IComment } from '../../services/blog.interface';
+import { IComment, IUser } from '../../services/blog.interface';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
@@ -28,9 +28,23 @@ export class CommentsComponent {
   @Input() postId!: string | undefined;
   @Input() comments: IComment[] = [];
   newCommentContent: string = '';
+   randomAvatarUrl: string = '';
+  currentUser: IUser | null = null;
 
   constructor(private fireblogFacade: FireblogFacadeService) {}
 
+  ngOnInit() {
+    this.generateRandomAvatarUrl();
+    this.fireblogFacade.getCurrentUser$.subscribe(user => {
+      this.currentUser = user;
+    });
+  }
+
+  generateRandomAvatarUrl() {
+    const seed = Math.random().toString(36).substring(7);
+    this.randomAvatarUrl = `https://api.dicebear.com/9.x/thumbs/svg?seed=${seed}`;
+  }
+
   addComment() {
     if (this.newCommentContent.trim()) {
       this.fireblogFacade.getCurrentUser$.subscribe(user => {
diff --git a/src/app/components/fireblog-page/fireblog-page.component.scss b/src/app/components/fireblog-page/fireblog-page.component.scss
index 04df0ac..abae0b5 100644
--- a/src/app/components/fireblog-page/fireblog-page.component.scss
+++ b/src/app/components/fireblog-page/fireblog-page.component.scss
@@ -2,7 +2,6 @@
 @use '../../../partials/mixins' as *;
 
 .fireblog-container {
-  // padding-top: 2rem;
   height: 100vh;
   width: 100vw;
   display: flex;
@@ -38,7 +37,6 @@
         flex-direction: column;
         justify-items: center;
         align-items: center;
-        border: 2px solid;
         padding: 1.25rem;
 
         div{
@@ -99,7 +97,7 @@
   z-index: 1000;
 }
 
-// New styles for user profile
+
 .user-profile {
   display: flex;
   flex-direction: column;