-
-
+
+
+
+
+
+
+
-
diff --git a/src/popup/accounts/register.component.ts b/src/popup/accounts/register.component.ts
index 19fa0c1962..e738a9ac06 100644
--- a/src/popup/accounts/register.component.ts
+++ b/src/popup/accounts/register.component.ts
@@ -23,4 +23,21 @@ export class RegisterComponent extends BaseRegisterComponent {
super(authService, router, i18nService, cryptoService, apiService, stateService, platformUtilsService,
passwordGenerationService);
}
+
+ get masterPasswordScoreWidth() {
+ return this.masterPasswordScore == null ? 0 : (this.masterPasswordScore + 1) * 20;
+ }
+
+ get masterPasswordScoreColor() {
+ switch (this.masterPasswordScore) {
+ case 4:
+ return 'bg-success';
+ case 3:
+ return 'bg-primary';
+ case 2:
+ return 'bg-warning';
+ default:
+ return 'bg-danger';
+ }
+ }
}
diff --git a/src/popup/scss/box.scss b/src/popup/scss/box.scss
index e0d44a7e5a..858ca764fb 100644
--- a/src/popup/scss/box.scss
+++ b/src/popup/scss/box.scss
@@ -111,8 +111,8 @@
flex-grow: 1;
}
- &.box-content-row-flex, &.box-content-row-checkbox, &.box-content-row-input,
- &.box-content-row-slider, &.box-content-row-multi {
+ &.box-content-row-flex, .box-content-row-flex, &.box-content-row-checkbox,
+ &.box-content-row-input, &.box-content-row-slider, &.box-content-row-multi {
display: flex;
align-items: center;
word-break: break-all;
@@ -312,7 +312,6 @@
}
}
-
&.totp {
.totp-code {
font-family: $font-family-monospace;
@@ -373,6 +372,27 @@
}
}
}
+
+ .progress {
+ display: flex;
+ height: 5px;
+ overflow: hidden; // force rounded corners by cropping it
+ font-size: $font-size-small;
+ margin: 10px -15px -10px;
+
+ @include themify($themes) {
+ background-color: themed('borderColor');
+ }
+ }
+
+ .progress-bar {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ text-align: center;
+ white-space: nowrap;
+ background-color: $brand-primary;
+ }
}
&.condensed .box-content-row, .box-content-row.condensed {
diff --git a/src/popup/scss/misc.scss b/src/popup/scss/misc.scss
index 94112f5c38..acc6690c77 100644
--- a/src/popup/scss/misc.scss
+++ b/src/popup/scss/misc.scss
@@ -4,6 +4,36 @@ small, .small {
font-size: $font-size-small;
}
+.bg-primary {
+ @include themify($themes) {
+ background-color: themed('primaryColor') !important;
+ }
+}
+
+.bg-success {
+ @include themify($themes) {
+ background-color: themed('successColor') !important;
+ }
+}
+
+.bg-danger {
+ @include themify($themes) {
+ background-color: themed('dangerColor') !important;
+ }
+}
+
+.bg-info {
+ @include themify($themes) {
+ background-color: themed('infoColor') !important;
+ }
+}
+
+.bg-warning {
+ @include themify($themes) {
+ background-color: themed('warningColor') !important;
+ }
+}
+
.text-primary {
@include themify($themes) {
color: themed('primaryColor') !important;