UX Overhaul Part 1

UI/Web/src/app/_services/nav.service.ts

@@ -79,9 +79,9 @@ export class NavService {
    * Shows the top nav bar. This should be visible on all pages except the reader.
    */
   showNavBar() {
-    this.renderer.setStyle(this.document.querySelector('body'), 'margin-top', '56px');
-    this.renderer.setStyle(this.document.querySelector('body'), 'height', 'calc(var(--vh)*100 - 56px)');
-    this.renderer.setStyle(this.document.querySelector('html'), 'height', 'calc(var(--vh)*100 - 56px)');
+    this.renderer.setStyle(this.document.querySelector('body'), 'margin-top', '75px');
+    this.renderer.setStyle(this.document.querySelector('body'), 'height', 'calc(var(--vh)*100 - 75px)');
+    this.renderer.setStyle(this.document.querySelector('html'), 'height', 'calc(var(--vh)*100 - 75px)');
     this.navbarVisibleSource.next(true);
   }
 

UI/Web/src/app/_single-module/card-actionables/card-actionables.component.scss

@@ -26,3 +26,8 @@
     float: right;
     padding: var(--bs-dropdown-item-padding-y) 0;
 }
+
+#actions-card {
+    padding-top: 0;
+    padding-bottom: 0;
+}

UI/Web/src/app/_single-module/review-card/review-card.component.scss

@@ -1,5 +1,5 @@
 .profile-image {
-    font-size: 2rem;
+    font-size: 1.2rem;
     padding: 20px;
 }
 

UI/Web/src/app/admin/dashboard/dashboard.component.html

@@ -1,8 +1,8 @@
 <ng-container *transloco="let t; read: 'admin-dashboard'">
   <app-side-nav-companion-bar>
-    <h2 title>
+    <h4 title>
       {{t('title')}}
-    </h2>
+    </h4>
   </app-side-nav-companion-bar>
   <div class="container-fluid g-0">
     <ul ngbNav #nav="ngbNav" [(activeId)]="active" class="nav nav-tabs">

UI/Web/src/app/admin/edit-user/edit-user.component.html

@@ -1,7 +1,7 @@
 <ng-container *transloco="let t; read: 'edit-user'">
     <div class="modal-container">
         <div class="modal-header">
-            <h4 class="modal-title" id="modal-basic-title">{{t('edit')}} {{member.username | sentenceCase}}</h4>
+            <h5 class="modal-title" id="modal-basic-title">{{t('edit')}} {{member.username | sentenceCase}}</h5>
             <button type="button" class="btn-close" [attr.aria-label]="t('close')" (click)="close()">
 
             </button>

UI/Web/src/app/admin/manage-users/manage-users.component.html

@@ -3,14 +3,14 @@
 
   <div class="container-fluid">
     <div class="row mb-2">
-      <div class="col-8"><h3>{{t('title')}}</h3></div>
+      <div class="col-8"><h5>{{t('title')}}</h5></div>
       <div class="col-4"><button class="btn btn-primary float-end" (click)="inviteUser()"><i class="fa fa-plus" aria-hidden="true"></i><span class="phone-hidden">&nbsp;{{t('invite')}}</span></button></div>
     </div>
 
     <ul class="list-group">
       <li *ngFor="let member of members; let idx = index;" class="list-group-item no-hover">
         <div>
-          <h4>
+          <h6>
             <span id="member-name--{{idx}}" [ngClass]="{'highlight': member.username === loggedInUsername}">{{member.username | titlecase}}</span>
             <div class="float-end" *ngIf="canEditMember(member)">
               <button class="btn btn-danger btn-sm me-2" (click)="deleteUser(member)"
@@ -31,7 +31,7 @@ <h4>
               <button *ngIf="!member.isPending" class="btn btn-secondary btn-sm" (click)="updatePassword(member)"
                       placement="top" [ngbTooltip]="t('change-password-tooltip')" [attr.aria-label]="t('change-password-alt', {user: member.username | titlecase})"><i class="fa fa-key" aria-hidden="true"></i></button>
             </div>
-          </h4>
+          </h6>
           <div class="user-info">
             <div>{{t('last-active-title')}}
               <span class="badge bg-secondary text-dark ms-1 pending-badge" *ngIf="member.isPending; else activeTime">{{t('pending-title')}}</span>

UI/Web/src/app/all-series/_components/all-series/all-series.component.html

@@ -1,8 +1,8 @@
 <ng-container *transloco="let t; read: 'all-series'">
   <app-side-nav-companion-bar [hasFilter]="true" (filterOpen)="filterOpen.emit($event)" [filterActive]="filterActive">
