feat(enrollment-success): style new Login.gov sign out button

benefits/eligibility/templates/eligibility/start__login_gov.html

@@ -25,6 +25,6 @@ <h1>{% translate "eligibility.pages.start.login_gov.headline" %}</h1>
   {% url "oauth:login" as button_url %}
   {% translate "eligibility.buttons.senior.signin" as button_text %}
   <a href="{{ button_url }}" class="btn btn-lg btn-primary" id="login">
-    {{ button_text }} <span class="fallback-text">Login.gov</span>
+    {{ button_text }} <span class="fallback-text white-logo">Login.gov</span>
   </a>
 {% endblock call-to-action-button %}

benefits/enrollment/templates/enrollment/success.html

@@ -37,14 +37,15 @@ <h1 class="pb-lg-5 pb-4">{% translate "enrollment.pages.success.headline" %}</h1
 
 {% block call-to-action %}
   {% if page.buttons|length == 1 %}
-    <div class="row d-flex justify-content-lg-center flex-lg-row">
-      <div class="col-9 col-lg-10 d-flex justify-content-end logout-paragraph">
+    <div class="row d-flex justify-content-start justify-content-lg-center">
+      <div class="col-12 col-lg-8 pt-lg-5 mt-lg-0 pt-4 mt-2">
         <p>
-          <span>{% translate "enrollment.pages.success.logout[0]" %}</span>
+          {% translate "enrollment.pages.success.logout[0]" %}
           {% for b in page.buttons %}
-            <a id="{{ b.id }}" class="{{ b.classes | join:" " }}" href="{{ b.url }}" role="button">
-              <span class="fallback-text">{{ b.fallback_text }}</span>
+            <a id="{{ b.id }}" class="d-inline-block p-0 {{ b.classes | join:" " }}" href="{{ b.url }}" role="button">
+              <span class="fallback-text color-logo">{{ b.fallback_text }}</span>
             </a>
+            .
           {% endfor %}
         </p>
       </div>

benefits/locale/en/LC_MESSAGES/django.po

@@ -5,8 +5,8 @@
 #, fuzzy
 msgid ""
 msgstr ""
-"Report-Msgid-Bugs-To: https://github.com/cal-itp/benefits/issues \n"
-"POT-Creation-Date: 2023-07-10 20:47+0000\n"
+"Report-Msgid-Bugs-To: \n"
+"POT-Creation-Date: 2023-07-10 22:56+0000\n"
 "Language: English\n"
 "MIME-Version: 1.0\n"
 "Content-Type: text/plain; charset=UTF-8\n"
@@ -582,7 +582,7 @@ msgstr "Thank you for using Cal-ITP Benefits!"
 
 msgid "enrollment.pages.success.logout[0]"
 msgstr ""
-"If you are on a public or shared computer, don't forget to sign out of "
+"If you are on a public or shared computer, don’t forget to sign out of "
 
 msgid "enrollment.pages.index.link_card_item.heading"
 msgstr "The next step is to link your bank card"

benefits/locale/es/LC_MESSAGES/django.po

@@ -5,8 +5,8 @@
 #, fuzzy
 msgid ""
 msgstr ""
-"Report-Msgid-Bugs-To: https://github.com/cal-itp/benefits/issues \n"
-"POT-Creation-Date: 2023-07-10 20:47+0000\n"
+"Report-Msgid-Bugs-To: \n"
+"POT-Creation-Date: 2023-07-10 22:56+0000\n"
 "Language: Español\n"
 "MIME-Version: 1.0\n"
 "Content-Type: text/plain; charset=UTF-8\n"
@@ -597,8 +597,7 @@ msgstr "Gracias por usar los Beneficios de Cal-ITP."
 
 msgid "enrollment.pages.success.logout[0]"
 msgstr ""
-"Si estás en una computadora pública o compartida, no olvides hacer clic aquí "
-"para cerrar la sesión de"
+"Si está en una computadora pública o compartida, no olvide cerrar sesión en "
 
 msgid "enrollment.pages.index.link_card_item.heading"
 msgstr "El siguiente paso es vincular su tarjeta bancaria"

benefits/static/css/styles.css

@@ -350,13 +350,13 @@ footer .footer-links li a:visited {
   font-size: var(--login-gov-button-font-size);
   font-family: "Public Sans", Roboto, system-ui;
   padding: var(--login-gov-button-padding);
+  text-decoration: none;
 }
 
 /* Sets the text `Login.gov` as transparent */
 /* With an Login.gov logo image over it */
 /* So screenreaders can read out `Login.gov` */
 #login .fallback-text {
-  background: url("/static/img/login-gov-logo-rev.svg") no-repeat;
   background-size: contain;
   display: block;
   margin: 8px auto 0 auto;
@@ -370,6 +370,14 @@ footer .footer-links li a:visited {
   line-height: 1;
 }
 
+#login .fallback-text.white-logo {
+  background-image: url("/static/img/login-gov-logo-rev.svg");
+}
+
+#login .fallback-text.color-logo {
+  background-image: url("/static/img/login-gov-logo.svg");
+}
+
 @media (min-width: 992px) {
   #login .fallback-text {
     margin: 0 0 0 5px;
@@ -666,16 +674,12 @@ a.card:focus-visible {
 /* Custom in-line log out button for Enrollment Success, in paragraph */
 
 :root {
-  --logout-paragraph-margin-left: calc(
-    var(--media-item-icon-margin) + var(--media-item-icon-size)
-  );
   --success-illo-width: 180px;
   --success-illo-height: 155.1px;
 }
 
 @media (min-width: 992px) {
   :root {
-    --logout-paragraph-margin-left: 0;
     --success-illo-width: 345px;
     --success-illo-height: 297px;
   }
@@ -686,25 +690,6 @@ a.card:focus-visible {
   height: var(--success-illo-height);
 }
 
-.enrollment-success #login {
-  padding: 0 0.5rem 0.3rem 0.6rem;
-  display: inline-block;
-  margin: 0;
-  width: inherit;
-  border-radius: 0;
-}
-
-.enrollment-success #login .fallback-text {
-  padding-top: 14px;
-  margin: 8px auto 0 auto;
-  display: block;
-  width: 7rem;
-}
-
-.enrollment-success .logout-paragraph {
-  margin-left: var(--logout-paragraph-margin-left);
-}
-
 /* Index and Agency Index (Landing pages) */
 /* These pages have a full-width and full-height background image, creating the need to re-set the Footer margin top to 0 */