From d1320212a6ee28d36a950f2043204e86ef597358 Mon Sep 17 00:00:00 2001
From: Eric Arellano <ericarellano@me.com>
Date: Tue, 9 Jul 2024 07:36:44 -0400
Subject: [PATCH 1/2] Refactoring spacing CSS code

---
 src/css/_controls.scss                        | 22 ++++++++++---------
 src/css/_header.scss                          | 17 +++++++-------
 src/css/_logo.scss                            |  3 ++-
 src/css/_scorecard.scss                       | 15 +++++++------
 src/css/theme/_icons.scss                     |  3 +++
 .../{_touchable-icons.scss => _spacing.scss}  |  7 +++---
 6 files changed, 37 insertions(+), 30 deletions(-)
 create mode 100644 src/css/theme/_icons.scss
 rename src/css/theme/{_touchable-icons.scss => _spacing.scss} (58%)

diff --git a/src/css/_controls.scss b/src/css/_controls.scss
index 504effb..00b026b 100644
--- a/src/css/_controls.scss
+++ b/src/css/_controls.scss
@@ -1,15 +1,17 @@
 @use "theme/colors";
-@use "theme/touchable-icons";
+@use "theme/spacing";
 @use "theme/typography";
 @use "header";
 
 $label-font-size: typography.$font-size-md;
-$zoom-controls-top-offset: calc(64px - header.$header-height);
+$zoom-controls-top-offset: calc(
+  58px + spacing.$map-controls-margin-top - header.$header-height
+);
 $outer-border-thickness: 2px;
 $option-divider: 1px solid colors.$gray-translucent;
 
 .leaflet-left .leaflet-control {
-  margin-left: 8px;
+  margin-left: spacing.$map-controls-margin-x;
 }
 
 .leaflet-control-zoom.leaflet-bar,
@@ -22,8 +24,8 @@ $option-divider: 1px solid colors.$gray-translucent;
   top: $zoom-controls-top-offset;
 
   a {
-    width: touchable-icons.$min-touch-target;
-    height: touchable-icons.$min-touch-target;
+    width: spacing.$min-touch-target;
+    height: spacing.$min-touch-target;
     font-size: $label-font-size;
     font-weight: normal;
 
@@ -38,20 +40,20 @@ $option-divider: 1px solid colors.$gray-translucent;
 }
 
 .leaflet-touch.leaflet-control-layers-toggle {
-  width: touchable-icons.$min-touch-target;
-  height: touchable-icons.$min-touch-target;
+  width: spacing.$min-touch-target;
+  height: spacing.$min-touch-target;
 }
 
 #map > div.leaflet-control-container > div.leaflet-top.leaflet-right {
   $zoom-controls-height: calc(
-    (touchable-icons.$min-touch-target * 2) + $outer-border-thickness
+    (spacing.$min-touch-target * 2) + $outer-border-thickness
   );
   $margin-between-zoom-control: 8px;
   top: calc(
     $zoom-controls-top-offset + $zoom-controls-height +
       $margin-between-zoom-control
   );
-  margin-left: 8px; // Mirrors zoom controls.
+  margin-left: spacing.$map-controls-margin-x;
   right: auto;
 }
 
@@ -74,7 +76,7 @@ $option-divider: 1px solid colors.$gray-translucent;
   display: flex;
   align-items: center;
 
