Merge pull request #1104 from dod-ccpo/modal-styling-update

Modal styling update

.secrets.baseline

@@ -3,7 +3,7 @@
     "files": "^.secrets.baseline$",
     "lines": null
   },
-  "generated_at": "2019-10-02T23:24:50Z",
+  "generated_at": "2019-10-03T14:34:50Z",
   "plugins_used": [
     {
       "base64_limit": 4.5,

js/test_templates/to_form.html

@@ -23,9 +23,13 @@
 <div class="modal__container">
 <div aria-modal="true" class="modal__dialog" role="dialog">
 <div class="modal__body">
+<!-- Use these elements in caller for modal to be styled properly -->
+<!-- h1 for header text -->
+<!-- hr -->
+<!-- div class='action-group' for buttons -->
 <div class="task-order__modal-cancel">
 <h1>Do you want to save this draft?</h1>
-<div class="task-order__modal-cancel_buttons">
+<div class="action-group">
 <button class="usa-button usa-button-primary" formaction="/portfolios/e4edf994-04f4-4aaa-ba30-39507e1068a8/task_orders/form/cancel?save=False" type="submit">No, delete it</button>
 <button class="usa-button usa-button-primary" formaction="/portfolios/e4edf994-04f4-4aaa-ba30-39507e1068a8/task_orders/form/cancel?save=True" type="submit">Yes, save for later</button>
 </div>
@@ -33,9 +37,6 @@
 <button class="icon-link modal__dismiss" type="button" v-on:click='closeModal("cancel")'>
 <span aria-hidden="true" class="icon icon--x"><svg viewbox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M2 2l12 12M14 15c-.256 0-.512-.098-.707-.293l-12-12c-.391-.391-.391-1.023 0-1.414s1.023-.391 1.414 0l12 12c.391.391.391 1.023 0 1.414-.195.195-.451.293-.707.293zm0-13L2 14"></path><path d="M2 15c-.256 0-.512-.098-.707-.293-.391-.391-.391-1.023 0-1.414l12-12c.391-.391 1.023-.391 1.414 0s.391 1.023 0 1.414l-12 12C2.512 14.902 2.256 15 2 15z"></path></svg>
 </span>
-<span>
-                  Close
-                </span>
 </button>
 </div>
 </div>

styles/components/_error_page.scss

@@ -8,7 +8,6 @@
       padding: $gap 0;
 
       hr {
-        width: 100%;
         border: 1px solid $color-red;
       }
 
@@ -20,16 +19,16 @@
     &__body {
       padding: $gap * 2;
       margin: 0;
+
+      hr {
+        width: 80%;
+        margin: auto;
+        margin-bottom: $gap * 3;
+      }
     }
   }
 
   .icon {
     @include icon-size(60);
   }
-
-  hr {
-    margin-bottom: $gap * 4;
-    width: 80%;
-    border: 0.5px solid $color-gray-light;
-  }
 }

styles/components/_forms.scss

@@ -197,6 +197,5 @@
 
   & > fieldset.usa-input__choices label {
     display: inline;
-    font-weight: $font-normal;
   }
 }

styles/components/_modal.scss

