Making Visual Changes (Enhancements/Improvements)

When making _visual_ changes to our app(s) UI/Layout we need a systematic approach to ensure that the changes being made are needed (_e.g: fixing a "bug" in the layout on mobile_)
or

Steps to make visual enhancements:
1. Capture a screenshot of the state **`before`** the change so that it's clear what needs to be fixed/enhanced. Paste the screenshot in an issue so we can refer back to it in any PRs.
How to capture a screenshot: https://www.take-a-screenshot.org

2. Follow remaining steps described in `contributing` guide.

3. Include **`after`** screenshot to illustrate the effect of the change made in the PR.

> We are _always_ grateful for Pull Requests that enhance our projects but we need a _much_ better way of communicating as a team/community to ensure effort/time is not wasted.

>We recently received a PR that makes a visual change: https://github.com/dwyl/phoenix-chat-example/pull/24
The PR doesn't reference an issue so it's difficult for the _reviewer_ to understand it at a glance.
e.g: "_Fixes visual regression in rendering messages because of upgrade to Phoenix 1.4 no longer using Bootstrap styles_ https://github.com/dwyl/phoenix-chat-example/issues/19"
> That means it takes longer for the PR to be reviewed/merged ... ⏳