Theme Cleanup (#1089)

* Fixed e-ink theme not properly applying correctly

* Fixed some seed changes. Changed card checkboxes to use our themed ones

* Fixed recently added carousel not going to recently-added page

* Fixed an issue where no results found would show when searching for a library name

* Cleaned up list a bit, typeahead dropdown still needs work

* Added a TODO to streamline series-card component

* Removed ng-lazyload-image module since we don't use it. We use lazysizes

* Darken card on hover

* Fixing accordion focus style

* ux pass updates

- Fixed typeahead width
- Fixed changelog download buttons
- Fixed a select
- Fixed various input box-shadows
- Fixed all anchors to only have underline on hover
- Added navtab hover and active effects

* more ux pass

- Fixed spacing on theme cards
- Fixed some light theme issues
- Exposed text-muted-color for theme card subtitle color

* UX pass fixes

- Changed back to bright green for primary on dark theme
- Changed fa icon to black on e-ink

* Merged changelog component

* Fixed anchor buttons text decoration

* Changed nav tabs to have a background color instead of open active state

* When user is not authenticated, make sure we set default theme (dark)

* Cleanup on carousel

* Updated Users tab to use small buttons with icons to align with Library tab

* Cleaned up brand to not underline, removed default link underline on hover in dropdown and pill tabs

* Fixed collection detail posters not rendering

Co-authored-by: Robbie Davis <robbie@therobbiedavis.com>

API/Data/Seed.cs

@@ -46,7 +46,7 @@ namespace API.Data
                 Name = "E-Ink",
                 NormalizedName = Parser.Parser.Normalize("E-Ink"),
                 Provider = ThemeProvider.System,
-                FileName = "eink.scss",
+                FileName = "e-ink.scss",
                 IsDefault = false,
             },
         };

UI/Web/package-lock.json

@@ -9173,14 +9173,6 @@
         "tslib": "^2.0.0"
       }
     },
-    "ng-lazyload-image": {
-      "version": "9.1.2",
-      "resolved": "https://registry.npmjs.org/ng-lazyload-image/-/ng-lazyload-image-9.1.2.tgz",
-      "integrity": "sha512-E5oz5HdTRtYW/TH+jceT4VMcRXKdX9Ut82eEwt2K0/bFAXKU14HluCFa8cMidPBgSa08Mlf+gmoKCTvAfUPgag==",
-      "requires": {
-        "tslib": "^2.3.0"
-      }
-    },
     "ngx-file-drop": {
       "version": "13.0.0",
       "resolved": "https://registry.npmjs.org/ngx-file-drop/-/ngx-file-drop-13.0.0.tgz",

UI/Web/package.json

@@ -38,7 +38,6 @@
     "file-saver": "^2.0.5",
     "lazysizes": "^5.3.2",
     "ng-circle-progress": "^1.6.0",
-    "ng-lazyload-image": "^9.1.2",
     "ngx-file-drop": "^13.0.0",
     "ngx-toastr": "^14.2.1",
     "rxjs": "~7.5.4",

UI/Web/src/app/_models/events/refresh-metadata-event.ts

@@ -1,4 +0,0 @@
-export interface RefreshMetadataEvent {
-    libraryId: number;
-    seriesId: number;
-}

UI/Web/src/app/_pipes/person-role.pipe.ts

@@ -1,5 +1,5 @@
 import { Pipe, PipeTransform } from '@angular/core';
-import { PersonRole } from './_models/person';
+import { PersonRole } from '../_models/person';
 
 @Pipe({
   name: 'personRole'

UI/Web/src/app/_pipes/publication-status.pipe.ts

@@ -1,5 +1,5 @@
 import { Pipe, PipeTransform } from '@angular/core';
-import { PublicationStatus } from './_models/metadata/publication-status';
+import { PublicationStatus } from '../_models/metadata/publication-status';
 
 @Pipe({
   name: 'publicationStatus'

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

@@ -84,6 +84,8 @@ export class AccountService implements OnDestroy {
       } else {
         this.themeService.setTheme(this.themeService.defaultTheme);
       }
+    } else {
+      this.themeService.setTheme(this.themeService.defaultTheme);
     }
 
     this.currentUserSource.next(user);

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

@@ -149,6 +149,7 @@ export class SeriesService {
   }
 
   scan(libraryId: number, seriesId: number) {
+    // TODO: Pipe and put a toaster up: this.toastr.info('Scan queued for ' + series.name);
     return this.httpClient.post(this.baseUrl + 'series/scan', {libraryId: libraryId, seriesId: seriesId});
   }
 

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

@@ -8,8 +8,12 @@
           </h4>
           <h6 class="card-subtitle mb-2 text-muted">Published: {{update.publishDate | date: 'short'}}</h6>
 
-          <pre class="card-text update-body" [innerHtml]="update.updateBody | safeHtml"></pre>
+
-          <a *ngIf="!update.isDocker" href="{{update.updateUrl}}" class="btn btn-{{indx === 0 ? 'primary' : 'secondary'}} float-end" target="_blank">Download</a>
+          <pre class="card-text update-body">
+            <app-read-more class="float-end" [text]="update.updateBody" [maxLength]="500"></app-read-more>
+          </pre>
+          <a *ngIf="!update.isDocker && update.updateVersion === installedVersion" href="{{update.updateUrl}}" class="btn disabled btn-{{indx === 0 ? 'primary' : 'secondary'}} float-end" target="_blank">Installed</a>
+          <a *ngIf="!update.isDocker && update.updateVersion !== installedVersion" href="{{update.updateUrl}}" class="btn btn-{{indx === 0 ? 'primary' : 'secondary'}} float-end" target="_blank">Download</a>
         </div>
       </div>
   </ng-container>

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

@@ -45,9 +45,9 @@
                         <span class="visually-hidden">(You)</span>
                     </span>
                     <div class="float-end" *ngIf="canEditMember(member)">
-                        <button class="btn btn-danger me-2" (click)="deleteUser(member)" placement="top" ngbTooltip="Delete User" attr.aria-label="Delete User {{member.username | titlecase}}"><i class="fa fa-trash" aria-hidden="true"></i></button>
+                        <button class="btn btn-danger btn-sm me-2" (click)="deleteUser(member)" placement="top" ngbTooltip="Delete User" attr.aria-label="Delete User {{member.username | titlecase}}"><i class="fa fa-trash" aria-hidden="true"></i></button>
-                        <button class="btn btn-secondary me-2" (click)="updatePassword(member)" placement="top" ngbTooltip="Change Password" attr.aria-label="Change Password for {{member.username | titlecase}}"><i class="fa fa-key" aria-hidden="true"></i></button>
+                        <button class="btn btn-secondary btn-sm me-2" (click)="updatePassword(member)" placement="top" ngbTooltip="Change Password" attr.aria-label="Change Password for {{member.username | titlecase}}"><i class="fa fa-key" aria-hidden="true"></i></button>
-                        <button class="btn btn-primary" (click)="openEditUser(member)" placement="top" ngbTooltip="Edit" attr.aria-label="Edit {{member.username | titlecase}}"><i class="fa fa-pen" aria-hidden="true"></i></button>
+                        <button class="btn btn-primary btn-sm" (click)="openEditUser(member)" placement="top" ngbTooltip="Edit" attr.aria-label="Edit {{member.username | titlecase}}"><i class="fa fa-pen" aria-hidden="true"></i></button>
                     </div>
                 </h4>
                 <div>Last Active: 

UI/Web/src/app/app.module.ts

@@ -31,12 +31,12 @@ import { ReadingListModule } from './reading-list/reading-list.module';
 import { SAVER, getSaver } from './shared/_providers/saver.provider';
 import { ConfigData } from './_models/config-data';
 import { NavEventsToggleComponent } from './nav-events-toggle/nav-events-toggle.component';
-import { PersonRolePipe } from './person-role.pipe';
+import { PersonRolePipe } from './_pipes/person-role.pipe';
 import { SeriesMetadataDetailComponent } from './series-metadata-detail/series-metadata-detail.component';
 import { AllSeriesComponent } from './all-series/all-series.component';
-import { PublicationStatusPipe } from './publication-status.pipe';
 import { RegistrationModule } from './registration/registration.module';
 import { GroupedTypeaheadComponent } from './grouped-typeahead/grouped-typeahead.component';
+import { PublicationStatusPipe } from './_pipes/publication-status.pipe';
 import { ThemeTestComponent } from './theme-test/theme-test.component';
 
 
@@ -71,7 +71,7 @@ import { ThemeTestComponent } from './theme-test/theme-test.component';
 
     NgbDropdownModule, // Nav
     NgbPopoverModule, // Nav Events toggle
-    NgbRatingModule, // Series Detail
+    NgbRatingModule, // Series Detail & Filter
     NgbNavModule,
     NgbPaginationModule,
 
@@ -85,6 +85,7 @@ import { ThemeTestComponent } from './theme-test/theme-test.component';
     ReadingListModule,
     RegistrationModule,
 
+
     ToastrModule.forRoot({
       positionClass: 'toast-bottom-right',
       preventDuplicates: true,

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

@@ -335,7 +335,7 @@
                                     <i class="fa fa-arrow-down" title="Descending"></i>
                                 </ng-template>
                             </button>
-                            <select id="sort-options" class="form-control" formControlName="sortField" style="height: 38px;">
+                            <select id="sort-options" class="form-select" formControlName="sortField" style="height: 38px;">
                                 <option [value]="SortField.SortName">Sort Name</option>
                                 <option [value]="SortField.Created">Created</option>
                                 <option [value]="SortField.LastModified">Last Modified</option> 

UI/Web/src/app/cards/card-item/card-item.component.html

@@ -23,7 +23,7 @@
       
       <div class="not-read-badge" *ngIf="read === 0 && total > 0"></div>
       <div class="bulk-mode {{bulkSelectionService.hasSelections() ? 'always-show' : ''}}" (click)="handleSelection($event)" *ngIf="allowSelection">
-        <input type="checkbox" attr.aria-labelledby="{{title}}_{{entity?.id}}" [ngModel]="selected" [ngModelOptions]="{standalone: true}">
+        <input type="checkbox" class="form-check-input" attr.aria-labelledby="{{title}}_{{entity?.id}}" [ngModel]="selected" [ngModelOptions]="{standalone: true}">
       </div>
 
       <div class="count" *ngIf="count > 1">
@@ -34,7 +34,7 @@
 
     <div class="card-body" *ngIf="title.length > 0 || actions.length > 0">
       <div>
-        <span class="card-title" placement="top" id="{{title}}_{{entity?.id}}" [ngbTooltip]="tooltipTitle" (click)="handleClick()" tabindex="0">
+        <span class="card-title" placement="top" id="{{title}}_{{entity?.id}}" [ngbTooltip]="tooltipTitle" (click)="handleClick($event)" tabindex="0">
           <span *ngIf="isPromoted()">
             <i class="fa fa-angle-double-up" aria-hidden="true"></i>
             <span class="visually-hidden">(promoted)</span>

UI/Web/src/app/cards/card-item/card-item.component.scss

@@ -97,6 +97,7 @@ $image-width: 160px;
     input[type="checkbox"] {
         width: 20px;
         height: 20px;
+        color: var(--checkbox-bg-color);
     }
 }
 
@@ -157,9 +158,5 @@ $image-width: 160px;
     width: 100%;
     height: 230px;
     z-index: 10;
-    transition: opacity 0.2s;
+    transition: all 0.2s;
-}
-
-.card-overlay:hover {
-    opacity: 0;
 }

UI/Web/src/app/cards/cards.module.ts

@@ -7,7 +7,6 @@ import { EditSeriesModalComponent } from './_modals/edit-series-modal/edit-serie
 import { EditCollectionTagsComponent } from './_modals/edit-collection-tags/edit-collection-tags.component';
 import { ChangeCoverImageModalComponent } from './_modals/change-cover-image/change-cover-image-modal.component';
 import { BookmarksModalComponent } from './_modals/bookmarks-modal/bookmarks-modal.component';
-import { LazyLoadImageModule } from 'ng-lazyload-image';
 import { NgbTooltipModule, NgbCollapseModule, NgbPaginationModule, NgbDropdownModule, NgbProgressbarModule, NgbNavModule, NgbRatingModule } from '@ng-bootstrap/ng-bootstrap';
 import { CardActionablesComponent } from './card-item/card-actionables/card-actionables.component';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
@@ -61,7 +60,6 @@ import { BookmarkComponent } from './bookmark/bookmark.component';
     NgbRatingModule,
 
     NgbNavModule, //Series Detail
-    LazyLoadImageModule,
     NgbPaginationModule, // CardDetailLayoutComponent
     NgbDropdownModule,
     NgbProgressbarModule,

UI/Web/src/app/cards/series-card/series-card.component.ts

@@ -2,7 +2,7 @@ import { Component, EventEmitter, Input, OnChanges, OnDestroy, OnInit, Output }
 import { Router } from '@angular/router';
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
 import { ToastrService } from 'ngx-toastr';
-import { take, takeUntil, takeWhile } from 'rxjs/operators';
+import { take } from 'rxjs/operators';
 import { Series } from 'src/app/_models/series';
 import { AccountService } from 'src/app/_services/account.service';
 import { ImageService } from 'src/app/_services/image.service';
@@ -11,7 +11,6 @@ import { SeriesService } from 'src/app/_services/series.service';
 import { ConfirmService } from 'src/app/shared/confirm.service';
 import { ActionService } from 'src/app/_services/action.service';
 import { EditSeriesModalComponent } from '../_modals/edit-series-modal/edit-series-modal.component';
-import { RefreshMetadataEvent } from 'src/app/_models/events/refresh-metadata-event';
 import { MessageHubService } from 'src/app/_services/message-hub.service';
 import { Subject } from 'rxjs';
 

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

@@ -8,8 +8,8 @@
     </div>
     <div>
         <swiper
-            #swiper
             [slidesPerView]="'auto'"
+            (init)="onSwiper($event)"
             [freeMode]="true">
             <ng-template *ngFor="let item of items; index as i;" swiperSlide>
                 <ng-container [ngTemplateOutlet]="carouselItemTemplate" [ngTemplateOutletContext]="{ $implicit: item, idx: i }"></ng-container>

UI/Web/src/app/carousel/carousel-reel/carousel-reel.component.ts

@@ -16,7 +16,6 @@ export class CarouselReelComponent implements OnInit {
 
   swiper: Swiper | undefined;
 
-
   trackByIdentity: (index: number, item: any) => string;
 
   get isEnd() {

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

@@ -1,7 +1,7 @@
 <div class="container-fluid" *ngIf="collectionTag !== undefined" style="padding-top: 10px">
     <div class="row mb-3">
-        <div class="col-md-2 col-xs-4 col-sm-6">            
+        <div class="col-md-2 col-xs-4 col-sm-6 poster">            
-            <app-image class="poster" maxWidth="481px" [imageUrl]="tagImage"></app-image>
+            <app-image maxWidth="481px" [imageUrl]="tagImage"></app-image>
         </div>
         <div class="col-md-10 col-xs-8 col-sm-6">
             <div class="row g-0">

UI/Web/src/app/collections/collection-detail/collection-detail.component.scss

@@ -1,20 +1,16 @@
-@import '~bootstrap/scss/mixins/breakpoints';
-
 .poster {
   width: 100%;
-    max-height: 481px;
+  max-width: 300px;
-  }
+}
 
-  
+@media(max-width: var(--grid-breakpoints-sm)) {
-  // Including breakpoint has issue with resovling variable, so copying gridpoints here
-  @include media-breakpoint-down(xs, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)) {
   .poster {
     display: none;
   }
-  }
+}
 
-  @include media-breakpoint-down(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)) {
+@media(max-width: var(--grid-breakpoints-sm)) {
   .read-btn--text {
     display: none;
   }
-  }
+}

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

@@ -85,7 +85,8 @@
                 </ul>
             </ng-container>
 
-            <ng-container *ngIf="noResultsTemplate != undefined && searchTerm.length > 0 && !grouppedData.persons.length && !grouppedData.collections.length && !grouppedData.series.length && !grouppedData.persons.length && !grouppedData.tags.length && !grouppedData.genres.length">
+            <ng-container *ngIf="noResultsTemplate != undefined && searchTerm.length > 0 && !grouppedData.persons.length && !grouppedData.collections.length 
+                && !grouppedData.series.length && !grouppedData.persons.length && !grouppedData.tags.length && !grouppedData.genres.length && !grouppedData.libraries.length">
               <ul class="list-group results">
                 <li class="list-group-item">
                   <ng-container [ngTemplateOutlet]="noResultsTemplate"></ng-container>

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

@@ -42,20 +42,6 @@ form {
         display: flex;
     }
 
-    // .close {
-    //     cursor: pointer;
-    //     position: absolute;
-    //     top: 7px;
-    //     right: 10px;
-    // }
-
-    // @media only screen and (max-width:650px) {
-    //     .close {
-    //         top: 50%;
-    //         transform: translate(0, -60%);
-    //     }
-    // }
-
 
     input {
         outline: 0 !important;
@@ -67,7 +53,7 @@ form {
         text-indent: 0 !important;
         line-height: inherit !important;
         box-shadow: none !important;
-        width: 200px;
+        width: 300px;
         transition-property: all;
         transition-duration: 0.3s;
         display: block;

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

@@ -25,7 +25,7 @@
     </ng-template>
 </app-carousel-reel>
 
-<app-carousel-reel [items]="recentlyAddedChapters" title="Recently Added">
+<app-carousel-reel [items]="recentlyAddedChapters" title="Recently Added" (sectionClick)="handleSectionClick($event)">
     <ng-template #carouselItem let-item let-position="idx">
         <app-card-item [entity]="item" [title]="item.title" [subtitle]="item.seriesName" [imageUrl]="imageService.getRecentlyAddedItem(item)" 
         [supressArchiveWarning]="true" (clicked)="handleRecentlyAddedChapterClick(item)"></app-card-item>

UI/Web/src/app/library/library.component.ts

@@ -3,7 +3,6 @@ import { Title } from '@angular/platform-browser';
 import { Router } from '@angular/router';
 import { ReplaySubject, Subject } from 'rxjs';
 import { debounceTime, take, takeUntil } from 'rxjs/operators';
-import { RefreshMetadataEvent } from '../_models/events/refresh-metadata-event';
 import { SeriesAddedEvent } from '../_models/events/series-added-event';
 import { SeriesRemovedEvent } from '../_models/events/series-removed-event';
 import { Library } from '../_models/library';

UI/Web/src/app/nav-header/nav-header.component.scss

@@ -39,6 +39,10 @@
     font-family: var(--brand-font-family);
     font-weight: bold;
 
+    &:hover {
+        text-decoration: none;
+    }
+
     .logo {
         max-height: 28px;
         vertical-align: top;

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

@@ -15,7 +15,6 @@ import { DownloadService } from '../shared/_services/download.service';
 import { KEY_CODES, UtilityService } from '../shared/_services/utility.service';
 import { ReviewSeriesModalComponent } from '../_modals/review-series-modal/review-series-modal.component';
 import { Chapter } from '../_models/chapter';
-import { RefreshMetadataEvent } from '../_models/events/refresh-metadata-event';
 import { ScanSeriesEvent } from '../_models/events/scan-series-event';
 import { SeriesRemovedEvent } from '../_models/events/series-removed-event';
 import { LibraryType } from '../_models/library';

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

@@ -1,3 +1,7 @@
 <img #img class="lazyload" [src]="imageService.placeholderImage" [attr.data-src]="imageUrl" 
             (error)="imageService.updateErroredImage($event)" 
             aria-hidden="true">
+
+<!-- <img #img [defaultImage]="imageService.placeholderImage" [lazyload]="imageUrl" 
+            (error)="imageService.updateErroredImage($event)" 
+            aria-hidden="true"> -->

UI/Web/src/app/shared/shared.module.ts

@@ -45,20 +45,18 @@ import { ImageComponent } from './image/image.component';
     NgCircleProgressModule.forRoot(),
   ],
   exports: [
-    SafeHtmlPipe,
+    SafeHtmlPipe, // Used globally
-    SentenceCasePipe,
+    SentenceCasePipe, // Used globablly
-    ReadMoreComponent,
+    ReadMoreComponent, // Used globably
-    DrawerComponent,
+    DrawerComponent, // Can be replaced with boostrap offscreen canvas (v5)
-    TagBadgeComponent,
+    ShowIfScrollbarDirective, // Used book reader only?
-    ShowIfScrollbarDirective,
+    A11yClickDirective, // Used globally
-    A11yClickDirective,
+    SeriesFormatComponent, // Used globally
-    SeriesFormatComponent,
+    TagBadgeComponent, // Used globally
-    SeriesFormatComponent,
+    CircularLoaderComponent, // Used in Cards only
-    TagBadgeComponent,
+    PersonBadgeComponent,  // Used Series Detail
-    CircularLoaderComponent,
+    BadgeExpanderComponent, // Used globally
-    PersonBadgeComponent,
+    ImageComponent // Used globally
-    BadgeExpanderComponent,
-    ImageComponent
   ],
 })
 export class SharedModule { }

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

@@ -1,3 +1,7 @@
+form {
+    position: relative;
+}
+
 input {
     width: 15px;
     opacity: 1px;
@@ -42,6 +46,7 @@ input {
 
 .dropdown {
     width: 100%;
+    min-width: 10rem;
     background: var(--input-bg-color);
     z-index:1000;
     margin: 2px 0 0;
@@ -56,6 +61,7 @@ input {
 
     .list-group-item {
         padding: 5px 10px;
+        width: 100%;
     }
 
 
@@ -64,9 +70,6 @@ input {
     }
 }
 
-.list-group-item {
-    cursor: pointer;
-}
 
 .spinner-border {
     position: absolute;

UI/Web/src/app/user-settings/_pipes/site-theme-provider.pipe.spec.ts

@@ -0,0 +1,26 @@
+import { ThemeProvider } from '../../_models/preferences/site-theme';
+import { SiteThemeProviderPipe } from './site-theme-provider.pipe';
+
+describe('SiteThemeProviderPipe', () => {
+  let siteThemeProviderPipe: SiteThemeProviderPipe;
+
+  beforeEach(() => {
+    siteThemeProviderPipe = new SiteThemeProviderPipe();
+  })
+
+  it('translates system to System', () => {
+    expect(siteThemeProviderPipe.transform(ThemeProvider.System)).toBe('System');
+  });
+
+  it('translates user to User', () => {
+    expect(siteThemeProviderPipe.transform(ThemeProvider.User)).toBe('User');
+  });
+
+  it('translates null to empty string', () => {
+    expect(siteThemeProviderPipe.transform(null)).toBe('');
+  });
+
+  it('translates undefined to empty string', () => {
+    expect(siteThemeProviderPipe.transform(undefined)).toBe('');
+  });
+});

UI/Web/src/app/user-settings/_pipes/site-theme-provider.pipe.ts

@@ -0,0 +1,22 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import { ThemeProvider } from 'src/app/_models/preferences/site-theme';
+
+
+@Pipe({
+  name: 'siteThemeProvider'
+})
+export class SiteThemeProviderPipe implements PipeTransform {
+
+  transform(provider: ThemeProvider | undefined | null): string {
+    if (provider === null || provider === undefined) return '';
+    switch(provider) {
+      case ThemeProvider.System:
+        return 'System';
+      case ThemeProvider.User:
+        return 'User';
+      default:
+        return '';
+    }
+  }
+
+}

UI/Web/src/app/user-settings/theme-manager/theme-manager.component.html

@@ -10,13 +10,10 @@
 
     <div class="row g-0">
         <ng-container *ngFor="let theme of (themeService.themes$ | async)">
-            <div class="card col-auto me-3" style="width: 18rem;">
+            <div class="card col-auto me-3 mb-3" style="width: 18rem;">
                 <div class="card-body">
                   <h5 class="card-title">{{theme.name | sentenceCase}}</h5>
-                  <h6 class="card-subtitle mb-2 text-muted">{{theme.provider === ThemeProvider.System ? 'System' : 'User'}}</h6>
+                  <h6 class="card-subtitle mb-2 text-muted">{{theme.provider | siteThemeProvider}}</h6>
-                  <!-- <p class="card-text">
-                    <i class="far fa-file-code" style="font-size: 24px" aria-hidden="true"></i>
-                  </p> -->
                   <button class="btn btn-secondary me-2" [disabled]="theme.isDefault" *ngIf="isAdmin" (click)="updateDefault(theme)">Set Default</button>
                   <button class="btn btn-primary" (click)="applyTheme(theme)" [disabled]="currentTheme?.id === theme.id">{{currentTheme?.id === theme.id ? 'Applied' : 'Apply'}}</button>
                 </div>

UI/Web/src/app/user-settings/user-settings.module.ts

@@ -9,6 +9,8 @@ import { UserSettingsRoutingModule } from './user-settings-routing.module';
 import { ApiKeyComponent } from './api-key/api-key.component';
 import { SharedModule } from '../shared/shared.module';
 import { ThemeManagerComponent } from './theme-manager/theme-manager.component';
+import { SiteThemeProviderPipe } from './_pipes/site-theme-provider.pipe';
+
 
 
 
@@ -17,7 +19,8 @@ import { ThemeManagerComponent } from './theme-manager/theme-manager.component';
     SeriesBookmarksComponent,
     UserPreferencesComponent,
     ApiKeyComponent,
-    ThemeManagerComponent
+    ThemeManagerComponent,
+    SiteThemeProviderPipe,
   ],
   imports: [
     CommonModule,
@@ -28,6 +31,9 @@ import { ThemeManagerComponent } from './theme-manager/theme-manager.component';
     NgxSliderModule,
     UserSettingsRoutingModule,
     SharedModule // SentenceCase pipe
+  ], 
+  exports: [
+    SiteThemeProviderPipe
   ]
 })
 export class UserSettingsModule { }

UI/Web/src/styles.scss

@@ -3,7 +3,7 @@
 // Import themes which define the css variables we use to customize the app
 @import './theme/themes/light';
 @import './theme/themes/dark';
-@import './theme/themes/eink';
+@import './theme/themes/e-ink';
 
 // Import colors for overrides of bootstrap theme
 @import './theme/toastr';

UI/Web/src/theme/_variables.scss

@@ -9,6 +9,8 @@ $theme-colors: (
 );
 
 $form-select-indicator-color:#cecece;
+$accordion-icon-color: #cecece;
+$accordion-icon-active-color: #cecece;
 
 $grid-breakpoints-xs: 0;
 $grid-breakpoints-sm: 576px;

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

@@ -13,12 +13,19 @@
     }
 }
 
-.accordion-button:not(.collapsed) {
+.accordion-button {
+    &:not(.collapsed) {
         color: var(--accordion-header-text-color); 
         background-color: var(--accordion-body-bg-color);
-}
+    }
 
-.accordion-button.collapsed {
+    &.collapsed {
         color: var(--accordion-header-collapsed-text-color); 
         background-color: var(--accordion-header-collapsed-bg-color);
+    }
+
+    &:focus {
+        border-color: var(--accordion-button-focus-border-color);
+        box-shadow: var(--accordion-button-focus-box-shadow);
+    }
 }

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

@@ -6,6 +6,15 @@ a:not(.dark-exempt) {
     }
   }
 
+  a.btn {
+    color: inherit;
+    text-decoration: none;
+  
+    &:hover {
+      text-decoration: none;
+    }
+  }
+
 a.read-more-link {
     font-weight: bold;
     text-decoration: none;
@@ -13,3 +22,11 @@ a.read-more-link {
     cursor: pointer;
     color: var(--body-text-color) !important;
 }
+
+a {
+  text-decoration: none;
+
+  &:hover {
+    text-decoration: underline;
+  }
+}

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

@@ -69,3 +69,7 @@ button:disabled, .form-control:disabled, .form-control[readonly], .disabled, :di
 button i.fa {
   color: var(--btn-fa-icon-color);
 }
+
+.btn-check:focus + .btn, .btn:focus {
+  box-shadow: 0 0 0 0.25rem var(--btn-focus-boxshadow-color);
+}

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

@@ -4,11 +4,11 @@
     border-color: var(--card-border-color);
     position: relative;
 
-    .overlay:hover {
+    .card-overlay {
+        background-color: var(--card-overlay-bg-color);
+
+        &:hover {
             background-color: var(--card-overlay-hover-bg-color);
         }
-
-    .card-overlay {
-        background-color: var(--card-overlay-hover-bg-color);
     }
 }

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

@@ -8,8 +8,13 @@
         border-color: var(--checkbox-checked-bg-color);
     }
 
-    &:focus, &:hover {
+    &:hover {
         border-color: var(--checkbox-focus-border-color);
     }
+
+    &:focus {
+        border-color: var(--checkbox-focus-border-color);
+        box-shadow: 0 0 0 0.25rem var(--checkbox-focus-boxshadow-color);
+    }
 }
 

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

@@ -10,6 +10,7 @@
         &:hover, &:focus {
             color: var(--dropdown-item-hover-text-color); 
             background-color: var(--dropdown-item-hover-bg-color);
+            text-decoration: none;
         }
     }
 }

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

@@ -7,6 +7,7 @@ input, .form-control {
         border-color: var(--input-focused-border-color);
         background-color: var(--input-bg-color);
         color: var(--input-text-color);
+        box-shadow: 0 0 0 0.25rem var(--input-focus-boxshadow-color);
     }
 
     &:read-only {

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

@@ -3,7 +3,6 @@
   background-color: var(--list-group-item-bg-color);
   border-color: var(--list-group-item-border-color);
 
-  // TODO: We need a css class where we can exclude hover effects, like when list is just used for layout purposes
   &:hover {
     color: var(--list-group-hover-text-color);
     background-color: var(--list-group-hover-bg-color);
@@ -12,6 +11,7 @@
   &.active {
     color: var(--list-group-hover-text-color);
     background-color: var(--list-group-hover-bg-color);
+    border-color: var(--list-group-active-border-color);
   }
 
   &.no-hover:hover {

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

@@ -3,6 +3,7 @@
 
     &:hover, &:focus {
         color: var(--nav-link-hover-text-color);
+        text-decoration: none;
     }
 
     &.active {
@@ -21,6 +22,7 @@
     
     .nav-link {
         color: var(--nav-link-text-color);
+        position: relative;
         
         &.active, &:focus {
             color: var(--nav-tab-active-text-color);
@@ -29,6 +31,11 @@
             border-left-color: var(--nav-tab-border-left);
             border-bottom-color: var(--nav-tab-border-bottom);
             border-right-color: var(--nav-tab-border-right);
+            transform: scaleY(1);
+        }
+
+        &.active::before {
+            transform: scaleY(1);
         }
     
         &:hover {
@@ -36,9 +43,26 @@
             background-color: var(--nav-tab-hover-bg-color);
             border-top-color: var(--nav-tab-hover-border-top);
             border-left-color: var(--nav-tab-hover-border-left);
-            border-bottom-color: var(--nav-tab-border-hover-bottom);
+            border-bottom-color: var(--nav-tab-hover-border-bottom);
-            border-right-color: var(--nav-tab-border-hover-right);
+            border-right-color: var(--nav-tab-hover-border-right);
-            border-color: var(--nav-tab-border-hover-color);
+        }
+
+        &.active:hover {
+            background-color: var(--nav-tab-active-hover-bg-color);
+        }
+
+        &::before {
+            content: "";
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            transform: scaleY(0);
+            transform-origin: bottom center;
+            background: var(--nav-tab-active-hover-bg-color);
+            z-index: -1;
+            transition: transform 0.2s;
         }
     }
 

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

@@ -4,4 +4,8 @@ input[type='radio'] {
     &:hover {
         accent-color: var(--radio-hover-accent-color);
     }
+
+    &:focus {
+        box-shadow: 0 0 0 0.25rem var(--radio-focus-boxshadow-color);
+    }
 }

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

@@ -7,6 +7,7 @@
         border-color: var(--input-focused-border-color);
         background-color: var(--input-bg-color);
         color: var(--input-text-color);
+        box-shadow: 0 0 0 0.25rem var(--input-focus-boxshadow-color);
     }
 
     &:read-only {

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

@@ -22,19 +22,21 @@
     --input-text-color: #fff;
     --input-placeholder-color: #aeaeae;
     --input-border-color: #ccc;
+    --input-focus-boxshadow-color: rgb(255 255 255 / 50%);
 
     /* Buttons */
+    --btn-focus-boxshadow-color: rgb(255 255 255 / 50%);
     --btn-primary-text-color: white;
-    --btn-primary-bg-color: var(--primary-color-darker-shade);
+    --btn-primary-bg-color: var(--primary-color);
-    --btn-primary-border-color: var(--primary-color-darker-shade);
+    --btn-primary-border-color: var(--primary-color);
     --btn-primary-hover-text-color: white;
-    --btn-primary-hover-bg-color: var(--primary-color-darkest-shade);
+    --btn-primary-hover-bg-color: var(--primary-color-darker-shade);
-    --btn-primary-hover-border-color: var(--primary-color-darkest-shade);
+    --btn-primary-hover-border-color: var(--primary-color-darker-shade);
     --btn-alt-bg-color: #424c72;
     --btn-alt-border-color: #444f75;
     --btn-alt-hover-bg-color: #3b4466;
     --btn-alt-focus-bg-color: #343c59;
-    --btn-alt-focus-boxshadow-color: rgb(68 79 117 / 50%);
+    --btn-alt-focus-boxshadow-color: rgb(255 255 255 / 50%);
     --btn-fa-icon-color: white;
     --btn-disabled-bg-color: #343a40;
     --btn-disabled-text-color: white;
@@ -43,26 +45,25 @@
     /* Nav (Tabs) */
     --nav-tab-border-color: rgba(44, 118, 88, 0.7);
     --nav-tab-text-color: var(--body-text-color);
-    --nav-tab-bg-color: var(--bs-body-bg);
+    --nav-tab-bg-color: var(--primary-color);
-    --nav-tab-hover-border-color: var(--primary-color-dark-shade);
+    --nav-tab-hover-border-color: var(--primary-color);
     --nav-tab-active-text-color: white;
     --nav-tab-border-hover-color: transparent;
     --nav-tab-hover-text-color: var(--body-text-color);
-    --nav-tab-hover-bg-color: var(--primary-color-dark-shade);
+    --nav-tab-hover-bg-color: transparent;
     --nav-tab-border-top: rgba(44, 118, 88, 0.7);
     --nav-tab-border-left: rgba(44, 118, 88, 0.7);
-    --nav-tab-border-bottom: var(--bs-body-bg);
+    --nav-tab-border-bottom: rgba(44, 118, 88, 0.7);
     --nav-tab-border-right: rgba(44, 118, 88, 0.7);
-    --nav-tab-border-hover-top: var(--primary-color-dark-shade);
+    --nav-tab-hover-border-top: rgba(44, 118, 88, 0.7);
-    --nav-tab-border-hover-left: var(--primary-color-dark-shade);
+    --nav-tab-hover-border-left: rgba(44, 118, 88, 0.7);
-    --nav-tab-border-hover-bottom: rgba(44, 118, 88, 0.7);
+    --nav-tab-hover-border-bottom: var(--bs-body-bg);
-    --nav-tab-border-hover-right: var(--primary-color-dark-shade);
+    --nav-tab-hover-border-right: rgba(44, 118, 88, 0.7);
-
+    --nav-tab-active-hover-bg-color: var(--primary-color);
-    --nav-link-bg-color: var(--primary-color-dark-shade);
+    --nav-link-bg-color: var(--primary-color);
     --nav-link-active-text-color: white;
     --nav-link-text-color: white;
 
-
     /* Header */
     --nav-header-text-color: white;
     --nav-header-bg-color: rgb(22, 27, 34);
@@ -77,6 +78,7 @@
     --checkbox-checked-bg-color: var(--primary-color);
     --checkbox-border-color: var(--input-focused-border-color);
     --checkbox-focus-border-color: var(--primary-color);
+    --checkbox-focus-boxshadow-color: rgb(255 255 255 / 50%);
 
     /* Tag Badge */
     --tagbadge-border-color: rgba(239, 239, 239, 0.125);
@@ -89,6 +91,7 @@
     --list-group-item-border-color: rgba(239, 239, 239, 0.125);
     --list-group-hover-text-color: white;
     --list-group-hover-bg-color: var(--accordion-body-bg-color);
+    --list-group-active-border-color: none;
 
     /* Popover */
     --popover-body-bg-color: var(--navbar-bg-color);
@@ -105,7 +108,7 @@
 
     /* Dropdown */
     --dropdown-item-hover-text-color: white;
-    --dropdown-item-hover-bg-color: var(--primary-color-dark-shade);
+    --dropdown-item-hover-bg-color: var(--primary-color);
     --dropdown-item-text-color: var(--navbar-text-color);
     --dropdown-item-bg-color: var(--navbar-bg-color);
     --dropdown-overlay-color: rgba(0,0,0,0.5);
@@ -118,6 +121,8 @@
     --accordion-body-text-color: var(--body-text-color);
     --accordion-header-collapsed-text-color: rgba(74, 198, 148, 0.9);
     --accordion-header-collapsed-bg-color: rgba(22,27,34,0.5);
+    --accordion-button-focus-border-color: unset;
+    --accordion-button-focus-box-shadow: unset;
 
     /* Breadcrumb */
     --breadcrumb-bg-color: #292d32;
@@ -145,6 +150,7 @@
     --card-text-color: var(--body-text-color);
     --card-border-color: rgba(239, 239, 239, 0.125);
     --card-progress-bar-color: var(--primary-color);
+    --card-overlay-bg-color: rgba(0, 0, 0, 0);
     --card-overlay-hover-bg-color: rgba(0, 0, 0, 0.2);
 
     /* Slider */
@@ -160,7 +166,8 @@
 
     /* Radios */
     --radio-accent-color: var(--primary-color);
-    --radio-hover-accent-color: var(--primary-color-dark-shade);
+    --radio-hover-accent-color: var(--primary-color);
+    --radio-focus-boxshadow-color: rgb(255 255 255 / 50%);
 
     /* Carousel */
     --carousel-header-text-color: var(--body-text-color);

UI/Web/src/theme/themes/e-ink.scss

@@ -1,4 +1,4 @@
-:root .bg-eink {
+:root .bg-e-ink {
   --color-scheme: light;
   --primary-color: black;
   --primary-color-dark-shade: #3B9E76;
@@ -22,12 +22,22 @@
   --input-border-color: #ccc;
 
   /* Buttons */
-  --btn-primary-text-color: white;
+  --btn-primary-text-color: black;
+  --btn-primary-bg-color: white;
+  --btn-primary-border-color: black;
+  --btn-primary-hover-text-color: white;
+  --btn-primary-hover-bg-color: black;
+  --btn-primary-hover-border-color: black;
   --btn-alt-bg-color: #424c72;
   --btn-alt-border-color: #444f75;
   --btn-alt-hover-bg-color: #3b4466;
   --btn-alt-focus-bg-color: #343c59;
   --btn-alt-focus-boxshadow-color: rgb(68 79 117 / 50%);
+  --btn-fa-icon-color: black;
+  --btn-disabled-bg-color: #020202;
+  --btn-disabled-text-color: white;
+  --btn-disabled-border-color: #6c757d;
+
 
   /* Nav */
   --nav-link-active-text-color: white;
@@ -87,6 +97,7 @@
   --list-group-hover-text-color: black;
   --list-group-hover-bg-color: #eaeaea;
   --list-group-item-border-color: rgba(239, 239, 239, 0.125);
+  --list-group-active-border-color: none;
 
   /* Dropdown */
   --dropdown-item-hover-text-color: white;

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

@@ -22,7 +22,7 @@
     --input-border-color: #ccc;
   
     /* Buttons */
-    --btn-primary-text-color: white;
+    --btn-primary-text-color: black;
     --btn-alt-bg-color: #424c72;
     --btn-alt-border-color: #444f75;
     --btn-alt-hover-bg-color: #3b4466;
@@ -41,7 +41,7 @@
     --nav-tab-border-hover-color: transparent;
     
     /* Checkboxes */
-    --checkbox-checked-bg-color: var(--primary-color);
+    --checkbox-checked-bg-color: black;
     --checkbox-bg-color: white;
     --checkbox-border-color: var(--primary-color);
     --checkbox-focus-border-color: var(--input-border-color);
@@ -70,6 +70,7 @@
     --grid-breakpoints-xl: $grid-breakpoint-xl;
     --body-font-family: "EBGaramond", "Helvetica Neue", sans-serif;
     --brand-font-family: "Spartan", sans-serif;
+    --text-muted-color: #aaa;
   
     /* Breadcrumb */
     --breadcrumb-bg-color: #eaeaea;
@@ -79,6 +80,7 @@
     --card-text-color: #000;
     --card-border-color: #ccc;
     --card-progress-bar-color: var(--primary-color);
+    --card-overlay-bg-color: rgba(0, 0, 0, 0);
     --card-overlay-hover-bg-color: rgba(0, 0, 0, 0.2);
   
     /* List items */
@@ -87,6 +89,7 @@
     --list-group-hover-text-color: inherit;
     --list-group-hover-bg-color: #eaeaea;
     --list-group-item-border-color: rgba(239, 239, 239, 0.125);
+    --list-group-active-border-color: none;
   
     /* Dropdown */
     --dropdown-item-hover-text-color: white;

UI/Web/src/theme/utilities/_global.scss

@@ -11,5 +11,5 @@ hr {
 }
 
 .text-muted {
-    color: #d7d7d7 !important;
+    color: var(--text-muted-color) !important;
 }