fix(frontend): enhance error handling and update UI styling

frontend/src/app/interceptors/unauthorized.interceptor.ts

@@ -1,10 +1,11 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { HttpErrorResponse, HttpEvent, HttpHandler, HttpInterceptor, HttpRequest } from '@angular/common/http';
-import { Injectable, inject } from '@angular/core';
+import { inject, Injectable } from '@angular/core';
 import { Router } from '@angular/router';
 import { NbTokenService } from '@nebular/auth';
 import { Observable, throwError } from 'rxjs';
 import { catchError } from 'rxjs/operators';
+import { tokenFilter } from '../modules/auth/token.filter';
 
 @Injectable()
 export class UnauthorizedInterceptor implements HttpInterceptor {
@@ -14,13 +15,14 @@ export class UnauthorizedInterceptor implements HttpInterceptor {
     public intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
         return next.handle(req).pipe(
             catchError((error: HttpErrorResponse) => {
-                // A 401 from the refresh endpoint means the refresh token itself
-                // is invalid/consumed; it is handled by the auth layer, so do not
-                // clear tokens here (that caused spurious logouts under the
-                // single-use refresh token race on app resume).
-                const isRefreshRequest = req.url.includes('/auth/refresh-token');
+                // A 401 from a public auth endpoint (login, refresh-token) is not a
+                // session expiry - it means the submitted credentials or refresh
+                // token were rejected. The auth layer handles those (login form
+                // error message; refresh race on resume), so do not clear tokens
+                // or redirect here.
+                const isPublicAuthRequest = tokenFilter(req);
 
-                if (error.status === 401 && !isRefreshRequest) {
+                if (error.status === 401 && !isPublicAuthRequest) {
                     this.tokenService.clear();
                     this.router.navigate(['auth/login']);
                 }

frontend/src/app/modules/auth/auth.module.ts

@@ -43,7 +43,7 @@ export class AuthModule {
                     rememberMe: false,
                     strategy: 'jwt',
                     showMessages: {
-                        error: false,
+                        error: true,
                     },
                 },
                 register: {

frontend/src/app/modules/main/dialogs/statement-review-dialog/statement-review-dialog.component.html

@@ -51,7 +51,7 @@
             </nb-list>
         }
     </nb-card-body>
-    <nb-card-footer class="d-flex align-items-center justify-content-between">
+    <nb-card-footer class="d-flex align-items-center justify-content-between with-background">
         <button
             nbButton
             type="button"

frontend/src/styles.scss

@@ -48,3 +48,16 @@ nb-list-item.with-background {
 .font-weight-normal {
     font-weight: normal;
 }
+
+// Dialog header icon buttons (close / back) should read as a bare icon only -
+// no background, border, outline or focus fill in any state.
+nb-card-header [nbButton].appearance-ghost.status-basic {
+    &,
+    &:hover,
+    &:focus,
+    &:active {
+        background-color: transparent;
+        border-color: transparent;
+        box-shadow: none;
+    }
+}

frontend/src/theme.scss

@@ -114,7 +114,7 @@ $nb-themes: nb-register-theme(
                     link-text-focus-color: nb-theme(color-secondary-500),
                     link-text-active-color: nb-theme(color-secondary-500),
                     shadow: 0 0.75rem 1.5rem 0 rgba(0, 0, 0, 0.45),
-                    outline-color: #3f5eb5,
+                    outline-color: rgba(63, 94, 181, 0.32),
                     button-outline-width: 0,
                     spinner-basic-background-color: rgba(16, 18, 24, 0.72),
                     spinner-primary-background-color: rgba(16, 18, 24, 0.72),