Add interactions to FABs on the people, reports and messages tab

[sglangevin]

This issue adds the interactions to each of the new primary FABs that were added in #4346. This includes adding the action panels on the people and reports pages and adding an interaction to the FAB on the messages page.

Action panels:

Action panels show the available actions you can take from the person or place profile page you are on and show available actions you can take from the Reports page. This might include adding a new person and/or a number of other forms that are available to be filled in.

Action panel overview + people tab

• [ ] When the primary FAB (+ sign) is clicked, an action panel opens as an overlay screen. It covers the bottom nav, so it should look like a modal of sorts. The height depends on the number of available actions, but should not initially exceed the 16:9 ratio keyline (5/8ths the total screen height). In situations with a lot of content that doesn't fit on initial view, the action panel can be swiped up to fill the height of the screen, with content that then scrolls internally. See bottom sheet guidelines.
• [ ] If time allows, include the "morph" animation when the FAB is clicked.
• [ ] The action panel can be closed by swiping down, touching outside the action panel, or by hitting the back button.
• [ ] At the top of the action panel there is a title. This is located in a 50px high header area, is H4 (16px), vertically centered and 20px in from the left.
• [ ] The title is separated from the available actions by a 1px gray line (#D1D3D4) that stretches across the whole action panel.
• [ ] Below the title section are the actions. Each action is contained within a 100x100px container (expands to be taller if there are more than 2 lines of text - each row should line up so if 1 action has a long title, the whole next row shifts down) and the actions should flow between 2-5 columns, depending on screen size to ensure actions are evenly distributed across the row. 10px buffer on the right and left sides at all times and 20px buffer between the gray line and the first row of actions, 20px between rows of actions, and 20px between the bottom edge of the screen and the last row of actions.
• [ ] Inside each container, icons are 60x60px and the text is dark gray (#333333), 14px and centered below the icon. Up to 4 lines of text (it should wrap nicely to the second line, hyphenating as needed but have an ellipsis if the text doesn't fit on 4 lines).
• [ ] On place pages, display the "Add person" action and any relevant "Add place type" actions by default, along with any forms that should be available for the user to fill based on configuration.
• [ ] Width of action panel: 100% of screen on mobile-sized screens, 520px on tablet-sized screens (vertically centered), 600px on desktop-sized screens (vertically and horizontally centered)
• [ ] Height of action panel (mobile): 5/8ths of the screen height; if not all of the actions fit on the initial screen, the panels may be swiped up to fill the height of the screen, with content that then scrolls internally. In this case, the header "New" pops into the top bar and an X appears at the top left that can be used to close the action panel; content scrolls internally. See Material panel guidelines.
• [ ] Height of action panel (tablet & desktop): scaled based on the number of rows of actions with a maximum of 500px, scrolls internally; always attached to the bottom of the screen (doesn't swipe to the height of the screen as it does on mobile)

Action panel - reports tab

• [ ] On the reports tab, clicking the + sign FAB should open a similar action panel with title "New Report" that displays all available actions the user can take
• Review the design spec for more details

FAB interaction - messages tab

• [ ] Clicking the primary FAB (+ sign) on mobile opens up a "New Message" modal. This takes up the full screen and generally looks like a form, but includes a recipient drop-down and a space to type a message, plus buttons for cancel and send
• [ ] On tablet and desktop, the modal opens on the RHS. It looks like a form, with an X at the top right to exit the modal, a recipient drop-down and a space to type the message, plus buttons for cancel and send
• Review the design spec and the Invision prototype for more details

More information in the design spec Consult the Invision prototypes for more info on the various views and interaction.

Blocked on #4346.

[garethbowen]

@latin-panda Can we close this as a dupe?

[latin-panda]

@n-orlowski can we close it?