more styling for new portfolio member modal

styles/components/_modal.scss

@@ -140,7 +140,36 @@ body {
     }
   }
 
-  .modal--form {
+  &.wide {
+    .modal__dialog {
+      max-width: 90rem;
+    }
+
+    .modal__body {
+      padding-left: 4rem;
+      padding-right: 4rem;
+    }
+  }
+
+  .modal__form {
+
+    .modal__form--header {
+      margin-bottom: 4rem;
+
+      h1 {
+        margin-bottom: 0;
+      }
+
+      .icon-link {
+        padding-top: 0.5rem;
+        padding-left: 0;
+
+        .icon {
+          margin-left: 0;
+        }
+      }
+    }
+
     .progress-menu ul {
       width: 40%;
       margin-left: 30%;
@@ -157,5 +186,32 @@ body {
         padding-top: 0.4rem;
       }
     }
+
+    .form-row {
+      margin-top: 0;
+
+      .form-col {
+        .usa-input {
+          margin-bottom: 1.5rem;
+        }
+      }
+    }
+
+    .icon-link--default {
+      font-size: 1.7rem;
+    }
+
+    .usa-button {
+      margin-left: 2rem;
+    }
+
+    .modal__form--padded {
+      padding-left: 5%;
+      padding-right: 5%;
+
+      .usa-input .usa-input__choices select {
+        max-width: 100%;
+      }
+    }
   }
 }

templates/components/modal.html

@@ -1,8 +1,8 @@
 {% from "components/icon.html" import Icon %}
 
-{% macro Modal(name, dismissable=False) -%}
+{% macro Modal(name, dismissable=False, classes="") -%}
   <div v-show="activeModal === '{{name}}'" v-cloak>
-    <div id='modal--{{name}}' class='modal {% if dismissable %}modal--dismissable{% endif%}'>
+    <div id='modal--{{name}}' class='modal {% if dismissable %}modal--dismissable{% endif%} {{ classes }}'>
       <div class='modal__container'>
         <div class='modal__dialog' role='dialog' aria-modal='true'>
           <div class='modal__body'>

templates/components/multi_step_modal_form.html

@@ -31,9 +31,9 @@
       <button v-on:click="openModal('{{ name }}')" type="button" class="icon-link">{{ button_text }}</button>
       <form action="{{ form_action }}" method="POST">
         {{ form.csrf_token }}
-        {% call Modal(name=name, dismissable=dismissable) %}
+        {% call Modal(name=name, dismissable=dismissable, classes="wide") %}
           {% for step in steps %}
-            <div class="modal--form" v-show="step === {{ loop.index0 }}">
+            <div class="modal__form" v-show="step === {{ loop.index0 }}">
               {{ FormSteps(step_count, loop.index) }}
               {{ step }}
             </div>

templates/components/options_input.html

@@ -7,7 +7,8 @@
     inline-template
     {% if field.errors %}v-bind:initial-errors='{{ field.errors | list }}'{% endif %}
     {% if field.data and field.data != "None" %}v-bind:initial-value="'{{ field.data }}'"{% endif %}
-    key='{{ field.name }}'>
+    key='{{ field.name }}'
+    >
     <div
       v-bind:class="['usa-input', { 'usa-input--error': showError, 'usa-input--success': showValid }]">
 

templates/portfolios/admin.html

@@ -4,7 +4,19 @@
 {% from "components/icon.html" import Icon %}
 {% from "components/text_input.html" import TextInput %}
 {% from "components/multi_step_modal_form.html" import MultiStepModalForm %}
-{% from "components/options_input.html" import OptionsInput %}
+
+{% macro SimpleOptionsInput(field) %}
+  <div class="usa-input">
+    <fieldset data-ally-disabled="true" class="usa-input__choices">
+      <legend>
+        <div class="usa-input__title-inline">
+          {{ field.label | striptags}}
+        </div>
+      </legend>
+      {{ field() }}
+    </fieldset>
+  </div>
+{% endmacro %}
 
 {% set secondary_breadcrumb = "navigation.portfolio_navigation.portfolio_admin" | translate %}
 
@@ -53,7 +65,9 @@
     {% endif %}
 
     {% set step_one %}
-      <h1>Invite New Portfolio Member</h1>
+      <div class="modal__form--header">
+        <h1>Invite New Portfolio Member</h1>
+      </div>
       <div class='form-row'>
         <div class='form-col form-col--half'>
           {{ TextInput(member_form.first_name, validation='requiredField') }}
@@ -79,22 +93,26 @@
       </div>
       <div class='action-group'>
         <a v-on:click="next()" class='action-group__action usa-button'>Next Step</a>
-        <a class='action-group__action icon-link icon-link--danger' v-on:click="closeModal('{{ new_port_mem }}')">Cancel</a>
+        <a class='action-group__action icon-link icon-link--default' v-on:click="closeModal('{{ new_port_mem }}')">Cancel</a>
       </div>
     {% endset %}
     {% set step_two %}
-      <h1>Assign Member Permissions</h1>
-      <a class='icon-link'>
-        <span class='icon'>{{ Icon('info') }}</span>
-        {{ "portfolios.admin.permissions_info" | translate }}
-      </a>
-      {{ OptionsInput(member_form.perms_app_mgmt) }}
-      {{ OptionsInput(member_form.perms_funding) }}
-      {{ OptionsInput(member_form.perms_reporting) }}
-      {{ OptionsInput(member_form.perms_portfolio_mgmt) }}
-      <div class='action-group'>
-        <input type="submit" v-on:click="closeModal('{{ new_port_mem }}')" class='action-group__action usa-button' value='Invite Member'>
-        <a class='action-group__action icon-link icon-link--danger' v-on:click="closeModal('{{ new_port_mem }}')">Cancel</a>
+      <div class="modal__form--padded">
+        <div class="modal__form--header">
+          <h1>Assign Member Permissions</h1>
+          <a class='icon-link'>
+            <span class='icon'>{{ Icon('info') }}</span>
+            {{ "portfolios.admin.permissions_info" | translate }}
+          </a>
+        </div>
+        {{ SimpleOptionsInput(member_form.perms_app_mgmt) }}
+        {{ SimpleOptionsInput(member_form.perms_funding) }}
+        {{ SimpleOptionsInput(member_form.perms_reporting) }}
+        {{ SimpleOptionsInput(member_form.perms_portfolio_mgmt) }}
+        <div class='action-group'>
+          <input type="submit" v-on:click="closeModal('{{ new_port_mem }}')" class='action-group__action usa-button' 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(