replace "sync state" text with icons and tooltips

[lloyd]

Part of this demo shows how you don't need a heavy handed sign up flow, how you can build a site that's instantly usable and upgrades when a users chooses to sign in.

This makes things a little complicated, as your todolist can be:

1. saved locally (when not logged in)
2. in the process of being saved to the server
3. all synced up and happy

Currently there's placeholder text to the left of the signin box, we should represent this state with icons instead, maybe with tooltips upon hovering over the symbol.

• "You're not logged in, sign in with persona.org to save your todo list"
• "one sec, we're saving your todolist items to the server"
• "Your todolist is saved on the server, you can access it anywhere!"

[lloyd]

actually, I'll do the first pass here, and then @skinny97214 can make it beautiful via CSS and image updates.

[codepo8]

Sounds great. Then it uses less space and is like any other app. rotating arrows when syncing, arrow down animated, checkbox

[jbonacci]

The functionality appears to be there now. Separate bug opened to handle case where user is on mobile device.