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,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);
+        }
       }
     }
   }