From bbf0a6d86a7c7940d5b69edd5852c127557ba6d5 Mon Sep 17 00:00:00 2001
From: Nalvazhuthi <nalvazhuthi@hexrfactory.com>
Date: Thu, 22 May 2025 16:10:19 +0530
Subject: [PATCH] fix: update initial state of CommentThreads to collapsed and
 refine styles for better visibility

---
 .../ui/collaboration/CommentThreads.tsx       |  2 +-
 app/src/styles/main.scss                      |  2 +-
 app/src/styles/scene/comments.scss            | 37 ++++++++++++++++---
 3 files changed, 33 insertions(+), 8 deletions(-)

diff --git a/app/src/components/ui/collaboration/CommentThreads.tsx b/app/src/components/ui/collaboration/CommentThreads.tsx
index 82cd6fb..8151300 100644
--- a/app/src/components/ui/collaboration/CommentThreads.tsx
+++ b/app/src/components/ui/collaboration/CommentThreads.tsx
@@ -2,7 +2,7 @@ import React, { useState } from "react";
 import { getAvatarColor } from "../../../modules/collaboration/functions/getAvatarColor";
 
 const CommentThreads: React.FC = () => {
-  const [expand, setExpand] = useState(true);
+  const [expand, setExpand] = useState(false);
   const commentsedUsers = [
     {
       userId: "1",
diff --git a/app/src/styles/main.scss b/app/src/styles/main.scss
index 4ba72c7..3de3896 100644
--- a/app/src/styles/main.scss
+++ b/app/src/styles/main.scss
@@ -45,4 +45,4 @@
 
 //
 @use "./scene/scene";
-@use "./scene/comments";
+@use "./scene/comments";
\ No newline at end of file
diff --git a/app/src/styles/scene/comments.scss b/app/src/styles/scene/comments.scss
index af3bc99..39fc15c 100644
--- a/app/src/styles/scene/comments.scss
+++ b/app/src/styles/scene/comments.scss
@@ -7,19 +7,21 @@
   left: 50%;
   padding: 4px;
   background: var(--background-color);
-  border-radius: #{$border-radius-large} #{$border-radius-large} #{$border-radius-large}
-    0;
+  border-radius: #{$border-radius-large} #{$border-radius-large} #{$border-radius-large} 0;
   backdrop-filter: blur(12px);
   z-index: 1000;
   transform: translateY(-100%);
   outline: 1px solid var(--border-color);
   transition: all 0.2s ease-out;
+
   .comments-threads-container {
     display: flex;
     align-items: start;
     flex-direction: column;
+
     .users-commented {
       @include flex-center;
+
       .users {
         height: 24px;
         line-height: 24px;
@@ -28,35 +30,49 @@
         border-radius: 50%;
       }
     }
+
     .last-comment-details {
       display: flex;
       align-items: start;
       flex-direction: column;
-      padding-top: 0;
-      height: 0;
-      width: 0;
+      // padding-top: 0;
+      // height: 0;
+      // width: 0;
       overflow: hidden;
       transition: all 0.2s;
+
       .header {
         @include flex-center;
         gap: 10px;
+
         .user-name {
           text-transform: capitalize;
         }
+
         .time {
           font-size: var(--font-size-small);
           color: var(--input-text-color);
         }
       }
+
       .message {
         margin-top: 10px;
       }
+
       .replies {
         margin-top: 10px;
         font-size: var(--font-size-small);
         color: var(--input-text-color);
       }
+
+      .header,
+      .message,
+      .replies {
+        opacity: 0;
+        display: none;
+      }
     }
+
     .expand {
       min-width: 200px;
       max-width: 260px;
@@ -64,9 +80,18 @@
       height: 100%;
     }
   }
+
   .open {
     .users-commented {
       padding: 12px;
     }
+
+
+    .header,
+    .message,
+    .replies {
+      opacity: 1 !important;
+      display: flex !important;
+    }
   }
-}
+}
\ No newline at end of file