From 008c639d24653e8b96879540f45d47f1dabbb5cc Mon Sep 17 00:00:00 2001 From: igorkorenfeld Date: Wed, 1 Feb 2023 14:38:12 -0500 Subject: [PATCH 1/3] Adjust spacing and sizing to match figma closer --- .../_theme/_uswds-theme-custom-styles.scss | 73 +++++++++++++++++-- .../templates/application_dotgov_domain.html | 2 +- .../templates/application_org_federal.html | 2 +- .../templates/application_review.html | 2 +- .../templates/includes/domain_example.html | 2 - 5 files changed, 68 insertions(+), 13 deletions(-) diff --git a/src/registrar/assets/sass/_theme/_uswds-theme-custom-styles.scss b/src/registrar/assets/sass/_theme/_uswds-theme-custom-styles.scss index a03369e3e..0cac4428f 100644 --- a/src/registrar/assets/sass/_theme/_uswds-theme-custom-styles.scss +++ b/src/registrar/assets/sass/_theme/_uswds-theme-custom-styles.scss @@ -45,21 +45,37 @@ $letter-space--xs: .0125em; font-weight: font-weight('semibold'); line-height: line-height('heading', 3); margin: units(4) 0 units(1); - - &:first-of-type { - margin-top: units(2); - } } + //Tighter spacing when H2 is immediatly after H1 +.register-form-step .usa-fieldset:first-of-type h2:first-of-type, +.register-form-step h1 + h2 { + margin-top: units(1); +} + .register-form-step h3 { color: color('primary-dark'); letter-spacing: $letter-space--xs; margin-top: units(3); margin-bottom: 0; + + + p { + margin-top: units(0.5); + } +} + +.register-form-step h4 { + margin-bottom: 0; + + + p { + margin-top: units(0.5); + } } .register-form-step p, -.dashboard p { +.register-form-step .usa-list li, +.dashboard p +{ @include typeset('sans', 'sm', 5); max-width: measure(5); @@ -77,6 +93,10 @@ $letter-space--xs: .0125em; } } +.register-form-step .usa-label:first-of-type { + margin-top: units(1); +} + a.breadcrumb__back { display:flex; align-items: center; @@ -114,8 +134,39 @@ a.breadcrumb__back { margin-top: units(1); } +.domain_example { + p { + margin-bottom: 0; + } + + .usa-list { + margin-top: units(0.5); + } +} + +.review__step { + margin-top: units(3); + + &:first-of-type { + margin-top: units(4); + } +} + +.review__step hr { + border: none; //reset + border-top: 1px solid color('primary-dark'); + margin-top: 0; + margin-bottom: units(0.5); +} + +.review__step__title a:visited { + color: color('primary'); +} + .review__step__name { + color: color('primary-dark'); font-weight: font-weight('semibold'); + margin-bottom: units(0.5); } @@ -123,6 +174,7 @@ a.breadcrumb__back { #wrapper.dashboard { background-color: color('primary-lightest'); + padding-top: units(5); } section.dashboard { @@ -231,9 +283,14 @@ section.dashboard { main { - //Workaround because USWDS units jump from 10 to 15 - padding-bottom: units(10) + units(2); - padding-top: units(5); + ////Workaround because USWDS units jump from 10 to 15 + //padding-bottom: units(10) + units(2); + //padding-top: units(5); +} + +#wrapper { + padding-top: units(3); + padding-bottom: units(6) * 2 ; //Workaround because USWDS units jump from 10 to 15 } footer { diff --git a/src/registrar/templates/application_dotgov_domain.html b/src/registrar/templates/application_dotgov_domain.html index 0c80a8692..247515b81 100644 --- a/src/registrar/templates/application_dotgov_domain.html +++ b/src/registrar/templates/application_dotgov_domain.html @@ -17,7 +17,7 @@

We’ll try to give you the domain you want. We first need to make sure your request meets our requirements. We’ll work with you to find the best domain for your organization.

Here are a few domain examples for your type of organization.

-
+
{% include "includes/domain_example.html" %}
diff --git a/src/registrar/templates/application_org_federal.html b/src/registrar/templates/application_org_federal.html index 26d84a864..934eac7bb 100644 --- a/src/registrar/templates/application_org_federal.html +++ b/src/registrar/templates/application_org_federal.html @@ -9,7 +9,7 @@

Which federal branch is your organization in?

-

This question is required.

+

This question is required.

 {% radio_buttons_by_value forms.0.federal_type as choices %} {% for choice in choices.values %} diff --git a/src/registrar/templates/application_review.html b/src/registrar/templates/application_review.html index ffbd42c59..810b02988 100644 --- a/src/registrar/templates/application_review.html +++ b/src/registrar/templates/application_review.html @@ -7,7 +7,7 @@ {% csrf_token %} {% for step in steps.all|slice:":-1" %} -
