Bugfix/ux pass 2 (#1107)

* Adding margin bottom to series detail tabs

* Styling tag badges with green on dark

- Added 3 new css vars

* Removing underline from readmore

* Fixing see more to be on one line

* adding gutter to see more

* Changing queue toasts to info

* adding api key tooltip

* Updating active accordion on user preference.

* Fixing search bar and close btn position

* Fixed a bug where entering book reader in dark mode then closing out, would leave you in a broken white state.

* Fixed broken wiki links

Co-authored-by: Joseph Milazzo <joseph.v.milazzo@gmail.com>

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

@@ -58,7 +58,7 @@ export class ActionService implements OnDestroy {
       return;
     }
     this.libraryService.scan(library?.id).pipe(take(1)).subscribe((res: any) => {
-      this.toastr.success('Scan queued for ' + library.name);
+      this.toastr.info('Scan queued for ' + library.name);
       if (callback) {
         callback(library);
       }
@@ -84,7 +84,7 @@ export class ActionService implements OnDestroy {
     }
 
     this.libraryService.refreshMetadata(library?.id).pipe(take(1)).subscribe((res: any) => {
-      this.toastr.success('Scan queued for ' + library.name);
+      this.toastr.info('Scan queued for ' + library.name);
       if (callback) {
         callback(library);
       }
@@ -128,7 +128,7 @@ export class ActionService implements OnDestroy {
    */
   scanSeries(series: Series, callback?: SeriesActionCallback) {
     this.seriesService.scan(series.libraryId, series.id).pipe(take(1)).subscribe((res: any) => {
-      this.toastr.success('Scan queued for ' + series.name);
+      this.toastr.info('Scan queued for ' + series.name);
       if (callback) {
         callback(series);
       }
@@ -149,7 +149,7 @@ export class ActionService implements OnDestroy {
     }
 
     this.seriesService.refreshMetadata(series).pipe(take(1)).subscribe((res: any) => {
-      this.toastr.success('Refresh covers queued for ' + series.name);
+      this.toastr.info('Refresh covers queued for ' + series.name);
       if (callback) {
         callback(series);
       }

UI/Web/src/app/admin/_modals/directory-picker/directory-picker.component.ts

@@ -21,7 +21,7 @@ export class DirectoryPickerComponent implements OnInit {
   /**
    * Url to give more information about selecting directories. Passing nothing will suppress. 
    */
-  @Input() helpUrl: string = 'https://wiki.kavitareader.com/en/guides/adding-a-library';
+  @Input() helpUrl: string = 'https://wiki.kavitareader.com/en/guides/first-time-setup#adding-a-library-to-kavita';
 
   currentRoot = '';
   folders: string[] = [];

UI/Web/src/app/admin/_modals/library-editor-modal/library-editor-modal.component.ts

@@ -66,7 +66,8 @@ export class LibraryEditorModalComponent implements OnInit {
       model.folders = model.folders.map((item: string) => item.startsWith('\\') ? item.substr(1, item.length) : item);
       model.type = parseInt(model.type, 10);
       this.libraryService.create(model).subscribe(() => {
-        this.toastr.success('Library created, a scan has been started');
+        this.toastr.success('Library created successfully.');
+        this.toastr.info('A scan has been started.');
         this.close(true);
       }, err => {
         this.errorMessage = err;

UI/Web/src/app/admin/manage-library/manage-library.component.ts

@@ -109,7 +109,7 @@ export class ManageLibraryComponent implements OnInit, OnDestroy {
 
   scanLibrary(library: Library) {
     this.libraryService.scan(library.id).pipe(take(1)).subscribe(() => {
-      this.toastr.success('A scan has been queued for ' + library.name);
+      this.toastr.info('A scan has been queued for ' + library.name);
     });
   }
 

UI/Web/src/app/book-reader/book-reader/book-reader.component.ts

@@ -383,9 +383,9 @@ export class BookReaderComponent implements OnInit, AfterViewInit, OnDestroy {
     const bodyNode = this.document.querySelector('body');
     if (bodyNode !== undefined && bodyNode !== null && this.originalBodyColor !== undefined) {
       bodyNode.style.background = this.originalBodyColor;
-      if (this.themeService.isDarkTheme()) {
+      this.themeService.currentTheme$.pipe(take(1)).subscribe(theme => {
-        bodyNode.classList.add('bg-dark');
+        this.themeService.setTheme(theme.name);
-      }
+      });
     }
     this.navService.showNavBar();
 

UI/Web/src/app/grouped-typeahead/grouped-typeahead.component.html

@@ -8,7 +8,7 @@
           <div class="spinner-border spinner-border-sm" role="status" *ngIf="isLoading">
             <span class="visually-hidden">Loading...</span>
           </div>
-          <button type="button" class="btn-close float-end" aria-label="Close" (click)="resetField()">
+          <button type="button" class="btn-close" aria-label="Close" (click)="resetField()">
             
             </button>
         </div>

UI/Web/src/app/grouped-typeahead/grouped-typeahead.component.scss

@@ -17,6 +17,8 @@ form {
 .btn-close {
     margin-top: 8px;
     font-size: 0.8rem;
+    position: absolute;
+    right: 5px;
 }
 
 
@@ -40,6 +42,7 @@ form {
 
     .search {
         display: flex;
+        position: relative;
     }
 
 
@@ -63,7 +66,7 @@ form {
         border: none;
 
         &:focus-visible {
-            width: calc(100vw - 400px);
+            width: calc(100vw - 175px);
         }
 
         &:empty {

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

@@ -61,7 +61,7 @@
 
     <ng-container>
         <app-bulk-operations [actionCallback]="bulkActionCallback"></app-bulk-operations>
-        <ul ngbNav #nav="ngbNav" [(activeId)]="activeTabId" class="nav nav-tabs" [destroyOnHide]="false" (navChange)="onNavChange($event)">
+        <ul ngbNav #nav="ngbNav" [(activeId)]="activeTabId" class="nav nav-tabs mb-2" [destroyOnHide]="false" (navChange)="onNavChange($event)">
             <li [ngbNavItem]="TabID.Specials" *ngIf="hasSpecials">
               <a ngbNavLink>Specials</a>
               <ng-template ngbNavContent>

UI/Web/src/app/series-metadata-detail/series-metadata-detail.component.html

@@ -57,8 +57,8 @@
 </div>
 
 <div class="row g-0">
-    <hr class="col-md-11" *ngIf="hasExtendedProperites" >
+    <hr class="col mt-3" *ngIf="hasExtendedProperites" >
-    <a [class.hidden]="hasExtendedProperites" *ngIf="hasExtendedProperites" class="col-md-1 read-more-link" (click)="toggleView()">&nbsp;<i aria-hidden="true" class="fa fa-caret-{{isCollapsed ? 'down' : 'up'}}" aria-controls="extended-series-metadata"></i>&nbsp;See {{isCollapsed ? 'More' : 'Less'}}</a>
+    <a [class.hidden]="hasExtendedProperites" *ngIf="hasExtendedProperites" class="col col-md-auto align-self-end read-more-link" (click)="toggleView()">&nbsp;<i aria-hidden="true" class="fa fa-caret-{{isCollapsed ? 'down' : 'up'}}" aria-controls="extended-series-metadata"></i>&nbsp;See {{isCollapsed ? 'More' : 'Less'}}</a>
 </div>
 
 <div #collapse="ngbCollapse" [(ngbCollapse)]="isCollapsed" id="extended-series-metadata">

UI/Web/src/app/shared/tag-badge/tag-badge.component.scss

@@ -1,11 +1,9 @@
 .tagbadge {
-    background-color: var(--tagbadge-bg-color);
     transition: all .3s ease-out;
     margin: 3px 5px 3px 0px;
     padding: 2px 10px;
     border-radius: 6px;
     font-size: 14px;
-    border: 1px solid var(--tagbadge-border-color);
     display: inline-block;
     cursor: default;
     width: auto;
@@ -40,4 +38,4 @@
     i {
         cursor: pointer !important;
     }
-}
+}

UI/Web/src/app/user-settings/api-key/api-key.component.html

@@ -5,7 +5,10 @@
         <input #apiKey type="text" readonly class="form-control" id="api-key--{{title}}" aria-describedby="button-addon4" [value]="key" (click)="selectAll()">
         <div id="button-addon4">
             <button class="btn btn-outline-secondary" type="button" (click)="copy()"><span class="visually-hidden">Copy</span><i class="fa fa-copy" aria-hidden="true"></i></button>
-            <button class="btn btn-danger" type="button" (click)="refresh()" *ngIf="showRefresh"><span class="visually-hidden">Regenerate</span><i class="fa fa-sync-alt" aria-hidden="true"></i></button>
+            <button class="btn btn-danger" type="button" [ngbTooltip]="tipContent" (click)="refresh()" *ngIf="showRefresh"><span class="visually-hidden">Regenerate</span><i class="fa fa-sync-alt" aria-hidden="true"></i></button>
         </div>
+        <ng-template #tipContent>
+            Regenerating your API key will invalidate any existing clients.
+        </ng-template>
     </div>
 </div>

UI/Web/src/app/user-settings/series-bookmarks/series-bookmarks.component.html

@@ -1,5 +1,5 @@
 <p *ngIf="series.length === 0 && !loadingBookmarks">
-    There are no bookmarks. Try creating <a href="https://wiki.kavitareader.com/guides/webreader/bookmarks" target="_blank">one&nbsp;<i class="fa fa-external-link-alt" aria-hidden="true"></i></a>.
+    There are no bookmarks. Try creating <a href="https://wiki.kavitareader.com/en/guides/get-started-using-your-library/bookmarks" target="_blank">one&nbsp;<i class="fa fa-external-link-alt" aria-hidden="true"></i></a>.
 </p>
 <ul class="list-group">
     <li *ngFor="let series of series" class="list-group-item">

UI/Web/src/app/user-settings/user-preferences/user-preferences.component.html

@@ -8,8 +8,8 @@
                 <p>
                     These are global settings that are bound to your account. 
                 </p>
-                
+                 
-                <ngb-accordion [closeOthers]="true" activeIds="site-panel" #acc="ngbAccordion">
+                <ngb-accordion [closeOthers]="true" activeIds="reading-panel" #acc="ngbAccordion">
                         <!-- <ngb-panel id="site-panel" title="Site">
                             <ng-template ngbPanelHeader>
                                 <h2 class="accordion-header">

UI/Web/src/theme/components/_anchors.scss

@@ -21,6 +21,10 @@ a.read-more-link {
     color: var(--body-text-color);
     cursor: pointer;
     color: var(--body-text-color) !important;
+
+    &:hover {
+      text-decoration: none;
+    }
 }
 
 a {

UI/Web/src/theme/components/_tagbadge.scss

@@ -2,4 +2,10 @@
     border-color: var(--tagbadge-border-color); 
     color: var(--tagbadge-text-color);
     background-color: var(--tagbadge-bg-color);
+}
+
+.typeahead-input .tagbadge {
+    border-color: var(--tagbadge-typeahead-border-color); 
+    color: var(--tagbadge-typeahead-text-color);
+    background-color: var(--tagbadge-typeahead-bg-color);
 }

UI/Web/src/theme/themes/dark.scss

@@ -84,6 +84,10 @@
     --tagbadge-border-color: rgba(239, 239, 239, 0.125);
     --tagbadge-text-color: var(--body-text-color);
     --tagbadge-bg-color: var(--nav-tab-hover-bg-color);
+    --tagbadge-typeahead-border-color: rgba(239, 239, 239, 0.125);
+    --tagbadge-typeahead-text-color: var(--body-text-color);
+    --tagbadge-typeahead-bg-color: var(--primary-color);
+    
 
     /* List items */
     --list-group-item-text-color: var(--body-text-color); /*rgba(74, 198, 148, 0.9)*/