Fix: Login.gov button width on Tablet (#1608)

cal-itp · Aug 2, 2023 · e155313 · e155313
2 parents 389e51d + 9abd183
commit e155313
Show file tree

Hide file tree

Showing 5 changed files with 53 additions and 36 deletions.
diff --git a/benefits/eligibility/templates/eligibility/start--mst-courtesy-card.html b/benefits/eligibility/templates/eligibility/start--mst-courtesy-card.html
@@ -15,7 +15,11 @@ <h1>{% translate "eligibility.pages.start.mst_courtesy_card.headline" %}</h1>
   {% 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 %}
-  <a href="{{ button_url }}" class="btn btn-lg btn-primary" role="button">{% translate "eligibility.buttons.continue" %}</a>
-{% endblock call-to-action-button %}
+{% block call-to-action %}
+  <div class="row d-flex justify-content-lg-end">
+    <div class="col-lg-3 offset-2 offset-sm-2 offset-lg-0 col-sm-8 col-8">
+      {% url "eligibility:confirm" as button_url %}
+      <a href="{{ button_url }}" class="btn btn-lg btn-primary" role="button">{% translate "eligibility.buttons.continue" %}</a>
+    </div>
+  </div>
+{% endblock call-to-action %}
diff --git a/benefits/eligibility/templates/eligibility/start--senior.html b/benefits/eligibility/templates/eligibility/start--senior.html
@@ -15,10 +15,14 @@ <h1>{% translate "eligibility.pages.start.senior.headline" %}</h1>
   {% 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 %}
-  <a href="{{ button_url }}" class="btn btn-lg btn-primary" id="login">
-    {{ button_text }} <span class="fallback-text white-logo">Login.gov</span>
-  </a>
-{% endblock call-to-action-button %}
+{% block call-to-action %}
+  <div class="row d-flex justify-content-lg-end">
+    <div class="col-lg-4 offset-2 offset-lg-0 col-sm-8 col-8 d-flex justify-content-lg-end justify-content-center">
+      {% 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 white-logo">Login.gov</span>
+      </a>
+    </div>
+  </div>
+{% endblock call-to-action %}
diff --git a/benefits/eligibility/templates/eligibility/start--veteran.html b/benefits/eligibility/templates/eligibility/start--veteran.html
@@ -15,8 +15,12 @@ <h1>{% translate "eligibility.pages.start.veteran.headline" %}</h1>
   {% 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 %}
-  <a href="{{ button_url }}" class="btn btn-lg btn-primary" role="button">{{ button_text }}</a>
-{% endblock call-to-action-button %}
+{% block call-to-action %}
+  <div class="row d-flex justify-content-lg-end">
+    <div class="col-lg-3 offset-2 offset-sm-2 offset-lg-0 col-sm-8 col-8">
+      {% url "oauth:login" as button_url %}
+      {% translate "eligibility.buttons.veteran.signin" as button_text %}
+      <a href="{{ button_url }}" class="btn btn-lg btn-primary" role="button">{{ button_text }}</a>
+    </div>
+  </div>
+{% endblock call-to-action %}
diff --git a/benefits/eligibility/templates/eligibility/start.html b/benefits/eligibility/templates/eligibility/start.html
@@ -21,5 +21,5 @@ <h2 class="media-title p-sm">{% translate "eligibility.pages.start.sub_headline"
   </div>
 {% endblock inner-content %}
 
-{% block call-to-action-button %}
-{% endblock call-to-action-button %}
+{% block call-to-action %}
+{% endblock call-to-action %}
diff --git a/benefits/static/css/styles.css b/benefits/static/css/styles.css
@@ -353,14 +353,14 @@ 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-max-width: 310px;
 }
 
 @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-max-width: 289px;
   }
 }
 
@@ -371,21 +371,18 @@ 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;
 }
 
-.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` */
 #login .fallback-text {
   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;
@@ -394,28 +391,36 @@ 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 {
   background-image: url("/static/img/login-gov-logo-rev.svg");
-  width: 132px;
-  height: 18px;
+  width: 130.9887px;
+  height: 17px;
 }
 
+/* Login.gov modal button (color logo) on Eligibility Index */
+
 #login .fallback-text.color-logo {
   background-image: url("/static/img/login-gov-logo.svg");
   width: 120px;
   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 */