Use base form and save button on all forms

js/components/forms/base_form.js

@@ -4,7 +4,6 @@ import optionsinput from '../options_input'
 import DateSelector from '../date_selector'
 import MultiStepModalForm from './multi_step_modal_form'
 import multicheckboxinput from '../multi_checkbox_input'
-import funding from './funding'
 import checkboxinput from '../checkbox_input'
 import levelofwarrant from '../levelofwarrant'
 
@@ -16,7 +15,6 @@ export default {
     DateSelector,
     MultiStepModalForm,
     multicheckboxinput,
-    funding,
     checkboxinput,
     levelofwarrant,
   },

styles/sections/_task_order.scss

@@ -493,12 +493,10 @@
         align-items: center;
         justify-content: flex-end;
 
-        .usa-button {
+        button.usa-button {
           margin-left: 4 * $gap;
           margin-top: 0;
           margin-bottom: 0;
-          padding-top: 0;
-          padding-bottom: 0;
         }
       }
     }

templates/portfolios/admin.html

@@ -15,6 +15,7 @@
       <div class="panel__content">
 
         {% if user_can(permissions.VIEW_PORTFOLIO_NAME) %}
+        <base-form inline-template>
           <form method="POST" action="{{ url_for('portfolios.edit_portfolio', portfolio_id=portfolio.id) }}" autocomplete="false">
             {{ portfolio_form.csrf_token }}
             <div class='form-row'>
@@ -23,7 +24,7 @@
               </div>
 
                 <div class='edit-portfolio-name action-group'>
-                <button type="submit" class="usa-button usa-button-big usa-button-primary" tabindex="0">Save</button>
+                  <savebutton text="Save" classes="usa-button-big" :disabled="disabled"></savebutton>
                 </div>
               </div>
                 <div class='defense-row'>
@@ -37,6 +38,7 @@
                   </div>
                 </div>
             </form>
+          </base-form>
         {% endif %}
       </div>
     </div>

templates/portfolios/task_orders/invitations.html

@@ -59,7 +59,7 @@
             {{ Icon("x") }}
             <span>Cancel</span>
           </a>
-          <input type='submit' class='usa-button usa-button-primary' value='Save Changes' />
+          <savebutton text="Save Changes" :disabled="disabled"></savebutton>
         </div>
       </div>
     </template>

templates/portfolios/task_orders/review.html

@@ -103,7 +103,7 @@
       {% endblock %}
 
       <div class='action-group'>
-        <input type='submit' class='usa-button usa-button-primary' value='Continue' />
+        <savebutton text="Continue" :disabled="disabled"></savebutton>
       </div>
 
     </form>

templates/portfolios/task_orders/so_review.html

@@ -6,7 +6,7 @@
 {% block content %}
 
 {% include "fragments/flash.html" %}
-
+<base-form inline-template>
   <div class="col">
     <div class="panel">
 
@@ -31,13 +31,11 @@
           {{ MultiCheckboxInput(form.required_distribution) }}
 
           <div class="action-group">
-          <button class="usa-button usa-button-big usa-button-primary">
-            Continue
-          </button>
+            <savebutton text="Continue" :disabled="disabled"></savebutton>
           </div>
         </form>
       </div>
     </div>
   </div>
-
+</base-form>
 {% endblock %}

templates/task_orders/signing/signature_requested.html

@@ -5,6 +5,7 @@
 {% from "components/icon.html" import Icon %}
 
 {% block content %}
+<base-form inline-template>
   <form method="POST" action='{{ url_for("task_orders.record_signature", task_order_id=task_order_id) }}'>
     {{ form.csrf_token }}
     <div class="row row--pad">
@@ -37,10 +38,7 @@
           </div>
         </div>
         <div class="action-group">
-        <button class="usa-button usa-button-big usa-button-primary">
-          {{ "common.sign" | translate }}
-        </button>
-
+          <savebutton text="{{ 'common.sign' | translate }}" :disabled="disabled"></savebutton>
           <a
             href="{{ url_for("portfolios.ko_review", portfolio_id=portfolio_id, task_order_id=task_order_id) }}"
             class="action-group__action icon-link">
@@ -52,5 +50,5 @@
       </div>
     </div>
   </form>
+</base-form>
 {% endblock %}
-