Update EmptyState macro to align with new designs

styles/components/_empty_state.scss

@@ -1,28 +1,20 @@
 .empty-state {
-  text-align: center;
-  padding: 5rem ($gap * 2) 2rem;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
+  padding: $gap * 3;
   max-width: 100%;
+  background-color: $color-gray-lightest;
+  margin-top: $gap * 5;
 
-  > .icon {
-    @include icon-size(50);
-    @include icon-color($color-gray-light);
+  hr {
+    margin-left: -$gap * 3;
+    margin-right: -$gap * 3;
   }
 
-  &__message {
-    font-weight: $font-bold;
-  }
+  &__footer {
+    text-align: center;
 
-  &__sub-message {
-    @include h4;
-
-    color: $color-gray;
-    max-width: 100%;
-
-    @include media($large-screen) {
-      @include h3;
+    a.usa-button {
+      width: 60%;
+      display: inline-block;
     }
   }
 }

templates/applications/index.html

@@ -24,12 +24,11 @@
   {% if not portfolio.applications %}
 
     {{ EmptyState(
-      'This portfolio doesn’t have any applications',
-      action_label='Add a new application' if can_create_applications else None,
-      action_href=url_for('applications.create_new_application_step_1', portfolio_id=portfolio.id) if can_create_applications else None,
-      icon='cloud',
-      sub_message=None if can_create_applications else 'Please contact your JEDI Cloud portfolio administrator to set up a new application.',
-      add_perms=can_create_applications
+      header="You don't have any Applications yet",
+      message="You can manage multiple Applications within a single Portfolio as long as the funding sources are the same.",
+      button_text="Create Your First Application",
+      button_link=url_for("applications.view_new_application_step_1", portfolio_id=portfolio.id),
+      view_only_text="Contact your portfolio administrator to add an application."
     ) }}
 
   {% else %}

templates/components/empty_state.html

@@ -1,20 +1,14 @@
-{% from "components/icon.html" import Icon %}
-
-{% macro EmptyState(message, action_label, action_href, icon=None, sub_message=None, add_perms=True) -%}
-  <div class='empty-state'>
-    <p class='empty-state__message'>{{ message }}</p>
-
-    {% if icon %}
-      {{ Icon(icon) }}
-    {% endif %}
-
-    {% if sub_message %}
-      <p class='empty-state__sub-message'>{{ sub_message }}</p>
-    {% endif %}
-
-    {% if add_perms and (action_href and action_label) %}
-      <a href='{{ action_href }}' class='usa-button usa-button-big'>{{ action_label }}</a>
-    {% endif %}
-
+{% macro EmptyState(header, message, button_text, button_link, view_only_text, user_can_create=True) %}
+  <div class="empty-state">
+    <h3>{{ header }}</h3>
+    <p>{{ message }}</p>
+    <hr>
+    <div class="empty-state__footer">
+      {% if user_can_create %}
+        <a href="{{ button_link }}" class="usa-button usa-button-primary">{{ button_text }}</a>
+      {% else %}
+        <p>{{ view_only_text }}</p>
+      {% endif %}
+    </div>
   </div>
-{%- endmacro %}
+{% endmacro %}

templates/portfolios/reports/application_and_env_spending.html

@@ -15,13 +15,13 @@
     %}
 
     {{ EmptyState(
-      ('portfolios.reports.empty_state.message' | translate),
-      action_label= ('portfolios.reports.empty_state.action_label' | translate) if can_create_applications else None,
-      action_href=url_for('applications.create_new_application_step_1', portfolio_id=portfolio.id) if can_create_applications else None,
-      icon='chart',
-      sub_message=message,
-      add_perms=can_create_applications
+      header='portfolios.reports.empty_state.message' | translate,
+      message=message,
+      button_text="Add a new application",
+      button_link=url_for("applications.view_new_application_step_1", portfolio_id=portfolio.id),
+      view_only_text="Contact your portfolio administrator to create an application."
     ) }}
+
   {% else %}
     <spend-table
       v-bind:applications='{{ monthly_totals['applications'] | tojson }}'

templates/task_orders/index.html

@@ -107,11 +107,11 @@
     {{ TaskOrderList(task_orders) }}
   {% else %}
     {{ EmptyState(
-      'This portfolio doesn’t have any active or pending task orders.',
-      action_label='Add a New Task Order',
-      action_href=url_for('task_orders.form_step_one_add_pdf', portfolio_id=portfolio.id),
-      icon='cloud',
-      add_perms=user_can(permissions.CREATE_TASK_ORDER)
+      header="Add approved task orders",
+      message="Upload your approved Task Order here. You are required to confirm you have the appropriate signature. You will have the ability to add additional approved Task Orders with more funding to this Portfolio in the future.",
+      button_link=url_for('task_orders.form_step_one_add_pdf', portfolio_id=portfolio.id),
+      button_text="Add Task Order",
+      view_only_text="Contact your portfolio administrator to add a Task Order."
     ) }}
   {% endif %}
 </div>