feedback updates

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

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

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

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,