Merge branch 'image-border' into 'master'

Add borders to images in issues, MRs, and Help.

## What does this MR do?

Adds a gray border around images in Issues, MRs, and Help pages.

## Are there points in the code the reviewer needs to double check?

That this doesn't effect other elements or pages that it shouldn't.

## Why was this MR needed?

It was hard to differentiate between the actual interface and screenshots of it.

## What are the relevant issue numbers?

Fixes #18578 

## Screenshots (if relevant)

### Issues/MRs

Before:

![Screen_Shot_2016-06-14_at_12.22.08_PM](/uploads/00a242a5b4a09b5308f02e6e498862a8/Screen_Shot_2016-06-14_at_12.22.08_PM.png)

After:

![Screen_Shot_2016-06-14_at_12.22.30_PM](/uploads/8fc9fc1c561d788b050e48373449771b/Screen_Shot_2016-06-14_at_12.22.30_PM.png)

![Screen_Shot_2016-06-14_at_12.22.39_PM](/uploads/36c91b2f2ce1eeb77f1646415baea14d/Screen_Shot_2016-06-14_at_12.22.39_PM.png)

### Help

Before:

![Screen_Shot_2016-06-14_at_11.58.54_AM](/uploads/7620491ca338064b872efb538b0bf4f3/Screen_Shot_2016-06-14_at_11.58.54_AM.png)

After:

![Screen_Shot_2016-06-14_at_11.58.57_AM](/uploads/d9fcfcac0f70dde4e69ff4263e369f65/Screen_Shot_2016-06-14_at_11.58.57_AM.png)

## Does this MR meet the acceptance criteria?

- [x] [CHANGELOG](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/CHANGELOG) entry added
- [x] Conform by the [style guides](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/CONTRIBUTING.md#style-guides)
- [x] Branch has no merge conflicts with `master` (if you do - rebase it please)
- [x] [Squashed related commits together](https://git-scm.com/book/en/Git-Tools-Rewriting-History#Squashing-Commits)

cc: @jschatz1

See merge request !4655

4 files changed, 22 insertions, 0 deletions

diff --git a/CHANGELOG b/CHANGELOG
index 01e7e7a1606..0e19ae06715 100644
--- a/CHANGELOG
+++ b/CHANGELOG
@@ -18,6 +18,7 @@ v 8.9.0 (unreleased)
   - Redesign all Devise emails. !4297
   - Don't show 'Leave Project' to group members
   - Fix wiki page events' webhook to point to the wiki repository
+  - Add a border around images to differentiate them from the background.
   - Don't show tags for revert and cherry-pick operations
   - Fix issue todo not remove when leave project !4150 (Long Nguyen)
   - Allow customisable text on the 'nearly there' page after a user signs up
diff --git a/app/assets/stylesheets/pages/help.scss b/app/assets/stylesheets/pages/help.scss
index 4a95b7b852e..0b710ef168b 100644
--- a/app/assets/stylesheets/pages/help.scss
+++ b/app/assets/stylesheets/pages/help.scss
@@ -57,4 +57,11 @@
 
 .documentation {
   padding: 7px;
+
+  // Border around images in the help pages.
+  img:not(.emoji) {
+    border: 1px solid $table-border-gray;
+    padding: 5px;
+    margin: 5px;
+  }
 }
diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss
index 687117233f6..21ff6ab71f0 100644
--- a/app/assets/stylesheets/pages/issuable.scss
+++ b/app/assets/stylesheets/pages/issuable.scss
@@ -4,6 +4,13 @@
       margin-right: 1px;
     }
   }
+
+  // Border around images in issue and MR descriptions.
+  .description img:not(.emoji) {
+    border: 1px solid $table-border-gray;
+    padding: 5px;
+    margin: 5px;
+  }
 }
 
 .issuable-filter-count {
diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss
index 35d728aec83..df0c241bbf1 100644
--- a/app/assets/stylesheets/pages/notes.scss
+++ b/app/assets/stylesheets/pages/notes.scss
@@ -117,6 +117,13 @@ ul.notes {
         code {
           word-break: keep-all;
         }
+
+        // Border around images in issue and MR comments.
+        img:not(.emoji) {
+          border: 1px solid $table-border-gray;
+          padding: 5px;
+          margin: 5px 0;
+        }
       }
     }