From 865658734a515b22cd96585128ce1dbd09e76337 Mon Sep 17 00:00:00 2001
From: Kyle Spearrin <kyle.spearrin@gmail.com>
Date: Sat, 8 Dec 2018 13:48:30 -0500
Subject: [PATCH] style fixes for colorized passwords

---
 jslib                                         |  2 +-
 .../password-generator-history.component.html |  5 ++--
 src/app/vault/view.component.html             |  6 ++--
 src/scss/base.scss                            | 12 --------
 src/scss/misc.scss                            | 29 +++++++++++++++----
 src/scss/variables.scss                       | 12 ++++----
 6 files changed, 36 insertions(+), 30 deletions(-)

diff --git a/jslib b/jslib
index 1da72b9a97..9694d2922e 160000
--- a/jslib
+++ b/jslib
@@ -1 +1 @@
-Subproject commit 1da72b9a97111e2cf749dd6f18e85f98f321bf3d
+Subproject commit 9694d2922ef033c6c5eead2c7b4a308b6d93bf2f
diff --git a/src/app/vault/password-generator-history.component.html b/src/app/vault/password-generator-history.component.html
index cdf045303a..460b495fd6 100644
--- a/src/app/vault/password-generator-history.component.html
+++ b/src/app/vault/password-generator-history.component.html
@@ -9,9 +9,8 @@
                     <div class="box-content condensed">
                         <div class="box-content-row box-content-row-flex" *ngFor="let h of history">
                             <div class="row-main">
-                                <span class="text monospaced">
-                                    {{h.password}}
-                                </span>
+                                <div class="text password-wrapper monospaced"
+                                     [innerHTML]="h.password | colorPassword"></div>
                                 <span class="detail">{{h.date | date:'medium'}}</span>
                             </div>
                             <div class="action-buttons">
diff --git a/src/app/vault/view.component.html b/src/app/vault/view.component.html
index df56c2c665..a968d5ebb2 100644
--- a/src/app/vault/view.component.html
+++ b/src/app/vault/view.component.html
@@ -26,8 +26,10 @@
                     <div class="box-content-row box-content-row-flex" *ngIf="cipher.login.password">
                         <div class="row-main">
                             <span class="row-label">{{'password' | i18n}}</span>
-                            <span [hidden]="showPassword" class="monospaced">{{cipher.login.maskedPassword}}</span>
-                            <span [hidden]="!showPassword" class="monospaced" [innerHTML]="cipher.login.password | colorPassword"></span>
+                            <div [hidden]="showPassword" class="monospaced password-wrapper">
+                                {{cipher.login.maskedPassword}}</div>
+                            <div [hidden]="!showPassword" class="monospaced password-wrapper"
+                                 [innerHTML]="cipher.login.password | colorPassword"></div>
                         </div>
                         <div class="action-buttons">
                             <button type="button" #checkPasswordBtn class="row-btn btn" appBlurClick
diff --git a/src/scss/base.scss b/src/scss/base.scss
index 8c6129e81c..0300dc8460 100644
--- a/src/scss/base.scss
+++ b/src/scss/base.scss
@@ -64,18 +64,6 @@ input, select, textarea {
     }
 }
 
-.passwordNumber {
-    @include themify($themes) {
-        color: themed('passwordNumberColor');
-    }
-}
-
-.passwordSpecial {
-    @include themify($themes) {
-        color: themed('passwordSpecialColor');
-    }
-}
-
 input, select, textarea, button {
     font-size: $font-size-base;
     font-family: $font-family-sans-serif;
diff --git a/src/scss/misc.scss b/src/scss/misc.scss
index 7afd1c25be..805938e434 100644
--- a/src/scss/misc.scss
+++ b/src/scss/misc.scss
@@ -88,10 +88,6 @@ p.lead {
     font-weight: normal;
 }
 
-[hidden] {
-    display: none !important;
-}
-
 .monospaced {
     font-family: $font-family-monospace;
 }
@@ -170,10 +166,10 @@ p.lead {
 
 .password-block {
     font-size: $font-size-large;
-    word-break: break-all;
     font-family: $font-family-monospace;
-    min-height: 60px;
+    min-height: 50px;
     display: flex;
+    flex-wrap: wrap;
     align-items: center;
     justify-content: center;
     text-align: center;
@@ -183,6 +179,23 @@ p.lead {
     }
 }
 
+.password-wrapper {
+    display: flex !important;
+    flex-wrap: wrap;
+}
+
+.password-number {
+    @include themify($themes) {
+        color: themed('passwordNumberColor');
+    }
+}
+
+.password-special {
+    @include themify($themes) {
+        color: themed('passwordSpecialColor');
+    }
+}
+
 #duo-frame {
     background: url('../images/loading.svg') 0 0 no-repeat;
     height: 330px;
@@ -264,3 +277,7 @@ app-root > #loading {
         content: url('../images/logo-' + themed('logoSuffix') + '@2x.png');
     }
 }
+
+[hidden] {
+    display: none !important;
+}
diff --git a/src/scss/variables.scss b/src/scss/variables.scss
index 9c83a32d64..41f7ada747 100644
--- a/src/scss/variables.scss
+++ b/src/scss/variables.scss
@@ -41,8 +41,6 @@ $button-color-danger: darken($brand-danger, 10%);
 $themes: (
     light: (
         textColor: $text-color,
-        passwordNumberColor: #007fde,
-        passwordSpecialColor: #c40800,
         borderColor: $border-color-dark,
         backgroundColor: $background-color,
         backgroundColorAlt: $background-color-alt,
@@ -86,11 +84,11 @@ $themes: (
         infoColor: $brand-info,
         warningColor: $brand-warning,
         logoSuffix: 'dark',
+        passwordNumberColor: #007fde,
+        passwordSpecialColor: #c40800,
     ),
     dark: (
         textColor: #ffffff,
-        passwordNumberColor: #9fd9ff,
-        passwordSpecialColor: #ff7c70,
         borderColor: #2f2f2f,
         backgroundColor: #363636,
         backgroundColorAlt: #3d3d3d,
@@ -134,11 +132,11 @@ $themes: (
         infoColor: $brand-info,
         warningColor: $brand-warning,
         logoSuffix: 'white',
+        passwordNumberColor: #52bdfb,
+        passwordSpecialColor: #ff7c70,
     ),
     nord: (
         textColor: $nord5,
-        passwordNumberColor: $nord8,
-        passwordSpecialColor: $nord12,
         borderColor: $nord0,
         backgroundColor: $nord2,
         backgroundColorAlt: $nord1,
@@ -182,6 +180,8 @@ $themes: (
         infoColor: $nord9,
         warningColor: $nord12,
         logoSuffix: 'white',
+        passwordNumberColor: $nord8,
+        passwordSpecialColor: $nord12,
     ),
 );