From beb20bd038ca6f1773313d3b663b6ba2480ffd74 Mon Sep 17 00:00:00 2001
From: shamoon <4887959+shamoon@users.noreply.github.com>
Date: Mon, 15 Jan 2024 22:37:04 -0800
Subject: [PATCH] Fix some alignment, smaller icons

---
 .../document-card-large.component.html        | 35 ++++++++-----------
 .../document-card-small.component.html        | 14 ++++----
 .../document-list.component.html              |  2 +-
 3 files changed, 22 insertions(+), 29 deletions(-)

diff --git a/src-ui/src/app/components/document-list/document-card-large/document-card-large.component.html b/src-ui/src/app/components/document-list/document-card-large/document-card-large.component.html
index 2f44fa57a..405e60487 100644
--- a/src-ui/src/app/components/document-list/document-card-large/document-card-large.component.html
+++ b/src-ui/src/app/components/document-list/document-card-large/document-card-large.component.html
@@ -70,29 +70,25 @@
 
                   <div class="list-group list-group-horizontal border-0 card-info ms-md-auto mt-2 mt-md-0">
                     @if (notesEnabled && document.notes.length) {
-                      <button routerLink="/documents/{{document.id}}/notes" class="list-group-item btn btn-sm bg-light text-dark p-1 border-0 me-2" title="View notes" i18n-title>
-                        <i-bs class="metadata-icon me-2 text-muted" name="chat-left-text"></i-bs>
-                        <small i18n>{{document.notes.length}} Notes</small>
+                      <button routerLink="/documents/{{document.id}}/notes" class="list-group-item btn btn-sm bg-light text-dark p-1 border-0 me-2 d-flex align-items-center" title="View notes" i18n-title>
+                        <i-bs width="09.rem" height="0.9rem" class="me-2 text-muted" name="chat-left-text"></i-bs><small i18n>{{document.notes.length}} Notes</small>
                       </button>
                     }
                     @if (document.document_type) {
-                      <button type="button" class="list-group-item btn btn-sm bg-light text-dark p-1 border-0 me-2" title="Filter by document type" i18n-title
+                      <button type="button" class="list-group-item btn btn-sm bg-light text-dark p-1 border-0 me-2 d-flex align-items-center" title="Filter by document type" i18n-title
                         (click)="clickDocumentType.emit(document.document_type);$event.stopPropagation()">
-                        <i-bs class="metadata-icon me-2 text-muted" name="file-earmark"></i-bs>
-                        <small>{{(document.document_type$ | async)?.name}}</small>
+                        <i-bs width="09.rem" height="0.9rem" class="me-2 text-muted" name="file-earmark"></i-bs><small>{{(document.document_type$ | async)?.name}}</small>
                       </button>
                     }
                     @if (document.storage_path) {
-                      <button type="button" class="list-group-item btn btn-sm bg-light text-dark p-1 border-0 me-2" title="Filter by storage path" i18n-title
+                      <button type="button" class="list-group-item btn btn-sm bg-light text-dark p-1 border-0 me-2 d-flex align-items-center" title="Filter by storage path" i18n-title
                         (click)="clickStoragePath.emit(document.storage_path);$event.stopPropagation()">
-                        <i-bs class="metadata-icon me-2 text-muted" name="archive"></i-bs>
-                        <small>{{(document.storage_path$ | async)?.name}}</small>
+                        <i-bs width="09.rem" height="0.9rem" class="me-2 text-muted" name="archive"></i-bs><small>{{(document.storage_path$ | async)?.name}}</small>
                       </button>
                     }
                     @if (document.archive_serial_number | isNumber) {
-                      <div class="list-group-item me-2 bg-light text-dark p-1 border-0">
-                        <i-bs class="metadata-icon me-2 text-muted" name="upc-scan"></i-bs>
-                        <small>#{{document.archive_serial_number}}</small>
+                      <div class="list-group-item me-2 bg-light text-dark p-1 border-0 d-flex align-items-center">
+                        <i-bs width="09.rem" height="0.9rem" class="me-2 text-muted" name="upc-scan"></i-bs><small>#{{document.archive_serial_number}}</small>
                       </div>
                     }
                     <ng-template #dateTooltip>
@@ -102,20 +98,17 @@
                         <span i18n>Modified: {{ document.modified | customDate }}</span>
                       </div>
                     </ng-template>
