From 1486680293a3f4c46b492eec68923f3442d1316d Mon Sep 17 00:00:00 2001 From: Jonathan Bobel Date: Fri, 13 Dec 2024 12:37:11 -0500 Subject: [PATCH] Updating new home page styles to use more from the USWDS, and make sure it's responsive and accessible --- app/__init__.py | 10 +- .../uswds/_uswds-theme-custom-styles.scss | 51 ++--- app/assets/sass/uswds/_uswds-theme.scss | 4 + app/main/views/index.py | 2 +- app/templates/views/signedout.html | 188 ++++++++++-------- tests/app/main/views/test_index.py | 2 +- tests/app/main/views/test_template_folders.py | 8 +- tests/app/main/views/test_templates.py | 8 +- 8 files changed, 151 insertions(+), 122 deletions(-) diff --git a/app/__init__.py b/app/__init__.py index 369d9db3d..6f9f15e83 100644 --- a/app/__init__.py +++ b/app/__init__.py @@ -174,8 +174,12 @@ def create_app(application): @application.context_processor def inject_feature_flags(): - feature_best_practices_enabled = application.config.get("FEATURE_BEST_PRACTICES_ENABLED", False) - feature_about_page_enabled = application.config.get("FEATURE_ABOUT_PAGE_ENABLED", False) + feature_best_practices_enabled = application.config.get( + "FEATURE_BEST_PRACTICES_ENABLED", False + ) + feature_about_page_enabled = application.config.get( + "FEATURE_ABOUT_PAGE_ENABLED", False + ) return dict( FEATURE_BEST_PRACTICES_ENABLED=feature_best_practices_enabled, FEATURE_ABOUT_PAGE_ENABLED=feature_about_page_enabled, @@ -205,7 +209,7 @@ def create_app(application): url = url.replace("NONCE", nonce) url = url.replace("STATE", state) - return {'initial_signin_url': url} + return {"initial_signin_url": url} notify_environment = os.environ["NOTIFY_ENVIRONMENT"] diff --git a/app/assets/sass/uswds/_uswds-theme-custom-styles.scss b/app/assets/sass/uswds/_uswds-theme-custom-styles.scss index 78482c1bb..1eaa0bfb5 100644 --- a/app/assets/sass/uswds/_uswds-theme-custom-styles.scss +++ b/app/assets/sass/uswds/_uswds-theme-custom-styles.scss @@ -346,14 +346,6 @@ td.table-empty-message { } } -.usa-section { - &__home { - h2 { - font-family: family('serif'); - } - } -} - .navigation-service.usa-breadcrumb { bottom: 0; } @@ -960,43 +952,34 @@ li.linked-card:hover svg, } } -.fixed-row { +.home-cards { justify-content: space-between; - align-items: end; - - .fixed-box { - width: 21em; - height: 21em; - text-align: center; - padding: 1rem; - border: 3px solid #000; - background-color: #fff; - display: flex; - flex-direction: column; + .usa-card__container { align-items: center; - justify-content: center; - box-sizing: border-box; - + text-align: center; img { - width: 6rem; - height: 6rem; + margin: units(4) auto 0; + width: units(15); + height: units(15); + } + .usa-card__body { + margin-bottom: units(2); } } } -.gsa-usa-alert-signed-out { +.contact-us-card { + border: 2px solid color("ink"); + padding: units(2); + color: #000; width: 100%; transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease; - &:hover { - background-color: #005ea2; - color: white; - border-color: #003d6b; - - strong { - color: white; - } + &:hover, &:focus { + background-color: color("blue-60v"); + color: #FFF; + border-color: color("blue-60v"); img { filter: brightness(0) invert(1); diff --git a/app/assets/sass/uswds/_uswds-theme.scss b/app/assets/sass/uswds/_uswds-theme.scss index 4aaa659a5..8d21b1eec 100644 --- a/app/assets/sass/uswds/_uswds-theme.scss +++ b/app/assets/sass/uswds/_uswds-theme.scss @@ -9,6 +9,10 @@ in the form $setting: value, @use "uswds-core" with ( $theme-font-type-sans: "public-sans", + $theme-card-border-radius: 0, + $theme-card-gap: 4, + $theme-card-border-width: 2px, + $theme-card-border-color: "ink", $theme-show-notifications: false, $theme-banner-max-width: "desktop-lg", $theme-grid-container-max-width: "desktop-lg", diff --git a/app/main/views/index.py b/app/main/views/index.py index 4478f225c..6075fd3f5 100644 --- a/app/main/views/index.py +++ b/app/main/views/index.py @@ -55,7 +55,7 @@ def index(): return render_template( "views/signedout.html", sms_rate=CURRENT_SMS_RATE, - counts=status_api_client.get_count_of_live_services_and_organizations() + counts=status_api_client.get_count_of_live_services_and_organizations(), ) diff --git a/app/templates/views/signedout.html b/app/templates/views/signedout.html index 09a8f02e7..076a28a2d 100644 --- a/app/templates/views/signedout.html +++ b/app/templates/views/signedout.html @@ -11,8 +11,8 @@ import usaButton %} {% block meta %}
-
-

+
+

