Create Multi-Modal Login Page

As a user, I need support for both my phone and tablet so that I can be most effective on both devices.

Acceptance Criteria:

  • GIVEN a device with a screen size of less than 600dp
    • WHEN viewing the login screen
      • THEN the background of the screen is #FFFFFF
      • THEN there is no toolbar
      • THEN the status bar has a color of #3086D4
      • THEN a generic, square logo placeholder displays at the top of the screen
      • THEN below the logo is the word "Branham Player" in large text
      • THEN below the app name is the phrase "A flexible audio player for all of your Android devices"
      • THEN near the bottom of the screen is a Login button
      • AND the Login button has a background with a linear gradient from #3086D4 to #5AFDFF from the top-left to the bottom right
      • AND clicking the Login button goes to the login screen
      • THEN below the Login button is the text "New to Branham Player? Register"
      • AND the word Register uses the accent color of #5AFDFF
      • AND clicking the Register links goes to the registration screen
  • GIVEN a device with a screen size of more than 600dp
    • WHEN viewing the login screen
      • THEN the background of the screen is #EEEEEE
      • THEN the entire screen is scrollable
      • THEN there is a toolbar
      • AND the toolbar has no title
      • AND the toolbar has a primary color of #3DA7F8
      • AND the toolbar is 240dp tall
      • THEN the status bar has a color of #3086D4
      • THEN the content of the page is placed within a card view
      • AND the card view has a background color of #FFFFFF
      • AND the card view is 540dp wide
      • AND the card view is 480dp tall
      • AND the card view is 60dp from the top of the screen
      • THEN a generic, square logo placeholder displays at the top of the card view
      • THEN below the logo is the word "Branham Player" in large text
      • THEN below the app name is the phrase "A flexible audio player for all of your Android devices"
      • THEN near the bottom of the card view is a Login button
      • AND the Login button has a background with a linear gradient from #3086D4 to #5AFDFF from the top-left to the bottom right
      • AND clicking the Login button goes to the login screen
      • THEN below the Login button is the text "New to Branham Player? Register"
      • AND the word Register uses the accent color of #5AFDFF
      • AND clicking the Register links goes to the registration screen
  • GIVEN a device with a screen size of more than 840dp
    • WHEN viewing the login screen
      • THEN everything is the same as the 600dp screen, except the card view is 120dp from the top of the screen

Dev Note: Look at these screens for inspiration