From b50349a38534e8082c52fd789b1c03a2d63fa76e Mon Sep 17 00:00:00 2001
From: Thomas Kaul <4159106+dtslvr@users.noreply.github.com>
Date: Tue, 18 Aug 2026 20:15:27 +0200
Subject: [PATCH] Task/improve style of toggle component (#7655)

* Improve style

* Update changelog
---
 CHANGELOG.md                                 |  1 +
 libs/ui/src/lib/toggle/toggle.component.html |  2 +-
 libs/ui/src/lib/toggle/toggle.component.scss | 79 ++++++++++++--------
 3 files changed, 49 insertions(+), 33 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index f16aa2147..358084d90 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -9,6 +9,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Changed
 
+- Improved the style of the toggle component
 - Moved the improved symbol lookup results by removing the currency from the name of cryptocurrencies from experimental to general availability
 - Upgraded `ng-extract-i18n-merge` from `3.3.0` to `3.4.0`
 
diff --git a/libs/ui/src/lib/toggle/toggle.component.html b/libs/ui/src/lib/toggle/toggle.component.html
index bec1bfab3..af9699bd7 100644
--- a/libs/ui/src/lib/toggle/toggle.component.html
+++ b/libs/ui/src/lib/toggle/toggle.component.html
@@ -1,5 +1,5 @@
 <mat-radio-group
-  class="d-block text-nowrap"
+  class="d-inline-flex text-nowrap"
   [formControl]="optionFormControl"
   (change)="onValueChange()"
 >
diff --git a/libs/ui/src/lib/toggle/toggle.component.scss b/libs/ui/src/lib/toggle/toggle.component.scss
index 76e2404ab..a0bb5ff6b 100644
--- a/libs/ui/src/lib/toggle/toggle.component.scss
+++ b/libs/ui/src/lib/toggle/toggle.component.scss
@@ -1,55 +1,70 @@
 :host {
   display: block;
 
-  .mat-mdc-radio-button {
-    border-radius: 1rem;
-    margin: 0 0.25rem;
+  .mat-mdc-radio-group {
+    border: 1px solid rgba(var(--dark-dividers));
+    border-radius: 1.15rem;
+    padding: 0.15rem;
 
-    &.mat-mdc-radio-checked {
-      background-color: rgba(var(--dark-dividers));
-    }
+    .mat-mdc-radio-button {
+      border-radius: 1rem;
 
-    &.mat-mdc-radio-disabled {
-      ::ng-deep {
-        label {
-          color: rgba(var(--dark-disabled-text));
+      &.mat-mdc-radio-checked {
+        background-color: rgba(var(--dark-dividers));
+      }
+
+      &.mat-mdc-radio-disabled {
+        ::ng-deep {
+          label {
+            color: rgba(var(--dark-disabled-text));
+          }
         }
       }
-    }
 
-    ::ng-deep {
-      .mdc-radio {
-        display: none;
+      ion-icon {
+        height: var(
+          --mat-radio-label-text-line-height,
+          var(--mat-sys-body-medium-line-height)
+        );
       }
 
-      label {
-        color: rgba(var(--dark-primary-text), 1);
-        cursor: inherit;
-        margin: 0;
-        padding: 0.15rem 0.75rem;
+      ::ng-deep {
+        .mdc-radio {
+          display: none;
+        }
+
+        label {
+          color: rgba(var(--dark-primary-text), 1);
+          cursor: inherit;
+          margin: 0;
+          padding: 0.15rem 0.75rem;
+        }
       }
     }
   }
 }
 
 :host-context(.theme-dark) {
-  .mat-mdc-radio-button {
-    &.mat-mdc-radio-checked {
-      background-color: rgba(var(--light-dividers));
-      border: 1px solid rgba(var(--light-disabled-text));
-    }
+  .mat-mdc-radio-group {
+    border-color: rgba(var(--light-dividers));
 
-    &.mat-mdc-radio-disabled {
-      ::ng-deep {
-        label {
-          color: rgba(var(--light-disabled-text));
+    .mat-mdc-radio-button {
+      &.mat-mdc-radio-checked {
+        background-color: rgb(var(--palette-background-unselected-chip-dark));
+      }
+
+      &.mat-mdc-radio-disabled {
+        ::ng-deep {
+          label {
+            color: rgba(var(--light-disabled-text));
+          }
         }
       }
-    }
 
-    ::ng-deep {
-      label {
-        color: rgba(var(--light-primary-text), 1);
+      ::ng-deep {
+        label {
+          color: rgba(var(--light-primary-text), 1);
+        }
       }
     }
   }