Update Sign In page

[allanlasser]

Spec

The sign in page is composed from two components that share common components between them:

1. Overview and service list

This provides users with a quick summary of the value of their MuckRock account and lets them know about all the services they have access to.

Service items have four fields (may require new model and database migration):

1. the service's slug, a machine-readable string referenced by code
2. the service's name, which should be a human-readable string with proper formatting
3. the service's icon, which should be a square PNG with a minimum resolution of 512x512
4. the service's provider, which is a text field
5. a short description of the service that enforces a 70 character maximum

The service list should be styled with overflow-y: auto, so that an overflowing service list scrolls independently of the form.

2. Sign In Form

The sign in form has two variants:

Service-specific

When the intent field has a value that isn't squarelet, we should show details about the service with a corresponding slug in the sign in form's header: the icon, the name, and the provider.

Generic

When the intent field is empty, is squarelet, or doesn't match an existing service, we should show a more generic sign-in form with a simpler header.

Common Components

Common components can be copied from muckrock/documentcloud-frontend/src/lib/components/common:

• Button, in ghost and primary modes
• Field
• FieldLabel
• Input