From 592baec9f3222502116fbdb1ef417546d2acc257 Mon Sep 17 00:00:00 2001
From: Thomas Kaul <4159106+dtslvr@users.noreply.github.com>
Date: Sun, 2 Nov 2025 15:31:16 +0100
Subject: [PATCH] Bugfix/fix style of safe withdrawal rate selector (#5899)

* Fix style of selector

* Update changelog
---
 CHANGELOG.md                                  |  4 ++
 .../app/pages/portfolio/fire/fire-page.scss   | 14 +++++
 apps/client/src/styles/theme.scss             | 61 +++++++++----------
 apps/client/src/styles/variables.scss         |  4 ++
 4 files changed, 51 insertions(+), 32 deletions(-)
 create mode 100644 apps/client/src/styles/variables.scss

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 8ba1a6d7e..5ecf2a57d 100644
--- a/CHANGELOG.md
+++ b/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
diff --git a/apps/client/src/app/pages/portfolio/fire/fire-page.scss b/apps/client/src/app/pages/portfolio/fire/fire-page.scss
index 2892885c9..3a0618ed6 100644
--- a/apps/client/src/app/pages/portfolio/fire/fire-page.scss
+++ b/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));
   }
 }
diff --git a/apps/client/src/styles/theme.scss b/apps/client/src/styles/theme.scss
index fe9fd44a5..8dd6d8e36 100644
--- a/apps/client/src/styles/theme.scss
+++ b/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
   )
 );
 
diff --git a/apps/client/src/styles/variables.scss b/apps/client/src/styles/variables.scss
new file mode 100644
index 000000000..dcf26eecc
--- /dev/null
+++ b/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';