Replaced header buttons with app-pill-button for improved UI consistency

src/main/frontend/src/app/components/pill-button/pill-button.component.html

@@ -0,0 +1,11 @@
+<button
+  type="button"
+  class="control-pill"
+  [class.active]="active"
+  [disabled]="disabled || loading"
+  [attr.title]="tooltip || null"
+  (click)="clicked.emit()"
+>
+  <span aria-hidden="true" [class]="'pill-icon pill-icon--' + (loading ? 'spinner' : icon)"></span>
+  <span class="toggle-label">{{ label }}</span>
+</button>

src/main/frontend/src/app/components/pill-button/pill-button.component.scss

@@ -0,0 +1,105 @@
+:host {
+  display: inline-flex;
+  align-items: center;
+}
+
+.control-pill {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 8px;
+  height: 36px;
+  border-radius: 18px;
+  background-color: #ffffff;
+  border: 1px solid #dee2e6;
+  cursor: pointer;
+  transition: all 0.2s ease-in-out;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
+  padding: 6px 14px 6px 10px;
+
+  .pill-icon {
+    width: 20px;
+    height: 20px;
+    flex-shrink: 0;
+    background-color: #6c757d;
+    transition: background-color 0.2s ease-in-out;
+    -webkit-mask-repeat: no-repeat;
+    mask-repeat: no-repeat;
+    -webkit-mask-position: center;
+    mask-position: center;
+    -webkit-mask-size: contain;
+    mask-size: contain;
+
+    &.pill-icon--moon {
+      -webkit-mask-image: url('./icons/moon.svg');
+      mask-image: url('./icons/moon.svg');
+    }
+
+    &.pill-icon--help {
+      -webkit-mask-image: url('./icons/help.svg');
+      mask-image: url('./icons/help.svg');
+    }
+
+    &.pill-icon--github {
+      -webkit-mask-image: url('./icons/github.svg');
+      mask-image: url('./icons/github.svg');
+    }
+
+    &.pill-icon--spinner {
+      -webkit-mask-image: url('./icons/spinner.svg');
+      mask-image: url('./icons/spinner.svg');
+      animation: spin 1s linear infinite;
+    }
+  }
+
+  .toggle-label {
+    font-size: 14px;
+    font-weight: 600;
+    color: #495057;
+    white-space: nowrap;
+    transition: color 0.2s ease-in-out;
+  }
+
+  &:hover:not(:disabled) {
+    background-color: #f8f9fa;
+    border-color: #ced4da;
+    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.12);
+  }
+
+  &:active:not(:disabled) {
+    transform: scale(0.98);
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.6;
+  }
+
+  &.active {
+    background-color: #1e3a8a;
+    border-color: #1e3a8a;
+    box-shadow: 0 3px 6px rgba(30, 58, 138, 0.3);
+
+    .pill-icon {
+      background-color: #ffffff;
+    }
+
+    .toggle-label {
+      color: #ffffff;
+    }
+
+    &:hover {
+      background-color: #1d3680;
+      border-color: #1d3680;
+    }
+  }
+}
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}

src/main/frontend/src/app/components/pill-button/pill-button.component.ts

@@ -0,0 +1,21 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+
+export type PillButtonIcon = 'moon' | 'help' | 'github';
+
+@Component({
+  selector: 'app-pill-button',
+  standalone: true,
+  imports: [],
+  templateUrl: './pill-button.component.html',
+  styleUrl: './pill-button.component.scss',
+})
+export class PillButtonComponent {
+  @Input() icon: PillButtonIcon = 'help';
+  @Input() label = '';
+  @Input() active = false;
+  @Input() disabled = false;
+  @Input() loading = false;
+  @Input() tooltip = '';
+
+  @Output() clicked = new EventEmitter<void>();
+}

src/main/frontend/src/app/pages/header/header.component.html

