(apps/chat) Small adjustments and tweaks for Dark mode

This commit is contained in:
sercan 2021-04-30 19:39:02 +03:00
parent 0ac967a945
commit 5dd60c816c
3 changed files with 71 additions and 70 deletions

View File

@ -28,7 +28,7 @@
<!-- Chats list --> <!-- Chats list -->
<ng-container *ngIf="chats && chats.length > 0; else noChats"> <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 --> <!-- Header -->
<div class="flex flex-col flex-0 py-4 px-8 border-b bg-gray-50 dark:bg-transparent"> <div class="flex flex-col flex-0 py-4 px-8 border-b bg-gray-50 dark:bg-transparent">

View File

@ -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 --> <!-- Header -->
<div class="flex flex-0 items-center h-18 px-4 border-b bg-gray-50 dark:bg-transparent"> <div class="flex flex-0 items-center h-18 px-4 border-b bg-gray-50 dark:bg-transparent">
@ -10,6 +10,7 @@
<div class="ml-2 text-lg font-medium">Contact info</div> <div class="ml-2 text-lg font-medium">Contact info</div>
</div> </div>
<div class="overflow-y-auto">
<!-- Contact avatar & info --> <!-- Contact avatar & info -->
<div class="flex flex-col items-center mt-8"> <div class="flex flex-col items-center mt-8">
<div class="w-40 h-40 rounded-full"> <div class="w-40 h-40 rounded-full">
@ -44,42 +45,42 @@
<div class="text-lg font-medium mb-3">Details</div> <div class="text-lg font-medium mb-3">Details</div>
<ng-container *ngIf="chat.contact.details.emails.length"> <ng-container *ngIf="chat.contact.details.emails.length">
<div> <div>
<div class="font-medium">Email</div> <div class="font-medium text-secondary">Email</div>
<div class="">{{chat.contact.details.emails[0].email}}</div> <div class="">{{chat.contact.details.emails[0].email}}</div>
</div> </div>
</ng-container> </ng-container>
<ng-container *ngIf="chat.contact.details.phoneNumbers.length"> <ng-container *ngIf="chat.contact.details.phoneNumbers.length">
<div> <div>
<div class="font-medium">Phone number</div> <div class="font-medium text-secondary">Phone number</div>
<div class="">{{chat.contact.details.phoneNumbers[0].number}}</div> <div class="">{{chat.contact.details.phoneNumbers[0].number}}</div>
</div> </div>
</ng-container> </ng-container>
<ng-container *ngIf="chat.contact.details.title"> <ng-container *ngIf="chat.contact.details.title">
<div> <div>
<div class="font-medium">Title</div> <div class="font-medium text-secondary">Title</div>
<div class="">{{chat.contact.details.title}}</div> <div class="">{{chat.contact.details.title}}</div>
</div> </div>
</ng-container> </ng-container>
<ng-container *ngIf="chat.contact.details.company"> <ng-container *ngIf="chat.contact.details.company">
<div> <div>
<div class="font-medium">Company</div> <div class="font-medium text-secondary">Company</div>
<div class="">{{chat.contact.details.company}}</div> <div class="">{{chat.contact.details.company}}</div>
</div> </div>
</ng-container> </ng-container>
<ng-container *ngIf="chat.contact.details.birthday"> <ng-container *ngIf="chat.contact.details.birthday">
<div> <div>
<div class="font-medium">Birthday</div> <div class="font-medium text-secondary">Birthday</div>
<div class="">{{chat.contact.details.birthday}}</div> <div class="">{{chat.contact.details.birthday}}</div>
</div> </div>
</ng-container> </ng-container>
<ng-container *ngIf="chat.contact.details.address"> <ng-container *ngIf="chat.contact.details.address">
<div> <div>
<div class="font-medium">Address</div> <div class="font-medium text-secondary">Address</div>
<div class="">{{chat.contact.details.address}}</div> <div class="">{{chat.contact.details.address}}</div>
</div> </div>
</ng-container> </ng-container>
</div> </div>
</div> </div>
</div>
</div> </div>

View File

@ -156,7 +156,7 @@
</div> </div>
<!-- Message field --> <!-- 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"> <div class="flex items-center h-11 my-px">
<button mat-icon-button> <button mat-icon-button>
<mat-icon [svgIcon]="'heroicons_outline:emoji-happy'"></mat-icon> <mat-icon [svgIcon]="'heroicons_outline:emoji-happy'"></mat-icon>