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..ba39b2475 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,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,");
+ 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,");
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';