@@ -50,9 +50,8 @@ body {
 
   &__body {
     background-color: $color-white;
-    padding: $gap * 2;
+    padding: $gap * 1.5;
     width: 100%;
-    border-radius: 5px;
     overflow-y: auto;
     -ms-overflow-style: scrollbar;
 
@@ -60,10 +59,6 @@ body {
       max-height: calc(100vh - #{$gap * 8});
     }
 
-    @include media($medium-screen) {
-      padding: $gap * 2.5 $gap * 5;
-    }
-
     h1,
     h2 {
       @include h3;
@@ -121,13 +116,22 @@ body {
         }
       }
     }
+
+    .action-group {
+      background-color: $color-gray-lightest;
+      padding: $gap * 2;
+      margin: ($gap * 5) (-$gap * 1.5) (-$gap * 1.5);
+    }
+
+    .form-row {
+      margin: 0;
+    }
   }
 
   &__dismiss {
     position: absolute;
     top: $gap;
     right: $gap;
-    width: 8rem;
 
     @include media($medium-screen) {
       top: $gap * 2;
@@ -140,99 +144,14 @@ body {
     }
   }
 
-  &--dissmissable {
-    .modal__body {
-      > :first-child {
-        margin-right: 8rem;
-      }
-    }
-  }
-
-  &__form {
-    &--header {
-      margin-bottom: 4rem;
-      text-align: left;
-
-      h1 {
-        margin-bottom: 0;
-      }
-
-      .icon-link {
-        padding-top: 0.5rem;
-        padding-left: 0;
-        margin-left: 0;
-      }
-    }
-
-    &--padded {
-      padding-left: 5%;
-      padding-right: 5%;
-
-      .usa-input .usa-input__choices select {
-        max-width: 100%;
-      }
-    }
-
-    .progress-menu ul {
-      width: 40%;
-      margin-left: 30%;
-      font-size: 2rem;
-
-      &__item::before {
-        width: 2.8rem;
-        height: 2.8rem;
-        margin-left: -1.25rem;
-      }
-
-      &__item--complete::before {
-        content: url("#{$asset-path}/icons/checkmark-alt.svg");
-        padding-top: 0.4rem;
-      }
-    }
-
-    .form-row {
-      margin-top: 0;
-      margin-bottom: 0;
-
-      .form-col {
-        .usa-input {
-          margin-bottom: 1.5rem;
-        }
-      }
-    }
-
-    .icon-link--default {
-      font-size: 1.7rem;
-    }
-
-    .usa-button {
-      margin-left: 2rem;
-
-      &[type="button"]:disabled {
-        background-color: $color-gray-lighter;
-        opacity: inherit;
-      }
-    }
-  }
-
-  &.wide {
-    .modal__dialog {
-      max-width: 90rem;
-      width: 100%;
-    }
-
-    .modal__body {
-      padding-left: 4rem;
-      padding-right: 4rem;
-    }
-  }
-
   .usa-button {
     min-width: 17rem;
   }
 
-  .usa-input .checkbox {
+  .usa-input {
-    margin-left: 3rem;
+    .checkbox {
+      margin-left: 3rem;
+    }
   }
 
   input[type="checkbox"] {
@@ -241,3 +160,9 @@ body {
     }
   }
 }
+
+.modal--dismissable {
+  .modal__body {
+    padding-top: $gap * 3.5;
+  }
+}

styles/components/_portfolio_layout.scss

@@ -157,7 +157,6 @@
     }
 
     input.usa-button.usa-button-primary {
-      margin: 0;
       width: 9rem;
       height: 4rem;
     }
@@ -590,3 +589,13 @@
     }
   }
 }
+
+#modal--add-port-mem {
+  .modal__body {
+    width: 55rem;
+  }
+
+  .form-col:last-child {
+    margin-right: $gap * 3;
+  }
+}

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;

styles/core/_util.scss

@@ -80,3 +80,9 @@
 p {
   max-width: 80ch;
 }
+
+hr {
+  border: 0;
+  border-bottom: 1px solid $color-gray-light;
+  margin: ($gap * 3) ($site-margins * -4);
+}

styles/elements/_inputs.scss

@@ -88,6 +88,7 @@
 
   &__title {
     align-items: center;
+    font-weight: $font-normal;
 
     &-inline {
       display: inline-block;

styles/elements/_panels.scss

@@ -119,11 +119,4 @@
   &__actions {
     @include panel-actions;
   }
-
-  hr,
-  &__break {
-    border: 0;
-    border-bottom: 1px solid $color-gray-light;
-    margin: ($gap * 4) ($site-margins * -4);
-  }
 }

styles/sections/_application_edit.scss

@@ -34,6 +34,10 @@
 
   .input__inline-fields {
     text-align: left;
+
+    .usa-input__choices label {
+      font-weight: $font-bold;
+    }
   }
 
   .input__inline-fields {
@@ -77,11 +81,6 @@
       }
     }
   }
-
-  hr {
-    border: none;
-    border-bottom: 1px solid $color-gray-lighter;
-  }
 }
 
 .environment-roles {
@@ -110,7 +109,7 @@
     }
 
     hr {
-      margin: 0.5em;
+      margin: 0.5em 0;
     }
   }
 

styles/sections/_home.scss

@@ -18,13 +18,6 @@
     margin-top: 0;
   }
 
