From fe29b5d838053576e2b2c37577c3e075824e1ba2 Mon Sep 17 00:00:00 2001
From: leigh-mil <leigh-ctr@friends.dds.mil>
Date: Wed, 2 Oct 2019 14:47:41 -0400
Subject: [PATCH] Low-fi update of multi-step modals to fix styling

---
 styles/components/_modal.scss                 |  4 ++
 styles/components/_progress_menu.scss         |  6 ++-
 .../fragments/new_member_modal_content.html   |  6 +--
 templates/applications/settings.html          |  1 -
 .../components/multi_step_modal_form.html     |  4 +-
 .../fragments/add_new_portfolio_member.html   | 44 +++++++++----------
 .../portfolios/fragments/change_ppoc.html     | 42 ++++++++----------
 7 files changed, 51 insertions(+), 56 deletions(-)

diff --git a/styles/components/_modal.scss b/styles/components/_modal.scss
index f2653a6f..826d37b9 100644
--- a/styles/components/_modal.scss
+++ b/styles/components/_modal.scss
@@ -127,6 +127,10 @@ body {
       border-bottom: 1px solid $color-gray-lighter;
       margin: 0 (-$gap * 1.5);
     }
+
+    .form-row {
+      margin: 0;
+    }
   }
 
   &__dismiss {
diff --git a/styles/components/_progress_menu.scss b/styles/components/_progress_menu.scss
index 3cb2808f..90780705 100644
--- a/styles/components/_progress_menu.scss
+++ b/styles/components/_progress_menu.scss
@@ -3,8 +3,10 @@
 
   ul {
     list-style: none;
-    margin: 0;
+    margin: auto;
+    width: 50%;
     padding: 0;
+    padding-top: $gap;
   }
 
   &--two {
@@ -40,7 +42,7 @@
     a {
       display: block;
       position: relative;
-      padding: ($gap * 4) ($gap * 2);
+      padding: ($gap * 4) ($gap * 2) 0;
       margin: 0 ($gap * 2);
       text-decoration: none;
       text-align: center;
diff --git a/templates/applications/fragments/new_member_modal_content.html b/templates/applications/fragments/new_member_modal_content.html
index 94bbc64e..5e835e5b 100644
--- a/templates/applications/fragments/new_member_modal_content.html
+++ b/templates/applications/fragments/new_member_modal_content.html
@@ -2,10 +2,8 @@
 {% import "applications/fragments/member_form_fields.html" as member_fields %}
 
 {% macro MemberFormTemplate(title, next_button, previous=True) %}
-  <div class="modal__form--header">
-    <h1>{{ Icon('avatar') }} {{ title }}</h1>
-    <hr>
-  </div>
+  <hr>
+  <h1>{{ Icon('avatar') }} {{ title }}</h1>
 
   {{ caller() }}
 
diff --git a/templates/applications/settings.html b/templates/applications/settings.html
index 62c8eed6..362d4e7b 100644
--- a/templates/applications/settings.html
+++ b/templates/applications/settings.html
@@ -6,7 +6,6 @@
 {% import "applications/fragments/new_member_modal_content.html" as member_steps %}
 {% from "fragments/members.html" import MemberManagementTemplate %}
 {% from "components/modal.html" import Modal %}
-{% from "components/multi_step_modal_form.html" import MultiStepModalForm %}
 {% from "components/pagination.html" import Pagination %}
 {% from "components/save_button.html" import SaveButton %}
 {% from "components/text_input.html" import TextInput %}
diff --git a/templates/components/multi_step_modal_form.html b/templates/components/multi_step_modal_form.html
index 23d21ffa..a7f71edf 100644
--- a/templates/components/multi_step_modal_form.html
+++ b/templates/components/multi_step_modal_form.html
@@ -28,12 +28,12 @@
 {% macro MultiStepModalForm(name, form, form_action, steps, dismissable=False) -%}
   {% set step_count = steps|length %}
   <multi-step-modal-form inline-template :steps={{ step_count }}>
-    {% call Modal(name=name, dismissable=dismissable, classes="wide") %}
+    {% call Modal(name=name, dismissable=dismissable) %}
       <form id="{{ name }}" action="{{ form_action }}" method="POST" v-on:submit="handleSubmit">
         {{ form.csrf_token }}
         <div v-if="$root.activeModal === '{{ name }}'">
           {% for step in steps %}
-            <div class="modal__form" v-show="step === {{ loop.index0 }}">
+            <div v-show="step === {{ loop.index0 }}">
               {{ FormSteps(step_count, loop.index) }}
               {{ step }}
             </div>
diff --git a/templates/portfolios/fragments/add_new_portfolio_member.html b/templates/portfolios/fragments/add_new_portfolio_member.html
index 82654c01..931f3db7 100644
--- a/templates/portfolios/fragments/add_new_portfolio_member.html
+++ b/templates/portfolios/fragments/add_new_portfolio_member.html
@@ -16,9 +16,8 @@
 {% endmacro %}
 
 {% set step_one %}
-  <div class="modal__form--header">
-    <h1>Invite new portfolio member</h1>
-  </div>
+  <hr>
+  <h1>Invite new portfolio member</h1>
   <div class='form-row'>
     <div class='form-col form-col--half'>
       {{ TextInput(member_form.user_data.first_name, validation='requiredField', optional=False) }}
@@ -47,32 +46,29 @@
         type='button'
         v-on:click="next()"
         v-bind:disabled="invalid"
-        class='action-group__action usa-button'
+        class='action-group__action usa-button usa-button-primary'
         value='Next'>
     <a class='action-group__action icon-link icon-link--default' v-on:click="closeModal('{{ new_port_mem }}')">Cancel</a>
   </div>
 {% endset %}
 {% set step_two %}
-  <div class="modal__form--padded">
-    <div class="modal__form--header">
-      <h1>Assign member permissions</h1>
-      <a class='icon-link'>
-        {{ Icon('info') }}
-        {{ "portfolios.admin.permissions_info" | translate }}
-      </a>
-    </div>
-    {{ SimpleOptionsInput(member_form.permission_sets.perms_app_mgmt) }}
-    {{ SimpleOptionsInput(member_form.permission_sets.perms_funding) }}
-    {{ SimpleOptionsInput(member_form.permission_sets.perms_reporting) }}
-    {{ SimpleOptionsInput(member_form.permission_sets.perms_portfolio_mgmt) }}
-    <div class='action-group'>
-      <input
-        type="submit"
-        class='action-group__action usa-button'
-        form="add-port-mem"
-        value='Invite member'>
-      <a class='action-group__action icon-link icon-link--default' v-on:click="closeModal('{{ new_port_mem }}')">Cancel</a>
-    </div>
+  <hr>
+  <h1>Assign member permissions</h1>
+  <a class='icon-link'>
+    {{ Icon('info') }}
+    {{ "portfolios.admin.permissions_info" | translate }}
+  </a>
+  {{ SimpleOptionsInput(member_form.permission_sets.perms_app_mgmt) }}
+  {{ SimpleOptionsInput(member_form.permission_sets.perms_funding) }}
+  {{ SimpleOptionsInput(member_form.permission_sets.perms_reporting) }}
+  {{ SimpleOptionsInput(member_form.permission_sets.perms_portfolio_mgmt) }}
+  <div class='action-group'>
+    <input
+      type="submit"
+      class='action-group__action usa-button usa-button-primary'
+      form="add-port-mem"
+      value='Invite member'>
+    <a class='action-group__action icon-link icon-link--default' v-on:click="closeModal('{{ new_port_mem }}')">Cancel</a>
   </div>
 {% endset %}
 {{ MultiStepModalForm(
diff --git a/templates/portfolios/fragments/change_ppoc.html b/templates/portfolios/fragments/change_ppoc.html
index ddd5b7d1..1204da86 100644
--- a/templates/portfolios/fragments/change_ppoc.html
+++ b/templates/portfolios/fragments/change_ppoc.html
@@ -6,9 +6,8 @@
 {% from "components/options_input.html" import OptionsInput %}
 
 {% set step_one %}
-  <div class="modal__form--header">
-    <h1>{{ "fragments.ppoc.update_ppoc_title" | translate }}</h1>
-  </div>
+  <hr>
+  <h1>{{ "fragments.ppoc.update_ppoc_title" | translate }}</h1>
 
   {{
     Alert(
@@ -43,28 +42,25 @@
 {% endset %}
 
 {% set step_two %}
-  <div class="modal__form--padded">
-    <div class="modal__form--header">
-      <h1>{{ "fragments.ppoc.update_ppoc_confirmation_title" | translate }}</h1>
-    </div>
+  <hr>
+  <h1>{{ "fragments.ppoc.update_ppoc_confirmation_title" | translate }}</h1>
 
-    {{
-      Alert(
-        level="info",
-        title=("fragments.ppoc.confirm_alert.title" | translate),
-      )
-    }}
+  {{
+    Alert(
+      level="info",
+      title=("fragments.ppoc.confirm_alert.title" | translate),
+    )
+  }}
 
-    <div class='action-group'>
-      <input
-        type="submit"
-        class='action-group__action usa-button'
-        form="change-ppoc-form"
-        value='{{ "common.confirm" | translate }}'>
-      <a class='action-group__action icon-link icon-link--default' v-on:click="closeModal('change-ppoc-form')">
-        {{ "common.cancel" | translate }}
-      </a>
-    </div>
+  <div class='action-group'>
+    <input
+      type="submit"
+      class='action-group__action usa-button'
+      form="change-ppoc-form"
+      value='{{ "common.confirm" | translate }}'>
+    <a class='action-group__action icon-link icon-link--default' v-on:click="closeModal('change-ppoc-form')">
+      {{ "common.cancel" | translate }}
+    </a>
   </div>
 {% endset %}