Refactor WorkflowCard

[joebochill]

Changes proposed in this Pull Request:

• Remove extra view wrapper (use ImageBackground as the root element)
• Refactor useScreenWidth -> useScreenDimensions
  • use the existing useDeviceDimensions hook for width/height instead of writing our own logic
  • return the screen dimensions and the isTablet utility boolean
• Add a mock WorkflowCardHeader for testing (instead of trying to hack based on WorkflowCardBody)
• Remove Header component from example page — Header component will not / should not be used with the WorkflowCard component — that's why we have a WorkflowCardHeader.
  • this was causing confusion and obscuring the behavior of the card by being in the way at the top of the screen
• moved mobile and tablet styles out into 'classes' to eliminate multiple inline conditional logic statements
• Removed recursive check for WorkflowCardHeader (expected usage will have it in the direct children of WorkflowCard only)
• Update background image behavior to tile and set the background color on the ImageBackground
  • if we want this to be customizable, we can add a prop for it, or users can simply add a style rule on the WorkflowCard (this is probably sufficient)

Screenshots

To Test:

• yarn start:example
• Click on the button to view the example

Any specific feedback you are looking for?

• I didn't specifically test this on a tablet device (I was just verifying styles applied as expected on landscape phone), so it would be good to sanity check on a device where the card actually floats in the middle.

[manojleaton]

Tested the app in both android and ios tablets, Please check the screenshots attached