From 53ec6cf3275072f2313b4eb1c81a7df7ef45fa2e Mon Sep 17 00:00:00 2001
From: stijnpotters <stijn.potters1@gmail.com>
Date: Mon, 15 Jun 2026 17:36:18 +0200
Subject: [PATCH 1/3] fix: replace header buttons with app-pill-button for
 improved UI consistency

---
 .../pill-button/pill-button.component.html    | 38 ++++++++
 .../pill-button/pill-button.component.scss    | 87 +++++++++++++++++++
 .../pill-button/pill-button.component.ts      | 21 +++++
 .../app/pages/header/header.component.html    | 22 ++---
 .../app/pages/header/header.component.scss    | 40 +--------
 .../app/pages/header/header.component.spec.ts |  8 +-
 .../src/app/pages/header/header.component.ts  |  3 +-
 .../release-catalogus.component.html          | 14 +--
 .../release-catalogus.component.scss          | 20 +----
 .../release-catalogus.component.ts            | 29 ++-----
 .../release-graph.component.html              | 28 +++---
 .../release-graph.component.scss              | 74 +++-------------
 .../release-graph/release-graph.component.ts  |  4 +-
 13 files changed, 199 insertions(+), 189 deletions(-)
 create mode 100644 src/main/frontend/src/app/components/pill-button/pill-button.component.html
 create mode 100644 src/main/frontend/src/app/components/pill-button/pill-button.component.scss
 create mode 100644 src/main/frontend/src/app/components/pill-button/pill-button.component.ts

diff --git a/src/main/frontend/src/app/components/pill-button/pill-button.component.html b/src/main/frontend/src/app/components/pill-button/pill-button.component.html
new file mode 100644
index 00000000..2809bfd6
--- /dev/null
+++ b/src/main/frontend/src/app/components/pill-button/pill-button.component.html
@@ -0,0 +1,38 @@
+<button
+  type="button"
+  class="control-pill"
+  [class.active]="active"
+  [disabled]="disabled || loading"
+  [attr.title]="tooltip || null"
+  (click)="clicked.emit()"
+>
+  @if (loading) {
+    <svg class="spinner" width="20" height="20" viewBox="0 0 16 16" fill="none" aria-hidden="true">
+      <circle cx="8" cy="8" r="7" stroke="#6c757d" stroke-width="2" stroke-opacity="0.25" />
+      <path d="M15 8a7 7 0 0 1-7 7" stroke="#6c757d" stroke-width="2" stroke-linecap="round" />
+    </svg>
+  } @else {
+    @switch (icon) {
+      @case ('moon') {
+        <svg viewBox="0 0 24 24" class="pill-icon" aria-hidden="true">
+          <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
+        </svg>
+      }
+      @case ('help') {
+        <svg viewBox="0 0 24 24" class="pill-icon" aria-hidden="true">
+          <path
+            d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm2.07-7.75l-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25z"
+          />
+        </svg>
+      }
+      @case ('github') {
+        <svg viewBox="0 0 16 16" class="pill-icon" aria-hidden="true">
+          <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 0 0 16 8c0-4.42-3.58-8-8-8z"
+          />
+        </svg>
+      }
+    }
+  }
+  <span class="toggle-label">{{ label }}</span>
+</button>
diff --git a/src/main/frontend/src/app/components/pill-button/pill-button.component.scss b/src/main/frontend/src/app/components/pill-button/pill-button.component.scss
new file mode 100644
index 00000000..1a7e395a
--- /dev/null
+++ b/src/main/frontend/src/app/components/pill-button/pill-button.component.scss
@@ -0,0 +1,87 @@
+: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;
+    fill: #6c757d;
+    transition: all 0.2s ease-in-out;
+    flex-shrink: 0;
+  }
+
+  .spinner {
+    flex-shrink: 0;
+    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 {
+      fill: #ffffff;
+
+      path {
+        stroke: #ffffff;
+      }
+    }
+
+    .toggle-label {
+      color: #ffffff;
+    }
+
+    &:hover {
+      background-color: #1d3680;
+      border-color: #1d3680;
+    }
+  }
+}
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
diff --git a/src/main/frontend/src/app/components/pill-button/pill-button.component.ts b/src/main/frontend/src/app/components/pill-button/pill-button.component.ts
new file mode 100644
index 00000000..cd10947c
--- /dev/null
+++ b/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>();
+}
diff --git a/src/main/frontend/src/app/pages/header/header.component.html b/src/main/frontend/src/app/pages/header/header.component.html
index dce17c52..46f3e44d 100644
--- a/src/main/frontend/src/app/pages/header/header.component.html
+++ b/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>
diff --git a/src/main/frontend/src/app/pages/header/header.component.scss b/src/main/frontend/src/app/pages/header/header.component.scss
index 8adf0801..20513cbb 100644
--- a/src/main/frontend/src/app/pages/header/header.component.scss
+++ b/src/main/frontend/src/app/pages/header/header.component.scss
@@ -76,35 +76,10 @@
     margin-left: auto;
     display: flex;
     align-items: center;
