diff --git a/styles/components/_empty_state.scss b/styles/components/_empty_state.scss index 0e102a4d..12405e05 100644 --- a/styles/components/_empty_state.scss +++ b/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; } } } diff --git a/templates/applications/index.html b/templates/applications/index.html index bc7ae431..2d3e7d42 100644 --- a/templates/applications/index.html +++ b/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 %} diff --git a/templates/components/empty_state.html b/templates/components/empty_state.html index a9d9ff5e..9989e4f8 100644 --- a/templates/components/empty_state.html +++ b/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) -%} -
-

{{ message }}

- - {% if icon %} - {{ Icon(icon) }} - {% endif %} - - {% if sub_message %} -

{{ sub_message }}

- {% endif %} - - {% if add_perms and (action_href and action_label) %} - {{ action_label }} - {% endif %} - +{% macro EmptyState(header, message, button_text, button_link, view_only_text, user_can_create=True) %} +
+

{{ header }}

+

{{ message }}

+
+
-{%- endmacro %} +{% endmacro %} diff --git a/templates/portfolios/reports/application_and_env_spending.html b/templates/portfolios/reports/application_and_env_spending.html index e43ebf0c..8accd0e6 100644 --- a/templates/portfolios/reports/application_and_env_spending.html +++ b/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 %}