...

Presentation/HushianWebApp/Pages/Chat.razor

@@ -8,7 +8,7 @@
 @inject GroupService groupService
 @inject UserService userService
 @inject IJSRuntime JS
-
+<PageTitle>گفتمان</PageTitle>
 <div class="container-fluid">
     <div class="row" style="height:85vh">
         <!-- Sidebar (A) -->
@@ -55,9 +55,7 @@
                     @foreach (var item in Inbox1Items)
                     {
                         <div class="chat-list-item" @onclick="async()=>await onClickSelectedChat(1,item)">
-                            <div class="item-avatar">
+
-                                <Icon Name="IconName.Person" Class="avatar-icon" />
-                            </div>
                             <div class="item-content">
                                 <div class="item-header">
                                     <strong class="item-name">@item.UserFullName</strong>
@@ -80,9 +78,7 @@
                     @foreach (var item in Inbox2Items)
                     {
                         <div class="chat-list-item" @onclick="async()=>await onClickSelectedChat(2,item)">
-                            <div class="item-avatar">
+
-                                <Icon Name="IconName.Person" Class="avatar-icon" />
-                            </div>
                             <div class="item-content">
                                 <div class="item-header">
                                     <strong class="item-name">@item.UserFullName</strong>
@@ -108,9 +104,7 @@
                     @foreach (var item in Inbox3Items)
                     {
                         <div class="chat-list-item" @onclick="async()=>await onClickSelectedChat(3,item)">
-                            <div class="item-avatar">
+
-                                <Icon Name="IconName.Person" Class="avatar-icon" />
-                            </div>
                             <div class="item-content">
                                 <div class="item-header">
                                     <strong class="item-name">@item.UserFullName</strong>
@@ -162,6 +156,18 @@
                     </div>
                 }
 
+                else if (isSelectedInbox3)
+                {
+                    <div class="warning-note">
+                        <div class="warning-icon">
+                            <Icon Name="IconName.ExclamationTriangle" Color="IconColor.Warning" Size="IconSize.x3" />
+                        </div>
+                        <div class="warning-content">
+                            <h6 class="warning-title">نکته مهم</h6>
+                            <p class="warning-text">از انتخاب گفتگو مطمئن شوید، بعد از انتخاب شما مسئول بررسی می‌باشد</p>
+                        </div>
+                    </div>
+                }
             </div>
             <!-- B1: Chat area -->
             <div class="flex-fill chat-area-container" id="B1">
@@ -355,7 +361,7 @@
         border-radius: 20px;
         box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.8);
         backdrop-filter: blur(10px);
-        padding: 1.5rem;
+        padding: 0.5rem;
         height: 85vh;
         display: flex;
         flex-direction: column;
@@ -365,8 +371,7 @@
     .sidebar-header {
         background: linear-gradient(135deg, #0d6efd 0%, #0b5ed7 100%);
         border-radius: 15px;
-        padding: 1rem;
+        margin-bottom: 0.5rem;
-        margin-bottom: 1.5rem;
         box-shadow: 0 4px 12px rgba(13, 110, 253, 0.3);
         position: relative;
         overflow: hidden;
@@ -411,7 +416,6 @@
 
     .sidebar-tabs {
         display: flex;
-        flex-direction: column;
         gap: 0.75rem;
         margin-bottom: 1.5rem;
     }
@@ -478,7 +482,7 @@
         border-radius: 15px;
         background: rgba(255, 255, 255, 0.8);
         backdrop-filter: blur(10px);
-        padding: 1rem;
+        padding: 0.5rem;
         box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);
     }
 
@@ -502,6 +506,7 @@
     }
 
     .chat-list-item {
+        height:75px;
         display: flex;
         align-items: center;
         padding: 1rem;
@@ -1001,6 +1006,102 @@
         box-shadow: 0 6px 16px rgba(255, 193, 7, 0.5);
         background: linear-gradient(135deg, #e0a800 0%, #d39e00 100%);
     }
+
+    /* Beautiful Warning Note Styling */
+    .warning-note {
+        display: flex;
+        align-items: center;
+        gap: 1rem;
+        background: linear-gradient(135deg, #fff3cd 0%, #ffeaa7 100%);
+        border: 2px solid #ffc107;
+        border-radius: 20px;
+        padding: 1.25rem;
+        box-shadow: 0 4px 12px rgba(255, 193, 7, 0.2), 0 2px 4px rgba(0, 0, 0, 0.1);
+        position: relative;
+        overflow: hidden;
+        animation: warningGlow 3s ease-in-out infinite;
+    }
+
+    .warning-note::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: -100%;
+        width: 100%;
+        height: 100%;
+        background: linear-gradient(90deg, transparent, rgba(255, 193, 7, 0.1), transparent);
+        animation: warningShimmer 4s infinite;
+    }
+
+    @@keyframes warningGlow {
+        0%, 100% {
+            box-shadow: 0 4px 12px rgba(255, 193, 7, 0.2), 0 2px 4px rgba(0, 0, 0, 0.1);
+        }
+        50% {
+            box-shadow: 0 6px 16px rgba(255, 193, 7, 0.3), 0 4px 8px rgba(0, 0, 0, 0.15);
+        }
+    }
+
+    @@keyframes warningShimmer {
+        0% { left: -100%; }
+        100% { left: 100%; }
+    }
+
+    .warning-icon {
+        flex-shrink: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 50px;
+        height: 50px;
+        background: linear-gradient(135deg, #ffc107 0%, #e0a800 100%);
+        border-radius: 50%;
+        box-shadow: 0 4px 12px rgba(255, 193, 7, 0.4);
+        animation: warningPulse 2s ease-in-out infinite;
+    }
+
+    @@keyframes warningPulse {
+        0%, 100% {
+            transform: scale(1);
+            box-shadow: 0 4px 12px rgba(255, 193, 7, 0.4);
+        }
+        50% {
+            transform: scale(1.05);
+            box-shadow: 0 6px 16px rgba(255, 193, 7, 0.6);
+        }
+    }
+
+    .warning-content {
+        flex: 1;
+        min-width: 0;
+    }
+
+    .warning-title {
+        color: #856404;
+        font-weight: 700;
+        font-size: 1.1rem;
+        margin: 0 0 0.5rem 0;
+        text-shadow: 0 1px 2px rgba(133, 100, 4, 0.1);
+    }
+
+    .warning-text {
+        color: #856404;
+        font-size: 0.95rem;
+        line-height: 1.5;
+        margin: 0;
+        font-weight: 500;
+    }
+
+    .warning-note:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 8px 20px rgba(255, 193, 7, 0.3), 0 4px 8px rgba(0, 0, 0, 0.15);
+        transition: all 0.3s ease;
+    }
+
+    .warning-note:hover .warning-icon {
+        animation: warningPulse 1s ease-in-out infinite;
+    }
+
     /* Enhanced button styling */
     .finish-conversation-btn {
         border-radius: 20px;