Repository: cal-itp/benefits

Issue:
Engineering: Front-end - Eligibility Start page design: Redesign to a single-column design. Add media list.
- For both Mobile and Desktop, redesign the page to a two-column vertical design. 
- Redesign the 3-icon content page to be a 2-icon page and add the new bullet points of copy.
- Establish Mobile/Tablet width margins
- Make sure H1 font size is correct
<img width="1512" alt="image" src="https://user-images.githubusercontent.com/3673236/172735521-c7b6760b-832d-448e-b45e-20f217debccb.png">
<img width="453" alt="image" src="https://user-images.githubusercontent.com/3673236/172735548-a9c6ed1f-23fd-4904-8e9f-629f6bf2eba1.png">




Discussion:
For this one, I think we want to modify the `eligibility:start` page and make sure the user is directed there right away - rather than moving all the UI into `core:agency_index`.

In #656 I think we will be adding a redirect in the [`core:agency_index` view](https://github.com/cal-itp/benefits/blob/dev/benefits/core/views.py#L57) to `eligibility:index`.

The [redirect that is already in `eligibility:index`](https://github.com/cal-itp/benefits/blob/dev/benefits/eligibility/views.py#L51) will then take the user to `eligibility:start`

## How it is now

```mermaid
graph LR
    A[core:index] -->|redirect| B(core:agency_index)
    B -->|user clicks button| C(eligiblity:index)
    C -->|redirect| D(eligibility:start)
```

## After #656 

```mermaid
graph LR
    A[core:index] -->|redirect| B(core:agency_index)
    B -->|*redirect*| C(eligiblity:index)
    C -->|redirect| D(eligibility:start)
```

Resolving patch:
diff --git a/benefits/eligibility/views.py b/benefits/eligibility/views.py
--- a/benefits/eligibility/views.py
+++ b/benefits/eligibility/views.py
@@ -67,11 +67,6 @@ def start(request):
 
     payment_options_link = f"{reverse('core:help')}#payment-options"
     media = [
-        dict(
-            icon=viewmodels.Icon("idcardcheck", pgettext("image alt text", "core.icons.idcardcheck")),
-            heading=_(verifier.start_item_name),
-            details=_(verifier.start_item_description),
-        ),
         dict(
             icon=viewmodels.Icon("bankcardcheck", pgettext("image alt text", "core.icons.bankcardcheck")),
             heading=_("eligibility.pages.start.bankcard.title"),
@@ -96,11 +91,12 @@ def start(request):
             raise Exception("EligibilityVerifier requires authentication, but OAUTH_CLIENT_NAME is None")
 
         oauth_help_link = f"{reverse('core:help')}#login-gov"
+        oauth_help_more_link = f"{reverse('core:help')}#login-gov-verify-items"
 
         media.insert(
             0,
             dict(
-                icon=viewmodels.Icon("idscreencheck", pgettext("image alt text", "core.icons.idscreencheck")),
+                icon=viewmodels.Icon("idcardcheck", pgettext("image alt text", "core.icons.idcardcheck")),
                 heading=_("eligibility.pages.start.oauth.heading"),
                 details=_("eligibility.pages.start.oauth.details"),
                 links=[
@@ -109,18 +105,38 @@ def start(request):
                         text=_("eligibility.pages.start.oauth.link_text"),
                         url=oauth_help_link,
                         rel="noopener noreferrer",
-                    )
+                    ),
+                    viewmodels.Button.link(
+                        classes="btn-text btn-link",
+                        text=_("eligibility.pages.start.oauth.link_text[2]"),
+                        url=oauth_help_more_link,
+                        rel="noopener noreferrer",
+                    ),
+                ],
+                bullets=[
+                    _("eligibility.pages.start.oauth.required_items[0]"),
+                    _("eligibility.pages.start.oauth.required_items[1]"),
+                    _("eligibility.pages.start.oauth.required_items[2]"),
                 ],
             ),
         )
 
         if not session.logged_in(request):
             button = viewmodels.Button.login(
-                label=_(verifier.auth_provider.sign_in_button_label),
-                text="",
+                text=_(verifier.auth_provider.sign_in_button_label),
                 url=reverse("oauth:login"),
             )
 
+    else:
+        media.insert(
+            0,
+            dict(
+                icon=viewmodels.Icon("idcardcheck", pgettext("image alt text", "core.icons.idcardcheck")),
+                heading=_(verifier.start_item_name),
+                details=_(verifier.start_item_description),
+            ),
+        )
+
     page = viewmodels.Page(
         title=_("eligibility.pages.start.title"),
         noimage=True,


Test patch:
diff --git a/tests/cypress/specs/ui/eligibility-auth.cy.js b/tests/cypress/specs/ui/eligibility-auth.cy.js
--- a/tests/cypress/specs/ui/eligibility-auth.cy.js
+++ b/tests/cypress/specs/ui/eligibility-auth.cy.js
@@ -18,20 +18,20 @@ describe("Multiple verifier, with AuthProvider: Eligibility start page spec", ()
   });
 
   it("Has the correct copy for Senior Discount Program instructions", () => {
-    cy.contains(
-      "There are three steps to link your transit discount to your bank card."
-    );
-    cy.contains("Provide your California ID number");
-    cy.get(".media-list").children().should("have.length", 3);
+    cy.contains("You will need a few items to connect your discount:");
+    cy.contains("Your bank card details");
+    cy.get(".media-list").children().should("have.length", 2);
   });
 
   it("Has the correct copy for Authorization instructions", () => {
-    cy.get(".media-list").contains("Sign in to Login.gov");
+    cy.get(".media-list").contains(
+      "A Login.gov account with identity verification"
+    );
     cy.contains("Login.gov is a safe way to sign in to government services.");
     cy.contains("Learn more about Login.gov");
   });
 
   it("Has a Login.gov button label", () => {
-    cy.contains("Create an account or sign in with");
+    cy.contains("Get started with");
   });
 });
diff --git a/tests/cypress/specs/ui/eligibility-no-auth.cy.js b/tests/cypress/specs/ui/eligibility-no-auth.cy.js
--- a/tests/cypress/specs/ui/eligibility-no-auth.cy.js
+++ b/tests/cypress/specs/ui/eligibility-no-auth.cy.js
@@ -76,17 +76,17 @@ describe("Multiple verifier, no AuthProvider: Eligibility confirmation form spec
     cy.get("input:focus").should("have.length", 0);
     cy.contains("MST Courtesy Card number *").click();
 
-    cy.get("input:focus").should("have.length", 1);
     cy.url().should("include", eligibility_confirm_url);
   });
 
   it("Has a last name form label and corresponding form field", () => {
     cy.contains("Your MST Courtesy Card");
     cy.contains("An active card that has not expired");
+
     cy.contains("Continue").click();
+
     cy.get("input:focus").should("have.length", 0);
     cy.contains("Last name (as it appears on Courtesy Card) *").click();
-
     cy.get("input:focus").should("have.length", 1);
     cy.url().should("include", eligibility_confirm_url);
   });