Match UX Polish and UI Tweaks

UI/Web/src/_card-item-common.scss

@@ -163,11 +163,15 @@ $image-width: 160px;
     align-items: center;
     padding: 0 5px;
 
+    :first-child {
+      min-width: 22px;
+    } 
+
     .card-title {
       font-size: 0.8rem;
       margin: 0;
       text-align: center;
-      max-width: 98px;
+      max-width: 90px;
 
       a {
         overflow: hidden;

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

@@ -44,6 +44,9 @@ export class ThemeService {
 
   private themesSource = new ReplaySubject<SiteTheme[]>(1);
   public themes$ = this.themesSource.asObservable();
+
+  private darkModeSource = new ReplaySubject<boolean>(1);
+  public isDarkMode$ = this.darkModeSource.asObservable();
 
   /**
    * Maintain a cache of themes. SignalR will inform us if we need to refresh cache
@@ -237,9 +240,11 @@ export class ThemeService {
           }
 
           this.currentThemeSource.next(theme);
+          this.darkModeSource.next(this.isDarkTheme());
         });
       } else {
         this.currentThemeSource.next(theme);
+        this.darkModeSource.next(this.isDarkTheme());
       }
     } else {
       // Only time themes isn't already loaded is on first load

UI/Web/src/app/_single-module/match-series-modal/match-series-modal.component.html

@@ -32,7 +32,7 @@ <h4 class="modal-title" id="modal-basic-title">
             <div class="mb-3" style="width: 100%">
               <app-setting-switch [title]="t('dont-match-label')" [subtitle]="t('dont-match-tooltip')">
                 <ng-template #switch>
-                  <div class="form-check form-switch float-end">
+                  <div class="form-check form-switch">
                     <input id="dont-match" type="checkbox" class="form-check-input" formControlName="dontMatch" role="switch">
                   </div>
                 </ng-template>
@@ -50,8 +50,7 @@ <h4 class="modal-title" id="modal-basic-title">
       @if (!formGroup.get('dontMatch')?.value) {
         <app-loading [loading]="isLoading"></app-loading>
         @for(item of matches; track item.series.name) {
-          <app-match-series-result-item [item]="item" (selected)="selectMatch($event)"></app-match-series-result-item>
-          <div class="setting-section-break"></div>
+          <app-match-series-result-item [item]="item" [isDarkMode]="(themeService.isDarkMode$ | async)!" (selected)="selectMatch($event)"></app-match-series-result-item>
         } @empty {
           @if (!isLoading) {
             {{t('no-results')}}

UI/Web/src/app/_single-module/match-series-modal/match-series-modal.component.scss

@@ -0,0 +1,3 @@
+.setting-section-break {
+    margin: 0 !important;
+}

UI/Web/src/app/_single-module/match-series-modal/match-series-modal.component.ts

@@ -10,11 +10,14 @@ import {ExternalSeriesMatch} from "../../_models/series-detail/external-series-m
 import {ToastrService} from "ngx-toastr";
 import {SettingItemComponent} from "../../settings/_components/setting-item/setting-item.component";
 import {SettingSwitchComponent} from "../../settings/_components/setting-switch/setting-switch.component";
+import { ThemeService } from 'src/app/_services/theme.service';
+import { AsyncPipe } from '@angular/common';
 
 @Component({
   selector: 'app-match-series-modal',
   standalone: true,
   imports: [
+    AsyncPipe,
     TranslocoDirective,
     MatchSeriesResultItemComponent,
     LoadingComponent,
@@ -31,6 +34,7 @@ export class MatchSeriesModalComponent implements OnInit {
   private readonly seriesService = inject(SeriesService);
   private readonly modalService = inject(NgbActiveModal);
   private readonly toastr = inject(ToastrService);
+  protected readonly themeService = inject(ThemeService);
 
   @Input({required: true}) series!: Series;
 

UI/Web/src/app/_single-module/match-series-result-item/match-series-result-item.component.html

@@ -1,13 +1,13 @@
 <ng-container *transloco="let t; read:'match-series-result-item'">
-
-  <div class="d-flex p-1 clickable" (click)="selectItem()">
-    <div style="width: 32px" class="me-1">
+<div class="match-item-container p-3 mt-3 {{isDarkMode ? 'dark' : 'light'}}">
+  <div class="d-flex clickable match-item" (click)="selectItem()">
+    <div class="me-1">
       @if (item.series.coverUrl) {
-        <app-image class="me-3 search-result" width="32px" [imageUrl]="item.series.coverUrl"></app-image>
+        <app-image class="me-3 search-result" width="100px" [imageUrl]="item.series.coverUrl"></app-image>
       }
     </div>
     <div class="ms-1">
-      <div>{{item.series.name}}</div>
+      <div><span class="title">{{item.series.name}}</span> <span class="me-1 float-end">({{item.matchRating | translocoPercent}})</span></div>
       <div class="text-muted">
         @for(synm of item.series.synonyms; track synm; let last = $last) {
           {{synm}}
@@ -19,6 +19,7 @@
       @if (item.series.summary) {
         <div>
           <app-read-more [text]="item.series.summary" [showToggle]="false"></app-read-more>
+          <span class="me-1"><a (click)="$event.stopPropagation()" [href]="item.series.siteUrl" rel="noreferrer noopener" target="_blank">{{t('details')}}</a></span>
         </div>
       }
     </div>
@@ -30,8 +31,7 @@
       <span class="ms-2">{{t('updating-metadata-status')}}</span>
     </div>
   } @else {
-    <div class="d-flex p-1 justify-content-between">
-      <span class="me-1"><a (click)="$event.stopPropagation()" [href]="item.series.siteUrl" rel="noreferrer noopener" target="_blank">{{t('details')}}</a></span>
+    <div class="d-flex pt-3 justify-content-between">
       @if ((item.series.volumes || 0) > 0 || (item.series.chapters || 0) > 0) {
         <span class="me-1">{{t('volume-count', {num: item.series.volumes})}}</span>
         <span class="me-1">{{t('chapter-count', {num: item.series.chapters})}}</span>
@@ -40,11 +40,8 @@
       }
 
       <span class="me-1">{{item.series.plusMediaFormat | plusMediaFormat}}</span>
-      <span class="me-1">({{item.matchRating | translocoPercent}})</span>
     </div>
   }
-
-
-
-
+
+</div>
 </ng-container>

UI/Web/src/app/_single-module/match-series-result-item/match-series-result-item.component.scss

@@ -0,0 +1,33 @@
+.search-result {
+    img {
+        max-width: 100px;
+        min-width: 100px;
+    }
+}
+.title {
+    font-size: 1.2rem;
+    font-weight: bold;
+    margin: 0;
+    padding: 0;
+}
+
+.match-item-container {
+    &.dark {
+        background-color: var(--elevation-layer6-dark);
+    }
+
+    &.light {
+        background-color: var(--elevation-layer6);
+    }
+    border-radius: 15px;
+
+    &:hover {
+        &.dark {
+            background-color: var(--elevation-layer11-dark);
+        }
+
+        &.light {
+            background-color: var(--elevation-layer11);
+        }
+    }
+}

UI/Web/src/app/_single-module/match-series-result-item/match-series-result-item.component.ts

@@ -37,6 +37,7 @@ export class MatchSeriesResultItemComponent {
   private readonly cdRef = inject(ChangeDetectorRef);
 
   @Input({required: true}) item!: ExternalSeriesMatch;
+  @Input({required: true}) isDarkMode = true;
   @Output() selected: EventEmitter<ExternalSeriesMatch> = new EventEmitter();
 
   isSelected = false;

UI/Web/src/app/settings/_components/setting-item/setting-item.component.html

@@ -1,7 +1,7 @@
 <ng-container *transloco="let t;">
   <div>
     <div class="settings-row g-0 row">
-      <div class="col-10 setting-title">
+      <div class="col-auto setting-title edit">
         <h6 class="section-title">
           @if (labelId) {
             <label class="reset-label" [for]="labelId">{{title}}</label>
@@ -13,7 +13,7 @@ <h6 class="section-title">
           }
         </h6>
       </div>
-      <div class="col-2 text-end align-self-end justify-content-end">
+      <div class="col-auto text-end align-self-end justify-content-end edit-btn">
         @if (showEdit) {
         <button type="button" class="btn btn-text btn-sm" (click)="toggleEditMode()" [disabled]="!canEdit">
           {{isEditMode ? t('common.close') : (editLabel || t('common.edit'))}}

UI/Web/src/app/settings/_components/setting-item/setting-item.component.scss

@@ -11,3 +11,24 @@
   color: var(--primary-color);
   cursor: pointer;
 }
+
+.setting-title.edit:hover ~ .edit-btn{
+  opacity: 1;
+  transition: opacity 0.3s ease-out;
+}
+
+.edit-btn {
+  opacity: 0;
+  transition: opacity 0.5s ease-out;
+  transition-delay: 0.5s;
+
+  &:hover {
+    opacity: 1;
+    transition: opacity 0.3s ease-out;
+  }
+
+  .btn {
+    margin-bottom: 0.5em;
+    line-height: 1.2;
+  }
+}

UI/Web/src/app/settings/_components/setting-switch/setting-switch.component.html

@@ -1,14 +1,15 @@
 <ng-container *transloco="let t;">
   <div>
     <div class="row g-0 mb-2">
-      <div class="col-11">
-        <h6 class="section-title" [id]="id || title">{{title}}</h6>
-      </div>
-      <div class="col-1">
+      <div class="col-auto">
         @if (switchRef) {
           <ng-container [ngTemplateOutlet]="switchRef"></ng-container>
         }
       </div>
+      <div class="col-auto">
+        <h6 class="section-title" [id]="id || title">{{title}}</h6>
+      </div>
+
     </div>
 
 

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

@@ -7,6 +7,8 @@ h2 {
 
 .main-container {
   margin-top: 10px;
+  max-width: 1920px;
+  padding: 0 20px;
 }
 
 ::ng-deep .content-wrapper:not(.closed) {

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

@@ -196,15 +196,15 @@
 
       .side-nav-header {
         color: #ffffff;
-        font-size: 0.9375rem;
+        font-size: 1rem;
 
         &:first-of-type {
           margin-top: 0.7rem;
         }
       }
 
       .side-nav-item {
-        font-size: 0.9rem;
+        font-size: 1rem;
         min-height: 1.875rem;
         justify-content: unset;
         margin-left: 1.125rem;
@@ -218,7 +218,7 @@
         .side-nav-text {
           text-align: unset;
           margin-left: 0.75rem;
-          font-size: 0.8125rem;
+          font-size: 0.9rem;
           color: #999999;
         }