From cd8cc6363e393653155c73264b5f70b3ab888305 Mon Sep 17 00:00:00 2001
From: DanHillesheim <79476558+DanHillesheim@users.noreply.github.com>
Date: Fri, 7 Oct 2022 13:54:48 -0600
Subject: [PATCH 01/17] more css changes

---
 apps/browser/src/popup/scss/box.scss       | 53 ++++++++++++++--------
 apps/browser/src/popup/scss/buttons.scss   |  8 +++-
 apps/browser/src/popup/scss/pages.scss     | 26 +++++++++--
 apps/browser/src/popup/scss/variables.scss |  2 +
 apps/desktop/src/scss/box.scss             | 26 +++++------
 5 files changed, 79 insertions(+), 36 deletions(-)

diff --git a/apps/browser/src/popup/scss/box.scss b/apps/browser/src/popup/scss/box.scss
index 6e0b6f9356a2..3a4dfd5620d9 100644
--- a/apps/browser/src/popup/scss/box.scss
+++ b/apps/browser/src/popup/scss/box.scss
@@ -3,7 +3,7 @@
 .box {
   position: relative;
   width: 100%;
-  margin: 10px 0;
+  margin: 10px 0 20px;
 
   &.first {
     margin-top: 0;
@@ -36,7 +36,7 @@
     &:focus-visible,
     &.active {
       @include themify($themes) {
-        background-color: themed("boxBackgroundHoverColor");
+        background-color: themed("backgroundColor");
       }
     }
 
@@ -52,11 +52,11 @@
   }
 
   .box-content {
-    border-top: 1px solid #000000;
-    border-bottom: 1px solid #000000;
+    // 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");
     }
 
@@ -91,11 +91,15 @@
   &.list {
     .box-content {
       .box-content-row {
-        padding: 3px 10px;
+        padding: 10px;
         text-decoration: none;
+        border-radius: 6px;
+        margin: 10px;
+        background-color: $background-color;
 
         @include themify($themes) {
           color: themed("textColor");
+          background-color: themed("boxBackgroundColor");
         }
 
         &.padded {
@@ -150,6 +154,8 @@
           display: flex;
           padding-top: 10px;
           padding-bottom: 10px;
+          margin: 10px;
+          border-radius: 6px;
         }
       }
     }
@@ -191,21 +197,28 @@
   padding: 10px 15px;
   position: relative;
   z-index: 1;
+  background-color: $background-color;
+  border-radius: 6px;
+  margin: 10px;
 
-  &:before {
-    content: "";
-    position: absolute;
-    right: 0;
-    bottom: 0;
-    height: 1px;
-    width: calc(100% - 10px);
-    border-bottom: 1px solid #000000;
-
-    @include themify($themes) {
-      border-bottom-color: themed("boxBorderColor");
-    }
+  @include themify($themes) {
+    background-color: themed("boxBackgroundColor");
   }
 
+  // &:before {
+  //   content: "";
+  //   position: absolute;
+  //   right: 0;
+  //   bottom: 0;
+  //   height: 1px;
+  //   width: calc(100% - 10px);
+  //   border-bottom: 1px solid #000000;
+
+  //   @include themify($themes) {
+  //     border-bottom-color: themed("boxBorderColor");
+  //   }
+  // }
+
   &:last-child {
     &:before {
       border: none;
@@ -449,9 +462,11 @@
   select {
     width: 100%;
     border: 1px solid #000000;
-    border-radius: $border-radius;
+    border-radius: 6px;
+    padding: 7px 4px;
 
     @include themify($themes) {
+      background-color: themed("boxBorderColor");
       border-color: themed("inputBorderColor");
     }
   }
diff --git a/apps/browser/src/popup/scss/buttons.scss b/apps/browser/src/popup/scss/buttons.scss
index c1b30ae5980f..40d9dc4efff7 100644
--- a/apps/browser/src/popup/scss/buttons.scss
+++ b/apps/browser/src/popup/scss/buttons.scss
@@ -89,8 +89,14 @@
 
 button.box-content-row {
   display: block;
-  width: 100%;
+  // width: 100%;
+  width: calc(100% - 20px);
   text-align: left;
+
+  @include themify($themes) {
+    background-color: themed("boxBackgroundColor");
+    border-color: none;
+  }
 }
 
 button {
diff --git a/apps/browser/src/popup/scss/pages.scss b/apps/browser/src/popup/scss/pages.scss
index 9ff96f048b32..4d0d5d1eef23 100644
--- a/apps/browser/src/popup/scss/pages.scss
+++ b/apps/browser/src/popup/scss/pages.scss
@@ -9,10 +9,17 @@ app-sync {
 }
 
 app-generator .generated-block {
-  font-size: $font-size-large;
+  font-size: $font-size-xlarge;
   font-family: $font-family-monospace;
-  margin: 20px;
+  margin: 10px;
+  padding: 10px;
   display: flex;
+  background-color: $box-background-color;
+  border-radius: 6px;
+
+  @include themify($themes) {
+    background-color: themed("boxBackgroundColor");
+  }
 
   .generated-wrapper {
     text-align: left;
@@ -20,15 +27,28 @@ app-generator .generated-block {
     min-width: 0;
     white-space: pre-wrap;
     word-break: break-all;
+    padding: 15px 30px;
+    border-radius: 6px;
+    background-color: #e6e9ed;
+    border: 1px solid;
+    border-color: #d2d9e6;
+
+    @include themify($themes) {
+      background-color: themed("backgroundColor");
+      border-color: themed("boxBorderColor");
+    }
   }
 
   .action-buttons {
     display: flex;
+    flex-direction: column;
     align-self: center;
+    height: 100%;
+    margin-left: 10px;
 
     button {
       padding: 5px;
-      margin: -5px -5px 5px 5px;
+      margin: 0;
     }
   }
 }
diff --git a/apps/browser/src/popup/scss/variables.scss b/apps/browser/src/popup/scss/variables.scss
index 049954bc335a..027fb38f3ed7 100644
--- a/apps/browser/src/popup/scss/variables.scss
+++ b/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;
diff --git a/apps/desktop/src/scss/box.scss b/apps/desktop/src/scss/box.scss
index 64cbf370abf0..5616922efca2 100644
--- a/apps/desktop/src/scss/box.scss
+++ b/apps/desktop/src/scss/box.scss
@@ -120,19 +120,19 @@
   z-index: 1;
   text-align: left;
 
-  &:before {
-    content: "";
-    position: absolute;
-    right: 0;
-    bottom: 0;
-    height: 1px;
-    width: calc(100% - 10px);
-    border-bottom: 1px solid #000000;
-
-    @include themify($themes) {
-      border-bottom-color: themed("boxBorderColor");
-    }
-  }
+  // &:before {
+  //   content: "";
+  //   position: absolute;
+  //   right: 0;
+  //   bottom: 0;
+  //   height: 1px;
+  //   width: calc(100% - 10px);
+  //   border-bottom: 1px solid #000000;
+
+  //   @include themify($themes) {
+  //     border-bottom-color: themed("boxBorderColor");
+  //   }
+  // }
 
   &:first-child,
   &:last-child {

From d57e909566d7e23a10217025cd87a17738aa7770 Mon Sep 17 00:00:00 2001
From: DanHillesheim <79476558+DanHillesheim@users.noreply.github.com>
Date: Wed, 19 Oct 2022 17:55:58 -0600
Subject: [PATCH 02/17] add icon button hover

---
 apps/browser/src/popup/scss/pages.scss     | 8 ++++++++
 apps/browser/src/popup/scss/variables.scss | 1 +
 2 files changed, 9 insertions(+)

diff --git a/apps/browser/src/popup/scss/pages.scss b/apps/browser/src/popup/scss/pages.scss
index 4d0d5d1eef23..694813b9d493 100644
--- a/apps/browser/src/popup/scss/pages.scss
+++ b/apps/browser/src/popup/scss/pages.scss
@@ -49,6 +49,14 @@ app-generator .generated-block {
     button {
       padding: 5px;
       margin: 0;
+
+      &:hover {
+        color: $brand-primary;
+
+        @include themify($themes) {
+          color: $icon-hover-color;
+        }
+      }
     }
   }
 }
diff --git a/apps/browser/src/popup/scss/variables.scss b/apps/browser/src/popup/scss/variables.scss
index 027fb38f3ed7..c2edf93f84d3 100644
--- a/apps/browser/src/popup/scss/variables.scss
+++ b/apps/browser/src/popup/scss/variables.scss
@@ -17,6 +17,7 @@ $list-icon-color: #767679;
 $disabled-box-opacity: 1;
 $border-radius: 3px;
 $line-height-base: 1.42857143;
+$icon-hover-color: lighten($text-color, 50%);
 
 $gray: #555;
 $gray-light: #777;

From fd1f0b633a7e9dc90f3cfe9d92d55a3ad2629e33 Mon Sep 17 00:00:00 2001
From: DanHillesheim <79476558+DanHillesheim@users.noreply.github.com>
Date: Thu, 20 Oct 2022 09:31:27 -0600
Subject: [PATCH 03/17] Update apps/browser/src/popup/scss/box.scss

Co-authored-by: Oscar Hinton <Hinton@users.noreply.github.com>
---
 apps/browser/src/popup/scss/box.scss | 2 --
 1 file changed, 2 deletions(-)

diff --git a/apps/browser/src/popup/scss/box.scss b/apps/browser/src/popup/scss/box.scss
index 3a4dfd5620d9..92bb51216f4b 100644
--- a/apps/browser/src/popup/scss/box.scss
+++ b/apps/browser/src/popup/scss/box.scss
@@ -52,8 +52,6 @@
   }
 
   .box-content {
-    // border-top: 1px solid #000000;
-    // border-bottom: 1px solid #000000;
 
     @include themify($themes) {
       background-color: themed("backgroundColor");

From 1d42dbee41151fd1de2cb8b09e07660ae5dcfbef Mon Sep 17 00:00:00 2001
From: DanHillesheim <79476558+DanHillesheim@users.noreply.github.com>
Date: Thu, 20 Oct 2022 09:31:34 -0600
Subject: [PATCH 04/17] Update apps/desktop/src/scss/box.scss

Co-authored-by: Oscar Hinton <Hinton@users.noreply.github.com>
---
 apps/desktop/src/scss/box.scss | 14 --------------
 1 file changed, 14 deletions(-)

diff --git a/apps/desktop/src/scss/box.scss b/apps/desktop/src/scss/box.scss
index 5616922efca2..67ce66ccb224 100644
--- a/apps/desktop/src/scss/box.scss
+++ b/apps/desktop/src/scss/box.scss
@@ -120,20 +120,6 @@
   z-index: 1;
   text-align: left;
 
-  // &:before {
-  //   content: "";
-  //   position: absolute;
-  //   right: 0;
-  //   bottom: 0;
-  //   height: 1px;
-  //   width: calc(100% - 10px);
-  //   border-bottom: 1px solid #000000;
-
-  //   @include themify($themes) {
-  //     border-bottom-color: themed("boxBorderColor");
-  //   }
-  // }
-
   &:first-child,
   &:last-child {
     border-radius: $border-radius;

From 4d4b10f92f21cc65c7852a3c7060a88cca121b79 Mon Sep 17 00:00:00 2001
From: DanHillesheim <79476558+DanHillesheim@users.noreply.github.com>
Date: Thu, 20 Oct 2022 16:33:29 -0600
Subject: [PATCH 05/17] feedback updates

---
 .../popup/components/set-pin.component.html   |  2 +-
 apps/browser/src/popup/scss/box.scss          | 68 ++++++++++++-------
 apps/browser/src/popup/scss/buttons.scss      |  1 -
 apps/browser/src/popup/scss/misc.scss         |  2 +-
 apps/browser/src/popup/scss/pages.scss        | 19 +++---
 apps/browser/src/popup/scss/variables.scss    |  6 +-
 .../popup/vault/current-tab.component.html    |  2 +-
 7 files changed, 57 insertions(+), 43 deletions(-)

diff --git a/apps/browser/src/popup/components/set-pin.component.html b/apps/browser/src/popup/components/set-pin.component.html
index 66c7377aad19..54a3fab10d57 100644
--- a/apps/browser/src/popup/components/set-pin.component.html
+++ b/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
diff --git a/apps/browser/src/popup/scss/box.scss b/apps/browser/src/popup/scss/box.scss
index 586c2d1c85e7..d9e71410f42e 100644
--- a/apps/browser/src/popup/scss/box.scss
+++ b/apps/browser/src/popup/scss/box.scss
@@ -3,7 +3,7 @@
 .box {
   position: relative;
   width: 100%;
-  margin: 10px 0 20px;
+  margin: 10px 0 20px 0;
 
   &.first {
     margin-top: 0;
@@ -20,13 +20,14 @@
   }
 
   .box-header-expandable {
-    padding: 0 10px;
-    margin-bottom: 5px;
+    padding: 10px;
+    margin: 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");
@@ -36,7 +37,7 @@
     &:focus-visible,
     &.active {
       @include themify($themes) {
-        background-color: themed("backgroundColor");
+        background-color: themed("boxBackgroundHoverColor");
       }
     }
 
@@ -74,7 +75,9 @@
     .box-content-row.no-hover {
       &:hover,
       &:focus {
-        background-color: initial !important;
+        @include themify($themes) {
+          background-color: themed("boxBackgroundColor") !important;
+        }
       }
     }
   }
@@ -93,9 +96,9 @@
       .box-content-row {
         padding: 10px;
         text-decoration: none;
-        border-radius: 6px;
+        border-radius: $border-radius;
         margin: 10px;
-        background-color: $background-color;
+        // background-color: $background-color;
 
         @include themify($themes) {
           color: themed("textColor");
@@ -107,6 +110,14 @@
           padding-bottom: 10px;
         }
 
+        &.no-hover {
+          &:hover {
+            @include themify($themes) {
+              background-color: themed("boxBackgroundColor") !important;
+            }
+          }
+        }
+
         &:hover,
         &:focus,
         &.active {
@@ -155,7 +166,7 @@
           padding-top: 10px;
           padding-bottom: 10px;
           margin: 10px;
-          border-radius: 6px;
+          border-radius: $border-radius;
         }
       }
     }
@@ -197,27 +208,16 @@
   padding: 10px 15px;
   position: relative;
   z-index: 1;
-  background-color: $background-color;
-  border-radius: 6px;
+  border-radius: $border-radius;
   margin: 10px;
 
   @include themify($themes) {
     background-color: themed("boxBackgroundColor");
   }
 
-  // &:before {
-  //   content: "";
-  //   position: absolute;
-  //   right: 0;
-  //   bottom: 0;
-  //   height: 1px;
-  //   width: calc(100% - 10px);
-  //   border-bottom: 1px solid #000000;
-
-  //   @include themify($themes) {
-  //     border-bottom-color: themed("boxBorderColor");
-  //   }
-  // }
+  &.no-bg {
+    background-color: rgba(0, 0, 0, 0) !important;
+  }
 
   &:last-child {
     &:before {
@@ -339,7 +339,7 @@
   }
 
   &.box-content-row-multi {
-    width: 100%;
+    width: calc(100% - 20px);
 
     input:not([type="checkbox"]) {
       width: 100%;
@@ -462,7 +462,7 @@
   select {
     width: 100%;
     border: 1px solid #000000;
-    border-radius: 6px;
+    border-radius: $border-radius;
     padding: 7px 4px;
 
     @include themify($themes) {
@@ -720,3 +720,19 @@
   overflow: hidden;
   text-overflow: ellipsis;
 }
+
+form {
+  .box {
+    .box-content {
+      .box-content-row {
+        &.no-hover {
+          &:hover {
+            @include themify($themes) {
+              background-color: rgba(0, 0, 0, 0) !important;
+            }
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/apps/browser/src/popup/scss/buttons.scss b/apps/browser/src/popup/scss/buttons.scss
index 40d9dc4efff7..5f8f289a0b44 100644
--- a/apps/browser/src/popup/scss/buttons.scss
+++ b/apps/browser/src/popup/scss/buttons.scss
@@ -89,7 +89,6 @@
 
 button.box-content-row {
   display: block;
-  // width: 100%;
   width: calc(100% - 20px);
   text-align: left;
 
diff --git a/apps/browser/src/popup/scss/misc.scss b/apps/browser/src/popup/scss/misc.scss
index a4d5dcba96a4..dd48302312c1 100644
--- a/apps/browser/src/popup/scss/misc.scss
+++ b/apps/browser/src/popup/scss/misc.scss
@@ -132,7 +132,7 @@ p.lead {
 }
 
 .img-rounded {
-  border-radius: 6px;
+  border-radius: $border-radius;
 }
 
 .sr-only {
diff --git a/apps/browser/src/popup/scss/pages.scss b/apps/browser/src/popup/scss/pages.scss
index 694813b9d493..c7443d8066f1 100644
--- a/apps/browser/src/popup/scss/pages.scss
+++ b/apps/browser/src/popup/scss/pages.scss
@@ -9,13 +9,13 @@ app-sync {
 }
 
 app-generator .generated-block {
-  font-size: $font-size-xlarge;
+  font-size: $font-size-large;
   font-family: $font-family-monospace;
   margin: 10px;
   padding: 10px;
   display: flex;
-  background-color: $box-background-color;
-  border-radius: 6px;
+  // background-color: $box-background-color;
+  border-radius: $border-radius;
 
   @include themify($themes) {
     background-color: themed("boxBackgroundColor");
@@ -27,8 +27,8 @@ app-generator .generated-block {
     min-width: 0;
     white-space: pre-wrap;
     word-break: break-all;
-    padding: 15px 30px;
-    border-radius: 6px;
+    padding: 15px;
+    border-radius: $border-radius;
     background-color: #e6e9ed;
     border: 1px solid;
     border-color: #d2d9e6;
@@ -47,14 +47,13 @@ app-generator .generated-block {
     margin-left: 10px;
 
     button {
-      padding: 5px;
-      margin: 0;
+      padding: 6px;
+      margin: 2px;
+      border-radius: $border-radius;
 
       &:hover {
-        color: $brand-primary;
-
         @include themify($themes) {
-          color: $icon-hover-color;
+          background-color: darken($icon-hover-color, 50%);
         }
       }
     }
diff --git a/apps/browser/src/popup/scss/variables.scss b/apps/browser/src/popup/scss/variables.scss
index c2edf93f84d3..c3703fb67a2b 100644
--- a/apps/browser/src/popup/scss/variables.scss
+++ b/apps/browser/src/popup/scss/variables.scss
@@ -15,7 +15,7 @@ $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%);
 
@@ -220,8 +220,8 @@ $themes: (
     backgroundColorAlt: $solarizedDarkBase02,
     scrollbarColor: $solarizedDarkBase0,
     scrollbarHoverColor: $solarizedDarkBase2,
-    boxBackgroundColor: $solarizedDarkBase03,
-    boxBackgroundHoverColor: $solarizedDarkBase02,
+    boxBackgroundColor: $solarizedDarkBase02,
+    boxBackgroundHoverColor: lighten($solarizedDarkBase02, 5%),
     boxBorderColor: $solarizedDarkBase02,
     tabBackgroundColor: $solarizedDarkBase02,
     tabBackgroundHoverColor: $solarizedDarkBase01,
diff --git a/apps/browser/src/popup/vault/current-tab.component.html b/apps/browser/src/popup/vault/current-tab.component.html
index f88fd2feca36..9ed3662bc5d7 100644
--- a/apps/browser/src/popup/vault/current-tab.component.html
+++ b/apps/browser/src/popup/vault/current-tab.component.html
@@ -41,7 +41,7 @@ <h2 class="box-header">
         {{ "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"

From 623240e5567638532106e12fbd49267c637a120c Mon Sep 17 00:00:00 2001
From: DanHillesheim <79476558+DanHillesheim@users.noreply.github.com>
Date: Mon, 24 Oct 2022 15:27:11 -0600
Subject: [PATCH 06/17] restore desktop pseudo rule

---
 apps/desktop/src/scss/box.scss | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/apps/desktop/src/scss/box.scss b/apps/desktop/src/scss/box.scss
index 67ce66ccb224..68f19f1806f5 100644
--- a/apps/desktop/src/scss/box.scss
+++ b/apps/desktop/src/scss/box.scss
@@ -120,6 +120,19 @@
   z-index: 1;
   text-align: left;
 
+  &:before {
+    content: "";
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    height: 1px;
+    width: calc(100% - 10px);
+    border-bottom: 1px solid #000000;
+    @include themify($themes) {
+      border-bottom-color: themed("boxBorderColor");
+    }
+  }
+
   &:first-child,
   &:last-child {
     border-radius: $border-radius;

From b5c7a10e4d701296bb8245b67fa2bd581713dbc4 Mon Sep 17 00:00:00 2001
From: DanHillesheim <79476558+DanHillesheim@users.noreply.github.com>
Date: Wed, 26 Oct 2022 16:04:28 -0600
Subject: [PATCH 07/17] update to include some variable fixes and deletions

---
 apps/browser/src/popup/scss/base.scss      | 13 ++++++++++---
 apps/browser/src/popup/scss/box.scss       |  5 ++---
 apps/browser/src/popup/scss/pages.scss     | 13 +++++--------
 apps/browser/src/popup/scss/variables.scss | 18 ++++++++++++++++++
 4 files changed, 35 insertions(+), 14 deletions(-)

diff --git a/apps/browser/src/popup/scss/base.scss b/apps/browser/src/popup/scss/base.scss
index 1222f66aaac6..d3a7656c37b1 100644
--- a/apps/browser/src/popup/scss/base.scss
+++ b/apps/browser/src/popup/scss/base.scss
@@ -289,6 +289,10 @@ header {
   }
 }
 
+.no-bg {
+  background-color: transparent;
+}
+
 .content {
   padding: 15px;
 }
@@ -482,11 +486,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 {
diff --git a/apps/browser/src/popup/scss/box.scss b/apps/browser/src/popup/scss/box.scss
index c8b51072c731..356186cf8c5e 100644
--- a/apps/browser/src/popup/scss/box.scss
+++ b/apps/browser/src/popup/scss/box.scss
@@ -53,7 +53,6 @@
   }
 
   .box-content {
-
     @include themify($themes) {
       background-color: themed("backgroundColor");
       border-color: themed("borderColor");
@@ -464,7 +463,7 @@
     padding: 7px 4px;
 
     @include themify($themes) {
-      background-color: themed("boxBorderColor");
+      background-color: themed("selectBoxBackgroundColor");
       border-color: themed("inputBorderColor");
     }
   }
@@ -726,7 +725,7 @@ form {
         &.no-hover {
           &:hover {
             @include themify($themes) {
-              background-color: rgba(0, 0, 0, 0) !important;
+              background-color: themed("transparentColor") !important;
             }
           }
         }
diff --git a/apps/browser/src/popup/scss/pages.scss b/apps/browser/src/popup/scss/pages.scss
index c7443d8066f1..a891fdac5a78 100644
--- a/apps/browser/src/popup/scss/pages.scss
+++ b/apps/browser/src/popup/scss/pages.scss
@@ -12,13 +12,12 @@ app-generator .generated-block {
   font-size: $font-size-large;
   font-family: $font-family-monospace;
   margin: 10px;
-  padding: 10px;
+  padding: 10px 10px 10px 0;
   display: flex;
-  // background-color: $box-background-color;
   border-radius: $border-radius;
 
   @include themify($themes) {
-    background-color: themed("boxBackgroundColor");
+    background-color: transparent;
   }
 
   .generated-wrapper {
@@ -28,20 +27,18 @@ app-generator .generated-block {
     white-space: pre-wrap;
     word-break: break-all;
     padding: 15px;
+    border-color: $background-color;
     border-radius: $border-radius;
-    background-color: #e6e9ed;
     border: 1px solid;
-    border-color: #d2d9e6;
 
     @include themify($themes) {
       background-color: themed("backgroundColor");
-      border-color: themed("boxBorderColor");
+      border-color: themed("genBorderColor");
     }
   }
 
   .action-buttons {
     display: flex;
-    flex-direction: column;
     align-self: center;
     height: 100%;
     margin-left: 10px;
@@ -53,7 +50,7 @@ app-generator .generated-block {
 
       &:hover {
         @include themify($themes) {
-          background-color: darken($icon-hover-color, 50%);
+          background-color: themed("hoverColorTransparent");
         }
       }
     }
diff --git a/apps/browser/src/popup/scss/variables.scss b/apps/browser/src/popup/scss/variables.scss
index c3703fb67a2b..73b40fea0bdf 100644
--- a/apps/browser/src/popup/scss/variables.scss
+++ b/apps/browser/src/popup/scss/variables.scss
@@ -32,6 +32,8 @@ $brand-primary-accent: #1252a3;
 
 $background-color: #f0f0f0;
 
+$border-color-alt: #c3c5c7;
+
 $box-background-color: white;
 $box-background-hover-color: $list-item-hover;
 $box-border-color: $border-color;
@@ -62,14 +64,17 @@ $solarizedDarkGreen: #859900;
 $themes: (
   light: (
     textColor: $text-color,
+    hoverColorTransparent: rgba($text-color, 0.15),
     borderColor: $border-color-dark,
     backgroundColor: $background-color,
+    genBorderColor: $border-color-alt,
     backgroundColorAlt: #ffffff,
     scrollbarColor: rgba(100, 100, 100, 0.2),
     scrollbarHoverColor: rgba(100, 100, 100, 0.4),
     boxBackgroundColor: $box-background-color,
     boxBackgroundHoverColor: $box-background-hover-color,
     boxBorderColor: $box-border-color,
+    selectBoxBackgroundColor: $box-border-color,
     tabBackgroundColor: #ffffff,
     tabBackgroundHoverColor: $list-item-hover,
     headerColor: #ffffff,
@@ -110,17 +115,21 @@ $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,
+    genBorderColor: #4c525f,
     backgroundColorAlt: #2f343d,
     scrollbarColor: #6e788a,
     scrollbarHoverColor: #8d94a5,
     boxBackgroundColor: #2f343d,
     boxBackgroundHoverColor: #3c424e,
     boxBorderColor: #4c525f,
+    selectBoxBackgroundColor: #4c525f,
     tabBackgroundColor: #2f343d,
     tabBackgroundHoverColor: #3c424e,
     headerColor: #ffffff,
@@ -161,17 +170,21 @@ $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,
+    genBorderColor: $nord3,
     backgroundColorAlt: $nord2,
     scrollbarColor: $nord4,
     scrollbarHoverColor: $nord6,
     boxBackgroundColor: $nord2,
     boxBackgroundHoverColor: $nord3,
     boxBorderColor: $nord1,
+    selectBoxBackgroundColor: $nord1,
     tabBackgroundColor: $nord1,
     tabBackgroundHoverColor: $nord2,
     headerColor: $nord5,
@@ -212,17 +225,21 @@ $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,
+    genBorderColor: $solarizedDarkBase01,
     backgroundColorAlt: $solarizedDarkBase02,
     scrollbarColor: $solarizedDarkBase0,
     scrollbarHoverColor: $solarizedDarkBase2,
     boxBackgroundColor: $solarizedDarkBase02,
     boxBackgroundHoverColor: lighten($solarizedDarkBase02, 5%),
     boxBorderColor: $solarizedDarkBase02,
+    selectBoxBackgroundColor: $solarizedDarkBase02,
     tabBackgroundColor: $solarizedDarkBase02,
     tabBackgroundHoverColor: $solarizedDarkBase01,
     headerColor: $solarizedDarkBase1,
@@ -263,6 +280,7 @@ $themes: (
     calloutBackgroundColor: $solarizedDarkBase01,
     toastTextColor: #ffffff,
     svgSuffix: "-solarized.svg",
+    transparentColor: rgba(0, 0, 0, 0),
   ),
 );
 

From be1b4127cbd47bdbd849da944997249b51a7828a Mon Sep 17 00:00:00 2001
From: DanHillesheim <79476558+DanHillesheim@users.noreply.github.com>
Date: Thu, 27 Oct 2022 09:45:22 -0600
Subject: [PATCH 08/17] updates per oscar

---
 apps/browser/src/popup/scss/buttons.scss | 2 +-
 apps/browser/src/popup/scss/pages.scss   | 1 -
 apps/desktop/src/scss/box.scss           | 1 +
 3 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/browser/src/popup/scss/buttons.scss b/apps/browser/src/popup/scss/buttons.scss
index 5f8f289a0b44..4ed07fb2900c 100644
--- a/apps/browser/src/popup/scss/buttons.scss
+++ b/apps/browser/src/popup/scss/buttons.scss
@@ -91,10 +91,10 @@ button.box-content-row {
   display: block;
   width: calc(100% - 20px);
   text-align: left;
+  border-color: none;
 
   @include themify($themes) {
     background-color: themed("boxBackgroundColor");
-    border-color: none;
   }
 }
 
diff --git a/apps/browser/src/popup/scss/pages.scss b/apps/browser/src/popup/scss/pages.scss
index a891fdac5a78..8f9a1091aee8 100644
--- a/apps/browser/src/popup/scss/pages.scss
+++ b/apps/browser/src/popup/scss/pages.scss
@@ -27,7 +27,6 @@ app-generator .generated-block {
     white-space: pre-wrap;
     word-break: break-all;
     padding: 15px;
-    border-color: $background-color;
     border-radius: $border-radius;
     border: 1px solid;
 
diff --git a/apps/desktop/src/scss/box.scss b/apps/desktop/src/scss/box.scss
index 68f19f1806f5..64cbf370abf0 100644
--- a/apps/desktop/src/scss/box.scss
+++ b/apps/desktop/src/scss/box.scss
@@ -128,6 +128,7 @@
     height: 1px;
     width: calc(100% - 10px);
     border-bottom: 1px solid #000000;
+
     @include themify($themes) {
       border-bottom-color: themed("boxBorderColor");
     }

From 31bf01f1f07cc1627373571c96999305a7581098 Mon Sep 17 00:00:00 2001
From: DanHillesheim <79476558+DanHillesheim@users.noreply.github.com>
Date: Thu, 27 Oct 2022 14:59:19 -0600
Subject: [PATCH 09/17] feedback updates

more universal variable, adjusted box padding (per Kyle), and aligned footer text
---
 apps/browser/src/popup/scss/box.scss       | 8 ++++----
 apps/browser/src/popup/scss/pages.scss     | 2 +-
 apps/browser/src/popup/scss/variables.scss | 8 ++++----
 3 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/apps/browser/src/popup/scss/box.scss b/apps/browser/src/popup/scss/box.scss
index 356186cf8c5e..16b244aacc36 100644
--- a/apps/browser/src/popup/scss/box.scss
+++ b/apps/browser/src/popup/scss/box.scss
@@ -3,7 +3,6 @@
 .box {
   position: relative;
   width: 100%;
-  margin: 10px 0 20px 0;
 
   &.first {
     margin-top: 0;
@@ -21,7 +20,7 @@
 
   .box-header-expandable {
     padding: 10px;
-    margin: 10px;
+    margin: 0 10px;
     text-transform: uppercase;
     display: flex;
     width: calc(100% - 20px);
@@ -80,7 +79,8 @@
   }
 
   .box-footer {
-    margin: 5px 10px;
+    margin: 0 10px 10px 10px;
+    padding: 0 15px;
     font-size: $font-size-small;
 
     @include themify($themes) {
@@ -89,6 +89,7 @@
   }
 
   &.list {
+    margin: 10px 0 20px 0;
     .box-content {
       .box-content-row {
         padding: 10px;
@@ -193,7 +194,6 @@
 
 .box-section-divider {
   border-top: 1px solid #000000;
-  padding-top: 10px;
 
   @include themify($themes) {
     border-color: themed("borderColor");
diff --git a/apps/browser/src/popup/scss/pages.scss b/apps/browser/src/popup/scss/pages.scss
index 8f9a1091aee8..e0a6338f80d6 100644
--- a/apps/browser/src/popup/scss/pages.scss
+++ b/apps/browser/src/popup/scss/pages.scss
@@ -32,7 +32,7 @@ app-generator .generated-block {
 
     @include themify($themes) {
       background-color: themed("backgroundColor");
-      border-color: themed("genBorderColor");
+      border-color: themed("borderColorAlt");
     }
   }
 
diff --git a/apps/browser/src/popup/scss/variables.scss b/apps/browser/src/popup/scss/variables.scss
index 73b40fea0bdf..9ce3f3d90096 100644
--- a/apps/browser/src/popup/scss/variables.scss
+++ b/apps/browser/src/popup/scss/variables.scss
@@ -67,7 +67,7 @@ $themes: (
     hoverColorTransparent: rgba($text-color, 0.15),
     borderColor: $border-color-dark,
     backgroundColor: $background-color,
-    genBorderColor: $border-color-alt,
+    borderColorAlt: $border-color-alt,
     backgroundColorAlt: #ffffff,
     scrollbarColor: rgba(100, 100, 100, 0.2),
     scrollbarHoverColor: rgba(100, 100, 100, 0.4),
@@ -122,7 +122,7 @@ $themes: (
     hoverColorTransparent: rgba($text-color, 0.15),
     borderColor: #161c26,
     backgroundColor: #161c26,
-    genBorderColor: #4c525f,
+    borderColorAlt: #4c525f,
     backgroundColorAlt: #2f343d,
     scrollbarColor: #6e788a,
     scrollbarHoverColor: #8d94a5,
@@ -177,7 +177,7 @@ $themes: (
     hoverColorTransparent: rgba($text-color, 0.15),
     borderColor: $nord0,
     backgroundColor: $nord1,
-    genBorderColor: $nord3,
+    borderColorAlt: $nord3,
     backgroundColorAlt: $nord2,
     scrollbarColor: $nord4,
     scrollbarHoverColor: $nord6,
@@ -232,7 +232,7 @@ $themes: (
     hoverColorTransparent: rgba($text-color, 0.15),
     borderColor: $solarizedDarkBase03,
     backgroundColor: $solarizedDarkBase03,
-    genBorderColor: $solarizedDarkBase01,
+    borderColorAlt: $solarizedDarkBase01,
     backgroundColorAlt: $solarizedDarkBase02,
     scrollbarColor: $solarizedDarkBase0,
     scrollbarHoverColor: $solarizedDarkBase2,

From 8bd18f51072d1720b23c275280ed1466245975b7 Mon Sep 17 00:00:00 2001
From: DanHillesheim <79476558+DanHillesheim@users.noreply.github.com>
Date: Fri, 28 Oct 2022 14:57:36 -0600
Subject: [PATCH 10/17] changes per product design

added border for selects, border around generator, and hover for solarizeddark
---
 apps/browser/src/popup/scss/box.scss       | 4 ++--
 apps/browser/src/popup/scss/pages.scss     | 4 ++--
 apps/browser/src/popup/scss/variables.scss | 6 +++---
 3 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/apps/browser/src/popup/scss/box.scss b/apps/browser/src/popup/scss/box.scss
index 16b244aacc36..a2e9d6d4d6df 100644
--- a/apps/browser/src/popup/scss/box.scss
+++ b/apps/browser/src/popup/scss/box.scss
@@ -463,8 +463,8 @@
     padding: 7px 4px;
 
     @include themify($themes) {
-      background-color: themed("selectBoxBackgroundColor");
-      border-color: themed("inputBorderColor");
+      background-color: themed("transparentColor");
+      border-color: themed("borderColorAlt");
     }
   }
 
diff --git a/apps/browser/src/popup/scss/pages.scss b/apps/browser/src/popup/scss/pages.scss
index e0a6338f80d6..0ffa6752c741 100644
--- a/apps/browser/src/popup/scss/pages.scss
+++ b/apps/browser/src/popup/scss/pages.scss
@@ -15,9 +15,11 @@ app-generator .generated-block {
   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 {
@@ -28,11 +30,9 @@ app-generator .generated-block {
     word-break: break-all;
     padding: 15px;
     border-radius: $border-radius;
-    border: 1px solid;
 
     @include themify($themes) {
       background-color: themed("backgroundColor");
-      border-color: themed("borderColorAlt");
     }
   }
 
diff --git a/apps/browser/src/popup/scss/variables.scss b/apps/browser/src/popup/scss/variables.scss
index 9ce3f3d90096..820ab9af9f25 100644
--- a/apps/browser/src/popup/scss/variables.scss
+++ b/apps/browser/src/popup/scss/variables.scss
@@ -122,7 +122,7 @@ $themes: (
     hoverColorTransparent: rgba($text-color, 0.15),
     borderColor: #161c26,
     backgroundColor: #161c26,
-    borderColorAlt: #4c525f,
+    borderColorAlt: #6e788a,
     backgroundColorAlt: #2f343d,
     scrollbarColor: #6e788a,
     scrollbarHoverColor: #8d94a5,
@@ -177,7 +177,7 @@ $themes: (
     hoverColorTransparent: rgba($text-color, 0.15),
     borderColor: $nord0,
     backgroundColor: $nord1,
-    borderColorAlt: $nord3,
+    borderColorAlt: $nord5,
     backgroundColorAlt: $nord2,
     scrollbarColor: $nord4,
     scrollbarHoverColor: $nord6,
@@ -250,7 +250,7 @@ $themes: (
     headerInputBackgroundFocusColor: $solarizedDarkBase1,
     headerInputColor: $solarizedDarkBase01,
     headerInputPlaceholderColor: $solarizedDarkBase00,
-    listItemBackgroundHoverColor: $solarizedDarkBase02,
+    listItemBackgroundHoverColor: lighten($solarizedDarkBase02, 5%),
     disabledIconColor: $solarizedDarkBase0,
     disabledBoxOpacity: 0.5,
     headingColor: $solarizedDarkBase0,

From 0aa41035fba4e87d8f1d97070bfd6cde273a4fec Mon Sep 17 00:00:00 2001
From: DanHillesheim <79476558+DanHillesheim@users.noreply.github.com>
Date: Fri, 28 Oct 2022 15:09:11 -0600
Subject: [PATCH 11/17] add more helper text space below for visual separation

---
 apps/browser/src/popup/scss/box.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/browser/src/popup/scss/box.scss b/apps/browser/src/popup/scss/box.scss
index ea63f577a73c..49c1379c6382 100644
--- a/apps/browser/src/popup/scss/box.scss
+++ b/apps/browser/src/popup/scss/box.scss
@@ -80,7 +80,7 @@
 
   .box-footer {
     margin: 0 10px 10px 10px;
-    padding: 0 15px;
+    padding: 0 15px 10px 15px;
     font-size: $font-size-small;
 
     button.btn {

From de15d9b8a9c34bb128eac38df16491e4cc6e41e6 Mon Sep 17 00:00:00 2001
From: DanHillesheim <79476558+DanHillesheim@users.noreply.github.com>
Date: Fri, 28 Oct 2022 15:24:23 -0600
Subject: [PATCH 12/17] group new variable

---
 apps/browser/src/popup/scss/variables.scss | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/apps/browser/src/popup/scss/variables.scss b/apps/browser/src/popup/scss/variables.scss
index 820ab9af9f25..04adc543ffe9 100644
--- a/apps/browser/src/popup/scss/variables.scss
+++ b/apps/browser/src/popup/scss/variables.scss
@@ -32,11 +32,10 @@ $brand-primary-accent: #1252a3;
 
 $background-color: #f0f0f0;
 
-$border-color-alt: #c3c5c7;
-
 $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;

From 246768cb12d35bd1f538aa75371154e115aeaadf Mon Sep 17 00:00:00 2001
From: DanHillesheim <79476558+DanHillesheim@users.noreply.github.com>
Date: Fri, 28 Oct 2022 15:53:19 -0600
Subject: [PATCH 13/17] login page button fix

Dflinn found an odd margin on the login page
---
 apps/browser/src/popup/scss/buttons.scss | 10 +++++++++-
 apps/browser/src/popup/scss/pages.scss   |  2 +-
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/apps/browser/src/popup/scss/buttons.scss b/apps/browser/src/popup/scss/buttons.scss
index 4ed07fb2900c..145e22d18921 100644
--- a/apps/browser/src/popup/scss/buttons.scss
+++ b/apps/browser/src/popup/scss/buttons.scss
@@ -65,7 +65,8 @@
 
   &.block {
     display: block;
-    width: 100%;
+    width: calc(100% - 20px);
+    margin: 0 auto;
   }
 
   &.link,
@@ -103,3 +104,10 @@ button {
   background: transparent;
   color: inherit;
 }
+
+.login-buttons {
+  .btn.block {
+    width: 100%;
+    margin-bottom: 10px;
+  }
+}
diff --git a/apps/browser/src/popup/scss/pages.scss b/apps/browser/src/popup/scss/pages.scss
index 43053df3492b..b1d73fe395f4 100644
--- a/apps/browser/src/popup/scss/pages.scss
+++ b/apps/browser/src/popup/scss/pages.scss
@@ -140,7 +140,7 @@ body.body-full {
 }
 
 .createAccountLink {
-  padding-top: 30px;
+  padding: 30px 10px 0 10px;
 }
 
 .login-buttons > button {

From ae661aae7b988ef9b28b669f1cb66adb0c18b2c9 Mon Sep 17 00:00:00 2001
From: DanHillesheim <79476558+DanHillesheim@users.noreply.github.com>
Date: Mon, 31 Oct 2022 13:15:36 -0600
Subject: [PATCH 14/17] Revert "Merge branch 'master' into
 browser-ext-ui-update-test"

This reverts commit b8007102f9c91cac7dd1b4dc6de1c9ac878d2575, reversing
changes made to 246768cb12d35bd1f538aa75371154e115aeaadf.
---
 .github/workflows/test.yml              |  4 +---
 libs/common/src/services/api.service.ts | 24 ++++++++++--------------
 2 files changed, 11 insertions(+), 17 deletions(-)

diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
index b0ca237c0cc6..e5ff1343f2e7 100644
--- a/.github/workflows/test.yml
+++ b/.github/workflows/test.yml
@@ -70,9 +70,7 @@ jobs:
     steps:
       - name: Install gnome-keyring
         if: ${{ matrix.os=='ubuntu-latest' }}
-        run: |
-          sudo apt-get update
-          sudo apt-get install -y gnome-keyring dbus-x11
+        run: sudo apt-get install -y gnome-keyring dbus-x11
 
       - name: Checkout repo
         uses: actions/checkout@a12a3943b4bdde767164f792f33f40b04645d846
diff --git a/libs/common/src/services/api.service.ts b/libs/common/src/services/api.service.ts
index 6c15d85c0d1d..7c39958bce39 100644
--- a/libs/common/src/services/api.service.ts
+++ b/libs/common/src/services/api.service.ts
@@ -2360,6 +2360,16 @@ export class ApiService implements ApiServiceAbstraction {
     tokenError: boolean,
     authed: boolean
   ): Promise<ErrorResponse> {
+    if (
+      authed &&
+      ((tokenError && response.status === 400) ||
+        response.status === 401 ||
+        response.status === 403)
+    ) {
+      await this.logoutCallback(true);
+      return null;
+    }
+
     let responseJson: any = null;
     if (this.isJsonResponse(response)) {
       responseJson = await response.json();
@@ -2367,20 +2377,6 @@ export class ApiService implements ApiServiceAbstraction {
       responseJson = { Message: await response.text() };
     }
 
-    if (authed) {
-      if (
-        response.status === 401 ||
-        response.status === 403 ||
-        (tokenError &&
-          response.status === 400 &&
-          responseJson != null &&
-          responseJson.error === "invalid_grant")
-      ) {
-        await this.logoutCallback(true);
-        return null;
-      }
-    }
-
     return new ErrorResponse(responseJson, response.status, tokenError);
   }
 

From 8f2ae2bca5dfdd6b3485a55ac4bb8b5a2e6f94ea Mon Sep 17 00:00:00 2001
From: DanHillesheim <79476558+DanHillesheim@users.noreply.github.com>
Date: Mon, 31 Oct 2022 15:21:02 -0600
Subject: [PATCH 15/17] fix button height

---
 apps/browser/src/popup/scss/base.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/apps/browser/src/popup/scss/base.scss b/apps/browser/src/popup/scss/base.scss
index 91896ed51d4d..84e26bb4d9a3 100644
--- a/apps/browser/src/popup/scss/base.scss
+++ b/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");

From 46eafaab8d0f8465afb485b32656a0ca14f9eec5 Mon Sep 17 00:00:00 2001
From: Kyle Spearrin <kyle.spearrin@gmail.com>
Date: Tue, 1 Nov 2022 08:09:39 -0400
Subject: [PATCH 16/17] revert file changes

---
 .github/workflows/test.yml              |  4 +++-
 libs/common/src/services/api.service.ts | 24 ++++++++++++++----------
 2 files changed, 17 insertions(+), 11 deletions(-)

diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
index e5ff1343f2e7..b0ca237c0cc6 100644
--- a/.github/workflows/test.yml
+++ b/.github/workflows/test.yml
@@ -70,7 +70,9 @@ jobs:
     steps:
       - name: Install gnome-keyring
         if: ${{ matrix.os=='ubuntu-latest' }}
-        run: sudo apt-get install -y gnome-keyring dbus-x11
+        run: |
+          sudo apt-get update
+          sudo apt-get install -y gnome-keyring dbus-x11
 
       - name: Checkout repo
         uses: actions/checkout@a12a3943b4bdde767164f792f33f40b04645d846
diff --git a/libs/common/src/services/api.service.ts b/libs/common/src/services/api.service.ts
index 7c39958bce39..6c15d85c0d1d 100644
--- a/libs/common/src/services/api.service.ts
+++ b/libs/common/src/services/api.service.ts
@@ -2360,16 +2360,6 @@ export class ApiService implements ApiServiceAbstraction {
     tokenError: boolean,
     authed: boolean
   ): Promise<ErrorResponse> {
-    if (
-      authed &&
-      ((tokenError && response.status === 400) ||
-        response.status === 401 ||
-        response.status === 403)
-    ) {
-      await this.logoutCallback(true);
-      return null;
-    }
-
     let responseJson: any = null;
     if (this.isJsonResponse(response)) {
       responseJson = await response.json();
@@ -2377,6 +2367,20 @@ export class ApiService implements ApiServiceAbstraction {
       responseJson = { Message: await response.text() };
     }
 
+    if (authed) {
+      if (
+        response.status === 401 ||
+        response.status === 403 ||
+        (tokenError &&
+          response.status === 400 &&
+          responseJson != null &&
+          responseJson.error === "invalid_grant")
+      ) {
+        await this.logoutCallback(true);
+        return null;
+      }
+    }
+
     return new ErrorResponse(responseJson, response.status, tokenError);
   }
 

From 03c95b52ff69f7b4ecc3217980dc65213edd184f Mon Sep 17 00:00:00 2001
From: Kyle Spearrin <kyle.spearrin@gmail.com>
Date: Tue, 1 Nov 2022 09:02:54 -0400
Subject: [PATCH 17/17] test adjustments

---
 apps/browser/src/popup/scss/box.scss       |  3 +--
 apps/browser/src/popup/scss/pages.scss     | 22 ++++++++++++++++++++++
 apps/browser/src/popup/scss/variables.scss |  4 ----
 3 files changed, 23 insertions(+), 6 deletions(-)

diff --git a/apps/browser/src/popup/scss/box.scss b/apps/browser/src/popup/scss/box.scss
index 49c1379c6382..ab1f8bd91e92 100644
--- a/apps/browser/src/popup/scss/box.scss
+++ b/apps/browser/src/popup/scss/box.scss
@@ -468,8 +468,7 @@
     padding: 7px 4px;
 
     @include themify($themes) {
-      background-color: themed("transparentColor");
-      border-color: themed("borderColorAlt");
+      border-color: themed("inputBorderColor");
     }
   }
 
diff --git a/apps/browser/src/popup/scss/pages.scss b/apps/browser/src/popup/scss/pages.scss
index b1d73fe395f4..9ba21f63ca7a 100644
--- a/apps/browser/src/popup/scss/pages.scss
+++ b/apps/browser/src/popup/scss/pages.scss
@@ -146,3 +146,25 @@ body.body-full {
 .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;
+    }
+  }
+}
diff --git a/apps/browser/src/popup/scss/variables.scss b/apps/browser/src/popup/scss/variables.scss
index 04adc543ffe9..14b2c312b1fe 100644
--- a/apps/browser/src/popup/scss/variables.scss
+++ b/apps/browser/src/popup/scss/variables.scss
@@ -73,7 +73,6 @@ $themes: (
     boxBackgroundColor: $box-background-color,
     boxBackgroundHoverColor: $box-background-hover-color,
     boxBorderColor: $box-border-color,
-    selectBoxBackgroundColor: $box-border-color,
     tabBackgroundColor: #ffffff,
     tabBackgroundHoverColor: $list-item-hover,
     headerColor: #ffffff,
@@ -128,7 +127,6 @@ $themes: (
     boxBackgroundColor: #2f343d,
     boxBackgroundHoverColor: #3c424e,
     boxBorderColor: #4c525f,
-    selectBoxBackgroundColor: #4c525f,
     tabBackgroundColor: #2f343d,
     tabBackgroundHoverColor: #3c424e,
     headerColor: #ffffff,
@@ -183,7 +181,6 @@ $themes: (
     boxBackgroundColor: $nord2,
     boxBackgroundHoverColor: $nord3,
     boxBorderColor: $nord1,
-    selectBoxBackgroundColor: $nord1,
     tabBackgroundColor: $nord1,
     tabBackgroundHoverColor: $nord2,
     headerColor: $nord5,
@@ -238,7 +235,6 @@ $themes: (
     boxBackgroundColor: $solarizedDarkBase02,
     boxBackgroundHoverColor: lighten($solarizedDarkBase02, 5%),
     boxBorderColor: $solarizedDarkBase02,
-    selectBoxBackgroundColor: $solarizedDarkBase02,
     tabBackgroundColor: $solarizedDarkBase02,
     tabBackgroundHoverColor: $solarizedDarkBase01,
     headerColor: $solarizedDarkBase1,