From 905ebd76ae7fc9e763164adb59dc5d48eb2d47f8 Mon Sep 17 00:00:00 2001 From: Kyle Spearrin Date: Wed, 2 May 2018 12:34:47 -0400 Subject: [PATCH] styling updates --- src/app/accounts/environment.component.html | 71 ++++------ src/app/accounts/login.component.html | 68 ++++----- src/app/accounts/login.component.ts | 2 +- .../two-factor-options.component.html | 38 +++-- src/app/accounts/two-factor.component.html | 133 ++++++++---------- src/app/accounts/two-factor.component.ts | 2 +- src/locales/en/messages.json | 3 + src/scss/environment.scss | 2 +- src/scss/misc.scss | 9 +- src/scss/plugins.scss | 47 ++++++- 10 files changed, 189 insertions(+), 186 deletions(-) diff --git a/src/app/accounts/environment.component.html b/src/app/accounts/environment.component.html index 648b4a53..723b8681 100644 --- a/src/app/accounts/environment.component.html +++ b/src/app/accounts/environment.component.html @@ -1,58 +1,35 @@
+
+

{{'settings' | i18n}}

+ +
-
-
- {{'selfHostedEnvironment' | i18n}} -
-
-
- - -
-
-
- {{'selfHostedEnvironmentFooter' | i18n}} -
+

{{'selfHostedEnvironment' | i18n}}

+

{{'selfHostedEnvironmentFooter' | i18n}}

+
+ + + {{'ex' | i18n}} https://bitwarden.company.com
-
-
- -
-
-
- - -
-
- - -
-
- - -
-
- - -
-
-
- {{'customEnvironmentFooter' | i18n}} -
+

{{'customEnvironment' | i18n}}

+

{{'customEnvironmentFooter' | i18n}}

+
+ + +
+
+ +
-
- -
diff --git a/src/app/accounts/login.component.html b/src/app/accounts/login.component.html index 36e4e2d4..d9710893 100644 --- a/src/app/accounts/login.component.html +++ b/src/app/accounts/login.component.html @@ -1,45 +1,33 @@ -
-
- bitwarden -

{{'loginOrCreateNewAccount' | i18n}}

