Low-fi update of modals to fix styling

styles/components/_modal.scss

@@ -120,7 +120,7 @@ body {
     .action-group {
       background-color: $color-gray-lightest;
       padding: $gap * 2;
-      margin: 0 (-$gap * 1.5) (-$gap * 1.5);
+      margin: ($gap * 5) (-$gap * 1.5) (-$gap * 1.5);
     }
 
     hr {

styles/sections/_application_edit.scss

@@ -110,7 +110,7 @@
     }
 
     hr {
-      margin: 0.5em;
+      margin: 0.5em 0;
     }
   }
 

templates/applications/settings.html

@@ -219,7 +219,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/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/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>