Task/improve style in user account settings (#7599)

* Improve style

* Update changelog

CHANGELOG.md

@@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Changed
 
 - Improved the wording of the _X-ray_ page to use a neutral form
+- Improved the style of the disabled base currency in the user account settings
 - Moved the support to clone an activity in the account detail dialog from experimental to general availability
 - Moved the support to clone an activity in the holding detail dialog from experimental to general availability
 - Moved the support to edit an activity in the account detail dialog from experimental to general availability

apps/client/src/app/components/user-account-settings/user-account-settings.html

@@ -23,7 +23,7 @@
                   [currencies]="currencies"
                 />
                 @if (hasImpersonationId) {
-                  <mat-hint class="mt-1 text-muted" i18n
+                  <mat-hint class="mt-1 text-muted text-truncate" i18n
                     >Derived from the portfolio you are viewing</mat-hint
                   >
                 }
@@ -176,7 +176,7 @@
                     <mat-option [value]="locale">{{ locale }}</mat-option>
                   }
                 </mat-select>
-                <mat-hint class="d-flex mt-2 text-muted">
+                <mat-hint class="d-flex mt-2 text-muted text-truncate">
                   <gf-value
                     [deviceType]="deviceType()"
                     [isDate]="true"

apps/client/src/app/components/user-account-settings/user-account-settings.scss

@@ -11,6 +11,15 @@
     }
   }
 
+  mat-form-field:has(gf-currency-selector) {
+    --mat-form-field-outlined-disabled-input-text-color: rgba(
+      var(--dark-secondary-text)
+    );
+    --mat-form-field-outlined-disabled-outline-color: rgba(
+      var(--dark-disabled-text)
+    );
+  }
+
   .hint-text {
     font-size: 90%;
     line-height: 1.2;
@@ -19,4 +28,13 @@
 
 :host-context(.theme-dark) {
   color: rgb(var(--light-primary-text));
+
+  mat-form-field:has(gf-currency-selector) {
+    --mat-form-field-outlined-disabled-input-text-color: rgba(
+      var(--light-secondary-text)
+    );
+    --mat-form-field-outlined-disabled-outline-color: rgba(
+      var(--light-disabled-text)
+    );
+  }
 }