-    padding-right: 2.5rem;
+    padding-right: 2rem;
 
-    .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;
-      }
+    .github-pill-button {
+      margin-top: 0.25rem;
     }
 
     .user-profile {
@@ -284,12 +259,3 @@
     }
   }
 }
-
-@keyframes spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
diff --git a/src/main/frontend/src/app/pages/header/header.component.spec.ts b/src/main/frontend/src/app/pages/header/header.component.spec.ts
index 06ac6568..5f967c75 100644
--- a/src/main/frontend/src/app/pages/header/header.component.spec.ts
+++ b/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();
     });
diff --git a/src/main/frontend/src/app/pages/header/header.component.ts b/src/main/frontend/src/app/pages/header/header.component.ts
index 852821b6..6d9f5899 100644
--- a/src/main/frontend/src/app/pages/header/header.component.ts
+++ b/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',
 })
diff --git a/src/main/frontend/src/app/pages/release-graph/release-catalogus/release-catalogus.component.html b/src/main/frontend/src/app/pages/release-graph/release-catalogus/release-catalogus.component.html
index ef44c23d..e378bdf2 100644
--- a/src/main/frontend/src/app/pages/release-graph/release-catalogus/release-catalogus.component.html
+++ b/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()">
diff --git a/src/main/frontend/src/app/pages/release-graph/release-catalogus/release-catalogus.component.scss b/src/main/frontend/src/app/pages/release-graph/release-catalogus/release-catalogus.component.scss
index dd8c512b..574bd5d5 100644
--- a/src/main/frontend/src/app/pages/release-graph/release-catalogus/release-catalogus.component.scss
+++ b/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 {
diff --git a/src/main/frontend/src/app/pages/release-graph/release-catalogus/release-catalogus.component.ts b/src/main/frontend/src/app/pages/release-graph/release-catalogus/release-catalogus.component.ts
index 36e59a81..55736c52 100644
--- a/src/main/frontend/src/app/pages/release-graph/release-catalogus/release-catalogus.component.ts
+++ b/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);
-    }
-  }
 }
diff --git a/src/main/frontend/src/app/pages/release-graph/release-graph.component.html b/src/main/frontend/src/app/pages/release-graph/release-graph.component.html
index 20b6fa84..663ad167 100644
--- a/src/main/frontend/src/app/pages/release-graph/release-graph.component.html
+++ b/src/main/frontend/src/app/pages/release-graph/release-graph.component.html
@@ -107,20 +107,18 @@
       </g>
     </svg>
 