Reach people where they are with government-powered text messages

@@ -34,20 +34,20 @@ import usaButton %} {% block meta %}

-

+

Government texting made easy

@@ -57,62 +57,92 @@ import usaButton %} {% block meta %}

-
-

Key features

-
-
- Internet icon -

Web-based

-

Nothing to download or install

-
- -
- Fast icon -

Fast and easy

-

No technical expertise required

-
-
- Status icon -

Track message delivery

-

See which messages were received

-
-
- -
-
- Translation icon -

Send in recipients' preferred language

-

- Notify.gov has support for more than 30 character sets -

-
- -
- Security icon -

Security and privacy

-

- Limited data retention, encryption, and multi-factor authentication - protect user data and manage risk -

-
- -
- Send icon -

Send bulk, customized, one-way messages

-

- Send hundreds or thousands of individually customized messages with - just a few clicks -

-
+
+

Key features

+
+
    +
  • +
    + Globe on top of a web browser +
    +

    Web-based

    +
    +
    +

    Nothing to download or install

    +
    +
    +
    • +
  • +
    + Stopwatch with a notification speech bubble with a star inside +
    +

    Fast and easy

    +
    +
    +

    No technical expertise required

    +
    +
    +
    • +
  • +
    + 3 status messages, 2 successes and one failure +
    +

    Track message delivery

    +
    +
    +

    See which messages were received

    +
    +
    +
    • +
+
    +
  • +
    + Speech bubbles with the letter A and the Chinese character for language +
    +

    Send in recipients' preferred language

    +
    +
    +

    Notify.gov has support for more than 30 character sets

    +
    +
    +
    • +
  • +
    + Lock with code icon inside on top of a web browser +
    +

    Security and privacy

    +
    +
    +

    + Limited data retention, encryption, and multi-factor authentication + protect user data and manage risk +

    +
    +
    +
    • +
  • +
    + Paper airplane and a notification icon with the number 1 inside +
    +

    Send bulk, customized, one-way messages

    +
    +
    +

    + Send hundreds or thousands of individually customized messages with + just a few clicks +

    +
    +
    +
    • +
-
+

Who can use Notify.gov?

@@ -127,28 +157,28 @@ import usaButton %} {% block meta %} services may qualify to use Notify.gov to communicate with applicants and participants in these programs.

-
- -
-
-
- Icon for contact us -
-
-

- Contact us
- To learn more about becoming a partner! -

+
+
+ +
+
+
+ +
+
+

+ Contact us
+ To learn more about becoming a partner! +

+
-
- + +
diff --git a/tests/app/main/views/test_index.py b/tests/app/main/views/test_index.py index 202269ae3..3a4c281b9 100644 --- a/tests/app/main/views/test_index.py +++ b/tests/app/main/views/test_index.py @@ -118,7 +118,7 @@ def test_static_pages(client_request, mock_get_organization_by_domain, view, moc "write_for_action", "multiple_languages", "benchmark_performance", - "guidance_index" + "guidance_index", ] return ( not current_app.config["FEATURE_BEST_PRACTICES_ENABLED"] diff --git a/tests/app/main/views/test_template_folders.py b/tests/app/main/views/test_template_folders.py index bb31c8f41..f418b2c42 100644 --- a/tests/app/main/views/test_template_folders.py +++ b/tests/app/main/views/test_template_folders.py @@ -350,9 +350,13 @@ def test_should_show_templates_folder_page( assert normalize_spaces(page.select_one("h1").text) == expected_title_tag # remove this line if you don't want the breadcrumb on the first page - assert len(page.select("nav#breadcrumb-template-folders a")) == len(expected_parent_link_args) + assert len(page.select("nav#breadcrumb-template-folders a")) == len( + expected_parent_link_args + ) - for index, parent_link in enumerate(page.select("nav#breadcrumb-template-folders a")): + for index, parent_link in enumerate( + page.select("nav#breadcrumb-template-folders a") + ): assert parent_link["href"] == url_for( "main.choose_template", service_id=SERVICE_ONE_ID, diff --git a/tests/app/main/views/test_templates.py b/tests/app/main/views/test_templates.py index 68ec6f219..1b0dab46e 100644 --- a/tests/app/main/views/test_templates.py +++ b/tests/app/main/views/test_templates.py @@ -69,7 +69,9 @@ def test_should_show_empty_page_when_no_templates( service_id=service_one["id"], ) - assert normalize_spaces(page.select_one("h1").text) == ("Select or create a template") + assert normalize_spaces(page.select_one("h1").text) == ( + "Select or create a template" + ) assert normalize_spaces(page.select_one("main p").text) == (expected_message) assert page.select_one("#add_new_folder_form") assert page.select_one("#add_new_template_form") @@ -87,7 +89,9 @@ def test_should_show_add_template_form_if_service_has_folder_permission( service_id=service_one["id"], ) - assert normalize_spaces(page.select_one("h1").text) == ("Select or create a template") + assert normalize_spaces(page.select_one("h1").text) == ( + "Select or create a template" + ) assert normalize_spaces(page.select_one("main p").text) == ( "Every message starts with a template. You can change it later. " "You need a template before you can send messages."