-                    <div class="list-group-item bg-light text-dark p-1 border-0" [ngbTooltip]="dateTooltip">
-                      <i-bs class="metadata-icon me-2 text-muted" name="calendar-event"></i-bs>
-                      <small>{{document.created_date | customDate:'mediumDate'}}</small>
+                    <div class="list-group-item bg-light text-dark p-1 border-0 d-flex align-items-center" [ngbTooltip]="dateTooltip">
+                      <i-bs width="09.rem" height="0.9rem" class="me-2 text-muted" name="calendar-event"></i-bs><small>{{document.created_date | customDate:'mediumDate'}}</small>
                     </div>
                     @if (document.owner && document.owner !== settingsService.currentUser.id) {
-                      <div class="list-group-item bg-light text-dark p-1 border-0">
-                        <i-bs class="metadata-icon me-2 text-muted" name="person-fill-lock"></i-bs>
-                        <small>{{document.owner | username}}</small>
+                      <div class="list-group-item bg-light text-dark p-1 border-0 d-flex align-items-center">
+                        <i-bs width="09.rem" height="0.9rem" class="me-2 text-muted" name="person-fill-lock"></i-bs><small>{{document.owner | username}}</small>
                       </div>
                     }
                     @if (document.is_shared_by_requester) {
-                      <div class="list-group-item bg-light text-dark p-1 border-0">
-                        <i-bs class="metadata-icon me-2 text-muted" name="people-fill"></i-bs>
-                        <small i18n>Shared</small>
+                      <div class="list-group-item bg-light text-dark p-1 border-0 d-flex align-items-center">
+                        <i-bs width="09.rem" height="0.9rem" class="me-2 text-muted" name="people-fill"></i-bs><small i18n>Shared</small>
                       </div>
                     }
                     @if (document.__search_hit__?.score) {
diff --git a/src-ui/src/app/components/document-list/document-card-small/document-card-small.component.html b/src-ui/src/app/components/document-list/document-card-small/document-card-small.component.html
index 9864af55a..cdbd88825 100644
--- a/src-ui/src/app/components/document-list/document-card-small/document-card-small.component.html
+++ b/src-ui/src/app/components/document-list/document-card-small/document-card-small.component.html
@@ -25,7 +25,7 @@
     @if (notesEnabled && document.notes.length) {
       <a routerLink="/documents/{{document.id}}/notes" class="document-card-notes py-2 px-1">
         <span class="badge rounded-pill bg-light border text-primary">
-          <i-bs class="metadata-icon ms-1 me-1" name="chat-left-text"></i-bs>
+          <i-bs width="0.9rem" height="0.9rem" class="ms-1 me-1" name="chat-left-text"></i-bs>
         {{document.notes.length}}</span>
       </a>
     }
@@ -43,14 +43,14 @@
         @if (document.document_type) {
           <button type="button" class="list-group-item list-group-item-action bg-transparent ps-0 p-1 border-0" title="Toggle document type filter" i18n-title
             (click)="clickDocumentType.emit(document.document_type);$event.stopPropagation()">
-            <i-bs class="metadata-icon me-2 text-muted" name="file-earmark"></i-bs>
+            <i-bs width="0.9rem" height="0.9rem" class="me-2 text-muted" name="file-earmark"></i-bs>
             <small>{{(document.document_type$ | async)?.name ?? privateName}}</small>
           </button>
         }
         @if (document.storage_path) {
           <button type="button" class="list-group-item list-group-item-action bg-transparent ps-0 p-1 border-0" title="Toggle storage path filter" i18n-title
             (click)="clickStoragePath.emit(document.storage_path);$event.stopPropagation()">
-            <i-bs class="metadata-icon me-2 text-muted" name="folder"></i-bs>
+            <i-bs width="0.9rem" height="0.9rem" class="me-2 text-muted" name="folder"></i-bs>
             <small>{{(document.storage_path$ | async)?.name ?? privateName}}</small>
           </button>
         }
@@ -63,25 +63,25 @@
             </div>
           </ng-template>
           <div class="ps-0 p-1" placement="top" [ngbTooltip]="dateTooltip">
-            <i-bs class="metadata-icon me-2 text-muted" name="calendar-event"></i-bs>
+            <i-bs width="0.9rem" height="0.9rem" class="me-2 text-muted" name="calendar-event"></i-bs>
             <small>{{document.created_date | customDate:'mediumDate'}}</small>
           </div>
         </div>
         @if (document.archive_serial_number | isNumber) {
           <div class="ps-0 p-1">
-            <i-bs class="metadata-icon me-2 text-muted" name="upc-scan"></i-bs>
+            <i-bs width="0.9rem" height="0.9rem" class="me-2 text-muted" name="upc-scan"></i-bs>
             <small>#{{document.archive_serial_number}}</small>
           </div>
         }
         @if (document.owner && document.owner !== settingsService.currentUser.id) {
           <div class="ps-0 p-1">
-            <i-bs class="metadata-icon me-2 text-muted" name="person-fill-lock"></i-bs>
+            <i-bs width="0.9rem" height="0.9rem" class="me-2 text-muted" name="person-fill-lock"></i-bs>
             <small>{{document.owner | username}}</small>
           </div>
         }
         @if (document.is_shared_by_requester) {
           <div class="ps-0 p-1">
-            <i-bs class="metadata-icon me-2 text-muted" name="people-fill"></i-bs>
+            <i-bs width="0.9rem" height="0.9rem" class="me-2 text-muted" name="people-fill"></i-bs>
             <small i18n>Shared</small>
           </div>
         }
diff --git a/src-ui/src/app/components/document-list/document-list.component.html b/src-ui/src/app/components/document-list/document-list.component.html
index c4df1728a..5de7ff6e7 100644
--- a/src-ui/src/app/components/document-list/document-list.component.html
+++ b/src-ui/src/app/components/document-list/document-list.component.html
@@ -232,7 +232,7 @@
                   @if (d.notes.length) {
                     <a routerLink="/documents/{{d.id}}/notes" class="btn btn-sm p-0">
                       <span class="badge rounded-pill bg-light border text-primary">
-                        <i-bs class="metadata-icon ms-1 me-1" name="chat-left-text"></i-bs>
+                        <i-bs width="0.9rem" height="0.9rem" class="ms-1 me-1" name="chat-left-text"></i-bs>
                       {{d.notes.length}}</span>
                     </a>
                   }