[EC-641] Browser Ext UI Update (#3842)

* more css changes

* add icon button hover

* Update apps/browser/src/popup/scss/box.scss

Co-authored-by: Oscar Hinton <Hinton@users.noreply.github.com>

* Update apps/desktop/src/scss/box.scss

Co-authored-by: Oscar Hinton <Hinton@users.noreply.github.com>

* feedback updates

* restore desktop pseudo rule

* update to include some variable fixes and deletions

* updates per oscar

* feedback updates

more universal variable, adjusted box padding (per Kyle), and aligned footer text

* changes per product design

added border for selects, border around generator, and hover for solarizeddark

* add more helper text space below for visual separation

* group new variable

* login page button fix

Dflinn found an odd margin on the login page

* Revert "Merge branch 'master' into browser-ext-ui-update-test"

This reverts commit b8007102f9, reversing
changes made to 246768cb12.

* fix button height

* revert file changes

* test adjustments

Co-authored-by: Oscar Hinton <Hinton@users.noreply.github.com>
Co-authored-by: Kyle Spearrin <kyle.spearrin@gmail.com>

apps/browser/src/popup/components/set-pin.component.html

@@ -7,7 +7,7 @@
         </div>
         <div class="box">
           <div class="box-content">
-            <div class="box-content-row box-content-row-flex" appBoxRow>
+            <div class="box-content-row box-content-row-flex no-hover no-bg" appBoxRow>
               <div class="row-main">
                 <label for="pin">{{ "pin" | i18n }}</label>
                 <input

apps/browser/src/popup/scss/base.scss

@@ -202,6 +202,7 @@ header {
     flex-direction: row;
     justify-content: center;
     align-items: center;
+    height: 100%;
 
     @include themify($themes) {
       color: themed("headerColor");
@@ -298,6 +299,10 @@ header {
   }
 }
 
+.no-bg {
+  background-color: transparent;
+}
+
 .content {
   padding: 15px;
 }
@@ -504,11 +509,14 @@ main {
   padding-left: 7px;
   .org-filter {
     @include themify($themes) {
-      background-color: themed("backgroundColor");
+      background-color: themed("buttonBackgroundColor");
     }
-    border: 1px solid;
-    padding: 7px;
     border-radius: $border-radius;
+    padding: 6px 10px;
+    width: 160px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
   }
 }
 .vault-select {

apps/browser/src/popup/scss/box.scss

@@ -3,7 +3,6 @@
 .box {
   position: relative;
   width: 100%;
-  margin: 10px 0;
 
   &.first {
     margin-top: 0;
@@ -20,13 +19,14 @@
   }
 
   .box-header-expandable {
-    padding: 0 10px;
+    padding: 10px;
-    margin-bottom: 5px;
+    margin: 0 10px;
     text-transform: uppercase;
     display: flex;
-    width: 100%;
+    width: calc(100% - 20px);
     box-sizing: border-box;
     align-items: center;
+    border-radius: $border-radius;
 
     @include themify($themes) {
       color: themed("headingColor");
@@ -52,11 +52,8 @@
   }
 
   .box-content {
-    border-top: 1px solid #000000;
-    border-bottom: 1px solid #000000;
-
     @include themify($themes) {
-      background-color: themed("boxBackgroundColor");
+      background-color: themed("backgroundColor");
       border-color: themed("borderColor");
     }
 
@@ -74,13 +71,16 @@
     .box-content-row.no-hover {
       &:hover,
       &:focus {
-        background-color: initial !important;
+        @include themify($themes) {
+          background-color: themed("boxBackgroundColor") !important;
+        }
       }
     }
   }
 
   .box-footer {
-    margin: 5px 10px;
+    margin: 0 10px 10px 10px;
+    padding: 0 15px 10px 15px;
     font-size: $font-size-small;
 
     button.btn {
@@ -94,13 +94,18 @@
   }
 
   &.list {
+    margin: 10px 0 20px 0;
     .box-content {
       .box-content-row {
-        padding: 3px 10px;
+        padding: 10px;
         text-decoration: none;
+        border-radius: $border-radius;
+        margin: 10px;
+        // background-color: $background-color;
 
         @include themify($themes) {
           color: themed("textColor");
+          background-color: themed("boxBackgroundColor");
         }
 
         &.padded {
@@ -108,6 +113,14 @@
           padding-bottom: 10px;
         }
 
+        &.no-hover {
+          &:hover {
+            @include themify($themes) {
+              background-color: themed("boxBackgroundColor") !important;
+            }
+          }
+        }
+
         &:hover,
         &:focus,
         &.active {
@@ -155,6 +168,8 @@
           display: flex;
           padding-top: 10px;
           padding-bottom: 10px;
+          margin: 10px;
+          border-radius: $border-radius;
         }
       }
     }
@@ -184,7 +199,6 @@
 
 .box-section-divider {
   border-top: 1px solid #000000;
-  padding-top: 10px;
 
   @include themify($themes) {
     border-color: themed("borderColor");
@@ -196,19 +210,15 @@
   padding: 10px 15px;
   position: relative;
   z-index: 1;
+  border-radius: $border-radius;
+  margin: 10px;
 
-  &:before {
+  @include themify($themes) {
-    content: "";
+    background-color: themed("boxBackgroundColor");
-    position: absolute;
+  }
-    right: 0;
-    bottom: 0;
-    height: 1px;
-    width: calc(100% - 10px);
-    border-bottom: 1px solid #000000;
 
-    @include themify($themes) {
+  &.no-bg {
-      border-bottom-color: themed("boxBorderColor");
+    background-color: rgba(0, 0, 0, 0) !important;
-    }
   }
 
   &:last-child {
@@ -331,7 +341,7 @@
   }
 
   &.box-content-row-multi {
-    width: 100%;
+    width: calc(100% - 20px);
 
     input:not([type="checkbox"]) {
       width: 100%;
@@ -455,6 +465,7 @@
     width: 100%;
     border: 1px solid #000000;
     border-radius: $border-radius;
+    padding: 7px 4px;
 
     @include themify($themes) {
       border-color: themed("inputBorderColor");
@@ -710,3 +721,19 @@
   overflow: hidden;
   text-overflow: ellipsis;
 }
+
+form {
+  .box {
+    .box-content {
+      .box-content-row {
+        &.no-hover {
+          &:hover {
+            @include themify($themes) {
+              background-color: themed("transparentColor") !important;
+            }
+          }
+        }
+      }
+    }
+  }
+}

apps/browser/src/popup/scss/buttons.scss

@@ -65,7 +65,8 @@
 
   &.block {
     display: block;
-    width: 100%;
+    width: calc(100% - 20px);
+    margin: 0 auto;
   }
 
   &.link,
@@ -89,8 +90,13 @@
 
 button.box-content-row {
   display: block;
-  width: 100%;
+  width: calc(100% - 20px);
   text-align: left;
+  border-color: none;
+
+  @include themify($themes) {
+    background-color: themed("boxBackgroundColor");
+  }
 }
 
 button {
@@ -98,3 +104,10 @@ button {
   background: transparent;
   color: inherit;
 }
+
+.login-buttons {
+  .btn.block {
+    width: 100%;
+    margin-bottom: 10px;
+  }
+}

apps/browser/src/popup/scss/misc.scss

@@ -132,7 +132,7 @@ p.lead {
 }
 
 .img-rounded {
-  border-radius: 6px;
+  border-radius: $border-radius;
 }
 
 .sr-only {

apps/browser/src/popup/scss/pages.scss

@@ -11,8 +11,16 @@ app-sync {
 app-generator .generated-block {
   font-size: $font-size-large;
   font-family: $font-family-monospace;
-  margin: 20px;
+  margin: 10px;
+  padding: 10px 10px 10px 0;
   display: flex;
+  border-radius: $border-radius;
+  border: 1px solid;
+
+  @include themify($themes) {
+    background-color: transparent;
+    border-color: themed("borderColorAlt");
+  }
 
   .generated-wrapper {
     text-align: left;
@@ -20,15 +28,30 @@ app-generator .generated-block {
     min-width: 0;
     white-space: pre-wrap;
     word-break: break-all;
+    padding: 15px;
+    border-radius: $border-radius;
+
+    @include themify($themes) {
+      background-color: themed("backgroundColor");
+    }
   }
 
   .action-buttons {
     display: flex;
     align-self: center;
+    height: 100%;
+    margin-left: 10px;
 
     button {
-      padding: 5px;
+      padding: 6px;
-      margin: -5px -5px 5px 5px;
+      margin: 2px;
+      border-radius: $border-radius;
+
+      &:hover {
+        @include themify($themes) {
+          background-color: themed("hoverColorTransparent");
+        }
+      }
     }
   }
 }
@@ -117,9 +140,31 @@ body.body-full {
 }
 
 .createAccountLink {
-  padding-top: 30px;
+  padding: 30px 10px 0 10px;
 }
 
 .login-buttons > button {
   margin: 15px 0 15px 0;
 }
+
+app-options {
+  .box {
+    margin: 10px 0;
+
+    & + .box {
+      margin-top: 10px;
+    }
+  }
+}
+
+app-vault-view,
+app-vault-add-edit,
+app-generator {
+  .box {
+    margin: 15px 0 25px 0;
+
+    & + .box {
+      margin-top: 25px;
+    }
+  }
+}

apps/browser/src/popup/scss/variables.scss

@@ -6,6 +6,8 @@ $font-family-sans-serif: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-s
 $font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace;
 $font-size-base: 14px;
 $font-size-large: 18px;
+$font-size-xlarge: 22px;
+$font-size-xxlarge: 28px;
 $font-size-small: 12px;
 $text-color: #000000;
 $border-color: #f0f0f0;
@@ -13,8 +15,9 @@ $border-color-dark: #ddd;
 $list-item-hover: #fbfbfb;
 $list-icon-color: #767679;
 $disabled-box-opacity: 1;
-$border-radius: 3px;
+$border-radius: 6px;
 $line-height-base: 1.42857143;
+$icon-hover-color: lighten($text-color, 50%);
 
 $gray: #555;
 $gray-light: #777;
@@ -32,6 +35,7 @@ $background-color: #f0f0f0;
 $box-background-color: white;
 $box-background-hover-color: $list-item-hover;
 $box-border-color: $border-color;
+$border-color-alt: #c3c5c7;
 
 $button-border-color: darken($border-color-dark, 12%);
 $button-background-color: white;
@@ -59,8 +63,10 @@ $solarizedDarkGreen: #859900;
 $themes: (
   light: (
     textColor: $text-color,
+    hoverColorTransparent: rgba($text-color, 0.15),
     borderColor: $border-color-dark,
     backgroundColor: $background-color,
+    borderColorAlt: $border-color-alt,
     backgroundColorAlt: #ffffff,
     scrollbarColor: rgba(100, 100, 100, 0.2),
     scrollbarHoverColor: rgba(100, 100, 100, 0.4),
@@ -107,11 +113,14 @@ $themes: (
     calloutBackgroundColor: $box-background-color,
     toastTextColor: #ffffff,
     svgSuffix: "-light.svg",
+    transparentColor: rgba(0, 0, 0, 0),
   ),
   dark: (
     textColor: #ffffff,
+    hoverColorTransparent: rgba($text-color, 0.15),
     borderColor: #161c26,
     backgroundColor: #161c26,
+    borderColorAlt: #6e788a,
     backgroundColorAlt: #2f343d,
     scrollbarColor: #6e788a,
     scrollbarHoverColor: #8d94a5,
@@ -158,11 +167,14 @@ $themes: (
     calloutBackgroundColor: #3c424e,
     toastTextColor: #1f242e,
     svgSuffix: "-dark.svg",
+    transparentColor: rgba(0, 0, 0, 0),
   ),
   nord: (
     textColor: $nord5,
+    hoverColorTransparent: rgba($text-color, 0.15),
     borderColor: $nord0,
     backgroundColor: $nord1,
+    borderColorAlt: $nord5,
     backgroundColorAlt: $nord2,
     scrollbarColor: $nord4,
     scrollbarHoverColor: $nord6,
@@ -209,16 +221,19 @@ $themes: (
     calloutBackgroundColor: $nord2,
     toastTextColor: #ffffff,
     svgSuffix: "-dark.svg",
+    transparentColor: rgba(0, 0, 0, 0),
   ),
   solarizedDark: (
     textColor: $solarizedDarkBase2,
+    hoverColorTransparent: rgba($text-color, 0.15),
     borderColor: $solarizedDarkBase03,
     backgroundColor: $solarizedDarkBase03,
+    borderColorAlt: $solarizedDarkBase01,
     backgroundColorAlt: $solarizedDarkBase02,
     scrollbarColor: $solarizedDarkBase0,
     scrollbarHoverColor: $solarizedDarkBase2,
-    boxBackgroundColor: $solarizedDarkBase03,
+    boxBackgroundColor: $solarizedDarkBase02,
-    boxBackgroundHoverColor: $solarizedDarkBase02,
+    boxBackgroundHoverColor: lighten($solarizedDarkBase02, 5%),
     boxBorderColor: $solarizedDarkBase02,
     tabBackgroundColor: $solarizedDarkBase02,
     tabBackgroundHoverColor: $solarizedDarkBase01,
@@ -230,7 +245,7 @@ $themes: (
     headerInputBackgroundFocusColor: $solarizedDarkBase1,
     headerInputColor: $solarizedDarkBase01,
     headerInputPlaceholderColor: $solarizedDarkBase00,
-    listItemBackgroundHoverColor: $solarizedDarkBase02,
+    listItemBackgroundHoverColor: lighten($solarizedDarkBase02, 5%),
     disabledIconColor: $solarizedDarkBase0,
     disabledBoxOpacity: 0.5,
     headingColor: $solarizedDarkBase0,
@@ -260,6 +275,7 @@ $themes: (
     calloutBackgroundColor: $solarizedDarkBase01,
     toastTextColor: #ffffff,
     svgSuffix: "-solarized.svg",
+    transparentColor: rgba(0, 0, 0, 0),
   ),
 );
 

apps/browser/src/popup/vault/current-tab.component.html

@@ -41,7 +41,7 @@
         {{ "typeLogins" | i18n }}
         <span class="flex-right">{{ loginCiphers.length }}</span>
       </h2>
-      <div class="box-content">
+      <div class="box-content no-hover">
         <app-cipher-row
           *ngFor="let loginCipher of loginCiphers"
           [cipher]="loginCipher"