+
diff --git a/src/registrar/templates/includes/domain_example.html b/src/registrar/templates/includes/domain_example.html index ed9ee7504..591049412 100644 --- a/src/registrar/templates/includes/domain_example.html +++ b/src/registrar/templates/includes/domain_example.html @@ -8,12 +8,10 @@ {% elif federal_type == 'judicial' %}

Examples:

-

  • usprobation.gov
  • ustaxcourt.gov
-

{% elif federal_type == 'legislative' %}

Examples:

From 3f487a941d382a7578b7b95637b43fdf45504e80 Mon Sep 17 00:00:00 2001 From: igorkorenfeld Date: Thu, 2 Feb 2023 12:59:51 -0500 Subject: [PATCH 2/3] Change header and footer to closer match to get.gov, alignment adjustment --- .../_theme/_uswds-theme-custom-styles.scss | 30 ++++++++++++------- src/registrar/templates/base.html | 6 +--- src/registrar/templates/includes/footer.html | 2 +- 3 files changed, 21 insertions(+), 17 deletions(-) diff --git a/src/registrar/assets/sass/_theme/_uswds-theme-custom-styles.scss b/src/registrar/assets/sass/_theme/_uswds-theme-custom-styles.scss index 0cac4428f..d00fc1f5d 100644 --- a/src/registrar/assets/sass/_theme/_uswds-theme-custom-styles.scss +++ b/src/registrar/assets/sass/_theme/_uswds-theme-custom-styles.scss @@ -35,6 +35,19 @@ $letter-space--xs: .0125em; -moz-osx-font-smoothing: grayscale; } +.usa-logo { + margin-top: units(2); +} + +.usa-logo__text { + @include typeset('sans', 'xl', 2); + color: color('primary-darker'); +} + +.usa-nav__primary { + margin-top: units(1); +} + h1 { @include typeset('sans', '2xl', 2); margin: 0 0 units(2); @@ -47,6 +60,11 @@ $letter-space--xs: .0125em; margin: units(4) 0 units(1); } +.register-form-step > h1 { + //align to top of sidebar on first page of the form + margin-top: units(-1); +} + //Tighter spacing when H2 is immediatly after H1 .register-form-step .usa-fieldset:first-of-type h2:first-of-type, .register-form-step h1 + h2 { @@ -78,11 +96,6 @@ $letter-space--xs: .0125em; { @include typeset('sans', 'sm', 5); max-width: measure(5); - - //TODO: Revisit - // &:last-of-type { - // margin-bottom: 0; - // } } .register-form-step a { @@ -282,17 +295,12 @@ section.dashboard { } -main { - ////Workaround because USWDS units jump from 10 to 15 - //padding-bottom: units(10) + units(2); - //padding-top: units(5); -} - #wrapper { padding-top: units(3); padding-bottom: units(6) * 2 ; //Workaround because USWDS units jump from 10 to 15 } + footer { border-top: 1px solid color('primary-darker'); } diff --git a/src/registrar/templates/base.html b/src/registrar/templates/base.html index 8bbd6206f..c4b39dd78 100644 --- a/src/registrar/templates/base.html +++ b/src/registrar/templates/base.html @@ -129,11 +129,7 @@ {% block logo %} {% endblock %} diff --git a/src/registrar/templates/includes/footer.html b/src/registrar/templates/includes/footer.html index ffcc7a5b4..4b5f0efbc 100644 --- a/src/registrar/templates/includes/footer.html +++ b/src/registrar/templates/includes/footer.html @@ -16,7 +16,7 @@ class="usa-footer__logo-img" src="{% static 'img/dottedgov-round.svg' %}" alt="dot gov registrar logo" - width="64px" + width="56px" />
From 3fc275bff8501a37f4dbab0d71169b539977d931 Mon Sep 17 00:00:00 2001 From: igorkorenfeld Date: Thu, 2 Feb 2023 13:06:04 -0500 Subject: [PATCH 3/3] Update tests to match dashboard --- src/registrar/tests/test_views.py | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/registrar/tests/test_views.py b/src/registrar/tests/test_views.py index cbcaa9aec..e0886cd7d 100644 --- a/src/registrar/tests/test_views.py +++ b/src/registrar/tests/test_views.py @@ -25,7 +25,7 @@ class TestViews(TestCase): """Home page should be available without a login.""" response = self.client.get("/") self.assertContains(response, "registrar", status_code=200) - self.assertContains(response, "log in") + self.assertContains(response, "Sign in") def test_whoami_page_no_user(self): """Whoami page not accessible without a logged-in user.""" @@ -69,7 +69,8 @@ class LoggedInTests(TestWithUser): creator=self.user, requested_domain=site ) response = self.client.get("/") - self.assertContains(response, "igorville.gov", count=1) + # count = 2 because it is also in screenreader content + self.assertContains(response, "igorville.gov", count=2) # clean up application.delete()