mirror of
https://github.com/richard-loafle/fuse-angular.git
synced 2024-10-30 01:08:47 +00:00
(apps/chat) Small adjustments and tweaks for Dark mode
This commit is contained in:
sercan
parent
0ac967a945
commit
5dd60c816c
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user