From 303d89088bdfccf8988a255bb7e0b40b60e00e5a Mon Sep 17 00:00:00 2001
From: leigh-mil <leigh-ctr@friends.dds.mil>
Date: Mon, 16 Sep 2019 11:38:47 -0400
Subject: [PATCH] Styling for edit member modal

---
 styles/sections/_application_edit.scss          | 11 ++++++++++-
 .../applications/member_perms_form_fields.html  |  4 ++--
 templates/portfolios/applications/settings.html | 17 ++++++++++++-----
 3 files changed, 24 insertions(+), 8 deletions(-)

diff --git a/styles/sections/_application_edit.scss b/styles/sections/_application_edit.scss
index c011e361..894f80c0 100644
--- a/styles/sections/_application_edit.scss
+++ b/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 {
diff --git a/templates/fragments/applications/member_perms_form_fields.html b/templates/fragments/applications/member_perms_form_fields.html
index a22d72ba..0830e09b 100644
--- a/templates/fragments/applications/member_perms_form_fields.html
+++ b/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 %}
diff --git a/templates/portfolios/applications/settings.html b/templates/portfolios/applications/settings.html
index 632fec6d..7eed29f0 100644
--- a/templates/portfolios/applications/settings.html
+++ b/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 %}