Update EmptyState macro to align with new designs

styles/components/_empty_state.scss

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

templates/applications/index.html

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

templates/components/empty_state.html

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

templates/portfolios/reports/application_and_env_spending.html

@@ -15,13 +15,13 @@
     %}
 
     {{ EmptyState(
-      ('portfolios.reports.empty_state.message' | translate),
+      header='portfolios.reports.empty_state.message' | translate,
-      action_label= ('portfolios.reports.empty_state.action_label' | translate) if can_create_applications else None,
+      message=message,
-      action_href=url_for('applications.create_new_application_step_1', portfolio_id=portfolio.id) if can_create_applications else None,
+      button_text="Add a new application",
-      icon='chart',
+      button_link=url_for("applications.view_new_application_step_1", portfolio_id=portfolio.id),
-      sub_message=message,
+      view_only_text="Contact your portfolio administrator to create an application."
-      add_perms=can_create_applications
     ) }}
+
   {% 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.',
+      header="Add approved task orders",
-      action_label='Add a New Task Order',
+      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.",
-      action_href=url_for('task_orders.form_step_one_add_pdf', portfolio_id=portfolio.id),
+      button_link=url_for('task_orders.form_step_one_add_pdf', portfolio_id=portfolio.id),
-      icon='cloud',
+      button_text="Add Task Order",
-      add_perms=user_can(permissions.CREATE_TASK_ORDER)
+      view_only_text="Contact your portfolio administrator to add a Task Order."
     ) }}
   {% endif %}
 </div>