From d7030886112bc9423f2d50d11f11d49cf74b5e8b Mon Sep 17 00:00:00 2001
From: Thomas Kaul <4159106+dtslvr@users.noreply.github.com>
Date: Mon, 16 Sep 2024 15:06:02 +0200
Subject: [PATCH] Feature/improve ux of toggle component (#3769)

* Improve usability via cursor styles

* Update changelog
---
 CHANGELOG.md                                                | 1 +
 apps/client/src/app/components/toggle/toggle.component.html | 5 ++++-
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index a5dc0dc3c..094b896f9 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -14,6 +14,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Changed
 
+- Improved the usability of the toggle component
 - Switched to the accounts endpoint in the holding detail dialog
 
 ## 2.107.1 - 2024-09-12
diff --git a/apps/client/src/app/components/toggle/toggle.component.html b/apps/client/src/app/components/toggle/toggle.component.html
index 4a6e0fc3d..ac2256daa 100644
--- a/apps/client/src/app/components/toggle/toggle.component.html
+++ b/apps/client/src/app/components/toggle/toggle.component.html
@@ -7,7 +7,10 @@
     <mat-radio-button
       class="d-inline-flex"
       [disabled]="isLoading"
-      [ngClass]="{ 'cursor-pointer': !isLoading }"
+      [ngClass]="{
+        'cursor-default': option.value === optionFormControl.value,
+        'cursor-pointer': !isLoading && option.value !== optionFormControl.value
+      }"
       [value]="option.value"
       >{{ option.label }}</mat-radio-button
     >