diff --git a/benefits/core/templates/core/base.html b/benefits/core/templates/core/base.html index 7003fec5a..282014196 100644 --- a/benefits/core/templates/core/base.html +++ b/benefits/core/templates/core/base.html @@ -79,10 +79,12 @@
{% block headline %} {% endblock headline %} + {% block explanatory-text-wrapper %}
{% block explanatory-text %} {% endblock explanatory-text %}
+ {% endblock explanatory-text-wrapper %}
{% block inner-content %} diff --git a/benefits/core/templates/core/includes/form.html b/benefits/core/templates/core/includes/form.html index 56a40ebce..ed4ec3b08 100644 --- a/benefits/core/templates/core/includes/form.html +++ b/benefits/core/templates/core/includes/form.html @@ -20,7 +20,7 @@ {{ field }} - {% if field.help_text %}{{ field.help_text }}{% endif %} + {% if field.help_text %}{{ field.help_text }}{% endif %}
{% endfor %} diff --git a/benefits/eligibility/forms.py b/benefits/eligibility/forms.py index fca3403aa..a7ff58dbe 100644 --- a/benefits/eligibility/forms.py +++ b/benefits/eligibility/forms.py @@ -45,7 +45,7 @@ class EligibilityVerificationForm(forms.Form): id = "form-eligibility-verification" method = "POST" - submit_value = _("Check eligibility") + submit_value = _("Find my record") submitting_value = _("Checking") _error_messages = { @@ -141,12 +141,16 @@ class MSTCourtesyCard(EligibilityVerificationForm): def __init__(self, *args, **kwargs): super().__init__( title=_("Agency card information"), - headline=_("Let’s see if we can confirm your eligibility."), - blurb=_("Please input your Courtesy Card number and last name below to confirm your eligibility."), - name_label=_("Last name (as it appears on Courtesy Card)"), + headline=_("Let’s find the record of your transit benefit."), + blurb=_( + "We use the information on your MST Courtesy Card to find the record of your transit benefit in our system." + ), + name_label=_("Last Name"), name_placeholder="Garcia", - name_help_text=_("We use this to help confirm your Courtesy Card."), - sub_label=_("MST Courtesy Card number"), + name_help_text=_( + "Please enter your last name the same way it is printed on your card, including capital letters and hyphens." + ), + sub_label=_("Courtesy Card number"), sub_help_text=_("This is a 5-digit number on the front and back of your card."), sub_placeholder="12345", name_max_length=255, @@ -164,12 +168,17 @@ class SBMTDMobilityPass(EligibilityVerificationForm): def __init__(self, *args, **kwargs): super().__init__( title=_("Agency card information"), - headline=_("Let’s see if we can confirm your eligibility."), - blurb=_("Please input your Reduced Fare Mobility ID number and last name below to confirm your eligibility."), - name_label=_("Last name (as it appears on Reduced Fare Mobility ID card)"), + headline=_("Let’s find the record of your transit benefit."), + blurb=_( + "We use the information on your SBMTD Reduced Fare Mobility ID card to find the record of your transit " + + "benefit in our system." + ), + name_label=_("Last Name"), name_placeholder="Garcia", - name_help_text=_("We use this to help confirm your Reduced Fare Mobility ID."), - sub_label=_("SBMTD Reduced Fare Mobility ID number"), + name_help_text=_( + "Please enter your last name the same way it is printed on your card, including capital letters and hyphens." + ), + sub_label=_("Reduced Fare Mobility ID card number"), sub_help_text=_("This is a 4-digit number on the back of your card."), sub_placeholder="1234", name_max_length=255, diff --git a/benefits/eligibility/templates/eligibility/confirm.html b/benefits/eligibility/templates/eligibility/confirm.html index a36db3113..31f617422 100644 --- a/benefits/eligibility/templates/eligibility/confirm.html +++ b/benefits/eligibility/templates/eligibility/confirm.html @@ -10,14 +10,20 @@ {% endblock nav-buttons %} {% block headline %} -
+

{{ form.headline }}

{% endblock headline %} -{% block explanatory-text %} -

{{ form.blurb }}

-{% endblock explanatory-text %} +{% block explanatory-text-wrapper %} +
+
+ {% block explanatory-text %} +

{{ form.blurb }}

+ {% endblock explanatory-text %} +
+
+{% endblock explanatory-text-wrapper %} {% block inner-content %}
diff --git a/benefits/locale/en/LC_MESSAGES/django.po b/benefits/locale/en/LC_MESSAGES/django.po index adc82fd81..8217e2c74 100644 --- a/benefits/locale/en/LC_MESSAGES/django.po +++ b/benefits/locale/en/LC_MESSAGES/django.po @@ -6,7 +6,7 @@ msgid "" msgstr "" "Report-Msgid-Bugs-To: https://github.com/cal-itp/benefits/issues \n" -"POT-Creation-Date: 2024-04-18 14:27-0700\n" +"POT-Creation-Date: 2024-04-19 13:13-0700\n" "Language: English\n" "MIME-Version: 1.0\n" "Content-Type: text/plain; charset=UTF-8\n" @@ -303,7 +303,7 @@ msgstr "" msgid "Choose this benefit" msgstr "" -msgid "Check eligibility" +msgid "Find my record" msgstr "" msgid "Checking" @@ -318,38 +318,34 @@ msgstr "" msgid "Agency card information" msgstr "" -msgid "Let’s see if we can confirm your eligibility." +msgid "Let’s find the record of your transit benefit." msgstr "" msgid "" -"Please input your Courtesy Card number and last name below to confirm your " -"eligibility." +"We use the information on your MST Courtesy Card to find the record of your " +"transit benefit in our system." msgstr "" -msgid "Last name (as it appears on Courtesy Card)" +msgid "Last Name" msgstr "" -msgid "We use this to help confirm your Courtesy Card." +msgid "" +"Please enter your last name the same way it is printed on your card, " +"including capital letters and hyphens." msgstr "" -msgid "MST Courtesy Card number" +msgid "Courtesy Card number" msgstr "" msgid "This is a 5-digit number on the front and back of your card." msgstr "" msgid "" -"Please input your Reduced Fare Mobility ID number and last name below to " -"confirm your eligibility." -msgstr "" - -msgid "Last name (as it appears on Reduced Fare Mobility ID card)" -msgstr "" - -msgid "We use this to help confirm your Reduced Fare Mobility ID." +"We use the information on your SBMTD Reduced Fare Mobility ID card to find " +"the record of your transit benefit in our system." msgstr "" -msgid "SBMTD Reduced Fare Mobility ID number" +msgid "Reduced Fare Mobility ID card number" msgstr "" msgid "This is a 4-digit number on the back of your card." diff --git a/benefits/locale/es/LC_MESSAGES/django.po b/benefits/locale/es/LC_MESSAGES/django.po index b4e9985ca..376f7c20e 100644 --- a/benefits/locale/es/LC_MESSAGES/django.po +++ b/benefits/locale/es/LC_MESSAGES/django.po @@ -6,7 +6,7 @@ msgid "" msgstr "" "Report-Msgid-Bugs-To: https://github.com/cal-itp/benefits/issues \n" -"POT-Creation-Date: 2024-04-18 14:27-0700\n" +"POT-Creation-Date: 2024-04-19 13:13-0700\n" "Language: Español\n" "MIME-Version: 1.0\n" "Content-Type: text/plain; charset=UTF-8\n" @@ -390,7 +390,7 @@ msgstr "¿A qué beneficio de tránsito le gustaría inscribirse?" msgid "Choose this benefit" msgstr "Elegir este beneficio" -msgid "Check eligibility" +msgid "Find my record" msgstr "Comprobar elegibilidad" msgid "Checking" @@ -405,42 +405,34 @@ msgstr "Este campo es requerido." msgid "Agency card information" msgstr "Información de la tarjeta de agencia" -msgid "Let’s see if we can confirm your eligibility." +msgid "Let’s find the record of your transit benefit." msgstr "Veamos si podemos confirmar su elegibilidad." msgid "" -"Please input your Courtesy Card number and last name below to confirm your " -"eligibility." +"We use the information on your MST Courtesy Card to find the record of your " +"transit benefit in our system." msgstr "" -"Ingrese el número de su tarjeta de cortesía y apellido a continuación para " -"confirmar su elegibilidad." -msgid "Last name (as it appears on Courtesy Card)" -msgstr "Apellido (tal como aparece en la tarjeta de cortesía)" +msgid "Last Name" +msgstr "Apellido" -msgid "We use this to help confirm your Courtesy Card." -msgstr "Usamos esto para ayudar a confirmar su tarjeta de cortesía." +msgid "" +"Please enter your last name the same way it is printed on your card, " +"including capital letters and hyphens." +msgstr "" -msgid "MST Courtesy Card number" +msgid "Courtesy Card number" msgstr "Número de tarjeta de cortesía de MST" msgid "This is a 5-digit number on the front and back of your card." msgstr "Este es un número de 5 dígitos en el anverso y reverso de su tarjeta." msgid "" -"Please input your Reduced Fare Mobility ID number and last name below to " -"confirm your eligibility." +"We use the information on your SBMTD Reduced Fare Mobility ID card to find " +"the record of your transit benefit in our system." msgstr "" -"Ingrese el número de cuatro dígitos de su Reduced Fare Mobility ID y su " -"apellido a continuación para confirmar su elegibilidad." - -msgid "Last name (as it appears on Reduced Fare Mobility ID card)" -msgstr "Apellido (tal como aparece en la tarjeta de Reduced Fare Mobility ID)" - -msgid "We use this to help confirm your Reduced Fare Mobility ID." -msgstr "Usamos esto para ayudar a confirmar su Reduced Fare Mobility ID." -msgid "SBMTD Reduced Fare Mobility ID number" +msgid "Reduced Fare Mobility ID card number" msgstr "Número de SBMTD Reduced Fare Mobility ID" msgid "This is a 4-digit number on the back of your card." diff --git a/benefits/static/css/styles.css b/benefits/static/css/styles.css index aefc64478..6927754d9 100644 --- a/benefits/static/css/styles.css +++ b/benefits/static/css/styles.css @@ -16,6 +16,7 @@ --bs-body-font-family: var(--bs-font-sans-serif); --bs-body-line-height: 1.5; /* Displayed as 150% on Figma */ --heading-line-height: 1.3; /* Displayed as 130% on Figma */ + --form-field-text-line-height: 1.25; /*Displayed as 125% on Figma */ --h4-line-height: 1.2; /* Displayed as 120% on Figma */ --letter-spacing-2: 0.02; /* Displayed as 2% on Figma */ --letter-spacing-3: 0.03; /* Displayed as 3% on Figma */ @@ -552,23 +553,19 @@ footer .footer-links li a.footer-link:visited { /* Form Container: Must use .form-container parent to use these styles */ :root { - --form-input-gap: calc(22rem / 16); -} - -@media (min-width: 992px) { - :root { - --form-input-gap: calc(42rem / 16); - } + --form-input-gap: calc(24rem / 16); } .form-container .form-group:not(:first-child) { padding-top: var(--form-input-gap); } -.form-container .form-control-label { - font-size: var(--bs-body-font-size); +.form-container .form-control-label, +.form-container .required-label { + font-size: var(--font-size-16px); font-weight: var(--medium-font-weight); - letter-spacing: calc(var(--bs-body-font-size) * var(--letter-spacing-5)); + line-height: var(--form-field-text-line-height); + letter-spacing: calc(var(--font-size-16px) * var(--letter-spacing-5)); padding-bottom: calc(12rem / 16); } @@ -591,6 +588,8 @@ footer .footer-links li a.footer-link:visited { .form-text { font-size: var(--font-size-14px); + line-height: var(--form-field-text-line-height); + letter-spacing: var(--letter-spacing-5); } /* Forms: Radio Buttons */