From 4400915e0c297b99cb005ac5bec9b27e7f65e791 Mon Sep 17 00:00:00 2001
From: Michael Shamoon <4887959+shamoon@users.noreply.github.com>
Date: Sat, 19 Feb 2022 22:40:27 -0800
Subject: [PATCH] bs5: form input spacing, renamed controls

---
 .../common/input/check/check.component.html      |  6 +++---
 .../common/input/color/color.component.html      |  2 +-
 .../common/input/date/date.component.html        | 16 +++++++---------
 .../common/input/number/number.component.html    |  8 +++-----
 .../common/input/select/select.component.html    | 16 +++++++---------
 .../common/input/tags/tags.component.html        | 16 +++++++---------
 .../common/input/text/text.component.html        |  4 ++--
 .../document-detail.component.html               |  2 +-
 8 files changed, 31 insertions(+), 39 deletions(-)

diff --git a/src-ui/src/app/components/common/input/check/check.component.html b/src-ui/src/app/components/common/input/check/check.component.html
index 27dbd6015..2c910ab8b 100644
--- a/src-ui/src/app/components/common/input/check/check.component.html
+++ b/src-ui/src/app/components/common/input/check/check.component.html
@@ -1,5 +1,5 @@
-<div class="form-group custom-control custom-checkbox">
-  <input type="checkbox" class="custom-control-input" [id]="inputId" [(ngModel)]="value" (change)="onChange(value)" (blur)="onTouched()" [disabled]="disabled">
-  <label class="custom-control-label" [for]="inputId">{{title}}</label>
+<div class="mb-3 form-check">
+  <input type="checkbox" class="form-check-input" [id]="inputId" [(ngModel)]="value" (change)="onChange(value)" (blur)="onTouched()" [disabled]="disabled">
+  <label class="form-check-label" [for]="inputId">{{title}}</label>
   <small *ngIf="hint" class="form-text text-muted">{{hint}}</small>
 </div>
diff --git a/src-ui/src/app/components/common/input/color/color.component.html b/src-ui/src/app/components/common/input/color/color.component.html
index 94c34dc00..595aba3ad 100644
--- a/src-ui/src/app/components/common/input/color/color.component.html
+++ b/src-ui/src/app/components/common/input/color/color.component.html
@@ -1,4 +1,4 @@
-<div class="form-group">
+<div class="mb-3">
   <label [for]="inputId">{{title}}</label>
 
   <div class="input-group" [class.is-invalid]="error">
diff --git a/src-ui/src/app/components/common/input/date/date.component.html b/src-ui/src/app/components/common/input/date/date.component.html
index 19f606a16..135bae411 100644
--- a/src-ui/src/app/components/common/input/date/date.component.html
+++ b/src-ui/src/app/components/common/input/date/date.component.html
@@ -1,15 +1,13 @@
-<div class="form-group">
-  <label [for]="inputId">{{title}}</label>
+<div class="mb-3">
+  <label class="form-label" [for]="inputId">{{title}}</label>
   <div class="input-group" [class.is-invalid]="error">
     <input class="form-control" [class.is-invalid]="error"  [placeholder]="placeholder" [id]="inputId" (dateSelect)="onChange(value)" (change)="onChange(value)"
            name="dp" [(ngModel)]="value" ngbDatepicker #datePicker="ngbDatepicker" #datePickerContent="ngModel">
-    <div class="input-group-append">
-      <button class="btn btn-outline-secondary calendar" (click)="datePicker.toggle()" type="button">
-        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-calendar" viewBox="0 0 16 16">
-          <path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z"/>
-        </svg>
-      </button>
-    </div>
+    <button class="btn btn-outline-secondary calendar" (click)="datePicker.toggle()" type="button">
+      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-calendar" viewBox="0 0 16 16">
+        <path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z"/>
+      </svg>
+    </button>
   </div>
   <div class="invalid-feedback" i18n>Invalid date.</div>
   <small *ngIf="hint" class="form-text text-muted">{{hint}}</small>
diff --git a/src-ui/src/app/components/common/input/number/number.component.html b/src-ui/src/app/components/common/input/number/number.component.html
index 821226b16..3e2cc8d86 100644
--- a/src-ui/src/app/components/common/input/number/number.component.html
+++ b/src-ui/src/app/components/common/input/number/number.component.html
@@ -1,10 +1,8 @@
-<div class="form-group">
-  <label [for]="inputId">{{title}}</label>
+<div class="mb-3">
+  <label class="form-label" [for]="inputId">{{title}}</label>
   <div class="input-group" [class.is-invalid]="error">
     <input type="number" class="form-control" [id]="inputId" [(ngModel)]="value" (change)="onChange(value)" [class.is-invalid]="error">
