bitwarden/browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser synced 2025-12-16 16:23:44 +00:00
Code Issues Releases Wiki Activity

[EC-645] fix: web payment component breaking storybook compilation (#3906)

Browse Source
This commit is contained in:
Andreas Coroiu
2022-11-08 15:25:49 +01:00
committed by GitHub
parent a0ee87e1d9
commit 7141f9f175
1 changed files with 12 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
apps/web/src/app/settings/payment.component.ts
View File

@@ -5,14 +5,6 @@ import { AbstractThemingService } from "@bitwarden/angular/services/theming/them
import { ApiService } from "@bitwarden/common/abstractions/api.service"; import { ApiService } from "@bitwarden/common/abstractions/api.service";
import { LogService } from "@bitwarden/common/abstractions/log.service"; import { LogService } from "@bitwarden/common/abstractions/log.service";
import { PaymentMethodType } from "@bitwarden/common/enums/paymentMethodType"; import { PaymentMethodType } from "@bitwarden/common/enums/paymentMethodType";
import { ThemeType } from "@bitwarden/common/enums/themeType";
import ThemeVariables from "../../scss/export.module.scss";
const lightInputColor = ThemeVariables.lightInputColor;
const lightInputPlaceholderColor = ThemeVariables.lightInputPlaceholderColor;
const darkInputColor = ThemeVariables.darkInputColor;
const darkInputPlaceholderColor = ThemeVariables.darkInputPlaceholderColor;
@Component({ @Component({
selector: "app-payment", selector: "app-payment",
@@ -96,7 +88,7 @@ export class PaymentComponent implements OnInit, OnDestroy {
this.hideBank = this.method !== PaymentMethodType.BankAccount; this.hideBank = this.method !== PaymentMethodType.BankAccount;
this.hideCredit = this.method !== PaymentMethodType.Credit; this.hideCredit = this.method !== PaymentMethodType.Credit;
} }
await this.setTheme(); this.subscribeToTheme();
window.document.head.appendChild(this.stripeScript); window.document.head.appendChild(this.stripeScript);
if (!this.hidePaypal) { if (!this.hidePaypal) {
window.document.head.appendChild(this.btScript); window.document.head.appendChild(this.btScript);
@@ -280,17 +272,17 @@ export class PaymentComponent implements OnInit, OnDestroy {
}, 50); }, 50);
} }
private async setTheme() { private subscribeToTheme() {
this.themingService.theme$.pipe(takeUntil(this.destroy$)).subscribe((theme) => { this.themingService.theme$.pipe(takeUntil(this.destroy$)).subscribe(() => {
if (theme.effectiveTheme === ThemeType.Dark) { const style = getComputedStyle(document.documentElement);
this.StripeElementStyle.base.color = darkInputColor; this.StripeElementStyle.base.color = `rgb(${style.getPropertyValue("--color-text-main")})`;
this.StripeElementStyle.base["::placeholder"].color = darkInputPlaceholderColor; this.StripeElementStyle.base["::placeholder"].color = `rgb(${style.getPropertyValue(
this.StripeElementStyle.invalid.color = darkInputColor; "--color-text-muted"
} else { )})`;
this.StripeElementStyle.base.color = lightInputColor; this.StripeElementStyle.invalid.color = `rgb(${style.getPropertyValue("--color-text-main")})`;
this.StripeElementStyle.base["::placeholder"].color = lightInputPlaceholderColor; this.StripeElementStyle.invalid.borderColor = `rgb(${style.getPropertyValue(
this.StripeElementStyle.invalid.color = lightInputColor; "--color-danger-500"
} )})`;
}); });
} }
} }