Update sprite info header sizes

src/components/forms/input.css

@@ -2,7 +2,8 @@
 @import "../../css/colors.css";
 
 .input-form {
-    padding: $space 0.75rem;
+    height: 2rem;
+    padding: 0 0.75rem;
 
     font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
     font-size: 0.625rem;

src/components/sprite-info/sprite-info.css

@@ -3,7 +3,7 @@
 
 .sprite-info {
     height: $sprite-info-height;
-    padding: $space;
+    padding: 0.75rem;
     font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
     background-color: white;
     color: #575e75;
@@ -17,7 +17,9 @@
     justify-content: space-between;
 }
 
-.row-primary { margin-bottom: $space; }
+.row-primary {
+    margin-bottom: 0.5rem;
+}
 
 .label { opacity: 0.8; }
 
@@ -29,15 +31,9 @@
 
 .icon-wrapper {
     display: inline-block;
-
-    /*
-        content-box is normally the browser's default.
-        We're overriding the global, which we set to border-box
-    */
-    box-sizing: content-box;
-    width: 1.0rem;
-    height: 1.0rem;
-    padding: 0.25rem;
+    width: 2rem;
+    height: 2rem;
+    padding: 0.5rem;
     outline: none;
     user-select: none;
 }

src/components/stage-selector/stage-selector.css

 @import "../../css/units.css";
 @import "../../css/colors.css";
 
-$header-height: calc(2rem - 2px); /* @todo: half the SpriteInfo area header? */
+$header-height: calc($stage-menu-height - 2px);
 
 .stage-selector {
     position: relative; /* for the child element border */

src/css/units.css

@@ -3,8 +3,8 @@ $space: 0.5rem;
 $sprites-per-row: 5;
 
 $menu-bar-height: 3rem;
-$sprite-info-height: 5.25rem; /* @todo: SpriteInfo isn't explicitly set to this height yet */
-$stage-menu-height: 3rem;
+$sprite-info-height: 6rem;
+$stage-menu-height: 2.75rem;
 
 $library-header-height: 4.375rem;