Styling for edit member modal

styles/sections/_application_edit.scss

@@ -24,7 +24,8 @@
   }
 }
 
-#modal--add-app-mem {
+#modal--add-app-mem,
+.form-content--app-mem {
   text-align: left;
 
   input[type="checkbox"] + label::before {
@@ -98,11 +99,19 @@
         margin-top: $gap;
         margin-left: $gap;
       }
+
+      .form-row {
+        margin: 0;
+      }
     }
 
     &__head {
       font-weight: $font-bold;
     }
+
+    hr {
+      margin: 0.5em;
+    }
   }
 
   .form-row {

templates/fragments/applications/member_perms_form_fields.html

@@ -1,7 +1,7 @@
 {% from "components/checkbox_input.html" import CheckboxInput %}
 
 {% macro MemberPermsFields(app_perms_form, env_roles_form, new=False, member_role_id=None) %}
-  <div class="">
+  <div class="form-content--app-mem">
     <h4>{{ "portfolios.applications.members.form.project_perms" | translate }}</h4>
     <div class="application-perms">
       {% if new %}
@@ -18,7 +18,7 @@
       {{ CheckboxInput(app_perms_form.perms_env_mgmt, classes="input__inline-fields", key=env_mgmt, id=env_mgmt) }}
       {{ CheckboxInput(app_perms_form.perms_del_env, classes="input__inline-fields", key=del_env, id=del_env) }}
     </div>
-    <div class="environment-roles-new">
+    <div class="environment_roles environment-roles-new">
       <h4>{{ "portfolios.applications.members.form.env_access" | translate }}</h4>
       <hr>
       {% for environment_data in env_roles_form %}

templates/portfolios/applications/settings.html

@@ -122,14 +122,21 @@
         {% endif %}
         {% for member in members %}
           {% set modal_name = "edit_member-{}".format(loop.index) %}
-          {% call Modal(modal_name, dismissable=True) %}
+          {% call Modal(modal_name) %}
+            <div class="modal__form--header">
+              <h1>{{ Icon('avatar') }} {{ member.user_name }}</h1>
+              <hr>
+            </div>
             <form id='{{ modal_name }}' method="POST" action="{{ url_for('applications.update_member', application_id=application.id, application_role_id=member.role_id) }}">
               {{ member.form.csrf_token }}
               {{ MemberPermsFields(app_perms_form=member.form, env_roles_form=member.form.environment_roles, member_role_id=member.role_id) }}
-              <input
-                type="submit"
-                class='action-group__action usa-button'
-                value='Update'>
+              <div class="action-group">
+                <input
+                  type="submit"
+                  class='action-group__action usa-button'
+                  value='Update'>
+                <a class='action-group__action usa-button usa-button-secondary' v-on:click="closeModal('{{ modal_name }}')">{{ "common.cancel" | translate }}</a>
+              </div>
             </form>
           {% endcall %}
         {% endfor %}