From e60821207904173a98cba887858ed323191d320e Mon Sep 17 00:00:00 2001 From: Machiko Yasuda Date: Tue, 1 Aug 2023 22:41:25 +0000 Subject: [PATCH 1/6] fix(login-btn): use col-lg-4 for login.gov button + dimension fixes --- .../templates/eligibility/start--senior.html | 18 +++++++++++------- .../templates/eligibility/start.html | 3 +++ benefits/static/css/styles.css | 17 +++++++++++------ 3 files changed, 25 insertions(+), 13 deletions(-) diff --git a/benefits/eligibility/templates/eligibility/start--senior.html b/benefits/eligibility/templates/eligibility/start--senior.html index 06dc3f733..e4f4e4874 100644 --- a/benefits/eligibility/templates/eligibility/start--senior.html +++ b/benefits/eligibility/templates/eligibility/start--senior.html @@ -15,10 +15,14 @@

{% translate "eligibility.pages.start.senior.headline" %}

{% include "eligibility/includes/media-item--idcardcheck--start--senior.html" %} {% endblock media-item %} -{% block call-to-action-button %} - {% url "oauth:login" as button_url %} - {% translate "eligibility.buttons.senior.signin" as button_text %} - - {{ button_text }} - -{% endblock call-to-action-button %} +{% block call-to-action %} +
+
+ {% url "oauth:login" as button_url %} + {% translate "eligibility.buttons.senior.signin" as button_text %} + + {{ button_text }} + +
+
+{% endblock call-to-action %} diff --git a/benefits/eligibility/templates/eligibility/start.html b/benefits/eligibility/templates/eligibility/start.html index 936bd2e69..9d80c7c7c 100644 --- a/benefits/eligibility/templates/eligibility/start.html +++ b/benefits/eligibility/templates/eligibility/start.html @@ -21,5 +21,8 @@

