Add new UI elements to ZEIR app

[cafootitt]

• On home screen, add check mark to vaccines recently recorded a la weight recently recorded (see Joyce Mwanza):

CG: This can be the status immediately shown when vaccines are recorded, and then it can be updated to the next vaccine due date status when it syncs with the scheduling engine. Please note, however, that if not all the vaccines are given (e.g., only BCG is given, but OPV 0 was not), the status should remain the same due status for the birth vaccines. In future, we can see about changing the status to only show which vaccine was not given, but for now, I think it's ok to just continue to show due at birth.

• Change how status is changed by moving choices to a simple menu:

• When you click on "Change status" above, it opens a modal similar to the service location dropdown:

Important notes: You should also be able to get to the child status modal (above) by clicking on the child's current displayed status in the detailed view (the icon next to their name and image). Clicking outside of the menu closes it without changes. Clicking the same option closes the menu without changes. Clicking on another option updates the status and closes the window.

• Add new icon to vaccine card to signify you can tap here to open the detailed view:

Icon: https://material.io/icons/#ic_more_vert

After sync is clicked, we need some sort of indication that (1) the sync button was clicked and (2) it is currently syncing. A snackbar at the bottom would be nice. So after you click "Sync" in the menu:

• The menu closes (like it does now) and a snackbar shows up:
  
• Additionally, we could replace the initials avatar with an animated sync icon:
  
• When the sync is complete, this shows up:
  
• If there's an error, this shows up (and disappears if click happens anywhere else):
  
• If the user opens the menu up while syncing is happening, what appears is the label should change to "Syncing...". It would be nice if the sync icon was animated and rotated. Not a big deal though if not.

Tips on snackbar interaction from [Material guidelines](https://material.io/guidelines/components/snackbars-toasts.html#):

• Snackbars appear above most elements on screen, and they are equal in elevation to the floating action button. However, they are lower in elevation than dialogs, bottom sheets, and navigation drawers.
• Upon entrance, snackbars animate upwards from the bottom edge of the screen. When they appear, they do not block input.
• They exit by being swiped off-screen or automatically disappear after a timeout or user interaction elsewhere (such as summoning a new surface or activity).

[raihan-mpower]

I can work on
"When you click on "Change status" above, it opens a modal similar to the service location dropdown"

[jasonrogena]

@cagulas The sync button reflects when the sync started

[cafootitt]

@jasonrogena @rowo OK, Let's change it to when the last sync was successfully completed. Right now, it's confusing, because the sync could be failing, but according to the side menu, it appears the syncing is working, as it shows the last sync time. So, if the sync fails, it should continue to show the last successful sync time, if the sync is successful, it should update to the current time.

[cafootitt]

@jasonrogena putting the last item in a new issue, since it won't be complete for this release: #504

[cafootitt]

@jasonrogena When I turn off my wifi on my tablet, then press sync, I see the "Sync complete" snackbar message. It shouldn't show this, since there was no internet connection. I think it should show a message that sync cannot happen, because there is no internet connection.

So maybe a snackbar message that says "Sync failed. Check your internet connection."

Or something similar to that. What do you think?

[jasonrogena]

@cagulas "Sync failed. Check your internet connection." makes a lot of sense

[cafootitt]

@jasonrogena I'm moving the last part about showing sync failed if offline to a new issue (#527), so we can close this one.

[cafootitt]

Added sync failed due to error as a new issue: #528.

Closing this issue now.