many layout and theme changes

src-ui/src/app/components/app-frame/app-frame.component.html

@@ -1,24 +1,14 @@
-<nav class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0 shadow">
+<nav class="navbar navbar-dark sticky-top bg-primary flex-md-nowrap p-0 shadow">
   <span class="navbar-brand col-md-3 col-lg-2 mr-0 px-3" href="#">Paperless-ng</span>
   <button class="navbar-toggler position-absolute d-md-none collapsed" type="button" data-toggle="collapse"
     data-target="#sidebarMenu" aria-controls="sidebarMenu" aria-expanded="false" aria-label="Toggle navigation"
     (click)="isMenuCollapsed = !isMenuCollapsed">
     <span class="navbar-toggler-icon"></span>
   </button>
-  <form (ngSubmit)="search()" class="w-100">
+  <form (ngSubmit)="search()" class="w-100 m-1">
     <input class="form-control form-control-dark" type="text" placeholder="Search" aria-label="Search"
       [formControl]="searchField" [ngbTypeahead]="searchAutoComplete" (selectItem)="itemSelected($event)">
   </form>
-  <ul class="navbar-nav px-3">
-    <li class="nav-item text-nowrap">
-      <a class="nav-link" href="accounts/logout/">
-        <svg class="buttonicon" fill="currentColor">
-          <use xlink:href="assets/bootstrap-icons.svg#door-closed"/>
-        </svg>
-        Logout
-      </a>
-    </li>
-  </ul>
 </nav>
 
 <div class="container-fluid">
@@ -151,7 +141,15 @@
               <svg class="sidebaricon" fill="currentColor">
                 <use xlink:href="assets/bootstrap-icons.svg#link"/>
               </svg>
-              Github
+              GitHub
+            </a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" href="accounts/logout/">
+              <svg class="sidebaricon" fill="currentColor">
+                <use xlink:href="assets/bootstrap-icons.svg#door-open"/>
+              </svg>
+              Logout
             </a>
           </li>
         </ul>

src-ui/src/app/components/app-frame/app-frame.component.scss

@@ -1,4 +1,6 @@
 
+@import "/src/theme";
+
   /*
  * Sidebar
  */
@@ -15,14 +17,15 @@
 
 @media (max-width: 767.98px) {
   .sidebar {
-    top: 5rem;
+    top: 3rem;
   }
 }
 
 .sidebar-sticky {
   position: relative;
   top: 0;
-  height: calc(100vh - 48px);
+  /* height: calc(100vh - 48px); */
+  height: 100%;
   padding-top: .5rem;
   overflow-x: hidden;
   overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
@@ -46,7 +49,7 @@
 }
 
 .sidebar .nav-link.active {
-  color: #007bff;
+  color: $primary;
 }
 
 .sidebar .nav-link:hover .sidebaricon,

src-ui/src/app/components/common/input/check/check.component.html

@@ -1,5 +1,5 @@
-<div class="form-group form-check">
+<div class="form-group custom-control custom-checkbox">
-  <input type="checkbox" class="form-check-input" [id]="inputId" [(ngModel)]="value" (change)="onChange(value)" (blur)="onTouched()" [disabled]="disabled">
+  <input type="checkbox" class="custom-control-input" [id]="inputId" [(ngModel)]="value" (change)="onChange(value)" (blur)="onTouched()" [disabled]="disabled">
-  <label class="form-check-label" [for]="inputId">{{title}}</label>
+  <label class="custom-control-label" [for]="inputId">{{title}}</label>
   <small *ngIf="hint" class="form-text text-muted">{{hint}}</small>
 </div>

src-ui/src/app/components/common/page-header/page-header.component.html

@@ -1,6 +1,7 @@
 <div class="row pt-3 pb-1 mb-3 border-bottom align-items-center" >
-  <div class="col text-truncate">
+  <div class="col-md text-truncate">
-    <h1 class="h2 text-truncate" style="line-height: 1.4">{{title}}</h1>
+    <p class="h2 text-truncate" style="line-height: 1.4">{{title}}</p>
+    <p *ngIf="subTitle" class="h5 text-truncate" style="line-height: 1.4">{{subTitle}}</p>
   </div>
   <div class="btn-toolbar col-auto">
     <ng-content></ng-content>