-    <button
-      class="nightly-toggle"
-      title="Toggle Nightly Releases"
-      [class.active]="showNightlies"
-      [ngStyle]="{
-        right: authService.isAuthenticated() && authService.currentUser()?.isFrankFrameworkMember ? '16rem' : '10.5rem',
-      }"
-      (click)="toggleNightlies()"
-    >
-      <svg viewBox="0 0 24 24" class="moon-icon">
-        <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
-      </svg>
-      <span class="toggle-label">Show nightly</span>
-    </button>
+    <div class="graph-controls" [class.with-profile]="authService.isAuthenticated()">
+      <app-pill-button
+        class="nightly-toggle"
+        icon="moon"
+        label="Show nightlies"
+        tooltip="Toggle all nightly releases"
+        [active]="showNightlies"
+        (clicked)="toggleNightlies()"
+      />
+
+      <app-release-catalogus [showExtendedSupport]="showExtendedSupport" />
+    </div>
 
     <div class="branch-labels-sticky">
       @for (stickyLabel of stickyBranchLabels; track stickyLabel.label) {
@@ -133,8 +131,6 @@
       }
     </div>
 
-    <app-release-catalogus [showExtendedSupport]="showExtendedSupport" />
-
     @if (dataForSkipModal) {
       <app-skipped-versions-modal
         [skipNode]="dataForSkipModal"
diff --git a/src/main/frontend/src/app/pages/release-graph/release-graph.component.scss b/src/main/frontend/src/app/pages/release-graph/release-graph.component.scss
index 9265759d..38b04434 100644
--- a/src/main/frontend/src/app/pages/release-graph/release-graph.component.scss
+++ b/src/main/frontend/src/app/pages/release-graph/release-graph.component.scss
@@ -30,75 +30,27 @@
     display: none;
   }
 
