properly enabled selects in the new subscription view

Author: Oaphi

app/assets/javascripts/subscriptions.js

@@ -1,4 +1,8 @@
-$(() => {
+document.addEventListener('DOMContentLoaded', () => {
+  document.querySelectorAll('.js-subscription-type-select, .js-subscription-frequency-select').forEach((el) => {
+    $(el).select2();
+  });
+
   $('.js-enable-subscription').on('change', async (evt) => {
     const $tgt = $(evt.target);
     const $sub = $tgt.parents('details');

app/assets/stylesheets/subscriptions.scss

@@ -1,3 +1,23 @@
-// Place all the styles related to the Subscriptions controller here.
-// They will automatically be included in application.css.
-// You can use Sass (SCSS) here: http://sass-lang.com/
+@import 'variables';
+
+.new_subscription {
+  .select2-container {
+    height: 37px;
+    margin: 4px 0px;
+  }
+
+  .select2-container {
+    .selection {
+      .select2-selection {
+        border-color: $muted-graphic;
+        height: 100%;
+        padding: 4px 0;
+      }
+
+      .select2-selection__arrow {
+        top: 50%;
+        translate: 0 -50%;
+      }
+    }
+  }
+}

app/views/subscriptions/new.html.erb

@@ -14,7 +14,7 @@
     <%= f.select :type,
                  options_for_select(type_choice_for(current_user), selected: @subscription.type),
                  { include_blank: true },
-                 class: 'form-element' %>
+                 class: 'form-element js-subscription-type-select' %>
   </div>
 
   <div class="form-group">
@@ -35,7 +35,8 @@
     <div class="form-caption">How often do you want to be sent these emails?</div>
     <%= f.select :frequency,
                  options_for_select(frequency_choice, selected: @subscription.frequency),
-                 { include_blank: true }, class: 'form-element' %>
+                 { include_blank: true },
+                 class: 'form-element js-subscription-frequency-select' %>
   </div>
 
   <div class="actions">