src-ui/src/app/components/common/page-header/page-header.component.ts

@@ -12,6 +12,9 @@ export class PageHeaderComponent implements OnInit {
   @Input()
   title: string = ""
 
+  @Input()
+  subTitle: string = ""
+
   ngOnInit(): void {
   }
 

src-ui/src/app/components/dashboard/dashboard.component.html

@@ -1,50 +1,74 @@
-
+<app-page-header title="Dashboard" subTitle="Welcome to paperless-ng!">
-<app-page-header title="Dashboard">
+  <img src="assets/logo.svg" height="80" class="m-2">
 </app-page-header>
 
-<p>Welcome to paperless-ng!</p>
-
 <div class='row'>
   <div class="col-lg">
     <ng-container *ngFor="let v of savedDashboardViews">
-      <h4>{{v.viewConfig.title}}</h4>
 
-      <table class="table table-sm table-hover table-borderless">
+      <div class="card mb-3">
-        <thead>
+        <div class="card-header">
-        <tr>
+          <h5 class="card-title mb-0">{{v.viewConfig.title}}</h5>
-          <th>Created</th>
+        </div>
-          <th scope="col">Title</th>
+        <div class="card-body text-dark">
-        </tr>
-        </thead>
-        <tbody>
-          <tr *ngFor="let doc of v.documents" routerLink="/documents/{{doc.id}}">
-            <td>{{doc.created | date}}</td>
-            <td>{{doc.title}}<app-tag [tag]="t" *ngFor="let t of doc.tags" class="ml-1"></app-tag>
-          </tr>
-        </tbody>
-      </table>
 
+          <table class="table table-sm table-hover table-borderless">
+            <thead>
+              <tr>
+                <th>Created</th>
+                <th scope="col">Title</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr *ngFor="let doc of v.documents" routerLink="/documents/{{doc.id}}">
+                <td>{{doc.created | date}}</td>
+                <td>{{doc.title}}<app-tag [tag]="t" *ngFor="let t of doc.tags" class="ml-1"></app-tag>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
     </ng-container>
     <ng-container *ngIf="savedDashboardViews.length == 0">
-      <h4>Saved views</h4>
+      <div class="card mb-3">
-      <p>This space is reserved to display your saved views. Go to your documents and save a view to have it displayed here!</p>
+        <div class="card-header">
+          <h5 class="card-title mb-0">Saved views</h5>
+        </div>
+        <div class="card-body text-dark">
+          <p class="card-text">This space is reserved to display your saved views. Go to your documents and save a view
+            to have it displayed
+            here!</p>
+        </div>
+      </div>
+
     </ng-container>
 
   </div>
   <div class="col-lg">
-    <h4>Statistics</h4>
-    <p>Documents in inbox: {{statistics.documents_inbox}}</p>
-    <p>Total documents: {{statistics.documents_total}}</p>
-    <h4>Upload new Document</h4>
-    <form>
-      <ngx-file-drop
-        dropZoneLabel="Drop documents here"
-        (onFileDrop)="dropped($event)"
-        (onFileOver)="fileOver($event)"
-        (onFileLeave)="fileLeave($event)"
-        dropZoneClassName="bg-light mt-4 card">
 
-      </ngx-file-drop>
+    <div class="card mb-3">
-    </form>
+      <div class="card-header">
+        <h5 class="card-title mb-0">Statistics</h5>
+      </div>
+      <div class="card-body text-dark">
+        <p class="card-text">Documents in inbox: {{statistics.documents_inbox}}</p>
+        <p class="card-text">Total documents: {{statistics.documents_total}}</p>
+      </div>
+    </div>
+
+    <div class="card mb-3">
+      <div class="card-header">
+        <h5 class="card-title mb-0">Upload new documents</h5>
+      </div>
+      <div class="card-body text-dark">
+        <form>
+          <ngx-file-drop dropZoneLabel="Drop documents here" (onFileDrop)="dropped($event)"
+            (onFileOver)="fileOver($event)" (onFileLeave)="fileLeave($event)" dropZoneClassName="bg-light mt-4 card">
+
+          </ngx-file-drop>
+        </form>
+      </div>
+    </div>
+
   </div>
-</div>
+</div>

src-ui/src/app/components/document-detail/document-detail.component.html

@@ -5,13 +5,13 @@
         </svg>
         <span class="d-none d-lg-inline"> Delete</span>
     </button>
-    <a [href]="downloadUrl" class="btn btn-sm btn-outline-secondary mr-2">
+    <a [href]="downloadUrl" class="btn btn-sm btn-outline-primary mr-2">
         <svg class="buttonicon" fill="currentColor">
             <use xlink:href="assets/bootstrap-icons.svg#download" />
         </svg>
         <span class="d-none d-lg-inline"> Download</span>
     </a>
-    <button type="button" class="btn btn-sm btn-outline-secondary" (click)="close()">
+    <button type="button" class="btn btn-sm btn-outline-primary" (click)="close()">
         <svg class="buttonicon" fill="currentColor">
             <use xlink:href="assets/bootstrap-icons.svg#x" />
         </svg>

src-ui/src/app/components/document-list/document-list.component.html

@@ -2,19 +2,19 @@
 
   <div class="btn-group btn-group-toggle mr-2" ngbRadioGroup [(ngModel)]="displayMode"
     (ngModelChange)="saveDisplayMode()">
-    <label ngbButtonLabel class="btn-outline-secondary btn-sm">
+    <label ngbButtonLabel class="btn-outline-primary btn-sm">
       <input ngbButton type="radio" class="btn btn-sm" value="details">
       <svg class="toolbaricon" fill="currentColor">
         <use xlink:href="assets/bootstrap-icons.svg#list-ul" />
       </svg>
     </label>
-    <label ngbButtonLabel class="btn-outline-secondary btn-sm">
+    <label ngbButtonLabel class="btn-outline-primary btn-sm">
       <input ngbButton type="radio" class="btn btn-sm" value="smallCards">
       <svg class="toolbaricon" fill="currentColor">
         <use xlink:href="assets/bootstrap-icons.svg#grid" />
       </svg>
     </label>
-    <label ngbButtonLabel class="btn-outline-secondary btn-sm">
+    <label ngbButtonLabel class="btn-outline-primary btn-sm">
       <input ngbButton type="radio" class="btn btn-sm" value="largeCards">
       <svg class="toolbaricon" fill="currentColor">
         <use xlink:href="assets/bootstrap-icons.svg#hdd-stack" />
@@ -24,19 +24,19 @@
   <div class="btn-group btn-group-toggle mr-2" ngbRadioGroup [(ngModel)]="docs.sortDirection"
     *ngIf="!docs.viewId">
     <div ngbDropdown class="btn-group">
-      <button class="btn btn-outline-secondary btn-sm" id="dropdownBasic1" ngbDropdownToggle>Sort by</button>
+      <button class="btn btn-outline-primary btn-sm" id="dropdownBasic1" ngbDropdownToggle>Sort by</button>
       <div ngbDropdownMenu aria-labelledby="dropdownBasic1">
         <button *ngFor="let f of getSortFields()" ngbDropdownItem (click)="setSort(f.field)"
           [class.active]="docs.sortField == f.field">{{f.name}}</button>
       </div>
     </div>
-    <label ngbButtonLabel class="btn-outline-secondary btn-sm">
+    <label ngbButtonLabel class="btn-outline-primary btn-sm">
       <input ngbButton type="radio" class="btn btn-sm" value="asc">
       <svg class="toolbaricon" fill="currentColor">
         <use xlink:href="assets/bootstrap-icons.svg#sort-alpha-down" />
       </svg>
     </label>
-    <label ngbButtonLabel class="btn-outline-secondary btn-sm">
+    <label ngbButtonLabel class="btn-outline-primary btn-sm">
       <input ngbButton type="radio" class="btn btn-sm" value="des">
       <svg class="toolbaricon" fill="currentColor">
         <use xlink:href="assets/bootstrap-icons.svg#sort-alpha-up-alt" />
@@ -45,7 +45,7 @@
   </div>
   <div class="btn-group" *ngIf="!docs.viewId">
 
-    <button type="button" class="btn btn-sm btn-outline-secondary" (click)="showFilter=!showFilter">
+    <button type="button" class="btn btn-sm btn-outline-primary" (click)="showFilter=!showFilter">
       <svg class="toolbaricon" fill="currentColor">
         <use xlink:href="assets/bootstrap-icons.svg#funnel" />
       </svg>
@@ -53,7 +53,7 @@
     </button>
 
     <div class="btn-group" ngbDropdown role="group">
-      <button class="btn btn-sm btn-outline-secondary dropdown-toggle-split" ngbDropdownToggle></button>
+      <button class="btn btn-sm btn-outline-primary dropdown-toggle-split" ngbDropdownToggle></button>
       <div class="dropdown-menu" ngbDropdownMenu>
         <button ngbDropdownItem *ngFor="let config of savedViewConfigService.getConfigs()" (click)="loadViewConfig(config)">{{config.title}}</button>
         <div class="dropdown-divider" *ngIf="savedViewConfigService.getConfigs().length > 0"></div>
@@ -72,7 +72,7 @@
 </div>
 
 <ngb-pagination [pageSize]="docs.currentPageSize" [collectionSize]="docs.collectionSize" [(page)]="docs.currentPage" [maxSize]="5"
-  [rotate]="true" [boundaryLinks]="true" (pageChange)="reload()" aria-label="Default pagination"></ngb-pagination>
+  [rotate]="true" (pageChange)="reload()" aria-label="Default pagination"></ngb-pagination>
 
 <div *ngIf="displayMode == 'largeCards'">
   <app-document-card-large *ngFor="let d of docs.documents" [document]="d" [details]="d.content">

src-ui/src/app/components/manage/correspondent-list/correspondent-list.component.html

@@ -1,5 +1,5 @@
 <app-page-header title="Correspondents">
-  <button type="button" class="btn btn-sm btn-outline-secondary" (click)="openCreateDialog()">
+  <button type="button" class="btn btn-sm btn-outline-primary" (click)="openCreateDialog()">
     Create
   </button>
 </app-page-header>

src-ui/src/app/components/manage/document-type-list/document-type-list.component.html

@@ -1,5 +1,5 @@
 <app-page-header title="Document types">
-  <button type="button" class="btn btn-sm btn-outline-secondary" (click)="openCreateDialog()">
+  <button type="button" class="btn btn-sm btn-outline-primary" (click)="openCreateDialog()">
     Create
   </button>
 </app-page-header>

src-ui/src/app/components/manage/logs/logs.component.html

@@ -1,7 +1,7 @@
 <app-page-header title="Logs">
 
   <div ngbDropdown class="btn-group">
-    <button class="btn btn-outline-secondary btn-sm" id="dropdownBasic1" ngbDropdownToggle>
+    <button class="btn btn-outline-primary btn-sm" id="dropdownBasic1" ngbDropdownToggle>
       <svg class="toolbaricon" fill="currentColor">
         <use xlink:href="assets/bootstrap-icons.svg#funnel" />
       </svg>

src-ui/src/app/components/manage/tag-list/tag-list.component.html

@@ -1,5 +1,5 @@
 <app-page-header title="Tags">
-  <button type="button" class="btn btn-sm btn-outline-secondary" (click)="openCreateDialog()">
+  <button type="button" class="btn btn-sm btn-outline-primary" (click)="openCreateDialog()">
     Create
   </button>
 </app-page-header>

src-ui/src/index.html

@@ -4,7 +4,7 @@
   <meta charset="utf-8">
   <title>PaperlessUi</title>
   <base href="/">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
 </head>
 <body>

src-ui/src/styles.scss

@@ -1,4 +1,6 @@
-@import "bootstrap";
+@import "theme";
+
+@import "node_modules/bootstrap/scss/bootstrap";
 
 
 .toolbaricon {
@@ -27,12 +29,15 @@ body {
   border-color: rgba(255, 255, 255, .1);
 }
 
+.form-control-dark::placeholder {
+  color: #fff;
+}
+
 .form-control-dark:focus {
   border-color: transparent;
   box-shadow: 0 0 0 3px rgba(255, 255, 255, .25);
 }
 
-
 .asc {
   background-color: #f8f9fa!important;
 }

src-ui/src/theme.scss

@@ -0,0 +1,6 @@
+$paperless-green: #17541f;
+$primary: #17541f;
+
+$theme-colors: (
+  "primary": $primary
+);