Making Visual Changes (Enhancements/Improvements)

[nelsonic]

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 ... ⏳