Add Calcite styling and attempt select2 use

Style dropdowns and toggle with Calcite.

Initial attempt to use select2 to text wrap select options, but there appears to be a jQuery conflict.

sharedAir.css

@@ -60,17 +60,30 @@ body {
   background-color: rgba(255,255,255,0.8)
 }
 
+.esri-ui-top-right.esri-ui-corner {
+  max-width: 25vw;
+}
+
 #parameter-picker {
   padding: 10px;
   background-color: white;
-  opacity: 0.75;
+  opacity: 0.9;
+}
+
+.wrap-options.select2-selection--single {
+  height: 100%;
+}
+.select2-container .wrap-options.select2-selection--single .select2-selection__rendered {
+  word-wrap: break-word;
+  text-overflow: inherit;
+  white-space: normal;
 }
 
 #infoDiv {
   padding: 10px;
   width: 275px;
   height: 40vh;
-  opacity: 0.75;
+  opacity: 0.9;
 }
 
 .esri-slider__max, .esri-slider__min {

sharedAir.html

@@ -11,6 +11,9 @@
 
   <script src="https://js.arcgis.com/4.16/"></script>
 
+  <!-- <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/css/select2.min.css" rel="stylesheet" />
+  <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/js/select2.min.js"></script> -->
+
   <script src="sharedAir.js"></script>
 </head>
 
@@ -25,14 +28,17 @@
       <span id="sign-out" class="action">Sign Out</span>
     </div>
     <div id="parameter-picker" class="esri-widget">
-      <label for="parameter-1-select">NWS Parameter:</label>
-      <select id="parameter-1-select"></select>
+      <label for="parameter-1-select" class="avenir-demi">NWS Parameter:</label>
+      <select id="parameter-1-select" class="select-full wrap-options"></select>
       <br>
-      <label for="parameter-2-select">Yale Parameter:</label>
-      <select id="parameter-2-select"></select>
+      <label for="parameter-2-select" class="avenir-demi">Yale Parameter:</label>
+      <select id="parameter-2-select" class="select-full wrap-options"></select>
       <br>
-      <label for="normalize-check">Normalize occurrences by area?</label>
-      <input type="checkbox" id="normalize-check" />
+      <label for="normalize-check" class="toggle-switch">
+        <input type="checkbox" id="normalize-check" class="toggle-switch-input" />
+        <span class="toggle-switch-track margin-right-1"></span>
+        <span class="toggle-switch-label font-size--1">Normalize occurrences by area?</span>
+      </label>
     </div>
     <div id="akViewDiv" class="esri-widget"></div>
     <div id="hiViewDiv" class="esri-widget"></div>

sharedAir.js

@@ -536,6 +536,11 @@ require([
         console.log('Parameter selection lists set.')
       }
 
+      // Define select2 target class
+      // var $select2 = $('.select2').select2({
+      //   containerCssClass: "wrap-options"
+      // })
+
       // add slider widget
       // Disabled for now. If re-enabled, uncomment the require and function declarations at the top.
       /*mainView.ui.add("infoDiv", {