-  hr {
-    border: 0;
-    border-bottom: 1px solid $color-gray-light;
-    margin-top: $gap * 4;
-    margin-bottom: $gap * 4;
-  }
-
   .links {
     justify-content: flex-start;
 

styles/sections/_reports.scss

@@ -8,7 +8,6 @@
   &__col {
     hr {
       margin: (2 * $gap) 0;
-      border-bottom: 1px solid $color-gray-lightest;
     }
 
     @include media($medium-screen) {

styles/sections/_task_order.scss

@@ -29,10 +29,8 @@
   }
 
   hr {
-    border: 0;
+    margin-left: auto;
-    margin-top: $gap * 4;
+    margin-right: auto;
-    margin-bottom: $gap * 4;
-    border-bottom: 1px solid $color-gray-lighter;
   }
 
   table {
@@ -139,77 +137,6 @@
     }
   }
 
-  .usa-input__title,
-  .usa-input__title-inline {
-    font-weight: $font-normal;
-  }
-
-  &.task_order__form {
-    hr {
-      margin-top: 1.5rem;
-    }
-
-    .totals-box {
-      margin-top: 0;
-    }
-
-    .icon {
-      left: 100%;
-      &.icon--question {
-        @include icon-color($color-blue);
-      }
-    }
-
-    input {
-      max-width: unset;
-    }
-
-    .date-picker {
-      .usa-input__title {
-        font-weight: $font-bold;
-        margin-bottom: $gap;
-      }
-    }
-
-    .usa-form-group-year {
-      margin-right: 0.4rem;
-    }
-
-    .usa-alert {
-      margin: 1.5em 0;
-    }
-
-    .usa-input {
-      margin-top: $gap;
-      margin-bottom: $gap;
-    }
-
-    .form-row {
-      margin-bottom: 0;
-
-      .usa-input {
-        margin-left: $gap;
-        margin-right: $gap;
-      }
-
-      .form-col:first-child {
-        .usa-input {
-          margin-left: 0;
-        }
-      }
-
-      .form-col:last-child {
-        .usa-input {
-          margin-right: 0;
-        }
-      }
-    }
-
-    .task-order__pdf-help-text {
-      margin-bottom: 4 * $gap;
-    }
-  }
-
   .panel {
     @include shadow-panel;
   }
@@ -271,15 +198,6 @@
   text-align: center;
 }
 
