Further improve design of left controls (#200)

Follow up to
#199.

* Uses touch target 44 x 44px, not 40 x 40px. On my iPhone, 40 x 40px is
still fairly small. Now, we follow the web accessibility standard.
* Increases the size of the layers touch targets to 44px height. To make
the touch targets look distinct and not have weird space in the middle,
I added a 1px border, which mirrors the zoom-in and out buttons.
* Uses our colors for all the borders. I still don't love the color, but
it can be changed later. This at least switches to our own color
* Consistently use `font-size-md` and non-bold text
* Vertically aligns radio buttons with label text
* Renames "Light" layer to "High contrast" for better clarity

Ideas for additional improvement:

* prettier radio button
* choose a better border color

<details><summary>before (before #199)</summary>

<img width="193" alt="Screenshot 2024-07-01 at 10 45 01 PM"
src="https://github.com/ParkingReformNetwork/parking-lot-map/assets/14852634/8969d44f-3b55-47fb-bda3-a8bdc2531b07">
</details>


<details><summary>before (with #199)</summary>

<img width="191" alt="Screenshot 2024-07-01 at 10 43 57 PM"
src="https://github.com/ParkingReformNetwork/parking-lot-map/assets/14852634/e7f98d4c-f96b-4713-bb77-1ac4aa04f46a">
</details>


<details><summary>after</summary>

<img width="192" alt="Screenshot 2024-07-02 at 8 31 27 AM"
src="https://github.com/ParkingReformNetwork/parking-lot-map/assets/14852634/92eead54-d015-4f54-a2ba-1462a202910c">
</details>

src/css/_controls.scss

@@ -1,33 +1,68 @@
+@use "theme/colors";
 @use "theme/touchable-icons";
 @use "theme/typography";
 
-.leaflet-top.leaflet-left {
+.leaflet-control-zoom.leaflet-bar,
+.leaflet-control-layers.leaflet-control {
+  border: 2px solid colors.$gray-light-translucent;
+  border-radius: 4px;
+}
+
+.leaflet-control-zoom.leaflet-bar {
   top: 10px;
 
   a {
     width: touchable-icons.$min-touch-target;
     height: touchable-icons.$min-touch-target;
-    font-size: typography.$font-size-lg;
+    font-size: typography.$font-size-md;
     font-weight: normal;
 
     display: flex;
     align-items: center;
     justify-content: center;
+
+    &:first-child {
+      border-bottom: 1px solid colors.$gray-light-translucent;
+    }
   }
 }
 
-.leaflet-touch .leaflet-control-layers-toggle {
+.leaflet-touch.leaflet-control-layers-toggle {
   width: touchable-icons.$min-touch-target;
   height: touchable-icons.$min-touch-target;
 }
 
 #map > div.leaflet-control-container > div.leaflet-top.leaflet-right {
-  top: 100px;
+  top: 104px;
   margin-left: 10px;
   right: auto;
 }
 
+.leaflet-control-layers-selector {
+  top: 0px;
+}
+
+.leaflet-control-layers-expanded {
+  padding: 0px;
+}
+
 .leaflet-control-layers label {
-  font-size: typography.$font-size-base;
-  font-weight: normal;
+  font-size: typography.$font-size-md;
+  line-height: 1;
+
+  &:first-child {
+    border-bottom: 1px solid colors.$gray-light-translucent;
+  }
+
+  display: flex;
+  align-items: center;
+
+  // Each option is naturally 18px, so 13px padding results in
+  // the touch target being the minimum size of 44px.
+  padding: 13px 8px;
+
+  input[type="radio"] {
+    margin: 0;
+    vertical-align: middle;
+  }
 }

src/css/theme/_touchable-icons.scss

@@ -2,9 +2,8 @@ $icon-size-xs: 20px;
 $icon-size-sm: 24px;
 $icon-size-md: 32px;
 
-// https://www.w3.org/WAI/WCAG21/Understanding/target-size.html recommends
-// 44px, but 40px takes less space.
-$min-touch-target: 40px;
+// https://www.w3.org/WAI/WCAG21/Understanding/target-size.html
+$min-touch-target: 44px;
 
 @mixin touchable-icon($icon-size) {
   width: $icon-size;

src/css/vendor/bootstrap.css

@@ -318,8 +318,6 @@ fieldset {
 label {
   display: inline-block;
   max-width: 100%;
-  margin-bottom: 5px;
-  font-weight: bold;
 }
 input[type="search"] {
   -webkit-box-sizing: border-box;

src/js/setUpSite.ts

@@ -29,7 +29,7 @@ const parkingLotsModules = import(
 
 const MAX_ZOOM = 18;
 const BASE_LAYERS = {
-  Light: new TileLayer(
+  "High contrast": new TileLayer(
     "https://tiles.stadiamaps.com/tiles/stamen_toner_lite/{z}/{x}/{y}{r}.png",
     {
       attribution: `Map tiles: &copy; <a href="https://www.stadiamaps.com/" target="_blank">Stadia Maps</a>
@@ -67,11 +67,11 @@ const STYLES = {
 /**
  * Create the initial map object.
  *
- * This sets up Google Maps vs. Light mode, attribution, and zoom.
+ * This sets up Google Maps vs. High contrast, attribution, and zoom.
  */
 const createMap = (): Map => {
   const map = new Map("map", {
-    layers: [BASE_LAYERS.Light],
+    layers: [BASE_LAYERS["High contrast"]],
     closePopupOnClick: false,
   });
   map.attributionControl.setPrefix(