From 14ed18f0a0cb4975d7de9770ac0217989015fcbe Mon Sep 17 00:00:00 2001
From: "Patrik J. Braun" <bra.patrik@gmail.com>
Date: Tue, 14 Mar 2023 23:30:14 +0100
Subject: [PATCH] Improve duplicates theme #587 #68 #140

---
 .../app/ui/duplicates/duplicates.component.css         |  5 +----
 .../app/ui/duplicates/duplicates.component.html        | 10 +++++-----
 2 files changed, 6 insertions(+), 9 deletions(-)

diff --git a/src/frontend/app/ui/duplicates/duplicates.component.css b/src/frontend/app/ui/duplicates/duplicates.component.css
index c2783908..6fbd1579 100644
--- a/src/frontend/app/ui/duplicates/duplicates.component.css
+++ b/src/frontend/app/ui/duplicates/duplicates.component.css
@@ -8,9 +8,6 @@
 }
 
 .row:hover {
-  background-color: #f8f9fa;
+  background-color: var(--bs-tertiary-bg);
 }
 
-a {
-  color: #212529;
-}
diff --git a/src/frontend/app/ui/duplicates/duplicates.component.html b/src/frontend/app/ui/duplicates/duplicates.component.html
index 9ed2047a..e1044534 100644
--- a/src/frontend/app/ui/duplicates/duplicates.component.html
+++ b/src/frontend/app/ui/duplicates/duplicates.component.html
@@ -13,17 +13,17 @@
         <div *ngFor="let pairs of group.duplicates" class="card">
           <div class="card-body">
             <a *ngFor="let media of pairs.media"
-               class="row"
+               class="row text-body rounded-2 p-2"
                [routerLink]="['/gallery', getDirectoryPath(media.directory)]"
                [queryParams]="queryService.getParams()">
-              <app-duplicates-photo class="col-1" [media]="media"></app-duplicates-photo>
-              <div class="col-6">
+              <app-duplicates-photo class="col-1 align-self-center" [media]="media"></app-duplicates-photo>
+              <div class="col-6 align-self-center">
                 /{{getDirectoryPath(media.directory)}}/<strong>{{media.name}}</strong>
               </div>
-              <div class="col-2">
+              <div class="col-2 align-self-center">
                 {{media.metadata.fileSize | fileSize}}
               </div>
-              <div class="col-3" [title]="media.metadata.creationDate">
+              <div class="col-3 align-self-center" [title]="media.metadata.creationDate">
                 {{media.metadata.creationDate | date}}, {{media.metadata.creationDate | date:'mediumTime'}}
               </div>
             </a>