From 5dd60c816c7cfafa38e0e3b20681c4c2e56e447a Mon Sep 17 00:00:00 2001
From: sercan <sercanyemen@gmail.com>
Date: Fri, 30 Apr 2021 19:39:02 +0300
Subject: [PATCH] (apps/chat) Small adjustments and tweaks for Dark mode

---
 .../apps/chat/chats/chats.component.html      |   2 +-
 .../contact-info/contact-info.component.html  | 137 +++++++++---------
 .../conversation/conversation.component.html  |   2 +-
 3 files changed, 71 insertions(+), 70 deletions(-)

diff --git a/src/app/modules/admin/apps/chat/chats/chats.component.html b/src/app/modules/admin/apps/chat/chats/chats.component.html
index db07453c..bcab6292 100644
--- a/src/app/modules/admin/apps/chat/chats/chats.component.html
+++ b/src/app/modules/admin/apps/chat/chats/chats.component.html
@@ -28,7 +28,7 @@
 
             <!-- Chats list -->
             <ng-container *ngIf="chats && chats.length > 0; else noChats">
-                <div class="relative flex flex-auto flex-col w-full min-w-0 lg:min-w-100 lg:max-w-100 border-r bg-card">
+                <div class="relative flex flex-auto flex-col w-full min-w-0 lg:min-w-100 lg:max-w-100 border-r bg-card dark:bg-transparent">
 
                     <!-- Header -->
                     <div class="flex flex-col flex-0 py-4 px-8 border-b bg-gray-50 dark:bg-transparent">
diff --git a/src/app/modules/admin/apps/chat/contact-info/contact-info.component.html b/src/app/modules/admin/apps/chat/contact-info/contact-info.component.html
index 556da3c7..9ea099c8 100644
--- a/src/app/modules/admin/apps/chat/contact-info/contact-info.component.html
+++ b/src/app/modules/admin/apps/chat/contact-info/contact-info.component.html
@@ -1,4 +1,4 @@
-<div class="flex flex-col flex-auto overflow-y-auto bg-card dark:bg-default">
+<div class="flex flex-col flex-auto h-full bg-card dark:bg-default">
 
     <!-- Header -->
     <div class="flex flex-0 items-center h-18 px-4 border-b bg-gray-50 dark:bg-transparent">
@@ -10,76 +10,77 @@
         <div class="ml-2 text-lg font-medium">Contact info</div>
     </div>
 
-    <!-- Contact avatar & info -->
-    <div class="flex flex-col items-center mt-8">
-        <div class="w-40 h-40 rounded-full">
-            <ng-container *ngIf="chat.contact.avatar">
-                <img
-                    class="w-full h-full rounded-full object-cover"
-                    [src]="chat.contact.avatar"
-                    [alt]="'Contact avatar'">
-            </ng-container>
-            <ng-container *ngIf="!chat.contact.avatar">
-                <div class="flex items-center justify-center w-full h-full rounded-full text-8xl font-semibold uppercase bg-gray-200 text-gray-600 dark:bg-gray-700 dark:text-gray-200">
-                    {{chat.contact.name.charAt(0)}}
-                </div>
-            </ng-container>
+    <div class="overflow-y-auto">
+        <!-- Contact avatar & info -->
+        <div class="flex flex-col items-center mt-8">
+            <div class="w-40 h-40 rounded-full">
+                <ng-container *ngIf="chat.contact.avatar">
+                    <img
+                        class="w-full h-full rounded-full object-cover"
+                        [src]="chat.contact.avatar"
+                        [alt]="'Contact avatar'">
+                </ng-container>
+                <ng-container *ngIf="!chat.contact.avatar">
+                    <div class="flex items-center justify-center w-full h-full rounded-full text-8xl font-semibold uppercase bg-gray-200 text-gray-600 dark:bg-gray-700 dark:text-gray-200">
+                        {{chat.contact.name.charAt(0)}}
+                    </div>
+                </ng-container>
+            </div>
+            <div class="mt-4 text-lg font-medium">{{chat.contact.name}}</div>
+            <div class="mt-0.5 text-md text-secondary">{{chat.contact.about}}</div>
         </div>
-        <div class="mt-4 text-lg font-medium">{{chat.contact.name}}</div>
-        <div class="mt-0.5 text-md text-secondary">{{chat.contact.about}}</div>
-    </div>
 