@@ -58,20 +58,14 @@ <h3>CVE Overview</h3>
         }
       </div>
     } @else {
-      <button type="button" class="github-login-btn" [disabled]="authService.isLoading()" (click)="onLoginWithGitHub()">
-        @if (authService.isLoading()) {
-          <svg class="spinner" height="32" width="32" viewBox="0 0 16 16" fill="none">
-            <circle cx="8" cy="8" r="7" stroke="black" stroke-width="2" stroke-opacity="0.25" />
-            <path d="M15 8a7 7 0 01-7 7" stroke="black" stroke-width="2" stroke-linecap="round" />
-          </svg>
-        } @else {
-          <svg height="32" width="32" viewBox="0 0 16 16" fill="black">
-            <path
-              d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"
-            />
-          </svg>
-        }
-      </button>
+      <app-pill-button
+        class="github-pill-button"
+        icon="github"
+        label="Login"
+        tooltip="Log in with GitHub"
+        [loading]="authService.isLoading()"
+        (clicked)="onLoginWithGitHub()"
+      />
     }
   </section>
 </nav>

src/main/frontend/src/app/pages/header/header.component.scss

@@ -76,36 +76,8 @@
     margin-left: auto;
     display: flex;
     align-items: center;
-    padding-right: 2.5rem;
-
-    .github-login-btn {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      background-color: white;
-      border: none;
-      border-radius: 50%;
-      cursor: pointer;
-      padding: 8px;
-      transition: background-color 0.2s;
-
-      svg {
-        display: block;
-      }
-
-      &:hover:not(:disabled) {
-        background-color: #f6f8fa;
-      }
-
-      &:disabled {
-        cursor: not-allowed;
-        opacity: 0.6;
-      }
-
-      .spinner {
-        animation: spin 1s linear infinite;
-      }
-    }
+    padding-right: 2rem;
+    padding-top: 0.25rem;
 
     .user-profile {
       position: relative;
@@ -284,12 +256,3 @@
     }
   }
 }
-
-@keyframes spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}

src/main/frontend/src/app/pages/header/header.component.spec.ts

@@ -120,7 +120,7 @@ describe('HeaderComponent', () => {
     });
 
     it('should display login button', () => {
-      const loginButton = fixture.debugElement.query(By.css('.github-login-btn'));
+      const loginButton = fixture.debugElement.query(By.css('app-pill-button'));
 
       expect(loginButton).toBeTruthy();
     });
