(apps/scrumboard) Dark mode fixes and tweaks

This commit is contained in:
sercan 2021-06-03 11:27:51 +03:00
parent c2dd77d7a3
commit ab3ad4fd2f
3 changed files with 8 additions and 8 deletions

View File

@ -1,7 +1,7 @@
<div <div
class="mt-11 w-64 py-2.5 px-2" class="mt-11 w-64 py-2.5 px-2"
[class.h-15]="!formVisible"> [class.h-15]="!formVisible">
<div class="relative flex w-full h-full overflow-hidden rounded-xl bg-gray-200"> <div class="relative flex w-full h-full overflow-hidden rounded-xl bg-gray-200 dark:bg-gray-700">
<button <button
class="absolute inset-0 justify-start w-full px-3 rounded-xl bg-transparent" class="absolute inset-0 justify-start w-full px-3 rounded-xl bg-transparent"
[ngClass]="{'opacity-0 pointer-events-none': formVisible}" [ngClass]="{'opacity-0 pointer-events-none': formVisible}"
@ -18,7 +18,7 @@
[ngClass]="{'opacity-0': !formVisible}" [ngClass]="{'opacity-0': !formVisible}"
[formGroup]="form"> [formGroup]="form">
<input <input
class="w-full py-2 px-3 leading-5 rounded-md shadow-sm border border-gray-300 bg-white focus:border-primary" class="w-full py-2 px-3 leading-5 rounded-md shadow-sm border border-gray-300 bg-white focus:border-primary dark:border-gray-500 dark:focus:border-primary dark:bg-black dark:bg-opacity-5"
[autocomplete]="'off'" [autocomplete]="'off'"
[formControlName]="'title'" [formControlName]="'title'"
[placeholder]="'Enter list title...'" [placeholder]="'Enter list title...'"

View File

@ -57,7 +57,7 @@
<div <div
class="flex items-center justify-between" class="flex items-center justify-between"
cdkDragHandle> cdkDragHandle>
<div class="flex items-center w-full py-2 px-3 rounded-md cursor-text border border-transparent focus-within:bg-white focus-within:shadow-sm focus-within:border-primary"> <div class="flex items-center w-full py-2 px-3 rounded-md cursor-text border border-transparent focus-within:bg-white focus-within:shadow-sm focus-within:border-primary dark:focus-within:bg-gray-900">
<input <input
class="w-full font-medium leading-5 bg-transparent" class="w-full font-medium leading-5 bg-transparent"
[spellcheck]="'false'" [spellcheck]="'false'"
@ -66,7 +66,7 @@
(keydown.enter)="listTitleInput.blur()" (keydown.enter)="listTitleInput.blur()"
#listTitleInput> #listTitleInput>
</div> </div>
<div class="flex items-center justify-center min-w-6 ml-4 text-sm font-semibold leading-6 rounded-full bg-gray-300 text-secondary"> <div class="flex items-center justify-center min-w-6 ml-4 text-sm font-semibold leading-6 rounded-full bg-gray-300 text-secondary dark:bg-gray-700">
{{list.cards.length}} {{list.cards.length}}
</div> </div>
<div class="ml-1"> <div class="ml-1">
@ -100,7 +100,7 @@
</div> </div>
<!-- Cards --> <!-- Cards -->
<div class="mt-2 rounded-xl bg-gray-400 bg-opacity-12"> <div class="mt-2 rounded-xl bg-gray-400 bg-opacity-12 dark:bg-transparent dark:border">
<div <div
[id]="list.id" [id]="list.id"
class="p-3 pb-0" class="p-3 pb-0"

View File

@ -16,7 +16,7 @@
<a <a
class="flex flex-col items-start w-56 p-6 rounded-lg shadow bg-card rounded-lg hover:shadow-xl transition-shadow duration-150 ease-in-out" class="flex flex-col items-start w-56 p-6 rounded-lg shadow bg-card rounded-lg hover:shadow-xl transition-shadow duration-150 ease-in-out"
[routerLink]="[board.id]"> [routerLink]="[board.id]">
<div class="flex items-center justify-center p-4 rounded-full bg-primary-50 text-primary-700"> <div class="flex items-center justify-center p-4 rounded-full bg-primary-50 text-primary-700 dark:bg-primary dark:text-on-primary">
<mat-icon <mat-icon
class="text-current" class="text-current"
[svgIcon]="board.icon"></mat-icon> [svgIcon]="board.icon"></mat-icon>
@ -31,12 +31,12 @@
<div class="flex items-center mt-6 -space-x-1.5"> <div class="flex items-center mt-6 -space-x-1.5">
<ng-container *ngFor="let member of board.members.slice(0, 5); trackBy: trackByFn"> <ng-container *ngFor="let member of board.members.slice(0, 5); trackBy: trackByFn">
<img <img
class="flex-0 w-8 h-8 rounded-full ring ring-offset-1 ring-bg-card ring-offset-bg-card object-cover" class="flex-0 w-8 h-8 rounded-full ring ring-offset-1 ring-bg-card ring-offset-transparent object-cover"
[src]="member.avatar" [src]="member.avatar"
alt="Member avatar"> alt="Member avatar">
</ng-container> </ng-container>
<ng-container *ngIf="board.members.length > 5"> <ng-container *ngIf="board.members.length > 5">
<div class="flex flex-0 items-center justify-center w-8 h-8 rounded-full ring ring-offset-1 ring-bg-card ring-offset-bg-card bg-gray-200 text-gray-500"> <div class="flex flex-0 items-center justify-center w-8 h-8 rounded-full ring ring-offset-1 ring-bg-card ring-offset-transparent bg-gray-200 text-gray-500">
<div class="text-md font-semibold"> <div class="text-md font-semibold">
+{{ board.members.slice(5).length }} +{{ board.members.slice(5).length }}
</div> </div>