fix email form

Author: manuthecoder

app/views/organizer_position_invites/_role_and_control_form.html.erb

@@ -1,48 +1,51 @@
 <%# locals: (form:) %>
 
-<div class="field px-4 flex items-center">
+<div class="field px-4 gap-2 flex items-center">
   <%= form.label :role, "Role" %>
   <%= form.select :role,
                   OrganizerPositionInvite.roles.keys.map { |role| [role.titleize, role] },
                   {}, 
                   "x-model": "role" %>
+  <div data-controller="menu" data-menu-placement-value="bottom-start">
+    <button
+      type="button"
+      class="pop menu__toggle menu__toggle--arrowless overflow-visible"
+      data-menu-target="toggle" data-action="menu#toggle click@document->menu#close keydown@document->menu#keydown">
+      <%= inline_icon "question-mark", size: 14 %>
+    </button>
+    <div class="menu__content menu__content--2 menu__content--compact h5 p-0" data-menu-target="content">
+      <p class="muted mb1"><span class="bold info">Managers</span> can do everything
+        in the organization.</p>
+      <div class="muted mb1">
+        <p class="m0"><span class="bold info">Members</span> can:</p>
+        <ul class="m0">
+          <li>Create & use cards (with a limit if spending controls are enabled)
+          </li>
+          <li>Not transfer money</li>
+          <li>Not change the organization's settings</li>
+        </ul>
+      </div>
+      <p class="muted mb1"><span class="bold info">Readers</span> have read-only access to the organization.</p>
+    </div>
+  </div>
 </div>
 
-<p class="muted mb1"><span class="bold info">Managers</span> can do everything
-  in the organization.</p>
-
-<div class="muted mb1">
-  <p class="m0"><span class="bold info">Members</span> can:</p>
-  <ul class="m0">
-    <li>Create & use cards (with a limit if spending controls are enabled)
-    </li>
-    <li>Not transfer money</li>
-    <li>Not change the organization's settings</li>
-  </ul>
-</div>
-
-<p class="muted mb1"><span class="bold info">Readers</span> have read-only access to the organization.</p>
-
-<div x-show="role === 'member'" x-cloak x-transition.duration.500ms class="my-4">
-  <%= form.label :enable_controls, class: "mb1 inline-flex flex-col" do %>
-    Enable spending controls?
-    <span class="muted h6">You can always enable & configure spending controls after, too.</span>
-  <% end %>
-
-  <div class="field field--options">
-    <%= form.radio_button :enable_controls, false, "x-model": "spendingControls" %>
-    <%= form.label :enable_controls, value: false do %>
-      <strong>No</strong>
-    <% end %>
-
-    <%= form.radio_button :enable_controls, true, "x-model": "spendingControls" %>
-    <%= form.label :enable_controls, value: true do %>
-      <strong>Yes</strong>
-    <% end %>
+<div data-controller="accordion" class="border-t px-4 pb-2">
+  <div class="flex items-center gap-4 field field--checkbox">
+    <label class="flex flex-col">
+      <span>Spending controls</span>
+      <span class="muted h6">Changes can be made later</span>
+    </label>
+    <div class="field--checkbox--switch ml-auto" style="flex-shrink:0">
+      <%= form.label :enable_controls do %>
+        <%= form.check_box :enable_controls,  { data: { action: "change->accordion#toggle", accordion_target: "checkbox" } }, true, false %>
+        <span class="slider"></span>
+      <% end %>
+    </div>
   </div>
 
-  <div x-show="spendingControls === 'true'" x-cloak x-transition.duration.500ms class="mb1">
+  <div data-accordion-target="content" class="flex items-center gap-4 justify-between">
     <%= form.label :initial_control_allowance_amount, value: "Initial allowance amount" %>
-    <%= form.number_field :initial_control_allowance_amount, placeholder: "500.00", step: 0.01, min: 0.00, data: { controller: "truncate-decimal", action: "truncate-decimal#truncate blur->truncate-decimal#pad" } %>
+    <%= form.number_field :initial_control_allowance_amount, placeholder: "500.00", step: 0.01, min: 0.00, style: "max-width:100px!important;text-align:right", data: { controller: "truncate-decimal", action: "truncate-decimal#truncate blur->truncate-decimal#pad" } %>
   </div>
 </div>