Task/improve style of toggle component (#7655)

* Improve style

* Update changelog

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`
 

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()"
 >

libs/ui/src/lib/toggle/toggle.component.scss

@@ -1,9 +1,13 @@
 :host {
   display: block;
 
+  .mat-mdc-radio-group {
+    border: 1px solid rgba(var(--dark-dividers));
+    border-radius: 1.15rem;
+    padding: 0.15rem;
+
     .mat-mdc-radio-button {
       border-radius: 1rem;
-    margin: 0 0.25rem;
 
       &.mat-mdc-radio-checked {
         background-color: rgba(var(--dark-dividers));
@@ -17,6 +21,13 @@
         }
       }
 
+      ion-icon {
+        height: var(
+          --mat-radio-label-text-line-height,
+          var(--mat-sys-body-medium-line-height)
+        );
+      }
+
       ::ng-deep {
         .mdc-radio {
           display: none;
@@ -30,13 +41,16 @@
         }
       }
     }
+  }
 }
 
 :host-context(.theme-dark) {
+  .mat-mdc-radio-group {
+    border-color: rgba(var(--light-dividers));
+
     .mat-mdc-radio-button {
       &.mat-mdc-radio-checked {
-      background-color: rgba(var(--light-dividers));
+        background-color: rgb(var(--palette-background-unselected-chip-dark));
-      border: 1px solid rgba(var(--light-disabled-text));
       }
 
       &.mat-mdc-radio-disabled {
@@ -53,4 +67,5 @@
         }
       }
     }
+  }
 }