-
-
-
- - -
-
-
- - -
-
- - - +
+ +
+
+
+
{{'logIn' | i18n}}
+
+
+ + +
+
+
+ + +
+
+ +
-
- - - {{'createAccount' | i18n}} - -
-
- {{'getMasterPasswordHint' | i18n}} -
- -  {{'settings' | i18n}} - -
- + +
diff --git a/src/app/accounts/login.component.ts b/src/app/accounts/login.component.ts index 7c572e57..2e66f691 100644 --- a/src/app/accounts/login.component.ts +++ b/src/app/accounts/login.component.ts @@ -29,7 +29,7 @@ export class LoginComponent extends BaseLoginComponent { analytics: Angulartics2, toasterService: ToasterService, i18nService: I18nService, private componentFactoryResolver: ComponentFactoryResolver) { super(authService, router, analytics, toasterService, i18nService); - super.successRoute = '/dashboard'; + super.successRoute = '/tabs/dashboard'; } settings() { diff --git a/src/app/accounts/two-factor-options.component.html b/src/app/accounts/two-factor-options.component.html index 740365d1..099e3255 100644 --- a/src/app/accounts/two-factor-options.component.html +++ b/src/app/accounts/two-factor-options.component.html @@ -1,27 +1,25 @@
-
-
-
- {{'twoStepOptions' | i18n}} -
-
- - - {{p.name}} - {{p.description}} - - - {{'recoveryCodeTitle' | i18n}} - {{'recoveryCodeDesc' | i18n}} - -
-
+
+

{{'twoStepOptions' | i18n}}

+
-
- +
+

+ + {{p.name}} + +
{{p.description}} +

+

+ + {{'recoveryCodeTitle' | i18n}} + +
{{'recoveryCodeDesc' | i18n}} +

diff --git a/src/app/accounts/two-factor.component.html b/src/app/accounts/two-factor.component.html index 8bfe9fbf..528b2658 100644 --- a/src/app/accounts/two-factor.component.html +++ b/src/app/accounts/two-factor.component.html @@ -1,75 +1,64 @@ -
-
-

{{title}}

-

{{'enterVerificationCodeApp' | i18n}}

-

- {{'enterVerificationCodeEmail' | i18n : twoFactorEmail}} -

-
-
-
- - -
-
- - -
-
-
- -

{{'insertYubiKey' | i18n}}

- -
-
-
- - -
-
- - -
-
-
- - -
-
-
-
- - -
-
-
- -
-
-
-

{{'noTwoStepProviders' | i18n}}

-

{{'noTwoStepProviders2' | i18n}}

-
-
-
-
- - {{'cancel' | i18n}} + + {{'continue' | i18n}} + + + + {{'cancel' | i18n}} +
+
+
+ {{'useAnotherTwoStepMethod' | i18n}} + + {{'sendVerificationCodeEmailAgain' | i18n}} + +
+
-
- {{'useAnotherTwoStepMethod' | i18n}} - - {{'sendVerificationCodeEmailAgain' | i18n}} - -
-
- + +
diff --git a/src/app/accounts/two-factor.component.ts b/src/app/accounts/two-factor.component.ts index c281175d..4b9d3b9f 100644 --- a/src/app/accounts/two-factor.component.ts +++ b/src/app/accounts/two-factor.component.ts @@ -38,7 +38,7 @@ export class TwoFactorComponent extends BaseTwoFactorComponent { private componentFactoryResolver: ComponentFactoryResolver) { super(authService, router, analytics, toasterService, i18nService, apiService, platformUtilsService, window, environmentService); - super.successRoute = '/dashboard'; + super.successRoute = '/tabs/dashboard'; } anotherMethod() { diff --git a/src/locales/en/messages.json b/src/locales/en/messages.json index 980c76c6..d1315866 100644 --- a/src/locales/en/messages.json +++ b/src/locales/en/messages.json @@ -425,5 +425,8 @@ }, "dashboard": { "message": "Dashboard" + }, + "organization": { + "message": "Organization" } } diff --git a/src/scss/environment.scss b/src/scss/environment.scss index 0809a564..cec22d19 100644 --- a/src/scss/environment.scss +++ b/src/scss/environment.scss @@ -1,4 +1,4 @@ -@import "bootstrap.scss"; +@import "~bootstrap/scss/_variables.scss"; html.os_windows { body { diff --git a/src/scss/misc.scss b/src/scss/misc.scss index a3eed07c..52cf69e7 100644 --- a/src/scss/misc.scss +++ b/src/scss/misc.scss @@ -1,4 +1,4 @@ -@import "bootstrap.scss"; +@import "~bootstrap/scss/_variables.scss"; body { padding: 10px 0 20px 0; @@ -23,14 +23,17 @@ h3 { text-transform: uppercase; } +h4 { + font-weight: bold; +} + .nav.nav-tabs { margin-bottom: 20px; } #duo-frame { background: url('../images/loading.svg') 0 0 no-repeat; - height: 330px; - margin: 0 -150px 15px -150px; + height: 380px; iframe { width: 100%; diff --git a/src/scss/plugins.scss b/src/scss/plugins.scss index c8589627..d28b9b0e 100644 --- a/src/scss/plugins.scss +++ b/src/scss/plugins.scss @@ -2,7 +2,7 @@ $fa-font-path: "~font-awesome/fonts"; @import "~font-awesome/scss/font-awesome.scss"; @import "~angular2-toaster/toaster"; -@import "bootstrap.scss"; +@import "~bootstrap/scss/_variables.scss"; #toast-container { .toast-close-button { @@ -73,3 +73,48 @@ $fa-font-path: "~font-awesome/fonts"; } } } + +@keyframes modalshow { + 0% { + opacity: 0; + transform: translate(0, -25%); + } + + 100% { + opacity: 1; + transform: translate(0, 0); + } +} + +@keyframes backdropshow { + 0% { + opacity: 0; + } + + 100% { + opacity: $modal-backdrop-opacity; + } +} + +.modal { + display: block !important; + opacity: 1 !important; +} + +.modal-dialog { + .modal.fade & { + transform: initial !important; + animation: modalshow 0.3s ease-in; + } + .modal.show & { + transform: initial !important; + } + transform: translate(0, 0); +} + +.modal-backdrop { + &.fade { + animation: backdropshow 0.1s ease-in; + } + opacity: $modal-backdrop-opacity !important; +}