-  $padding-y: calc((touchable-icons.$min-touch-target - $label-font-size) / 2);
+  $padding-y: calc((spacing.$min-touch-target - $label-font-size) / 2);
   padding: $padding-y 8px;
 
   input[type="radio"] {
diff --git a/src/css/_header.scss b/src/css/_header.scss
index b2c0a9c..736e926 100644
--- a/src/css/_header.scss
+++ b/src/css/_header.scss
@@ -1,12 +1,13 @@
 @use "theme/breakpoints";
 @use "theme/colors";
-@use "theme/touchable-icons";
+@use "theme/spacing";
+@use "theme/icons";
 @use "theme/typography";
 
 $header-y-padding: 10px;
 $header-border-bottom-size: 4px;
 $header-height: calc(
-  touchable-icons.$min-touch-target + ($header-y-padding * 2) +
+  spacing.$min-touch-target + ($header-y-padding * 2) +
     $header-border-bottom-size
 );
 
@@ -29,8 +30,8 @@ header {
   .header-about-icon-container,
   .header-share-icon-container,
   .header-full-screen-icon-container {
-    height: touchable-icons.$min-touch-target;
-    width: touchable-icons.$min-touch-target;
+    height: spacing.$min-touch-target;
+    width: spacing.$min-touch-target;
 
     display: inline-flex;
     align-items: center;
@@ -39,8 +40,8 @@ header {
 
   svg {
     color: colors.$white;
-    height: touchable-icons.$icon-size-md;
-    width: touchable-icons.$icon-size-md;
+    height: icons.$icon-size-md;
+    width: icons.$icon-size-md;
   }
 
   .header-full-screen-icon-container {
@@ -67,7 +68,7 @@ header {
     font-size: typography.$font-size-base;
     line-height: 1.2; // To vertically center the text.
 
-    height: touchable-icons.$min-touch-target;
+    height: spacing.$min-touch-target;
 
     min-width: 220px;
     @include breakpoints.gt-xs {
@@ -90,7 +91,7 @@ header {
 
 div.choices__item.choices__item--choice.choices__item--selectable {
   font-size: typography.$font-size-base;
-  height: touchable-icons.$min-touch-target;
+  height: spacing.$min-touch-target;
 }
 
 .choices__list--dropdown,
diff --git a/src/css/_logo.scss b/src/css/_logo.scss
index c7e9eb3..d1bc7d3 100644
--- a/src/css/_logo.scss
+++ b/src/css/_logo.scss
@@ -1,9 +1,10 @@
 @use "theme/breakpoints";
 @use "theme/colors";
+@use "theme/spacing";
 
 .prn-logo {
   position: absolute;
-  left: 8px;
+  left: spacing.$map-controls-margin-x;
   z-index: 2001;
 
   // `bottom` is set so high to avoid covering the attribution
diff --git a/src/css/_scorecard.scss b/src/css/_scorecard.scss
index e7a54cc..66c2137 100644
--- a/src/css/_scorecard.scss
+++ b/src/css/_scorecard.scss
@@ -1,6 +1,7 @@
 @use "theme/breakpoints";
 @use "theme/colors";
-@use "theme/touchable-icons";
+@use "theme/spacing";
+@use "theme/icons";
 @use "theme/typography";
 @use "header";
 
@@ -33,8 +34,8 @@ $border-radius: 10px;
 
   float: right;
   position: fixed;
-  right: 8px;
-  top: calc(header.$header-height + 6px);
+  right: spacing.$map-controls-margin-x;
+  top: calc(header.$header-height + spacing.$map-controls-margin-top);
 
   border-radius: $border-radius;
   color: colors.$black;
@@ -68,7 +69,7 @@ $border-radius: 10px;
 }
 
 .scorecard-accordion-toggle {
-  height: touchable-icons.$min-touch-target;
+  height: spacing.$min-touch-target;
   width: 100%;
   padding: 0;
   margin-top: $padding-between-elements;
@@ -96,14 +97,14 @@ $border-radius: 10px;
   }
 
   .scorecard-accordion-icon-container {
-    height: touchable-icons.$min-touch-target;
-    width: touchable-icons.$min-touch-target;
+    height: spacing.$min-touch-target;
+    width: spacing.$min-touch-target;
     display: inline-flex;
     align-items: center;
     justify-content: center;
 
     svg {
-      height: touchable-icons.$icon-size-sm;
+      height: icons.$icon-size-sm;
     }
   }
 }
diff --git a/src/css/theme/_icons.scss b/src/css/theme/_icons.scss
new file mode 100644
index 0000000..4f6bd40
--- /dev/null
+++ b/src/css/theme/_icons.scss
@@ -0,0 +1,3 @@
+$icon-size-sm: 20px;
+$icon-size-md: 24px;
+$icon-size-lg: 32px;
diff --git a/src/css/theme/_touchable-icons.scss b/src/css/theme/_spacing.scss
similarity index 58%
rename from src/css/theme/_touchable-icons.scss
rename to src/css/theme/_spacing.scss
index 6457b96..8164ee2 100644
--- a/src/css/theme/_touchable-icons.scss
+++ b/src/css/theme/_spacing.scss
@@ -1,6 +1,5 @@
-$icon-size-sm: 20px;
-$icon-size-md: 24px;
-$icon-size-lg: 32px;
-
 // https://www.w3.org/WAI/WCAG21/Understanding/target-size.html
 $min-touch-target: 44px;
+
+$map-controls-margin-x: 8px;
+$map-controls-margin-top: 6px;

From 52cb91caef65cd6523fd9c880722585f50ca76cf Mon Sep 17 00:00:00 2001
From: Eric Arellano <ericarellano@me.com>
Date: Tue, 9 Jul 2024 08:00:29 -0400
Subject: [PATCH 2/2] element gap & edge spacing

---
 src/css/_controls.scss      |  6 ++----
 src/css/_header.scss        |  5 +++--
 src/css/_scorecard.scss     | 36 +++++++++++++++++-------------------
 src/css/theme/_spacing.scss |  3 +++
 4 files changed, 25 insertions(+), 25 deletions(-)

diff --git a/src/css/_controls.scss b/src/css/_controls.scss
index 00b026b..f822589 100644
--- a/src/css/_controls.scss
+++ b/src/css/_controls.scss
@@ -48,10 +48,8 @@ $option-divider: 1px solid colors.$gray-translucent;
   $zoom-controls-height: calc(
     (spacing.$min-touch-target * 2) + $outer-border-thickness
   );
-  $margin-between-zoom-control: 8px;
   top: calc(
-    $zoom-controls-top-offset + $zoom-controls-height +
-      $margin-between-zoom-control
+    $zoom-controls-top-offset + $zoom-controls-height + spacing.$element-gap
   );
   margin-left: spacing.$map-controls-margin-x;
   right: auto;
@@ -77,7 +75,7 @@ $option-divider: 1px solid colors.$gray-translucent;
   align-items: center;
 
   $padding-y: calc((spacing.$min-touch-target - $label-font-size) / 2);
-  padding: $padding-y 8px;
+  padding: $padding-y spacing.$element-gap;
 
   input[type="radio"] {
     margin: 0;
diff --git a/src/css/_header.scss b/src/css/_header.scss
index 736e926..83381f6 100644
--- a/src/css/_header.scss
+++ b/src/css/_header.scss
@@ -4,7 +4,8 @@
 @use "theme/icons";
 @use "theme/typography";
 
-$header-y-padding: 10px;
+// We don't use $container-edge-spacing to save vertical space.
+$header-y-padding: spacing.$element-gap;
 $header-border-bottom-size: 4px;
 $header-height: calc(
   spacing.$min-touch-target + ($header-y-padding * 2) +
@@ -16,7 +17,7 @@ header {
   display: flex;
   align-items: center;
 
-  padding: $header-y-padding 10px;
+  padding: $header-y-padding spacing.$element-gap;
 
   background-color: colors.$gray;
   border-bottom: $header-border-bottom-size solid colors.$teal;
diff --git a/src/css/_scorecard.scss b/src/css/_scorecard.scss
index 66c2137..ccf82ff 100644
--- a/src/css/_scorecard.scss
+++ b/src/css/_scorecard.scss
@@ -5,8 +5,6 @@
 @use "theme/typography";
 @use "header";
 
-$outer-padding: 15px;
-$padding-between-elements: 10px;
 $border-radius: 10px;
 
 .popup-fixed {
@@ -47,8 +45,8 @@ $border-radius: 10px;
 
   p {
     margin: 0;
-    padding-left: $outer-padding;
-    padding-right: $outer-padding;
+    padding-left: spacing.$container-edge-spacing;
+    padding-right: spacing.$container-edge-spacing;
   }
 }
 
@@ -57,10 +55,10 @@ $border-radius: 10px;
   align-items: center;
   justify-content: space-between;
 
-  margin-top: $outer-padding;
-  margin-bottom: $padding-between-elements;
-  margin-left: $outer-padding;
-  margin-right: $outer-padding;
+  margin-top: spacing.$container-edge-spacing;
+  margin-bottom: spacing.$element-gap;
+  margin-left: spacing.$container-edge-spacing;
+  margin-right: spacing.$container-edge-spacing;
   line-height: 1.1;
 
   color: colors.$teal;
@@ -72,12 +70,12 @@ $border-radius: 10px;
   height: spacing.$min-touch-target;
   width: 100%;
   padding: 0;
-  margin-top: $padding-between-elements;
+  margin-top: spacing.$element-gap;
 
   font-size: typography.$font-size-base;
   cursor: pointer;
   text-align: left;
-  padding-left: $outer-padding;
+  padding-left: spacing.$container-edge-spacing;
   padding-right: 0;
 
   display: flex;
@@ -111,15 +109,15 @@ $border-radius: 10px;
 
 .scorecard-accordion-content {
   border-top: 1px solid colors.$gray-translucent;
-  padding-top: $padding-between-elements;
+  padding-top: spacing.$element-gap;
 
   ul {
     padding: 0;
     padding-inline-start: 20px; // Default is 40px
-    margin-left: $outer-padding;
-    margin-right: $outer-padding;
-    margin-bottom: $outer-padding;
-    margin-top: $padding-between-elements;
+    margin-left: spacing.$container-edge-spacing;
+    margin-right: spacing.$container-edge-spacing;
+    margin-bottom: spacing.$container-edge-spacing;
+    margin-top: spacing.$element-gap;
   }
 }
 
@@ -138,8 +136,8 @@ $border-radius: 10px;
 .community-contribution-warning {
   font-size: typography.$font-size-sm;
   color: colors.$gray;
-  margin-top: $padding-between-elements;
-  margin-bottom: $padding-between-elements;
-  margin-left: $outer-padding;
-  margin-right: $outer-padding;
+  margin-top: spacing.$element-gap;
+  margin-bottom: spacing.$element-gap;
+  margin-left: spacing.$container-edge-spacing;
+  margin-right: spacing.$container-edge-spacing;
 }
diff --git a/src/css/theme/_spacing.scss b/src/css/theme/_spacing.scss
index 8164ee2..df4fb8b 100644
--- a/src/css/theme/_spacing.scss
+++ b/src/css/theme/_spacing.scss
@@ -3,3 +3,6 @@ $min-touch-target: 44px;
 
 $map-controls-margin-x: 8px;
 $map-controls-margin-top: 6px;
+
+$container-edge-spacing: 15px;
+$element-gap: 10px;