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] 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 66c7377aad1..54a3fab10d5 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 586c2d1c85e..d9e71410f42 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 40d9dc4efff..5f8f289a0b4 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 a4d5dcba96a..dd48302312c 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 694813b9d49..c7443d8066f 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 c2edf93f84d..c3703fb67a2 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 f88fd2feca3..9ed3662bc5d 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 @@
         {{ "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"