-.task-order__modal-cancel_buttons {
-  display: flex;
-  justify-content: center;
-
-  button {
-    margin-top: 0;
-  }
-}
-
 .clin-card {
   width: 62rem;
   position: relative;

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">
+  <hr>
-    <h1>{{ Icon('avatar') }} {{ title }}</h1>
+  <h1>{{ Icon('avatar') }} {{ title }}</h1>
-    <hr>
-  </div>
 
   {{ caller() }}
 
@@ -18,7 +16,7 @@
           class='action-group__action usa-button usa-button-secondary'
           value='{{ "common.previous" | translate }}'>
     {% endif %}
-    <a class='action-group__action icon-link icon-link--default' v-on:click="closeModal('{{ new_port_mem }}')">{{ "common.cancel" | translate }}</a>
+    <a class='action-group__action' v-on:click="closeModal('{{ new_port_mem }}')">{{ "common.cancel" | translate }}</a>
   </div>
 {% endmacro %}
 

templates/applications/new/step_1.html

@@ -31,7 +31,7 @@
               {{ ('portfolios.applications.new.step_1_form_help_text.description' | translate | safe) }}
             </div>
           </div>
-          <hr class="panel__break">
+          <hr>
           <div class="form-row">
             <div class="form-col form-col--two-thirds">
               {{ TextInput(form.description, paragraph=True, optional=True) }}

templates/applications/new/step_2.html

@@ -20,7 +20,7 @@
     <p>
       {{ 'portfolios.applications.new.step_2_description' | translate }}
     </p>
-    <hr class="panel__break">
+    <hr>
     <application-environments inline-template v-bind:initial-data='{{ form.data|tojson }}'>
       <form method="POST" action="{{ url_for('applications.update_new_application_step_2', portfolio_id=portfolio.id, application_id=application.id) }}" v-on:submit="handleSubmit">
         <div class="subheading">{{ 'portfolios.applications.environments_heading' | translate }}</div>

templates/applications/new/step_3.html

@@ -15,7 +15,7 @@
     <p>
       {{ ('portfolios.applications.new.step_3_description' | translate) }}
     </p>
-    <hr class="panel__break">
+    <hr>
 
     {{ MemberManagementTemplate(
       application, 

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 %}
@@ -219,7 +218,7 @@
 
     {% call Modal(name="delete-application") %}
       <h1>{{ "portfolios.applications.delete.header" | translate }}</h1>
-
+      <hr>
       {{
         Alert(
           title=("components.modal.destructive_title" | translate),

templates/ccpo/users.html

@@ -59,6 +59,8 @@
     {% for user, form in users_info %}
       {% set modal_id = "disable_ccpo_user_{}".format(user.dod_id) %}
       {% call Modal(name=modal_id) %}
+        <h1>Disable CCPO User</h1>
+        <hr>
         {{
           Alert(
             title=("components.modal.destructive_title" | translate),

templates/components/delete_confirmation.html

@@ -16,9 +16,7 @@
             {{ delete_text }}
           </button>
         </form>
-        <div class="action-group">
+        <a v-on:click="deleteText = ''; $root.closeModal('{{ modal_id }}')" class="action-group__action icon-link icon-link--default">{{ "common.cancel" | translate }}</a>
-          <a v-on:click="deleteText = ''; $root.closeModal('{{ modal_id }}')" class="action-group__action icon-link icon-link--default">{{ "common.cancel" | translate }}</a>
-        </div>
       </div>
     </div>
   </delete-confirmation>

templates/components/modal.html

@@ -6,14 +6,16 @@
       <div class='modal__container'>
         <div class='modal__dialog' role='dialog' aria-modal='true'>
           <div class='modal__body'>
+            <!-- Use these elements in caller for modal to be styled properly -->
+            <!-- h1 for header text -->
+            <!-- hr -->
+            <!-- div class='action-group' for buttons -->
+
             {{ caller() }}
 
             {% if dismissable %}
               <button type='button' class='icon-link modal__dismiss' v-on:click='closeModal("{{name}}")'>
                 {{ Icon('x') }}
-                <span>
-                  {{ "common.close" | translate }}
-                </span>
               </button>
             {% endif %}
           </div>

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/error.html

@@ -17,8 +17,8 @@
         {%- endif %}
       </p>
     </div>
-    <hr>
     <div class="panel__body">
+      <hr>
       <p>
         {{ "common.lorem" | translate }}
       </p>

templates/fragments/members.html

@@ -58,7 +58,7 @@
     {% for member in members %}
       {%- if user_can_edit_app_member %}
         {% set modal_name = "edit_member-{}".format(loop.index) %}
-        {% call Modal(modal_name) %}
+        {% call Modal(modal_name, classes="form-content--app-mem") %}
           <div class="modal__form--header">
             <h1>{{ Icon('avatar') }} {{ member.user_name }}</h1>
             <hr>
@@ -88,7 +88,7 @@
                 {{ member_fields.InfoFields(member.update_invite_form) }}
                 <div class="action-group">
                   {{ SaveButton(text='Resend Invite', element='input', additional_classes='action-group__action') }}
-                  <a class='action-group__action usa-button usa-button-secondary' v-on:click="closeModal('{{ resend_invite_modal }}')">{{ "common.cancel" | translate }}</a>
+                  <a class='action-group__action' v-on:click="closeModal('{{ resend_invite_modal }}')">{{ "common.cancel" | translate }}</a>
                 </div>
               </form>
             </base-form>
@@ -98,17 +98,17 @@
 
       {% if user_can_delete_app_member and member.role_status == 'pending' -%}
         {% set revoke_invite_modal = "revoke_invite_{}".format(member.role_id) %}
-        {% call Modal(name=revoke_invite_modal, dismissable=True) %}
+        {% call Modal(name=revoke_invite_modal) %}
-          <div class="task-order__modal-cancel">
+          <form method="post" action="{{ url_for('applications.revoke_invite', application_id=application.id, application_role_id=member.role_id) }}">
-            <form method="post" action="{{ url_for('applications.revoke_invite', application_id=application.id, application_role_id=member.role_id) }}">
+            {{ member.form.csrf_token }}
-              {{ member.form.csrf_token }}
+            <h1>{{ "invites.revoke" | translate }}</h1>
-              <h1>{{ "invites.revoke.modal_heading" | translate({'user_name': member.user_name}) }}</h1>
+            <hr>
-              <div class="task-order__modal-cancel_buttons">
+            {{ "invites.revoke_modal_text" | translate({"application": application.name}) }}
-                <button class="usa-button usa-button-primary" type="submit">{{ "invites.revoke.submit" | translate }}</button>
+            <div class="action-group">
-                <button type='button' v-on:click='closeModal("{{revoke_invite_modal}}")' class="usa-button usa-button-primary">{{ "invites.revoke.cancel" | translate }}</button>
+              <button class="action-group__action usa-button usa-button-primary" type="submit">{{ "invites.revoke" | translate }}</button>
-              </div>
+              <button class='action-group__action usa-button usa-button-secondary' v-on:click='closeModal("{{revoke_invite_modal}}")' type="button">{{ "common.cancel" | translate }}</button>
-            </form>
+            </div>
-          </div>
+          </form>
         {% endcall %}
       {%- endif %}
     {% endfor %}
@@ -156,7 +156,7 @@
                     {% set resend_invite_modal = "resend_invite-{}".format(member.role_id) %}
                     <a v-on:click='openModal("{{ resend_invite_modal }}")'>Resend Invite</a><br>
                     {% if user_can_delete_app_member -%}
-                      <a v-on:click='openModal("{{ revoke_invite_modal }}")'>{{ 'invites.revoke.button' | translate }}</a>
+                      <a v-on:click='openModal("{{ revoke_invite_modal }}")'>{{ 'invites.revoke' | translate }}</a>
                     {%- endif %}
                   {%- endif %}
                 </td>

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>
+  <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,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>
+    <a class='action-group__action' 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>
-      <h1>Assign member permissions</h1>
+  <a class='icon-link'>
-      <a class='icon-link'>
+    {{ Icon('info') }}
-        {{ Icon('info') }}
+    {{ "portfolios.admin.permissions_info" | translate }}
-        {{ "portfolios.admin.permissions_info" | translate }}
+  </a>
-      </a>
+  {{ SimpleOptionsInput(member_form.permission_sets.perms_app_mgmt) }}
-    </div>
+  {{ SimpleOptionsInput(member_form.permission_sets.perms_funding) }}
-    {{ SimpleOptionsInput(member_form.permission_sets.perms_app_mgmt) }}
+  {{ SimpleOptionsInput(member_form.permission_sets.perms_reporting) }}
-    {{ SimpleOptionsInput(member_form.permission_sets.perms_funding) }}
+  {{ SimpleOptionsInput(member_form.permission_sets.perms_portfolio_mgmt) }}
-    {{ SimpleOptionsInput(member_form.permission_sets.perms_reporting) }}
+  <div class='action-group'>
-    {{ SimpleOptionsInput(member_form.permission_sets.perms_portfolio_mgmt) }}
+    <input
-    <div class='action-group'>
+      type="submit"
-      <input
+      class='action-group__action usa-button usa-button-primary'
-        type="submit"
+      form="add-port-mem"
-        class='action-group__action usa-button'
+      value='Invite member'>
-        form="add-port-mem"
+    <a class='action-group__action' v-on:click="closeModal('{{ new_port_mem }}')">Cancel</a>
-        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(

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>
+  <h1>{{ "fragments.ppoc.update_ppoc_title" | translate }}</h1>
-  </div>
 
   {{
     Alert(
@@ -43,28 +42,25 @@
 {% endset %}
 
 {% set step_two %}
-  <div class="modal__form--padded">
+  <hr>
-    <div class="modal__form--header">
+  <h1>{{ "fragments.ppoc.update_ppoc_confirmation_title" | translate }}</h1>
-      <h1>{{ "fragments.ppoc.update_ppoc_confirmation_title" | translate }}</h1>
-    </div>
 
-    {{
+  {{
-      Alert(
+    Alert(
-        level="info",
+      level="info",
-        title=("fragments.ppoc.confirm_alert.title" | translate),
+      title=("fragments.ppoc.confirm_alert.title" | translate),
-      )
+    )
-    }}
+  }}
 
-    <div class='action-group'>
+  <div class='action-group'>
-      <input
+    <input
-        type="submit"
+      type="submit"
-        class='action-group__action usa-button'
+      class='action-group__action usa-button'
-        form="change-ppoc-form"
+      form="change-ppoc-form"
-        value='{{ "common.confirm" | translate }}'>
+      value='{{ "common.confirm" | translate }}'>
-      <a class='action-group__action icon-link icon-link--default' v-on:click="closeModal('change-ppoc-form')">
+    <a class='action-group__action icon-link icon-link--default' v-on:click="closeModal('change-ppoc-form')">
-        {{ "common.cancel" | translate }}
+      {{ "common.cancel" | translate }}
-      </a>
+    </a>
-    </div>
   </div>
 {% endset %}
 

templates/portfolios/fragments/delete_portfolio.html

@@ -21,7 +21,7 @@
   <h1>
     {{ 'fragments.delete_portfolio.title' | translate }}
   </h1>
-
+  <hr>
   {{
     Alert(
       level="warning",

templates/portfolios/fragments/portfolio_members.html

@@ -81,6 +81,7 @@
           {% set modal_id = "portfolio_id_{}_user_id_{}".format(portfolio.id, subform.member_id.data) %}
           {% call Modal(name=modal_id, dismissable=False) %}
             <h1>{{ "portfolios.admin.alert_header" | translate }}</h1>
+            <hr>
             {{
               Alert(
                 title="portfolios.admin.alert_title" | translate,
@@ -88,16 +89,14 @@
                 level="warning"
               )
             }}
-            <div class="panel__footer">
+            <div class="action-group">
-              <div class="action-group">
+              <form method="POST" action="{{ url_for('portfolios.remove_member', portfolio_id=portfolio.id, portfolio_role_id=subform.member_id.data)}}">
-                <form method="POST" action="{{ url_for('portfolios.remove_member', portfolio_id=portfolio.id, portfolio_role_id=subform.member_id.data)}}">
+                {{ member_perms_form.csrf_token }}
-                  {{ member_perms_form.csrf_token }}
+                <button class="usa-button usa-button-danger">
-                  <button class="usa-button usa-button-danger">
+                  {{ "portfolios.members.archive_button" | translate }}
-                    {{ "portfolios.members.archive_button" | translate }}
+                </button>
-                  </button>
+              </form>
-                </form>
+              <a v-on:click="closeModal('{{ modal_id }}')" class="action-group__action icon-link icon-link--default">{{ "common.cancel" | translate }}</a>
-                <a v-on:click="closeModal('{{ modal_id }}')" class="action-group__action icon-link icon-link--default">{{ "common.cancel" | translate }}</a>
-              </div>
             </div>
           {% endcall %}
         {% endfor %}

templates/portfolios/new.html

@@ -11,7 +11,7 @@
   {% include "fragments/flash.html" %}
   <h1>New Portfolio Form</h1>
   <base-form inline-template>
-    <form id="portfolio-create" action="{{ url_for('portfolios.create_portfolio') }}" method="POST">
+    <form class="panel__content" id="portfolio-create" action="{{ url_for('portfolios.create_portfolio') }}" method="POST">
       {{ form.csrf_token }}
 
       {{ TextInput(form.name, optional=False) }}

templates/styleguide.html

@@ -10,7 +10,7 @@
 
   {% call Modal(name='styleguideModal', dismissable=True) %}
     <h1>A modal dialog</h1>
-
+    <hr>
     <p>We count thirty Rebel ships, Lord Vader. But they're so small they're evading our turbo-lasers! We'll have to destroy them ship to ship. Get the crews to their fighters. Luke, let me know when you're going in. I'm on my way in now... Watch yourself! There's a lot of fire coming from the right side of that deflection tower. I'm on it. Squad leaders, we've picked up a new group of signals. Enemy fighters coming your way.</p>
     <p>I hope the old man got that tractor beam out if commission, or this is going to be a real short trip. Okay, hit it! We're coming up on the sentry ships. Hold 'em off! Angle the deflector shields while I charge up the main guns! I can't believe he's gone. There wasn't anything you could have done. Come on, buddy, we're not out of this yet! You in, kid? Okay, stay sharp!</p>
 

templates/task_orders/builder_base.html

@@ -37,7 +37,7 @@
       {% call Modal(name='cancel', dismissable=True) %}
         <div class="task-order__modal-cancel">
           <h1>Do you want to save this draft?</h1>
-          <div class="task-order__modal-cancel_buttons">
+          <div class="action-group">
             <button formaction="{{ cancel_discard_url }}" class="usa-button usa-button-primary" type="submit">No, delete it</button>
             <button formaction="{{ cancel_save_url }}" class="usa-button usa-button-primary" type="submit">Yes, save for later</button>
           </div>

translations.yaml

@@ -267,11 +267,8 @@ fragments:
     update_ppoc_confirmation_title: Confirmation
     update_ppoc_title: Update primary point of contact
 invites:
-  revoke:
+  revoke: Revoke Invite
-    button: Revoke Invite
+  revoke_modal_text: "By revoking this invitation to {application}, you are confirming that this member will no longer have access."
-    modal_heading: 'Do you want to revoke the invite for {user_name}?'
-    submit: Yes, revoke it
-    cancel: No, do not revoke it
 login:
   ccpo_logo_alt_text: Cloud Computing Program Office Logo
   certificate_selection: