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>

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>
-                  <!-- <p class="card-text">
-                    <i class="far fa-file-code" style="font-size: 24px" aria-hidden="true"></i>
-                  </p> -->
+                  <h6 class="card-subtitle mb-2 text-muted">{{theme.provider | siteThemeProvider}}</h6>
                   <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 { }