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/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">            
-            <app-image class="poster" maxWidth="481px" [imageUrl]="tagImage"></app-image>
+        <div class="col-md-2 col-xs-4 col-sm-6 poster">            
+            <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;
+  width: 100%;
+  max-width: 300px;
+}
+
+@media(max-width: var(--grid-breakpoints-sm)) {
+  .poster {
+    display: none;
   }
-  
-  
-  // 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;
-      }
+}
+
+@media(max-width: var(--grid-breakpoints-sm)) {
+  .read-btn--text {
+    display: none;
   }
-  
-  @include media-breakpoint-down(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)) {
-    .read-btn--text {
-      display: none;
-    }
-  }
+}