-  .nightly-toggle {
+  .graph-controls {
     position: fixed;
     top: 1.5rem;
+    right: 8.5rem;
     z-index: 25;
     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;
-
-    @media (max-width: 991px) {
-      top: auto;
-      bottom: 1.5rem;
-      right: 5rem !important;
-    }
-
-    .moon-icon {
-      width: 20px;
-      height: 20px;
-      fill: #6c757d;
-      transition: all 0.2s ease-in-out;
-      flex-shrink: 0;
-    }
-
-    .toggle-label {
-      font-size: 14px;
-      font-weight: 600;
-      color: #495057;
-      white-space: nowrap;
-      transition: color 0.2s ease-in-out;
-    }
+    gap: 0.75rem;
 
-    &:hover {
-      background-color: #f8f9fa;
-      border-color: #ced4da;
-      box-shadow: 0 3px 6px rgba(0, 0, 0, 0.12);
-    }
-
-    &:active {
-      transform: scale(0.98);
+    &.with-profile {
+      right: 12.5rem;
     }
 
-    &.active {
-      background-color: #1e3a8a;
-      border-color: #1e3a8a;
-      box-shadow: 0 3px 6px rgba(30, 58, 138, 0.3);
-
-      .moon-icon {
-        fill: #ffffff;
-
-        path {
-          stroke: #ffffff;
-        }
-      }
-
-      .toggle-label {
-        color: #ffffff;
-      }
-
-      &:hover {
-        background-color: #1d3680;
-        border-color: #1d3680;
+    @media (max-width: 991px) {
+      &,
+      &.with-profile {
+        top: auto;
+        bottom: 1.5rem;
+        left: 50%;
+        right: auto;
+        transform: translateX(-50%);
       }
     }
   }
diff --git a/src/main/frontend/src/app/pages/release-graph/release-graph.component.ts b/src/main/frontend/src/app/pages/release-graph/release-graph.component.ts
index 9422dce4..49fe14b2 100644
--- a/src/main/frontend/src/app/pages/release-graph/release-graph.component.ts
+++ b/src/main/frontend/src/app/pages/release-graph/release-graph.component.ts
@@ -10,7 +10,7 @@ import { ReleaseCatalogusComponent } from './release-catalogus/release-catalogus
 import { ReleaseSkippedVersions } from './release-skipped-versions/release-skipped-versions';
 import { AuthService } from '../../services/auth.service';
 import { GraphStateService } from '../../services/graph-state.service';
-import { NgStyle } from '@angular/common';
+import { PillButtonComponent } from '../../components/pill-button/pill-button.component';
 
 export interface LifecyclePhase {
   type: 'supported';
@@ -31,7 +31,7 @@ export interface BranchLifecycle {
   standalone: true,
   templateUrl: './release-graph.component.html',
   styleUrls: ['./release-graph.component.scss'],
-  imports: [LoaderComponent, ReleaseCatalogusComponent, ReleaseSkippedVersions, NgStyle],
+  imports: [LoaderComponent, ReleaseCatalogusComponent, ReleaseSkippedVersions, PillButtonComponent],
 })
 export class ReleaseGraphComponent implements OnInit, OnDestroy, AfterViewInit {
   private static readonly RELEASE_GRAPH_NAVIGATION_PADDING: number = 55;

From 5835a2412c6700b6534a52f418580c6ce2ece9e9 Mon Sep 17 00:00:00 2001
From: stijnpotters <stijn.potters1@gmail.com>
Date: Mon, 15 Jun 2026 17:57:01 +0200
Subject: [PATCH 2/3] fix: adjust padding and positioning in header and release
 graph components for improved layout

---
 src/main/frontend/src/app/pages/header/header.component.scss | 5 +----
 .../src/app/pages/release-graph/release-graph.component.scss | 2 +-
 2 files changed, 2 insertions(+), 5 deletions(-)

diff --git a/src/main/frontend/src/app/pages/header/header.component.scss b/src/main/frontend/src/app/pages/header/header.component.scss
index 20513cbb..03203844 100644
--- a/src/main/frontend/src/app/pages/header/header.component.scss
+++ b/src/main/frontend/src/app/pages/header/header.component.scss
@@ -77,10 +77,7 @@
     display: flex;
     align-items: center;
     padding-right: 2rem;
-
-    .github-pill-button {
-      margin-top: 0.25rem;
-    }
+    padding-top: 0.25rem;
 
     .user-profile {
       position: relative;
diff --git a/src/main/frontend/src/app/pages/release-graph/release-graph.component.scss b/src/main/frontend/src/app/pages/release-graph/release-graph.component.scss
index 38b04434..9bda1a17 100644
--- a/src/main/frontend/src/app/pages/release-graph/release-graph.component.scss
+++ b/src/main/frontend/src/app/pages/release-graph/release-graph.component.scss
@@ -40,7 +40,7 @@
     gap: 0.75rem;
 
     &.with-profile {
-      right: 12.5rem;
+      right: 12rem;
     }
 
     @media (max-width: 991px) {

From e94839bc68b4d0b8a9a7a347b43eb65d7f9511fb Mon Sep 17 00:00:00 2001
From: stijnpotters <stijn.potters1@gmail.com>
Date: Mon, 15 Jun 2026 18:04:34 +0200
Subject: [PATCH 3/3] fix: refactor pill-button component to use CSS masks for
 icons and improve loading state handling

---
 .../components/pill-button/icons/github.svg   |  3 ++
 .../app/components/pill-button/icons/help.svg |  3 ++
 .../app/components/pill-button/icons/moon.svg |  3 ++
 .../components/pill-button/icons/spinner.svg  |  4 ++
 .../pill-button/pill-button.component.html    | 29 +-------------
 .../pill-button/pill-button.component.scss    | 40 ++++++++++++++-----
 6 files changed, 43 insertions(+), 39 deletions(-)
 create mode 100644 src/main/frontend/src/app/components/pill-button/icons/github.svg
 create mode 100644 src/main/frontend/src/app/components/pill-button/icons/help.svg
 create mode 100644 src/main/frontend/src/app/components/pill-button/icons/moon.svg
 create mode 100644 src/main/frontend/src/app/components/pill-button/icons/spinner.svg

diff --git a/src/main/frontend/src/app/components/pill-button/icons/github.svg b/src/main/frontend/src/app/components/pill-button/icons/github.svg
new file mode 100644
index 00000000..b6ca4c06
--- /dev/null
+++ b/src/main/frontend/src/app/components/pill-button/icons/github.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+  <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 0 0 16 8c0-4.42-3.58-8-8-8z" />
+</svg>
diff --git a/src/main/frontend/src/app/components/pill-button/icons/help.svg b/src/main/frontend/src/app/components/pill-button/icons/help.svg
new file mode 100644
index 00000000..b28e6d6e
--- /dev/null
+++ b/src/main/frontend/src/app/components/pill-button/icons/help.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm2.07-7.75l-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25z" />
+</svg>
diff --git a/src/main/frontend/src/app/components/pill-button/icons/moon.svg b/src/main/frontend/src/app/components/pill-button/icons/moon.svg
new file mode 100644
index 00000000..e560d8c5
--- /dev/null
+++ b/src/main/frontend/src/app/components/pill-button/icons/moon.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
+</svg>
diff --git a/src/main/frontend/src/app/components/pill-button/icons/spinner.svg b/src/main/frontend/src/app/components/pill-button/icons/spinner.svg
new file mode 100644
index 00000000..c8364053
--- /dev/null
+++ b/src/main/frontend/src/app/components/pill-button/icons/spinner.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none">
+  <circle cx="8" cy="8" r="7" stroke="#000" stroke-width="2" stroke-opacity="0.25" />
+  <path d="M15 8a7 7 0 0 1-7 7" stroke="#000" stroke-width="2" stroke-linecap="round" />
+</svg>
diff --git a/src/main/frontend/src/app/components/pill-button/pill-button.component.html b/src/main/frontend/src/app/components/pill-button/pill-button.component.html
index 2809bfd6..25f11cef 100644
--- a/src/main/frontend/src/app/components/pill-button/pill-button.component.html
+++ b/src/main/frontend/src/app/components/pill-button/pill-button.component.html
@@ -6,33 +6,6 @@
   [attr.title]="tooltip || null"
   (click)="clicked.emit()"
 >
-  @if (loading) {
-    <svg class="spinner" width="20" height="20" viewBox="0 0 16 16" fill="none" aria-hidden="true">
-      <circle cx="8" cy="8" r="7" stroke="#6c757d" stroke-width="2" stroke-opacity="0.25" />
-      <path d="M15 8a7 7 0 0 1-7 7" stroke="#6c757d" stroke-width="2" stroke-linecap="round" />
-    </svg>
-  } @else {
-    @switch (icon) {
-      @case ('moon') {
-        <svg viewBox="0 0 24 24" class="pill-icon" aria-hidden="true">
-          <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
-        </svg>
-      }
-      @case ('help') {
-        <svg viewBox="0 0 24 24" class="pill-icon" aria-hidden="true">
-          <path
-            d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm2.07-7.75l-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25z"
-          />
-        </svg>
-      }
-      @case ('github') {
-        <svg viewBox="0 0 16 16" class="pill-icon" aria-hidden="true">
-          <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 0 0 16 8c0-4.42-3.58-8-8-8z"
-          />
-        </svg>
-      }
-    }
-  }
+  <span aria-hidden="true" [class]="'pill-icon pill-icon--' + (loading ? 'spinner' : icon)"></span>
   <span class="toggle-label">{{ label }}</span>
 </button>
diff --git a/src/main/frontend/src/app/components/pill-button/pill-button.component.scss b/src/main/frontend/src/app/components/pill-button/pill-button.component.scss
index 1a7e395a..22dc4762 100644
--- a/src/main/frontend/src/app/components/pill-button/pill-button.component.scss
+++ b/src/main/frontend/src/app/components/pill-button/pill-button.component.scss
@@ -20,14 +20,36 @@
   .pill-icon {
     width: 20px;
     height: 20px;
-    fill: #6c757d;
-    transition: all 0.2s ease-in-out;
     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;
 
-  .spinner {
-    flex-shrink: 0;
-    animation: spin 1s linear infinite;
+    &.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 {
@@ -59,11 +81,7 @@
     box-shadow: 0 3px 6px rgba(30, 58, 138, 0.3);
 
     .pill-icon {
-      fill: #ffffff;
-
-      path {
-        stroke: #ffffff;
-      }
+      background-color: #ffffff;
     }
 
     .toggle-label {