Fixed UX issues in user invites modal [SCI-5898]

app/assets/javascripts/users/settings/teams/invite_users_modal.js

@@ -61,6 +61,14 @@
       }
     });
 
+    dropdownSelector.init('#role', {
+      noEmptyOption: true,
+      singleSelect: true,
+      closeOnSelect: true,
+      selectAppearance: 'simple',
+      disableSearch: true
+    });
+
     modal.off('show.bs.modal').on('show.bs.modal', function() {
       // This cannot be scoped outside this function
       // because it is generated via JS
@@ -121,7 +129,7 @@
         var data = {
           emails: dropdownSelector.getValues(emailsInput),
           team_ids: dropdownSelector.getValues(teamsInput),
-          role: roleInput.val(),
+          role: dropdownSelector.getValues(roleInput),
           'g-recaptcha-response': $('#recaptcha-invite-modal').val()
         };
 

app/assets/stylesheets/shared/dropdown_selector.scss

@@ -18,7 +18,6 @@
 
 .dropdown-selector-container {
   display: inline-block;
-  float: left;
   position: relative;
   width: 100%;
 

app/assets/stylesheets/themes/scinote.scss

@@ -133,6 +133,10 @@ body {
   }
 }
 
+.modal-header h4 {
+  font-size: 18px;
+}
+
 .jumbotron {
   background-color: inherit;
 }
@@ -1349,14 +1353,7 @@ body > .loading-overlay {
     margin-top: 20px;
   }
 
-  h4 {
-    font-size: 14px;
-    margin-bottom: 5px;
-  }
-
   .select-container--with-blank {
-    overflow: hidden;
-
     .search-field::placeholder {
       color: $color-black;
       opacity: 1;

app/javascript/src/config/locales/messages.js

@@ -44,7 +44,7 @@ export default {
       info_label: "Info"
     },
     invite_users: {
-      modal_title: "Invite users to team {team}",
+      modal_title: "Invite members to {team}",
       input_text: "Invite more people to team {team} and start using SciNote.",
       input_help:
         "Input one or multiple emails, confirm each email with ENTER key.",

config/locales/en.yml

@@ -2204,7 +2204,7 @@ en:
 
   invite_users:
     to_team:
-      title: "Invite users to team %{team}"
+      title: "Invite members to %{team}"
       heading: "Invite more people to team %{team} and start using SciNote."
     no_team:
       title: "Invite users to SciNote"