From a9ebaab167452edbd65059cccc1f294a7afbdff5 Mon Sep 17 00:00:00 2001
From: shamoon <4887959+shamoon@users.noreply.github.com>
Date: Tue, 25 Feb 2025 12:50:11 -0800
Subject: [PATCH] Obsessing over styling

---
 .../system-status-dialog.component.html       | 22 +++++++++----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/src-ui/src/app/components/common/system-status-dialog/system-status-dialog.component.html b/src-ui/src/app/components/common/system-status-dialog/system-status-dialog.component.html
index aa890fa92..94c4ef22d 100644
--- a/src-ui/src/app/components/common/system-status-dialog/system-status-dialog.component.html
+++ b/src-ui/src/app/components/common/system-status-dialog/system-status-dialog.component.html
@@ -46,7 +46,7 @@
               <dd>{{status.database.type}}</dd>
               <dt i18n>Status</dt>
               <dd>
-                <button class="btn btn-sm btn-dark text-uppercase small" [ngbPopover]="databaseStatus" triggers="click mouseenter:mouseleave">
+                <button class="btn btn-sm d-flex align-items-center btn-dark text-uppercase small" [ngbPopover]="databaseStatus" triggers="click mouseenter:mouseleave">
                   {{status.database.status}}
                   @if (status.database.status === 'OK') {
                     <i-bs name="check-circle-fill" class="text-primary ms-2 lh-1"></i-bs>
@@ -64,7 +64,7 @@
               </dd>
               <dt i18n>Migration Status</dt>
               <dd>
-                <button class="btn btn-sm btn-dark text-uppercase small" [ngbPopover]="migrationStatus" triggers="click mouseenter:mouseleave">
+                <button class="btn btn-sm d-flex align-items-center btn-dark text-uppercase small" [ngbPopover]="migrationStatus" triggers="click mouseenter:mouseleave">
                   @if (status.database.migration_status.unapplied_migrations.length === 0) {
                     <ng-container i18n>Up to date</ng-container><i-bs name="check-circle-fill" class="text-primary ms-2 lh-1"></i-bs>
                   } @else {
@@ -97,7 +97,7 @@
             <dl class="card-text">
               <dt i18n>Redis Status</dt>
               <dd>
-                <button class="btn btn-sm btn-dark text-uppercase small" [ngbPopover]="redisStatus" triggers="click mouseenter:mouseleave">
+                <button class="btn btn-sm d-flex align-items-center btn-dark text-uppercase small" [ngbPopover]="redisStatus" triggers="click mouseenter:mouseleave">
                   {{status.tasks.redis_status}}
                   @if (status.tasks.redis_status === 'OK') {
                     <i-bs name="check-circle-fill" class="text-primary ms-2 lh-1"></i-bs>
@@ -115,7 +115,7 @@
               </dd>
               <dt i18n>Celery Status</dt>
               <dd>
-                <button class="btn btn-sm btn-dark text-uppercase small" [ngbPopover]="celeryStatus" triggers="click mouseenter:mouseleave">
+                <button class="btn btn-sm d-flex align-items-center btn-dark text-uppercase small" [ngbPopover]="celeryStatus" triggers="click mouseenter:mouseleave">
                   {{status.tasks.celery_status}}
                   @if (status.tasks.celery_status === 'OK') {
                     <i-bs name="check-circle-fill" class="text-primary ms-2 lh-1"></i-bs>
@@ -145,7 +145,7 @@
             <dl class="card-text">
               <dt i18n>Search Index</dt>
               <dd class="d-flex align-items-center">
-                <button class="btn btn-sm btn-dark text-uppercase small" [ngbPopover]="indexStatus" triggers="click mouseenter:mouseleave">
+                <button class="btn btn-sm d-flex align-items-center btn-dark text-uppercase small" [ngbPopover]="indexStatus" triggers="click mouseenter:mouseleave">
                   {{status.tasks.index_status}}
                   @if (status.tasks.index_status === 'OK') {
                     @if (isStale(status.tasks.index_last_modified)) {
@@ -161,7 +161,7 @@
                   @if (isRunning(PaperlessTaskName.IndexOptimize)) {
                     <div class="spinner-border spinner-border-sm ms-2" role="status"></div>
                   } @else {
-                    <button class="btn btn-sm btn-dark small ms-2" (click)="runTask(PaperlessTaskName.IndexOptimize)">
+                    <button class="btn btn-sm d-flex align-items-center btn-dark small ms-2" (click)="runTask(PaperlessTaskName.IndexOptimize)">
                       <i-bs name="play-fill"></i-bs>&nbsp;
                       <ng-container i18n>Run Task</ng-container>
                     </button>
@@ -177,7 +177,7 @@
               </ng-template>
               <dt i18n>Classifier</dt>
               <dd class="d-flex align-items-center">
-                <button class="btn btn-sm btn-dark text-uppercase small" [ngbPopover]="classifierStatus" triggers="click mouseenter:mouseleave">
+                <button class="btn btn-sm d-flex align-items-center btn-dark text-uppercase small" [ngbPopover]="classifierStatus" triggers="click mouseenter:mouseleave">
                   {{status.tasks.classifier_status}}
                   @if (status.tasks.classifier_status === 'OK') {
                     @if (isStale(status.tasks.classifier_last_trained)) {
@@ -195,7 +195,7 @@
                   @if (isRunning(PaperlessTaskName.TrainClassifier)) {
                     <div class="spinner-border spinner-border-sm ms-2" role="status"></div>
                   } @else {
-                    <button class="btn btn-sm btn-dark small ms-2" (click)="runTask(PaperlessTaskName.TrainClassifier)">
+                    <button class="btn btn-sm d-flex align-items-center btn-dark small ms-2" (click)="runTask(PaperlessTaskName.TrainClassifier)">
                       <i-bs name="play-fill"></i-bs>&nbsp;
                       <ng-container i18n>Run Task</ng-container>
                     </button>
@@ -211,7 +211,7 @@
               </ng-template>
               <dt i18n>Sanity Checker</dt>
               <dd class="d-flex align-items-center">
-                <button class="btn btn-sm btn-dark text-uppercase small" [ngbPopover]="sanityCheckerStatus" triggers="click mouseenter:mouseleave">
+                <button class="btn btn-sm d-flex align-items-center btn-dark text-uppercase small" [ngbPopover]="sanityCheckerStatus" triggers="click mouseenter:mouseleave">
                   {{status.tasks.sanity_check_status}}
                   @if (status.tasks.sanity_check_status === 'OK') {
                     @if (isStale(status.tasks.sanity_check_last_run)) {
@@ -229,7 +229,7 @@
                   @if (isRunning(PaperlessTaskName.SanityCheck)) {
                     <div class="spinner-border spinner-border-sm ms-2" role="status"></div>
                   } @else {
-                    <button class="btn btn-sm btn-dark small ms-2" (click)="runTask(PaperlessTaskName.SanityCheck)">
+                    <button class="btn btn-sm d-flex align-items-center btn-dark small ms-2" (click)="runTask(PaperlessTaskName.SanityCheck)">
                       <i-bs name="play-fill"></i-bs>&nbsp;
                       <ng-container i18n>Run Task</ng-container>
                     </button>
@@ -251,7 +251,7 @@
   }
 </div>
 <div class="modal-footer">
-  <button class="btn btn-sm btn-dark btn btn-sm btn-dark btn-outline-secondary" (click)="copy()">
+  <button class="btn btn-sm d-flex align-items-center btn-dark btn btn-sm d-flex align-items-center btn-dark btn-outline-secondary" (click)="copy()">
     @if (!copied) {
       <i-bs name="clipboard-fill"></i-bs>&nbsp;
     }