Bugfix/fix style of safe withdrawal rate selector (#5899)

* Fix style of selector

* Update changelog

CHANGELOG.md

@@ -11,6 +11,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Changed the build executor of the client from `@nx/angular:webpack-browser` to `@nx/angular:browser-esbuild`
 
+### Fixed
+
+- Fixed the style of the safe withdrawal rate selector in the _FIRE_ section (experimental)
+
 ## 2.214.0 - 2025-11-01
 
 ### Changed

apps/client/src/app/pages/portfolio/fire/fire-page.scss

@@ -1,9 +1,21 @@
+@use '../../../../styles/variables.scss' as variables;
+
+@mixin select-arrow($color) {
+  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' fill='#{$color}' height='6' width='10'><polygon points='0,0 10,0 5,6'/></svg>");
+}
+
 :host {
   display: block;
 
   .safe-withdrawal-rate-select {
+    @include select-arrow(variables.$dark-primary-text);
+
+    appearance: none;
     background-color: transparent;
+    background-position: right 0 center;
+    background-repeat: no-repeat;
     color: rgb(var(--dark-primary-text));
+    padding: 0 0.75rem 0 0.25rem;
 
     &:focus {
       box-shadow: none;
@@ -14,6 +26,8 @@
 
 :host-context(.theme-dark) {
   .safe-withdrawal-rate-select {
+    @include select-arrow(variables.$light-primary-text);
+
     color: rgb(var(--light-primary-text));
   }
 }

apps/client/src/styles/theme.scss

@@ -1,9 +1,6 @@
 @use '@angular/material' as mat;
 
-$dark-primary-text: rgba(black, 0.87);
-$light-primary-text: white;
-
-$mat-css-dark-theme-selector: '.theme-dark';
+@use './variables.scss' as variables;
 
 $gf-primary: (
   50: var(--gf-theme-primary-50),
@@ -21,20 +18,20 @@ $gf-primary: (
   A400: var(--gf-theme-primary-A400),
   A700: var(--gf-theme-primary-A700),
   contrast: (
-    50: $dark-primary-text,
-    100: $dark-primary-text,
-    200: $dark-primary-text,
-    300: $light-primary-text,
-    400: $light-primary-text,
-    500: $light-primary-text,
-    600: $light-primary-text,
-    700: $light-primary-text,
-    800: $light-primary-text,
-    900: $light-primary-text,
-    A100: $dark-primary-text,
-    A200: $light-primary-text,
-    A400: $light-primary-text,
-    A700: $light-primary-text
+    50: variables.$dark-primary-text,
+    100: variables.$dark-primary-text,
+    200: variables.$dark-primary-text,
+    300: variables.$light-primary-text,
+    400: variables.$light-primary-text,
+    500: variables.$light-primary-text,
+    600: variables.$light-primary-text,
+    700: variables.$light-primary-text,
+    800: variables.$light-primary-text,
+    900: variables.$light-primary-text,
+    A100: variables.$dark-primary-text,
+    A200: variables.$light-primary-text,
+    A400: variables.$light-primary-text,
+    A700: variables.$light-primary-text
   )
 );
 
@@ -54,20 +51,20 @@ $gf-secondary: (
   A400: var(--gf-theme-secondary-A400),
   A700: var(--gf-theme-secondary-A700),
   contrast: (
-    50: $dark-primary-text,
-    100: $dark-primary-text,
-    200: $dark-primary-text,
-    300: $light-primary-text,
-    400: $light-primary-text,
-    500: $light-primary-text,
-    600: $light-primary-text,
-    700: $light-primary-text,
-    800: $light-primary-text,
-    900: $light-primary-text,
-    A100: $dark-primary-text,
-    A200: $light-primary-text,
-    A400: $light-primary-text,
-    A700: $light-primary-text
+    50: variables.$dark-primary-text,
+    100: variables.$dark-primary-text,
+    200: variables.$dark-primary-text,
+    300: variables.$light-primary-text,
+    400: variables.$light-primary-text,
+    500: variables.$light-primary-text,
+    600: variables.$light-primary-text,
+    700: variables.$light-primary-text,
+    800: variables.$light-primary-text,
+    900: variables.$light-primary-text,
+    A100: variables.$dark-primary-text,
+    A200: variables.$light-primary-text,
+    A400: variables.$light-primary-text,
+    A700: variables.$light-primary-text
   )
 );
 

apps/client/src/styles/variables.scss

@@ -0,0 +1,4 @@
+$dark-primary-text: rgba(black, 0.87);
+$light-primary-text: white;
+
+$mat-css-dark-theme-selector: '.theme-dark';