bitwarden/web
1
0
Fork 0
mirror of https://github.com/bitwarden/web synced 2026-01-17 16:03:17 +00:00
Code Issues Releases Wiki Activity

Dark Theme (#1017)

Browse Source 
* Stylesheets

* Theme Configuration

* Options Area

* swal2 style

* Icon styling

* Fix theme not saving

* Update English

* Update messages.json

* dropdown and login logo

* btn-link and totp fix

* Organisation Styling

* Update webauthn-fallback.ts

* Fix contrast issues

* Add Paypal Container and Loading svg file

* Password Generator contrast fix

* Dark Mode Fix buttons and foreground

* Fix button hover

* Fix Styles after rebase

* Add hover on nav dropdown-item

* Disable Theme Preview

* Options Fix for Default Theme Changes

* Updated Colour Scheme

* Toast fix

* Button and Text Styling

* Options Update and Messages Fix

* Added Search Icon and Fixed Callout styling

* Add theme styling to Stripe

* Refactor logic for setting color

* Reorder logic to avoid race condition

* PayPal Loading and Misc Fix

* text-state bug fix

* Badge Colour Fix

* Remove PayPal Tagline

The colour cannot be styled so it's not visible on a dark theme

* Adding the Styling from #1131

* Update to New Design

* Form and Nav restyle

* Modal Opacity and Callout

* Nav Colours

* Missing Borders

* Light theme fix

* Improved border for listgroup

* Change Org Nav Colour

* Save theme to localStorage for persistence

* Undo change to Wired image

* !Important removal and tweaks

* Fix regression with navbar

* Light theme by default

* Refactor to use getEffectiveTheme

* Refactor theme constants to use enum

* Set theme in index.html before app loads

* Use scss selector to set logo image

* Export Sass to TS

* Update jslib

Co-authored-by: Thomas Rittson <trittson@bitwarden.com>
This commit is contained in:
Danny Murphy
2021-09-29 23:06:20 +01:00
committed by GitHub
parent aa58749b34
commit 0c02cfea2f
37 changed files with 2259 additions and 1053 deletions
Download Patch File Download Diff File Expand all files Collapse all files

76
src/app/settings/payment.component.ts
View File

@@ -9,24 +9,14 @@ import { PaymentMethodType } from 'jslib-common/enums/paymentMethodType';
import { ApiService } from 'jslib-common/abstractions/api.service';
import { PlatformUtilsService } from 'jslib-common/abstractions/platformUtils.service';
const StripeElementStyle = {
base: {
color: '#333333',
fontFamily: '"Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif, ' +
'"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
fontSize: '14px',
fontSmoothing: 'antialiased',
},
invalid: {
color: '#333333',
},
};
import { ThemeType } from 'jslib-common/enums/themeType';
const StripeElementClasses = {
focus: 'is-focused',
empty: 'is-empty',
invalid: 'is-invalid',
};
import ThemeVariables from 'src/scss/export.module.scss';
const lightInputColor = ThemeVariables.lightInputColor;
const lightInputPlaceholderColor = ThemeVariables.lightInputPlaceholderColor;
const darkInputColor = ThemeVariables.darkInputColor;
const darkInputPlaceholderColor = ThemeVariables.darkInputPlaceholderColor;
@Component({
selector: 'app-payment',
@@ -59,6 +49,8 @@ export class PaymentComponent implements OnInit {
private stripeCardNumberElement: any = null;
private stripeCardExpiryElement: any = null;
private stripeCardCvcElement: any = null;
private StripeElementStyle: any;
private StripeElementClasses: any;
constructor(private platformUtilsService: PlatformUtilsService, private apiService: ApiService) {
this.stripeScript = window.document.createElement('script');
@@ -72,14 +64,36 @@ export class PaymentComponent implements OnInit {
this.btScript = window.document.createElement('script');
this.btScript.src = `scripts/dropin.js?cache=${process.env.CACHE_TAG}`;
this.btScript.async = true;
this.StripeElementStyle = {
base: {
color: null,
fontFamily: '"Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif, ' +
'"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
fontSize: '14px',
fontSmoothing: 'antialiased',
'::placeholder': {
color: null,
},
},
invalid: {
color: null,
},
};
this.StripeElementClasses = {
focus: 'is-focused',
empty: 'is-empty',
invalid: 'is-invalid',
};
}
ngOnInit() {
async ngOnInit() {
if (!this.showOptions) {
this.hidePaypal = this.method !== PaymentMethodType.PayPal;
this.hideBank = this.method !== PaymentMethodType.BankAccount;
this.hideCredit = this.method !== PaymentMethodType.Credit;
}
await this.setTheme();
window.document.head.appendChild(this.stripeScript);
if (!this.hidePaypal) {
window.document.head.appendChild(this.btScript);
@@ -133,6 +147,7 @@ export class PaymentComponent implements OnInit {
size: 'medium',
shape: 'pill',
color: 'blue',
tagline: 'false',
},
},
}, (createErr: any, instance: any) => {
@@ -216,21 +231,21 @@ export class PaymentComponent implements OnInit {
if (this.showMethods && this.method === PaymentMethodType.Card) {
if (this.stripeCardNumberElement == null) {
this.stripeCardNumberElement = this.stripeElements.create('cardNumber', {
style: StripeElementStyle,
classes: StripeElementClasses,
style: this.StripeElementStyle,
classes: this.StripeElementClasses,
placeholder: '',
});
}
if (this.stripeCardExpiryElement == null) {
this.stripeCardExpiryElement = this.stripeElements.create('cardExpiry', {
style: StripeElementStyle,
classes: StripeElementClasses,
style: this.StripeElementStyle,
classes: this.StripeElementClasses,
});
}
if (this.stripeCardCvcElement == null) {
this.stripeCardCvcElement = this.stripeElements.create('cardCvc', {
style: StripeElementStyle,
classes: StripeElementClasses,
style: this.StripeElementStyle,
classes: this.StripeElementClasses,
placeholder: '',
});
}
@@ -240,4 +255,17 @@ export class PaymentComponent implements OnInit {
}
}, 50);
}
private async setTheme() {
const theme = await this.platformUtilsService.getEffectiveTheme();
if (theme === 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;
}
}
}