![bitwarden](../images/logo@2x.png)
{{'loginOrCreateNewAccount' | i18n}}
{{'login' | i18n}} {{'createAccount' | i18n}} diff --git a/src/popup/images/logo-dark@2x.png b/src/popup/images/logo-dark@2x.png new file mode 100644 index 0000000000..0266e85122 Binary files /dev/null and b/src/popup/images/logo-dark@2x.png differ diff --git a/src/popup/images/logo-white@2x.png b/src/popup/images/logo-white@2x.png new file mode 100644 index 0000000000..6042588c60 Binary files /dev/null and b/src/popup/images/logo-white@2x.png differ diff --git a/src/popup/images/logo.png b/src/popup/images/logo.png deleted file mode 100644 index 33ced5b12e..0000000000 Binary files a/src/popup/images/logo.png and /dev/null differ diff --git a/src/popup/images/logo@2x.png b/src/popup/images/logo@2x.png deleted file mode 100644 index 2a0ba60b9b..0000000000 Binary files a/src/popup/images/logo@2x.png and /dev/null differ diff --git a/src/popup/images/logo@3x.png b/src/popup/images/logo@3x.png deleted file mode 100644 index 9047316769..0000000000 Binary files a/src/popup/images/logo@3x.png and /dev/null differ diff --git a/src/popup/scss/base.scss b/src/popup/scss/base.scss index 5248327bb4..ba6de6fa1d 100644 --- a/src/popup/scss/base.scss +++ b/src/popup/scss/base.scss @@ -7,10 +7,8 @@ } html, body { - background-color: $background-color; font-family: $font-family-sans-serif; font-size: $font-size-base; - color: $text-color; line-height: $line-height-base; -webkit-font-smoothing: antialiased; } @@ -19,6 +17,13 @@ body { width: 375px !important; height: 600px !important; overflow: hidden; + color: $text-color; + background-color: $background-color; + + @include themify($themes) { + color: themed('textColor'); + background-color: themed('backgroundColor'); + } &.body-sm { width: 375px !important; @@ -38,7 +43,10 @@ body { h1, h2, h3, h4, h5, h6 { font-family: $font-family-sans-serif; - color: $text-color; + + @include themify($themes) { + color: themed('textColor'); + } } p { @@ -54,16 +62,24 @@ img { } a { - color: $brand-primary; text-decoration: none; + @include themify($themes) { + color: themed('primaryColor'); + } + &:hover, &:focus { - color: darken($brand-primary, 6%); + @include themify($themes) { + color: darken(themed('primaryColor'), 6%); + } } } input, select, textarea { - color: $text-color; + @include themify($themes) { + color: themed('textColor'); + background-color: themed('inputBackgroundColor'); + } } input, select, textarea, button { @@ -293,7 +309,10 @@ content { right: 0; overflow-y: auto; overflow-x: hidden; - background-color: $background-color; + + @include themify($themes) { + background-color: themed('backgroundColor'); + } &.no-header { top: 0; @@ -319,6 +338,9 @@ content { .fa { margin-bottom: 10px; - color: $list-icon-color; + + @include themify($themes) { + color: themed('disabledIconColor'); + } } } diff --git a/src/popup/scss/buttons.scss b/src/popup/scss/buttons.scss index 20e4277bd7..1be16c912e 100644 --- a/src/popup/scss/buttons.scss +++ b/src/popup/scss/buttons.scss @@ -1,44 +1,62 @@ @import "variables.scss"; .btn { - background-color: $button-background-color; border-radius: $border-radius; padding: 7px 15px; - border: 1px solid $button-border-color; + border: 1px solid #000000; font-size: $font-size-base; - color: $button-color; white-space: nowrap; text-align: center; cursor: pointer; + @include themify($themes) { + background-color: themed('buttonBackgroundColor'); + border-color: themed('buttonBorderColor'); + color: themed('buttonColor'); + } + &.primary { - color: $button-color-primary; + @include themify($themes) { + color: themed('buttonPrimaryColor'); + } } &.danger { - color: $button-color-danger; + @include themify($themes) { + color: themed('buttonDangerColor'); + } } &:hover:not([disabled]) { cursor: pointer; - background-color: darken($button-background-color, 1.5%); - border-color: darken($button-border-color, 17%); - color: darken($button-color, 10%); + + @include themify($themes) { + background-color: darken(themed('buttonBackgroundColor'), 1.5%); + border-color: darken(themed('buttonBorderColor'), 17%); + color: darken(themed('buttonColor'), 10%); + } &.primary { - color: darken($button-color-primary, 6%); + @include themify($themes) { + color: darken(themed('buttonPrimaryColor'), 6%); + } } &.danger { - color: darken($button-color-danger, 6%); + @include themify($themes) { + color: darken(themed('buttonDangerColor'), 6%); + } } } &:focus:not([disabled]) { cursor: pointer; - background-color: darken($button-background-color, 6%); - border-color: darken($button-border-color, 25%); outline: 0; + + @include themify($themes) { + background-color: darken(themed('buttonBackgroundColor'), 6%); + border-color: darken(themed('buttonBorderColor'), 25%); + } } &[disabled] { diff --git a/src/popup/scss/environment.scss b/src/popup/scss/environment.scss index aead2bf929..dceaf50f7d 100644 --- a/src/popup/scss/environment.scss +++ b/src/popup/scss/environment.scss @@ -1,14 +1,5 @@ @import "variables.scss"; -/* -html.browser_firefox, html.browser_edge { - body { - width: 320px !important; - height: 568px !important; - } -} -*/ - html.browser_safari { header { .search .fa { diff --git a/src/popup/scss/misc.scss b/src/popup/scss/misc.scss index 260148a6ea..f3598849bd 100644 --- a/src/popup/scss/misc.scss +++ b/src/popup/scss/misc.scss @@ -5,35 +5,45 @@ small, .small { } .text-primary { - color: $brand-primary !important; -} - -.text-danger { - color: $brand-danger !important; + @include themify($themes) { + color: themed('primaryColor') !important; + } } .text-success { - color: $brand-success !important; -} - -.text-info { - color: $brand-info !important; -} - -.text-warning { - color: $brand-warning !important; + @include themify($themes) { + color: themed('successColor') !important; + } } .text-muted { - color: $text-muted !important; + @include themify($themes) { + color: themed('mutedColor') !important; + } } .text-default { - color: $text-color !important; + @include themify($themes) { + color: themed('textColor') !important; + } } -.text-accent { - color: $brand-primary-accent; +.text-danger { + @include themify($themes) { + color: themed('dangerColor') !important; + } +} + +.text-info { + @include themify($themes) { + color: themed('infoColor') !important; + } +} + +.text-warning { + @include themify($themes) { + color: themed('warningColor') !important; + } } .text-center { @@ -126,8 +136,18 @@ app-root > #loading { height: 100%; width: 100%; color: $text-muted; + + @include themify($themes) { + color: themed('mutedColor'); + } } app-vault-icon { display: flex; } + +.logo-image { + @include themify($themes) { + content: url('../images/logo-' + themed('logoSuffix') + '@2x.png'); + } +} diff --git a/src/popup/scss/pages.scss b/src/popup/scss/pages.scss index 67f13e203f..d5df201f63 100644 --- a/src/popup/scss/pages.scss +++ b/src/popup/scss/pages.scss @@ -27,7 +27,7 @@ app-home { } img { - width: 282px; + width: 284px; margin: 0 auto; } @@ -40,19 +40,25 @@ app-home { } a.settings-icon { - color: #bbbbbb; position: absolute; top: 10px; left: 10px; + @include themify($themes) { + color: themed('mutedColor'); + } + span { visibility: hidden; } &:hover { - color: $brand-primary; text-decoration: none; + @include themify($themes) { + color: themed('primaryColor'); + } + span { visibility: visible; } diff --git a/src/popup/scss/plugins.scss b/src/popup/scss/plugins.scss index 76bd17e50c..fc10a3fcdf 100644 --- a/src/popup/scss/plugins.scss +++ b/src/popup/scss/plugins.scss @@ -45,7 +45,10 @@ $fa-font-path: "~font-awesome/fonts"; &.toast-danger, &.toast-error { background-image: none !important; - background-color: $brand-danger; + + @include themify($themes) { + background-color: themed('dangerColor'); + } &:before { content: "\f0e7"; @@ -55,7 +58,10 @@ $fa-font-path: "~font-awesome/fonts"; &.toast-warning { background-image: none !important; - background-color: $brand-warning; + + @include themify($themes) { + background-color: themed('warningColor'); + } &:before { content: "\f071"; @@ -64,7 +70,10 @@ $fa-font-path: "~font-awesome/fonts"; &.toast-info { background-image: none !important; - background-color: $brand-info; + + @include themify($themes) { + background-color: themed('infoColor'); + } &:before { content: "\f05a"; @@ -73,7 +82,10 @@ $fa-font-path: "~font-awesome/fonts"; &.toast-success { background-image: none !important; - background-color: $brand-success; + + @include themify($themes) { + background-color: themed('successColor'); + } &:before { content: "\f00C"; diff --git a/src/popup/scss/variables.scss b/src/popup/scss/variables.scss index 1a9c1f5d4f..5e9324dfad 100644 --- a/src/popup/scss/variables.scss +++ b/src/popup/scss/variables.scss @@ -78,6 +78,7 @@ $themes: ( successColor: $brand-success, infoColor: $brand-info, warningColor: $brand-warning, + logoSuffix: 'dark', ), dark: ( textColor: #ffffff, @@ -95,7 +96,7 @@ $themes: ( headerInputColor: #ffffff, headerInputPlaceholderColor: #707070, listItemBackgroundColor: #363636, - listItemBackgroundHoverColor: #464646, + listItemBackgroundHoverColor: #3c3c3c, groupingsActiveColor: #292929, disabledIconColor: #c7c7cd, headingColor: #a3a3a3, @@ -111,7 +112,7 @@ $themes: ( inputPlaceholderColor: #707070, buttonBackgroundColor: #363636, buttonBorderColor: #1f1f1f, - buttonColor: #ffffff, + buttonColor: #e0e0e0, buttonPrimaryColor: #46ace7, buttonDangerColor: #ff3e24, primaryColor: #52bdfb, @@ -120,6 +121,7 @@ $themes: ( successColor: $brand-success, infoColor: $brand-info, warningColor: $brand-warning, + logoSuffix: 'white', ), ); diff --git a/src/popup/settings/options.component.ts b/src/popup/settings/options.component.ts index 7e6e9a6ff4..1f2663c668 100644 --- a/src/popup/settings/options.component.ts +++ b/src/popup/settings/options.component.ts @@ -105,6 +105,7 @@ export class OptionsComponent implements OnInit { async saveTheme() { await this.storageService.save(ConstantsService.themeKey, this.theme); this.analytics.eventTrack.next({ action: 'Set Theme ' + this.theme }); + window.setTimeout(() => window.location.reload(), 200); } private callAnalytics(name: string, enabled: boolean) {