Fix style of selector

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

@@ -1,9 +1,16 @@
+@use '../../../../styles/variables.scss' as variables;
+
 :host {
   display: block;
 
   .safe-withdrawal-rate-select {
+    appearance: none;
     background-color: transparent;
+    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='#{variables.$dark-primary-text}'><polygon points='0,0 10,0 5,6'/></svg>");
+    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 +21,7 @@
 
 :host-context(.theme-dark) {
   .safe-withdrawal-rate-select {
+    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='#{variables.$light-primary-text}'><polygon points='0,0 10,0 5,6'/></svg>");
     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';