{% translate "eligibility.pages.start.sub_headline" {% endblock inner-content %} +{% block call-to-action %} +{% endblock call-to-action %} + {% block call-to-action-button %} {% endblock call-to-action-button %} diff --git a/benefits/static/css/styles.css b/benefits/static/css/styles.css index 0ff3ff8bf..ee260eea4 100644 --- a/benefits/static/css/styles.css +++ b/benefits/static/css/styles.css @@ -350,14 +350,16 @@ footer .footer-links li a:visited { /* Used on Eligibility Start */ :root { - --login-gov-button-font-size: var(--h3-font-size); - --login-gov-button-padding: 11px 0; + --login-gov-button-font-size: var(--font-size-20px); + --login-gov-button-padding: 10px 0; + --login-gov-button-max-width: none; } @media (min-width: 992px) { :root { --login-gov-button-font-size: var(--font-size-16px); - --login-gov-button-padding: var(--primary-button-padding); + --login-gov-button-padding: 13px 0; + --login-gov-button-max-width: 289px; } } @@ -368,6 +370,7 @@ footer .footer-links li a:visited { letter-spacing: 0; font-size: var(--login-gov-button-font-size); font-family: "Public Sans", Roboto, system-ui; + max-width: var(--login-gov-button-max-width); text-decoration: none; } @@ -382,7 +385,7 @@ footer .footer-links li a:visited { background-size: contain; background-repeat: no-repeat; display: block; - margin: 8px auto 0 auto; + margin: 11px auto 0 auto; position: relative; padding-top: 1px; color: transparent; @@ -397,10 +400,12 @@ footer .footer-links li a:visited { #login .fallback-text.white-logo { background-image: url("/static/img/login-gov-logo-rev.svg"); - width: 132px; - height: 18px; + width: 130.9887px; + height: 17px; } +/* Used on Eligibility Index for Modal */ + #login .fallback-text.color-logo { background-image: url("/static/img/login-gov-logo.svg"); width: 120px; From b693c3a389d3cfdc4aed2f55a9f802a535b65882 Mon Sep 17 00:00:00 2001 From: Machiko Yasuda Date: Tue, 1 Aug 2023 22:52:44 +0000 Subject: [PATCH 2/6] fix(elig-start): override entire call-to-action area --- .../eligibility/start--mst-courtesy-card.html | 12 ++++++++---- .../templates/eligibility/start--veteran.html | 14 +++++++++----- .../eligibility/templates/eligibility/start.html | 3 --- 3 files changed, 17 insertions(+), 12 deletions(-) diff --git a/benefits/eligibility/templates/eligibility/start--mst-courtesy-card.html b/benefits/eligibility/templates/eligibility/start--mst-courtesy-card.html index 2dcd82e8f..b46ecc869 100644 --- a/benefits/eligibility/templates/eligibility/start--mst-courtesy-card.html +++ b/benefits/eligibility/templates/eligibility/start--mst-courtesy-card.html @@ -15,7 +15,11 @@

{% translate "eligibility.pages.start.mst_courtesy_card.headline" %}

{% include "eligibility/includes/media-item--idcardcheck--start--mst-courtesy-card.html" %} {% endblock media-item %} -{% block call-to-action-button %} - {% url "eligibility:confirm" as button_url %} - {% translate "eligibility.buttons.continue" %} -{% endblock call-to-action-button %} +{% block call-to-action %} +
+
+ {% url "eligibility:confirm" as button_url %} + {% translate "eligibility.buttons.continue" %} +
+
+{% endblock call-to-action %} diff --git a/benefits/eligibility/templates/eligibility/start--veteran.html b/benefits/eligibility/templates/eligibility/start--veteran.html index 0e8d47976..1f67319fc 100644 --- a/benefits/eligibility/templates/eligibility/start--veteran.html +++ b/benefits/eligibility/templates/eligibility/start--veteran.html @@ -15,8 +15,12 @@

{% translate "eligibility.pages.start.veteran.headline" %}

{% include "eligibility/includes/media-item--idcardcheck--start--veteran.html" %} {% endblock media-item %} -{% block call-to-action-button %} - {% url "oauth:login" as button_url %} - {% translate "eligibility.buttons.veteran.signin" as button_text %} - {{ button_text }} -{% endblock call-to-action-button %} +{% block call-to-action %} +
+
+ {% url "oauth:login" as button_url %} + {% translate "eligibility.buttons.veteran.signin" as button_text %} + {{ button_text }} +
+
+{% endblock call-to-action %} diff --git a/benefits/eligibility/templates/eligibility/start.html b/benefits/eligibility/templates/eligibility/start.html index 9d80c7c7c..d2d5fa1f3 100644 --- a/benefits/eligibility/templates/eligibility/start.html +++ b/benefits/eligibility/templates/eligibility/start.html @@ -23,6 +23,3 @@

{% translate "eligibility.pages.start.sub_headline" {% block call-to-action %} {% endblock call-to-action %} - -{% block call-to-action-button %} -{% endblock call-to-action-button %} From c197104e1c61feaea14e8cf8f071a12e5fbe1f26 Mon Sep 17 00:00:00 2001 From: Machiko Yasuda Date: Tue, 1 Aug 2023 23:02:58 +0000 Subject: [PATCH 3/6] fix(login-btn): on desktop, btn total height is 41px --- benefits/static/css/styles.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/benefits/static/css/styles.css b/benefits/static/css/styles.css index ee260eea4..93850d064 100644 --- a/benefits/static/css/styles.css +++ b/benefits/static/css/styles.css @@ -358,7 +358,7 @@ footer .footer-links li a:visited { @media (min-width: 992px) { :root { --login-gov-button-font-size: var(--font-size-16px); - --login-gov-button-padding: 13px 0; + --login-gov-button-padding: 10px 0; --login-gov-button-max-width: 289px; } } From b584df8053912e99f4a7697f697619b4b251026c Mon Sep 17 00:00:00 2001 From: Machiko Yasuda Date: Tue, 1 Aug 2023 23:08:57 +0000 Subject: [PATCH 4/6] fix(login-btn): mobile - add max-width of 310px --- benefits/static/css/styles.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/benefits/static/css/styles.css b/benefits/static/css/styles.css index 93850d064..c0939bb24 100644 --- a/benefits/static/css/styles.css +++ b/benefits/static/css/styles.css @@ -352,7 +352,7 @@ footer .footer-links li a:visited { :root { --login-gov-button-font-size: var(--font-size-20px); --login-gov-button-padding: 10px 0; - --login-gov-button-max-width: none; + --login-gov-button-max-width: 310px; } @media (min-width: 992px) { From a4f6b6bf9fbbbdbc9c12056225d1c95df01ae593 Mon Sep 17 00:00:00 2001 From: Machiko Yasuda Date: Wed, 2 Aug 2023 04:15:28 +0000 Subject: [PATCH 5/6] chore(elig-start): delete now un-needed flex logic code --- .../templates/eligibility/start--mst-courtesy-card.html | 2 +- benefits/eligibility/templates/eligibility/start--senior.html | 2 +- benefits/eligibility/templates/eligibility/start--veteran.html | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/benefits/eligibility/templates/eligibility/start--mst-courtesy-card.html b/benefits/eligibility/templates/eligibility/start--mst-courtesy-card.html index b46ecc869..01f0b302d 100644 --- a/benefits/eligibility/templates/eligibility/start--mst-courtesy-card.html +++ b/benefits/eligibility/templates/eligibility/start--mst-courtesy-card.html @@ -16,7 +16,7 @@

{% translate "eligibility.pages.start.mst_courtesy_card.headline" %}

{% endblock media-item %} {% block call-to-action %} -
+
{% url "eligibility:confirm" as button_url %} {% translate "eligibility.buttons.continue" %} diff --git a/benefits/eligibility/templates/eligibility/start--senior.html b/benefits/eligibility/templates/eligibility/start--senior.html index e4f4e4874..560fad490 100644 --- a/benefits/eligibility/templates/eligibility/start--senior.html +++ b/benefits/eligibility/templates/eligibility/start--senior.html @@ -16,7 +16,7 @@

{% translate "eligibility.pages.start.senior.headline" %}

{% endblock media-item %} {% block call-to-action %} -
+
{% url "oauth:login" as button_url %} {% translate "eligibility.buttons.senior.signin" as button_text %} diff --git a/benefits/eligibility/templates/eligibility/start--veteran.html b/benefits/eligibility/templates/eligibility/start--veteran.html index 1f67319fc..76b6a8250 100644 --- a/benefits/eligibility/templates/eligibility/start--veteran.html +++ b/benefits/eligibility/templates/eligibility/start--veteran.html @@ -16,7 +16,7 @@

{% translate "eligibility.pages.start.veteran.headline" %}

{% endblock media-item %} {% block call-to-action %} -
+
{% url "oauth:login" as button_url %} {% translate "eligibility.buttons.veteran.signin" as button_text %} From 9abd183d5b0a0470735948beb3a7601ccf42f70b Mon Sep 17 00:00:00 2001 From: Machiko Yasuda Date: Wed, 2 Aug 2023 04:28:11 +0000 Subject: [PATCH 6/6] chore(css): remove unnecessary var, move classes by type/page --- benefits/static/css/styles.css | 30 +++++++++++++++--------------- 1 file changed, 15 insertions(+), 15 deletions(-) diff --git a/benefits/static/css/styles.css b/benefits/static/css/styles.css index c0939bb24..f55c4dd29 100644 --- a/benefits/static/css/styles.css +++ b/benefits/static/css/styles.css @@ -351,14 +351,12 @@ footer .footer-links li a:visited { :root { --login-gov-button-font-size: var(--font-size-20px); - --login-gov-button-padding: 10px 0; --login-gov-button-max-width: 310px; } @media (min-width: 992px) { :root { --login-gov-button-font-size: var(--font-size-16px); - --login-gov-button-padding: 10px 0; --login-gov-button-max-width: 289px; } } @@ -374,10 +372,6 @@ footer .footer-links li a:visited { text-decoration: none; } -.eligibility-start #login { - padding: var(--login-gov-button-padding); -} - /* Sets the text `Login.gov` as transparent */ /* With an Login.gov logo image over it */ /* So screenreaders can read out `Login.gov` */ @@ -394,8 +388,18 @@ footer .footer-links li a:visited { line-height: 1; } -.eligibility-index #login .fallback-text { - display: inline-block; +@media (min-width: 992px) { + #login .fallback-text { + margin: 0 0 0 5px; + display: inline-block; + vertical-align: baseline; + } +} + +/* Sign in with Login.gov (white logo) on Eligibility Start */ + +.eligibility-start #login { + padding: 10px 0; } #login .fallback-text.white-logo { @@ -404,7 +408,7 @@ footer .footer-links li a:visited { height: 17px; } -/* Used on Eligibility Index for Modal */ +/* Login.gov modal button (color logo) on Eligibility Index */ #login .fallback-text.color-logo { background-image: url("/static/img/login-gov-logo.svg"); @@ -412,12 +416,8 @@ footer .footer-links li a:visited { height: 16px; } -@media (min-width: 992px) { - #login .fallback-text { - margin: 0 0 0 5px; - display: inline-block; - vertical-align: baseline; - } +.eligibility-index #login .fallback-text { + display: inline-block; } /* Custom button: Sign Out */