devol
/
bitwarden-estensione-browser
mirror of https://github.com/bitwarden/browser
1
0
Fork 0
Code Issues 1 Releases Wiki Activity

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

This commit is contained in:
Andreas Coroiu 2022-11-08 15:25:49 +01:00 committed by GitHub
parent a0ee87e1d9
commit 7141f9f175
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 12 additions and 20 deletions
Show Stats 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 { LogService } from "@bitwarden/common/abstractions/log.service";
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({
selector: "app-payment",
@ -96,7 +88,7 @@ export class PaymentComponent implements OnInit, OnDestroy {
this.hideBank = this.method !== PaymentMethodType.BankAccount;
this.hideCredit = this.method !== PaymentMethodType.Credit;
}
await this.setTheme();
this.subscribeToTheme();
window.document.head.appendChild(this.stripeScript);
if (!this.hidePaypal) {
window.document.head.appendChild(this.btScript);
@ -280,17 +272,17 @@ export class PaymentComponent implements OnInit, OnDestroy {
}, 50);
}
private async setTheme() {
this.themingService.theme$.pipe(takeUntil(this.destroy$)).subscribe((theme) => {
if (theme.effectiveTheme === ThemeType.Dark) {
this.StripeElementStyle.base.color = darkInputColor;
this.StripeElementStyle.base["::placeholder"].color = darkInputPlaceholderColor;
this.StripeElementStyle.invalid.color = darkInputColor;
} else {
this.StripeElementStyle.base.color = lightInputColor;
this.StripeElementStyle.base["::placeholder"].color = lightInputPlaceholderColor;
this.StripeElementStyle.invalid.color = lightInputColor;
}
private subscribeToTheme() {
this.themingService.theme$.pipe(takeUntil(this.destroy$)).subscribe(() => {
const style = getComputedStyle(document.documentElement);
this.StripeElementStyle.base.color = `rgb(${style.getPropertyValue("--color-text-main")})`;
this.StripeElementStyle.base["::placeholder"].color = `rgb(${style.getPropertyValue(
"--color-text-muted"
)})`;
this.StripeElementStyle.invalid.color = `rgb(${style.getPropertyValue("--color-text-main")})`;
this.StripeElementStyle.invalid.borderColor = `rgb(${style.getPropertyValue(
"--color-danger-500"
)})`;
});
}
}