-    <div class="py-10 px-7">
-        <!-- Media -->
-        <div class="text-lg font-medium">Media</div>
-        <div class="grid grid-cols-4 gap-1 mt-4">
-            <ng-container *ngFor="let media of chat.contact.attachments.media">
-                <img
-                    class="h-20 rounded object-cover"
-                    [src]="media"/>
-            </ng-container>
-        </div>
-        <!-- Details -->
-        <div class="mt-10 space-y-4">
-            <div class="text-lg font-medium mb-3">Details</div>
-            <ng-container *ngIf="chat.contact.details.emails.length">
-                <div>
-                    <div class="font-medium">Email</div>
-                    <div class="">{{chat.contact.details.emails[0].email}}</div>
-                </div>
-            </ng-container>
-            <ng-container *ngIf="chat.contact.details.phoneNumbers.length">
-                <div>
-                    <div class="font-medium">Phone number</div>
-                    <div class="">{{chat.contact.details.phoneNumbers[0].number}}</div>
-                </div>
-            </ng-container>
-            <ng-container *ngIf="chat.contact.details.title">
-                <div>
-                    <div class="font-medium">Title</div>
-                    <div class="">{{chat.contact.details.title}}</div>
-                </div>
-            </ng-container>
-            <ng-container *ngIf="chat.contact.details.company">
-                <div>
-                    <div class="font-medium">Company</div>
-                    <div class="">{{chat.contact.details.company}}</div>
-                </div>
-            </ng-container>
-            <ng-container *ngIf="chat.contact.details.birthday">
-                <div>
-                    <div class="font-medium">Birthday</div>
-                    <div class="">{{chat.contact.details.birthday}}</div>
-                </div>
-            </ng-container>
-            <ng-container *ngIf="chat.contact.details.address">
-                <div>
-                    <div class="font-medium">Address</div>
-                    <div class="">{{chat.contact.details.address}}</div>
-                </div>
-            </ng-container>
+        <div class="py-10 px-7">
+            <!-- Media -->
+            <div class="text-lg font-medium">Media</div>
+            <div class="grid grid-cols-4 gap-1 mt-4">
+                <ng-container *ngFor="let media of chat.contact.attachments.media">
+                    <img
+                        class="h-20 rounded object-cover"
+                        [src]="media"/>
+                </ng-container>
+            </div>
+            <!-- Details -->
+            <div class="mt-10 space-y-4">
+                <div class="text-lg font-medium mb-3">Details</div>
+                <ng-container *ngIf="chat.contact.details.emails.length">
+                    <div>
+                        <div class="font-medium text-secondary">Email</div>
+                        <div class="">{{chat.contact.details.emails[0].email}}</div>
+                    </div>
+                </ng-container>
+                <ng-container *ngIf="chat.contact.details.phoneNumbers.length">
+                    <div>
+                        <div class="font-medium text-secondary">Phone number</div>
+                        <div class="">{{chat.contact.details.phoneNumbers[0].number}}</div>
+                    </div>
+                </ng-container>
+                <ng-container *ngIf="chat.contact.details.title">
+                    <div>
+                        <div class="font-medium text-secondary">Title</div>
+                        <div class="">{{chat.contact.details.title}}</div>
+                    </div>
+                </ng-container>
+                <ng-container *ngIf="chat.contact.details.company">
+                    <div>
+                        <div class="font-medium text-secondary">Company</div>
+                        <div class="">{{chat.contact.details.company}}</div>
+                    </div>
+                </ng-container>
+                <ng-container *ngIf="chat.contact.details.birthday">
+                    <div>
+                        <div class="font-medium text-secondary">Birthday</div>
+                        <div class="">{{chat.contact.details.birthday}}</div>
+                    </div>
+                </ng-container>
+                <ng-container *ngIf="chat.contact.details.address">
+                    <div>
+                        <div class="font-medium text-secondary">Address</div>
+                        <div class="">{{chat.contact.details.address}}</div>
+                    </div>
+                </ng-container>
+            </div>
         </div>
     </div>
 
-
 </div>
diff --git a/src/app/modules/admin/apps/chat/conversation/conversation.component.html b/src/app/modules/admin/apps/chat/conversation/conversation.component.html
index 136da840..9c3fa082 100644
--- a/src/app/modules/admin/apps/chat/conversation/conversation.component.html
+++ b/src/app/modules/admin/apps/chat/conversation/conversation.component.html
@@ -156,7 +156,7 @@
                 </div>
 
                 <!-- Message field -->
-                <div class="flex items-end p-4 border-t bg-gray-50">
+                <div class="flex items-end p-4 border-t bg-gray-50 dark:bg-transparent">
                     <div class="flex items-center h-11 my-px">
                         <button mat-icon-button>
                             <mat-icon [svgIcon]="'heroicons_outline:emoji-happy'"></mat-icon>