@@ -133,7 +133,7 @@ describe('HeaderComponent', () => {
 
     it('should call onLoginWithGitHub when login button is clicked', () => {
       spyOn(component, 'onLoginWithGitHub');
-      const loginButton = fixture.debugElement.query(By.css('.github-login-btn'));
+      const loginButton = fixture.debugElement.query(By.css('app-pill-button button'));
       loginButton.nativeElement.click();
 
       expect(component.onLoginWithGitHub).toHaveBeenCalledWith();
@@ -142,7 +142,7 @@ describe('HeaderComponent', () => {
     it('should disable login button when loading', () => {
       mockAuthService.isLoading.set(true);
       fixture.detectChanges();
-      const loginButton = fixture.debugElement.query(By.css('.github-login-btn'));
+      const loginButton = fixture.debugElement.query(By.css('app-pill-button button'));
 
       expect(loginButton.nativeElement.disabled).toBe(true);
     });
@@ -163,7 +163,7 @@ describe('HeaderComponent', () => {
     });
 
     it('should not display login button', () => {
-      const loginButton = fixture.debugElement.query(By.css('.github-login-btn'));
+      const loginButton = fixture.debugElement.query(By.css('app-pill-button'));
 
       expect(loginButton).toBeFalsy();
     });

src/main/frontend/src/app/pages/header/header.component.ts

@@ -4,11 +4,12 @@ import { NgOptimizedImage } from '@angular/common';
 import { AuthService } from '../../services/auth.service';
 import { LocationService } from '../../services/location.service';
 import { GraphStateService } from '../../services/graph-state.service';
+import { PillButtonComponent } from '../../components/pill-button/pill-button.component';
 
 @Component({
   selector: 'app-header',
   standalone: true,
-  imports: [NgOptimizedImage, RouterLink, RouterLinkActive],
+  imports: [NgOptimizedImage, RouterLink, RouterLinkActive, PillButtonComponent],
   templateUrl: './header.component.html',
   styleUrl: './header.component.scss',
 })

src/main/frontend/src/app/pages/release-graph/release-catalogus/release-catalogus.component.html

@@ -1,16 +1,4 @@
-<button
-  class="release-btn"
-  type="button"
-  title="Show release info"
-  aria-label="Show release info"
-  [ngStyle]="{
-    right: isSmallScreen ? 'auto' : this.authService.isAuthenticated() ? '12.5rem' : '6.5rem',
-    left: isSmallScreen ? '1.25rem' : 'auto',
-  }"
-  (click)="toggleModal()"
->
-  <img src="assets/icons/info-button.svg" alt="" width="36" height="36" />
-</button>
+<app-pill-button icon="help" label="Legend" tooltip="Show legend and release info" (clicked)="toggleModal()" />
 
 @if (modalOpen) {
   <app-modal [title]="'Release Support'" [hideScrollBar]="true" (closed)="toggleModal()">

src/main/frontend/src/app/pages/release-graph/release-catalogus/release-catalogus.component.scss

@@ -1,20 +1,6 @@
-.release-btn {
-  background: none;
-  border: none;
-  padding: 0;
-  margin: 0;
-  box-shadow: none;
-  cursor: pointer;
-  position: fixed;
-  z-index: 25;
-
-  @media (min-width: 999px) {
-    top: 1.5rem;
-  }
-
-  @media (max-width: 992px) {
-    bottom: 1.25rem;
-  }
+:host {
+  display: inline-flex;
+  align-items: center;
 }
 
 .release-modal-content {

src/main/frontend/src/app/pages/release-graph/release-catalogus/release-catalogus.component.ts

@@ -1,53 +1,34 @@
-import { Component, inject, Input, OnDestroy, OnInit } from '@angular/core';
-import { AsyncPipe, DatePipe, LowerCasePipe, NgStyle } from '@angular/common';
+import { Component, inject, Input, OnInit } from '@angular/core';
+import { AsyncPipe, DatePipe, LowerCasePipe } from '@angular/common';
 import { ModalComponent } from '../../../components/modal/modal.component';
-import { AuthService } from '../../../services/auth.service';
 import { BuildInfo, VersionService } from '../../../services/version.service';
 import { Observable } from 'rxjs';
 import { GestureComponent } from '../../../components/gesture/gesture.component';
+import { PillButtonComponent } from '../../../components/pill-button/pill-button.component';
 
 @Component({
   selector: 'app-release-catalogus',
   standalone: true,
   templateUrl: './release-catalogus.component.html',
   styleUrl: './release-catalogus.component.scss',
-  imports: [NgStyle, ModalComponent, AsyncPipe, DatePipe, LowerCasePipe, GestureComponent],
+  imports: [ModalComponent, AsyncPipe, DatePipe, LowerCasePipe, GestureComponent, PillButtonComponent],
 })
-export class ReleaseCatalogusComponent implements OnInit, OnDestroy {
+export class ReleaseCatalogusComponent implements OnInit {
   private static readonly SESSION_KEY = 'releaseCatalogusShown';
 
   @Input() showExtendedSupport = false;
 
   public modalOpen = false;
-  public isSmallScreen = false;
   public buildInfo$: Observable<BuildInfo | null> = inject(VersionService).getBuildInformation();
 
-  protected authService: AuthService = inject(AuthService);
-
-  private mediaQueryList: MediaQueryList | null = null;
-  private mediaListener: (() => void) | null = null;
-
   toggleModal(): void {
     this.modalOpen = !this.modalOpen;
   }
 
   ngOnInit(): void {
-    this.mediaQueryList = globalThis.matchMedia('(max-width: 992px)');
-    this.isSmallScreen = this.mediaQueryList?.matches ?? false;
-    this.mediaListener = (): void => {
-      this.isSmallScreen = this.mediaQueryList?.matches ?? false;
-    };
-    this.mediaQueryList?.addEventListener('change', this.mediaListener);
-
     if (!sessionStorage.getItem(ReleaseCatalogusComponent.SESSION_KEY)) {
       this.modalOpen = true;
       sessionStorage.setItem(ReleaseCatalogusComponent.SESSION_KEY, 'true');
     }
   }
-
-  ngOnDestroy(): void {
-    if (this.mediaQueryList && this.mediaListener) {
-      this.mediaQueryList.removeEventListener('change', this.mediaListener);
-    }
-  }
 }