Mobile/Tablet - Eligibility:Start - Link style, spacing

[machikoyasuda]

fixes #538

1. Steps

• remove ordered list number
• make icon smaller
• make links into button with styles

2. Create an account with button

• Center the whole thing
• Left-align text

Design consideration questions:

• What about two-line buttons

Screenshots

[machikoyasuda]

@srhhnry @Indiajar How do the screenshots of the new buttons on mobile look?

[srhhnry]

Hmmmm. I don't love it, but it's definitely the most logical response (e.g. shrinking the text or changing the button width both don't make much sense). So I'm good with these buttons.

To that point--this looks to be a screen smaller than 576px, or our smallest container, and around the size of an iphone 7 or SE. Should we include a smaller set of screens in the designs moving forward? Here's how I'm reorganizing the Figma screens:

[machikoyasuda]

@srhhnry The width of the iPhone 7 and iPhone SE (2nd Generation) is much smaller than 576px. According to both Google Chrome and Mozilla Firefox, here are the widths for the major phone sizes:

• iPhone 6/7/8/SE (2nd Generation)/X/XS/11 Pro/12/13 mini is 375 x 667
• iPhone 12+ Pro/13+ Pro is 390 x 844
• iPhone 6/7/8 Plus/XS Max/11 Pro Max is 414 x 738.
• iPhone 12 Max is 428 x 926

So even though the code can be written so that when a container gets to 576px width or narrower, it shows the design for that Small Container size, it might make sense to include screens at 414px and/or 375px, depending on the page's content/design needs.

Even on the iPhone 12 Max at 428 width, one of the buttons breaks into 2 lines:

Overall, even though the buttons break into 2 lines, I also find that putting the border around the links makes distinguishes the clickable area much more and looks much cleaner than without the border.

[machikoyasuda]

@thekaveman @angela-tran this is ready for review