-    <h2 title>
+    <h5 title>
       {{title}}
-    </h2>
+    </h5>
     <h6 subtitle *ngIf="pagination">{{t('series-count', {num: pagination.totalItems | number})}}</h6>
   </app-side-nav-companion-bar>
   <app-bulk-operations [actionCallback]="bulkActionCallback"></app-bulk-operations>

UI/Web/src/app/app.component.html

@@ -5,7 +5,7 @@
         <app-side-nav *ngIf="navService.sideNavVisibility$ | async"></app-side-nav>
 
         <div class="container-fluid" [ngClass]="{'g-0': (navService.sideNavVisibility$ | async) === false}">
-            <div style="padding: 20px 0 0;" *ngIf="navService.sideNavVisibility$ | async else noSideNav">
+            <div *ngIf="navService.sideNavVisibility$ | async else noSideNav">
                 <div class="companion-bar" [ngClass]="{'companion-bar-content': (navService.sideNavCollapsed$ | async) === false}">
                     <router-outlet></router-outlet>
                 </div>

UI/Web/src/app/app.component.scss

@@ -21,7 +21,7 @@
     .content-wrapper {
         padding: 0 5px 0;
         overflow: hidden;
-        height: calc(var(--vh)*100 - 56px);
+        height: calc(var(--vh)*100 - 75px);
 
         &.closed {
             overflow: auto;

UI/Web/src/app/bookmark/_components/bookmarks/bookmarks.component.html

@@ -1,9 +1,9 @@
 <ng-container *transloco="let t; read: 'bookmarks'">
   <app-side-nav-companion-bar [hasFilter]="true" (filterOpen)="filterOpen.emit($event)" [filterActive]="filterActive">
-    <h2 title>
+    <h4 title>
       {{t('title')}}
-    </h2>
-    <h6 subtitle>{{t('series-count', {num: series.length | number})}}</h6>
+    </h4>
+    <h5 subtitle>{{t('series-count', {num: series.length | number})}}</h5>
   </app-side-nav-companion-bar>
   <app-bulk-operations [actionCallback]="bulkActionCallback"></app-bulk-operations>
   <app-card-detail-layout *ngIf="filter"

UI/Web/src/app/cards/card-detail-layout/card-detail-layout.component.html

@@ -2,7 +2,7 @@
 
   <div class="row mt-2 g-0 pb-2" *ngIf="header !== undefined && header.length > 0">
     <div class="col me-auto">
-      <h2>
+      <h4>
         <span *ngIf="actions.length > 0" class="">
             <app-card-actionables (actionHandler)="performAction($event)" [actions]="actions" [labelBy]="header"></app-card-actionables>&nbsp;
         </span>
@@ -12,12 +12,12 @@ <h2>
                 [attr.aria-label]="t('total-items', {count: pagination.totalItems})"
                 *ngIf="pagination !== undefined">{{pagination.totalItems}}</span>
         </span>
-      </h2>
+      </h4>
     </div>
   </div>
 
   <app-metadata-filter [filterSettings]="filterSettings" [filterOpen]="filterOpen" (applyFilter)="applyMetadataFilter($event)"></app-metadata-filter>
-  <div class="viewport-container" [ngClass]="{'empty': items.length === 0 && !isLoading}">
+  <div class="viewport-container ms-1" [ngClass]="{'empty': items.length === 0 && !isLoading}">
     <div class="content-container">
       <div class="card-container mt-2 mb-2">
         <p *ngIf="items.length === 0 && !isLoading">

UI/Web/src/app/cards/card-detail-layout/card-detail-layout.component.scss

@@ -27,7 +27,7 @@
     display: grid;
     grid-template-columns: repeat(auto-fill, 158px);
     grid-gap: 0.5rem;
-    justify-content: space-around;
+    justify-content: space-between;
     width: 100%;
     overflow-y: auto;
     overflow-x: hidden;

UI/Web/src/app/carousel/_components/carousel-reel/carousel-reel.component.html

@@ -1,12 +1,12 @@
 <ng-container *transloco="let t; read: 'carousel-reel'">
 
   @if(alwaysShow || items && items.length > 0) {
-    <div class="carousel-container">
+    <div class="carousel-container mb-3">
       <div>
-        <h3 (click)="sectionClicked($event)" [ngClass]="{'non-selectable': !clickableTitle}">
+        <h4 class="header" (click)="sectionClicked($event)" [ngClass]="{'non-selectable': !clickableTitle}">
           <a href="javascript:void(0)"  class="section-title" >{{title}}</a>
           <i *ngIf="iconClasses !== ''" class="{{iconClasses}} title-icon ms-1" aria-hidden="true"></i>
-        </h3>
+        </h4>
         <div class="float-end" *ngIf="swiper">
           <button class="btn btn-icon carousel-btn" [disabled]="swiper.isBeginning" (click)="prevPage()"><i class="fa fa-angle-left" aria-hidden="true"></i><span class="visually-hidden">{{t('prev-items')}}</span></button>
           <button class="btn btn-icon carousel-btn" [disabled]="swiper.isEnd" (click)="nextPage()"><i class="fa fa-angle-right" aria-hidden="true"></i><span class="visually-hidden">{{t('next-items')}}</span></button>

UI/Web/src/app/carousel/_components/carousel-reel/carousel-reel.component.scss

@@ -9,7 +9,7 @@
 .carousel-container {
     .section-title {
         font-weight: 400;
-        margin-left: 10px;
+        margin-left: 5px;
         color: var(--carousel-header-text-color);
         text-decoration: var(--carousel-header-text-decoration);
 
@@ -27,7 +27,6 @@
   }
 }
 
-
 ::ng-deep .swiper-slide {
     width: auto !important;
 }
@@ -40,9 +39,8 @@
     margin-bottom: 0;
 }
 
-h3 {
+.header {
     display: inline-block;
-    font-size: 1.2rem;
 }
 
 .title-icon {

UI/Web/src/app/collections/_components/all-collections/all-collections.component.html

@@ -1,7 +1,7 @@
 <ng-container *transloco="let t; read: 'all-collections'">
   <app-side-nav-companion-bar [hasFilter]="false" (filterOpen)="filterOpen.emit($event)">
-    <h2 title>{{t('title')}}</h2>
-    <h6 subtitle>{{t('item-count', {num: collections.length | number})}}</h6>
+    <h4 title>{{t('title')}}</h4>
+    <h5 subtitle>{{t('item-count', {num: collections.length | number})}}</h5>
   </app-side-nav-companion-bar>
   <app-bulk-operations [actionCallback]="bulkActionCallback"></app-bulk-operations>
 

UI/Web/src/app/collections/_components/collection-detail/collection-detail.component.html

@@ -2,10 +2,10 @@
   <div #companionBar>
     <app-side-nav-companion-bar *ngIf="series !== undefined" [hasFilter]="true" (filterOpen)="filterOpen.emit($event)" [filterActive]="filterActive">
       <ng-container title>
-        <h2 *ngIf="collectionTag !== undefined">
-          <app-card-actionables [disabled]="actionInProgress" (actionHandler)="performAction($event)" [actions]="collectionTagActions" [labelBy]="collectionTag.title" iconClass="fa-ellipsis-v"></app-card-actionables>
+        <h4 *ngIf="collectionTag !== undefined">
           {{collectionTag.title}}<span class="ms-1" *ngIf="collectionTag.promoted">(<i aria-hidden="true" class="fa fa-angle-double-up"></i>)</span>
-        </h2>
+          <app-card-actionables [disabled]="actionInProgress" (actionHandler)="performAction($event)" [actions]="collectionTagActions" [labelBy]="collectionTag.title" iconClass="fa-ellipsis-v"></app-card-actionables>
+        </h4>
       </ng-container>
     </app-side-nav-companion-bar>
   </div>

UI/Web/src/app/library-detail/library-detail.component.html

@@ -1,9 +1,9 @@
 <ng-container *transloco="let t">
   <app-side-nav-companion-bar [hasFilter]="true" (filterOpen)="filterOpen.emit($event)" [filterActive]="filterActive">
-    <h2 title>
-      <app-card-actionables [actions]="actions" (actionHandler)="performAction($event)"></app-card-actionables>
+    <h5 title>
       <span>{{libraryName}}</span>
-    </h2>
+      <app-card-actionables [actions]="actions" (actionHandler)="performAction($event)"></app-card-actionables>
+    </h5>
     @if (active.fragment === '') {
       <h6 subtitle class="subtitle-with-actionables">{{t('common.series-count', {num: pagination.totalItems | number})}} </h6>
     }

UI/Web/src/app/reading-list/_components/reading-list-detail/reading-list-detail.component.html

@@ -1,17 +1,17 @@
 <ng-container *transloco="let t; read: 'reading-list-detail'">
   <app-side-nav-companion-bar [hasExtras]="readingList !== undefined" [extraDrawer]="extrasDrawer">
-    <h2 title>
-      <app-card-actionables (actionHandler)="performAction($event)" [actions]="actions" [attr.aria-labelledby]="readingList?.title" *ngIf="actions.length > 0"></app-card-actionables>
+    <h4 title>
       {{readingList?.title}}
       @if (readingList?.promoted) {
         <span class="ms-1">(<i class="fa fa-angle-double-up" aria-hidden="true"></i>)</span>
       }
-    </h2>
-    <h6 subtitle class="subtitle-with-actionables">{{t('item-count', {num: items.length | number})}}</h6>
+      <app-card-actionables (actionHandler)="performAction($event)" [actions]="actions" [attr.aria-labelledby]="readingList?.title" *ngIf="actions.length > 0"></app-card-actionables>
+    </h4>
+    <h5 subtitle class="subtitle-with-actionables">{{t('item-count', {num: items.length | number})}}</h5>
 
     <ng-template #extrasDrawer let-offcanvas>
       @if (readingList) {
-        <div style="margin-top: 56px">
+        <div>
           <div class="offcanvas-header">
             <h4 class="offcanvas-title" id="offcanvas-basic-title">{{t('page-settings-title')}}</h4>
             <button type="button" class="btn-close" aria-label="Close" (click)="offcanvas.dismiss()"></button>

UI/Web/src/app/reading-list/_components/reading-lists/reading-lists.component.html

@@ -1,11 +1,11 @@
 <ng-container *transloco="let t; read: 'reading-lists'">
   <app-side-nav-companion-bar>
-    <h2 title>
-      <app-card-actionables [actions]="globalActions" (actionHandler)="performGlobalAction($event)"></app-card-actionables>
+    <h4 title>
       <span>{{t('title')}}</span>
-    </h2>
+      <app-card-actionables [actions]="globalActions" (actionHandler)="performGlobalAction($event)"></app-card-actionables>
+    </h4>
     @if (pagination) {
-      <h6 subtitle class="subtitle-with-actionables">{{t('item-count', {num: pagination.totalItems | number})}}</h6>
+      <h5 subtitle class="subtitle-with-actionables">{{t('item-count', {num: pagination.totalItems | number})}}</h5>
     }
 
   </app-side-nav-companion-bar>

UI/Web/src/app/registration/_components/confirm-email-change/confirm-email-change.component.scss

@@ -3,5 +3,9 @@
 }
 
 .card {
-    background-color: var(--primary-color);
+    background-color: var(--login-card-bg-color);
+}
+
+p {
+    font-family: var(--login-input-font-family);
 }

UI/Web/src/app/registration/_components/confirm-email/confirm-email.component.html

@@ -42,7 +42,7 @@
             {{t('password-validation')}}
           </ng-template>
           <span class="visually-hidden" id="password-help"><ng-container [ngTemplateOutlet]="passwordTooltip"></ng-container></span>
-          <input id="password" class="form-control" maxlength="32" minlength="6" pattern="^.{6,32}$" formControlName="password" type="password" aria-describedby="password-help">
+          <input id="password" class="form-control" maxlength="256" minlength="6" pattern="^.{6,256}$" formControlName="password" type="password" aria-describedby="password-help">
           <div id="inviteForm-password-validations" class="invalid-feedback" *ngIf="registerForm.dirty || registerForm.touched">
             <div *ngIf="registerForm.get('password')?.errors?.required">
               {{t('required-field')}}

UI/Web/src/app/registration/_components/confirm-email/confirm-email.component.scss

@@ -1,4 +1,5 @@
 input {
     background-color: #fff !important;
     color: black !important;
+    font-family: var(--login-input-font-family);
 }

UI/Web/src/app/registration/_components/confirm-email/confirm-email.component.ts

@@ -28,7 +28,7 @@ export class ConfirmEmailComponent implements OnDestroy {
   registerForm: FormGroup = new FormGroup({
     email: new FormControl('', [Validators.required]),
     username: new FormControl('', [Validators.required]),
-    password: new FormControl('', [Validators.required, Validators.maxLength(32), Validators.minLength(6), Validators.pattern("^.{6,32}$")]),
+    password: new FormControl('', [Validators.required, Validators.maxLength(256), Validators.minLength(6), Validators.pattern("^.{6,256}$")]),
   });
 
   /**

UI/Web/src/app/registration/_components/confirm-reset-password/confirm-reset-password.component.html

@@ -10,7 +10,7 @@
             {{t('password-validation')}}
           </ng-template>
           <span class="visually-hidden" id="password-help"><ng-container [ngTemplateOutlet]="passwordTooltip"></ng-container></span>
-          <input id="password" class="form-control" maxlength="32" minlength="6" formControlName="password" type="password" aria-describedby="password-help">
+          <input id="password" class="form-control" maxlength="256" minlength="6" formControlName="password" type="password" aria-describedby="password-help">
           <div id="inviteForm-validations" class="invalid-feedback" *ngIf="registerForm.dirty || registerForm.touched">
             <div *ngIf="registerForm.get('password')?.errors?.required">
               {{t('required-field')}}

UI/Web/src/app/registration/_components/confirm-reset-password/confirm-reset-password.component.ts

@@ -22,7 +22,7 @@ export class ConfirmResetPasswordComponent {
   token: string = '';
   registerForm: FormGroup = new FormGroup({
     email: new FormControl('', [Validators.required, Validators.email]),
-    password: new FormControl('', [Validators.required, Validators.maxLength(32), Validators.minLength(6)]),
+    password: new FormControl('', [Validators.required, Validators.maxLength(256), Validators.minLength(6)]),
   });
 
   constructor(private route: ActivatedRoute, private router: Router,

UI/Web/src/app/registration/_components/register/register.component.html

@@ -4,9 +4,9 @@
     <ng-container body>
       <p>{{t('description')}}</p>
       <form [formGroup]="registerForm" (ngSubmit)="submit()">
-        <div class="mb-3">
+        <div class="mb-3 text-start">
           <label for="username" class="form-label">{{t('username-label')}}</label>
-          <input id="username" class="form-control" formControlName="username" type="text" autocomplete="username"
+          <input id="username" class="form-control custom-input" formControlName="username" type="text" autocomplete="username"
                  [class.is-invalid]="registerForm.get('username')?.invalid && registerForm.get('username')?.touched" aria-describedby="username-validations">
           <div id="username-validations" class="invalid-feedback" *ngIf="registerForm.dirty || registerForm.touched">
             <div *ngIf="registerForm.get('username')?.errors?.required">
@@ -15,14 +15,14 @@
           </div>
         </div>
 
-        <div class="mb-3" style="width:100%">
-          <label for="email" class="form-label">{{t('email-label')}}</label>
+        <div class="mb-3 text-start">
+          <label for="email" class="form-label float-start">{{t('email-label')}}</label>
           <i class="fa fa-info-circle ms-1" placement="right" [ngbTooltip]="emailTooltip" role="button" tabindex="0"></i>
           <ng-template #emailTooltip>{{t('email-tooltip')}}</ng-template>
           <span class="visually-hidden" id="email-help">
             <ng-container [ngTemplateOutlet]="emailTooltip"></ng-container>
           </span>
-          <input class="form-control" type="email" inputmode="email" id="email" autocomplete="email" formControlName="email" required aria-describedby="email-help"
+          <input class="form-control custom-input" type="email" inputmode="email" id="email" autocomplete="email" formControlName="email" required aria-describedby="email-help"
                  [class.is-invalid]="registerForm.get('email')?.invalid && registerForm.get('email')?.touched">
           <div id="email-validations" class="invalid-feedback" *ngIf="registerForm.dirty || registerForm.touched">
             <div *ngIf="registerForm.get('email')?.errors?.required">
@@ -34,14 +34,14 @@
           </div>
         </div>
 
-        <div class="mb-3">
+        <div class="mb-3 text-start">
           <label for="password" class="form-label">Password</label>
           <i class="fa fa-info-circle ms-1" placement="right" [ngbTooltip]="passwordTooltip" role="button" tabindex="0"></i>
           <ng-template #passwordTooltip>
             {{t('password-validation')}}
           </ng-template>
           <span class="visually-hidden" id="password-help"><ng-container [ngTemplateOutlet]="passwordTooltip"></ng-container></span>
-          <input id="password" class="form-control" maxlength="32" minlength="6" pattern="^.{6,32}$" formControlName="password" autocomplete="new-password"
+          <input id="password" class="form-control custom-input" maxlength="256" minlength="6" pattern="^.{6,256}$" formControlName="password" autocomplete="new-password"
                  type="password" aria-describedby="password-help" [class.is-invalid]="registerForm.get('password')?.invalid && registerForm.get('password')?.touched">
           @if (registerForm.dirty || registerForm.touched) {
             <div id="password-validations" class="invalid-feedback">
@@ -55,8 +55,8 @@
           }
         </div>
 
-        <div class="float-end">
-          <button class="btn btn-secondary alt" type="submit" [disabled]="!registerForm.valid">{{t('register')}}</button>
+        <div>
+          <button class="btn btn-primary" type="submit" [disabled]="!registerForm.valid">{{t('register')}}</button>
         </div>
       </form>
     </ng-container>