Low-fi update of multi-step modals to fix styling

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 {

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;

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>
+  <h1>{{ Icon('avatar') }} {{ title }}</h1>
 
   {{ caller() }}
 

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 %}

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>

templates/portfolios/fragments/add_new_portfolio_member.html

@@ -16,9 +16,8 @@
 {% endmacro %}
 
 {% set step_one %}
-  <div class="modal__form--header">
+  <hr>
   <h1>Invite new portfolio member</h1>
-  </div>
   <div class='form-row'>
     <div class='form-col form-col--half'>
       {{ TextInput(member_form.user_data.first_name, validation='requiredField', optional=False) }}
@@ -47,20 +46,18 @@
         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">
+  <hr>
-    <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) }}
@@ -68,12 +65,11 @@
   <div class='action-group'>
     <input
       type="submit"
-        class='action-group__action usa-button'
+      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>
-  </div>
 {% endset %}
 {{ MultiStepModalForm(
     'add-port-mem',

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">
+  <hr>
   <h1>{{ "fragments.ppoc.update_ppoc_title" | translate }}</h1>
-  </div>
 
   {{
     Alert(
@@ -43,10 +42,8 @@
 {% endset %}
 
 {% set step_two %}
-  <div class="modal__form--padded">
+  <hr>
-    <div class="modal__form--header">
   <h1>{{ "fragments.ppoc.update_ppoc_confirmation_title" | translate }}</h1>
-    </div>
 
   {{
     Alert(
@@ -65,7 +62,6 @@
       {{ "common.cancel" | translate }}
     </a>
   </div>
-  </div>
 {% endset %}
 
 <div class="flex-reverse-row">