Describe what the feature should look like

[darcydriscoll]

🏖️ Definition of done

• [ ] For mobile, tablet, and desktop:
  • [ ] Describe how error messages appear visually
  • [ ] Describe how loading state is communicated visually for both motion-safe and motion-reduced users
  • [ ] Describe what the input box looks like while a message is being sent

🏕️ Problem-solving

🎠 Explore the problem

n/a

🛫 Method

• [ ] Go through each item in the definition of done. Write my response in the Notes section below.

📝 Notes

How error messages appear

• On desktop:
  • Error messages appear similar to how error messages appear on the sign in screen.
  • One message can appear at a time.
  • They're below the message input box.
  • They line-break just before the submit button.
  • They fade in.
  • After 10 seconds, or a message is sent successfully (whatever comes first), they fade out.

[darcydriscoll]

For error messages on mobile (and maybe tablet), there's not enough space to put error messages below the message input box. I'm thinking pop-up modals. Either something Pawfectly-style that takes up much of the screen, or a little dialogue bubble that appears right above the message input box.