update to include some variable fixes and deletions

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 {

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;
             }
           }
         }

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");
         }
       }
     }

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),
   ),
 );