Merge pull request #1757 from codebar/migrate-add-member-note-modal-t…

…o-bootstrap-5

Migrate add member note modal to Bootstrap 5 classes

app/assets/stylesheets/_bootstrap-custom.scss

@@ -38,7 +38,7 @@ $enable-negative-margins: true;
 @import "bootstrap/list-group";
 // @import "bootstrap/close";
 // @import "bootstrap/toasts";
-// @import "bootstrap/modal";
+@import "bootstrap/modal";
 @import "bootstrap/tooltip";
 // @import "bootstrap/popover";
 @import "bootstrap/carousel";

app/views/admin/members/_actions.html.haml

@@ -1,6 +1,6 @@
 .container-fluid.p-0.mb-4
   .btn-group.d-flex
-    = link_to '#', class: 'btn btn-primary d-block py-4', 'data-reveal-id': 'note-modal' do
+    = link_to '#', class: 'btn btn-primary d-block py-4 rounded-0', 'data-toggle': 'modal', 'data-target': "#note-modal" do
       %i.fas.fa-pencil-alt.mr-2
       Add note
     = link_to admin_member_send_eligibility_email_path(@member), data: {confirm: "Clicking OK will send an automated email to this user now to verify their eligibility for codebar. This cannot be undone. Are you sure?"}, class: 'btn btn-primary d-block py-4' do
@@ -14,7 +14,7 @@
       = link_to admin_member_send_attendance_email_path(@member), data: {confirm: "#{@member.name} has already received a warning about missing too many workshops on #{@member.attendance_warnings.last.created_at.strftime("%Y-%m-%d at %H:%M")}. Are you sure you want to proceed with sending another one?"}, class: 'btn btn-primary d-block py-4' do
         %i.far.fa-clock.mr-2
         Send attendance warning
-    = link_to new_admin_member_ban_path(@member), class: 'btn btn-primary d-block py-4' do
+    = link_to new_admin_member_ban_path(@member), class: 'btn btn-primary d-block py-4 rounded-0' do
       %i.fas.fa-ban.warning.mr-2
       Suspend
   = render 'note'

app/views/admin/members/_note.html.haml

@@ -1,9 +1,13 @@
-#note-modal.reveal-modal{ 'data-reveal': true, 'aria-labelledby': 'modalTitle', 'aria-hidden': 'true', role: 'dialog' }
-  %h3#modalTitle Add a note for #{@member.full_name}
-  = simple_form_for [:admin, MemberNote.new], html: { class: 'form-inline' } do |f|
-    = f.input :note, label: false, input_html: { rows: 3 }, placeholder: 'e.g. very enthusiastic student.'
-    = f.hidden_field :member_id, value: @member.id
-    .text-right
-      = f.button :button, 'Save note', class: 'btn btn-primary mb-0'
-  = link_to '#', class: 'close-reveal-modal border-0', 'aria-label': 'Close' do
-    ×
+#note-modal.modal.fade{ 'aria-labelledby': 'modal-title', 'aria-hidden': 'true', role: 'dialog' }
+  .modal-dialog
+    .modal-content
+      .modal-header
+        %h5.modal-title#modal-title Add a note for #{@member.full_name}
+        %button.close{ type: 'button', 'data-dismiss': 'modal', 'aria-label': 'Close' }
+          %span{ 'aria-hidden': 'true'} ×
+      .modal-body
+        = simple_form_for [:admin, MemberNote.new], html: { class: 'form-inline' } do |f|
+          = f.input :note, label: false, input_html: { rows: 3 }, placeholder: 'e.g. very enthusiastic student.'
+          = f.hidden_field :member_id, value: @member.id
+          .text-right
+            = f.button :button, 'Save note', class: 'btn btn-primary mb-0'