improve new member form style

club/templates/club/club_members.jinja

@@ -7,11 +7,14 @@
 {% block additional_css %}
   <link rel="stylesheet" href="{{ static("bundled/core/components/ajax-select-index.css") }}">
   <link rel="stylesheet" href="{{ static("core/components/ajax-select.scss") }}">
+  <link rel="stylesheet" href="{{ static("club/members.scss") }}">
 {% endblock %}
 
 {% block content %}
   <h2>{% trans %}Club members{% endtrans %}</h2>
   <br />
+  <h4>{% trans %}Add a new member{% endtrans %}</h4>
+
   {{ add_member_fragment }}
   <br />
   {% if members %}

club/templates/club/fragments/add_member.jinja

@@ -1,27 +1,30 @@
-<h4>{% trans %}Add a new member{% endtrans %}</h4>
 <form
   hx-post="{{ url('club:club_new_members', club_id=club.id) }}"
   hx-disabled-elt="find input[type='submit']"
   hx-swap="outerHTML"
-  id="add_users"
+  id="add_club_members_form"
 >
   {% csrf_token %}
   {{ form.non_field_errors() }}
-  <p>
-    {{ form.user.errors }}
-    {{ form.user.label_tag()}}
-    <span class="helptext">{{ form.user.help_text }}</span>
-    {{ form.user }}
-  </p>
-  <p>
-    {{ form.role.errors }}
-    {{ form.role.label_tag()}}
-    {{ form.role }}
-  </p>
-  <p>
-    {{ form.description.errors }}
-    {{ form.description.label_tag()}}
-    {{ form.description }}
-  </p>
-  <p><input type="submit" /></p>
+  <fieldset>
+
+    <div>
+      {{ form.user.label_tag()}}
+      <span class="helptext">{{ form.user.help_text }}</span>
+      {{ form.user }}
+      {{ form.user.errors }}
+    </div>
+    <div>
+      {{ form.role.label_tag()}}
+      {{ form.role }}
+      {{ form.role.errors }}
+    </div>
+    <div>
+      {{ form.description.label_tag()}}
+      {{ form.description }}
+      {{ form.description.errors }}
+    </div>
+  </fieldset>
+  <button type="submit" class="btn btn-blue">
+    <i class="fa fa-user-plus"></i> {% trans %}Add{% endtrans %}</button>
 </form>