-    <div class="input-group-append">
-      <button class="btn btn-outline-secondary" type="button" id="button-addon1" (click)="nextAsn()" [disabled]="value">+1</button>
-    </div>
+    <button class="btn btn-outline-secondary" type="button" id="button-addon1" (click)="nextAsn()" [disabled]="value">+1</button>
   </div>
   <div class="invalid-feedback">
     {{error}}
diff --git a/src-ui/src/app/components/common/input/select/select.component.html b/src-ui/src/app/components/common/input/select/select.component.html
index 63795140f..afb551c46 100644
--- a/src-ui/src/app/components/common/input/select/select.component.html
+++ b/src-ui/src/app/components/common/input/select/select.component.html
@@ -1,5 +1,5 @@
-<div class="form-group paperless-input-select">
-  <label [for]="inputId">{{title}}</label>
+<div class="mb-3 paperless-input-select">
+  <label class="form-label" [for]="inputId">{{title}}</label>
     <div [class.input-group]="allowCreateNew">
       <ng-select name="inputId" [(ngModel)]="value"
         [disabled]="disabled"
@@ -18,13 +18,11 @@
         (clear)="clearLastSearchTerm()"
         (blur)="onBlur()">
       </ng-select>
-      <div *ngIf="allowCreateNew" class="input-group-append">
-        <button class="btn btn-outline-secondary" type="button" (click)="addItem()">
-          <svg class="buttonicon" fill="currentColor">
-            <use xlink:href="assets/bootstrap-icons.svg#plus" />
-          </svg>
-        </button>
-      </div>
+      <button *ngIf="allowCreateNew" class="btn btn-outline-secondary" type="button" (click)="addItem()">
+        <svg class="buttonicon" fill="currentColor">
+          <use xlink:href="assets/bootstrap-icons.svg#plus" />
+        </svg>
+      </button>
     </div>
   <small *ngIf="hint" class="form-text text-muted">{{hint}}</small>
   <small *ngIf="getSuggestions().length > 0">
diff --git a/src-ui/src/app/components/common/input/tags/tags.component.html b/src-ui/src/app/components/common/input/tags/tags.component.html
index ac2287cba..77e25d88d 100644
--- a/src-ui/src/app/components/common/input/tags/tags.component.html
+++ b/src-ui/src/app/components/common/input/tags/tags.component.html
@@ -1,5 +1,5 @@
-<div class="form-group paperless-input-select paperless-input-tags">
-  <label for="tags" i18n>Tags</label>
+<div class="mb-3 paperless-input-select paperless-input-tags">
+  <label class="form-label" for="tags" i18n>Tags</label>
 
   <div class="input-group flex-nowrap">
     <ng-select name="tags" [items]="tags" bindLabel="name" bindValue="id" [(ngModel)]="value"
@@ -31,13 +31,11 @@
       </ng-template>
     </ng-select>
 
-    <div class="input-group-append">
-      <button class="btn btn-outline-secondary" type="button" (click)="createTag()">
-        <svg class="buttonicon" fill="currentColor">
-          <use xlink:href="assets/bootstrap-icons.svg#plus" />
-        </svg>
-      </button>
-    </div>
+    <button class="btn btn-outline-secondary" type="button" (click)="createTag()">
+      <svg class="buttonicon" fill="currentColor">
+        <use xlink:href="assets/bootstrap-icons.svg#plus" />
+      </svg>
+    </button>
   </div>
   <small class="form-text text-muted" *ngIf="hint">{{hint}}</small>
   <small *ngIf="getSuggestions().length > 0">
diff --git a/src-ui/src/app/components/common/input/text/text.component.html b/src-ui/src/app/components/common/input/text/text.component.html
index 0c15c22a2..3f4136c11 100644
--- a/src-ui/src/app/components/common/input/text/text.component.html
+++ b/src-ui/src/app/components/common/input/text/text.component.html
@@ -1,5 +1,5 @@
-<div class="form-group">
-  <label [for]="inputId">{{title}}</label>
+<div class="mb-3">
+  <label class="form-label" [for]="inputId">{{title}}</label>
   <input #inputField type="text" class="form-control" [class.is-invalid]="error" [id]="inputId" [(ngModel)]="value" (change)="onChange(value)">
   <small *ngIf="hint" class="form-text text-muted">{{hint}}</small>
   <div class="invalid-feedback">
diff --git a/src-ui/src/app/components/document-detail/document-detail.component.html b/src-ui/src/app/components/document-detail/document-detail.component.html
index 4e47c0d7a..58356cf8d 100644
--- a/src-ui/src/app/components/document-detail/document-detail.component.html
+++ b/src-ui/src/app/components/document-detail/document-detail.component.html
@@ -71,7 +71,7 @@
                 <li [ngbNavItem]="2">
                     <a ngbNavLink i18n>Content</a>
                     <ng-template ngbNavContent>
-                        <div class="form-group">
+                        <div class="mb-3">
                             <textarea class="form-control" id="content" rows="20" formControlName='content'></textarea>
                         </div>
                     </ng-template>