Merge branch 'master' into sh-support-bitbucket-server-import

59 files changed, 616 insertions, 403 deletions

diff --git a/app/assets/javascripts/diffs/components/diff_line_gutter_content.vue b/app/assets/javascripts/diffs/components/diff_line_gutter_content.vue
index 0fe0007057b..d184a76f038 100644
--- a/app/assets/javascripts/diffs/components/diff_line_gutter_content.vue
+++ b/app/assets/javascripts/diffs/components/diff_line_gutter_content.vue
@@ -71,6 +71,11 @@ export default {
       required: false,
       default: false,
     },
+    discussions: {
+      type: Array,
+      required: false,
+      default: () => [],
+    },
   },
   computed: {
     ...mapState({
@@ -78,7 +83,6 @@ export default {
       diffFiles: state => state.diffs.diffFiles,
     }),
     ...mapGetters(['isLoggedIn']),
-    ...mapGetters('diffs', ['discussionsByLineCode']),
     lineHref() {
       return this.lineCode ? `#${this.lineCode}` : '#';
     },
@@ -88,24 +92,19 @@ export default {
         this.showCommentButton &&
         !this.isMatchLine &&
         !this.isContextLine &&
-        !this.hasDiscussions &&
-        !this.isMetaLine
+        !this.isMetaLine &&
+        !this.hasDiscussions
       );
     },
-    discussions() {
-      return this.discussionsByLineCode[this.lineCode] || [];
-    },
     hasDiscussions() {
       return this.discussions.length > 0;
     },
     shouldShowAvatarsOnGutter() {
-      let render = this.hasDiscussions && this.showCommentButton;
-
       if (!this.lineType && this.linePosition === LINE_POSITION_RIGHT) {
-        render = false;
+        return false;
       }
 
-      return render;
+      return this.hasDiscussions && this.showCommentButton;
     },
   },
   methods: {
diff --git a/app/assets/javascripts/diffs/components/diff_table_cell.vue b/app/assets/javascripts/diffs/components/diff_table_cell.vue
index 5962f30d9bb..e8e8ddc6c5e 100644
--- a/app/assets/javascripts/diffs/components/diff_table_cell.vue
+++ b/app/assets/javascripts/diffs/components/diff_table_cell.vue
@@ -67,6 +67,11 @@ export default {
       required: false,
       default: false,
     },
+    discussions: {
+      type: Array,
+      required: false,
+      default: () => [],
+    },
   },
   computed: {
     ...mapGetters(['isLoggedIn']),
@@ -136,6 +141,7 @@ export default {
       :is-match-line="isMatchLine"
       :is-context-line="isContentLine"
       :is-meta-line="isMetaLine"
+      :discussions="discussions"
     />
   </td>
 </template>
diff --git a/app/assets/javascripts/diffs/components/inline_diff_comment_row.vue b/app/assets/javascripts/diffs/components/inline_diff_comment_row.vue
index a6f011ff31e..1b5ae5e9f75 100644
--- a/app/assets/javascripts/diffs/components/inline_diff_comment_row.vue
+++ b/app/assets/javascripts/diffs/components/inline_diff_comment_row.vue
@@ -1,5 +1,5 @@
 <script>
-import { mapState, mapGetters } from 'vuex';
+import { mapState } from 'vuex';
 import diffDiscussions from './diff_discussions.vue';
 import diffLineNoteForm from './diff_line_note_form.vue';
 
@@ -21,15 +21,16 @@ export default {
       type: Number,
       required: true,
     },
+    discussions: {
+      type: Array,
+      required: false,
+      default: () => [],
+    },
   },
   computed: {
     ...mapState({
       diffLineCommentForms: state => state.diffs.diffLineCommentForms,
     }),
-    ...mapGetters('diffs', ['discussionsByLineCode']),
-    discussions() {
-      return this.discussionsByLineCode[this.line.lineCode] || [];
-    },
     className() {
       return this.discussions.length ? '' : 'js-temp-notes-holder';
     },
diff --git a/app/assets/javascripts/diffs/components/inline_diff_table_row.vue b/app/assets/javascripts/diffs/components/inline_diff_table_row.vue
index 0e306f39a9f..32d65ff994f 100644
--- a/app/assets/javascripts/diffs/components/inline_diff_table_row.vue
+++ b/app/assets/javascripts/diffs/components/inline_diff_table_row.vue
@@ -33,6 +33,11 @@ export default {
       required: false,
       default: false,
     },
+    discussions: {
+      type: Array,
+      required: false,
+      default: () => [],
+    },
   },
   data() {
     return {
@@ -89,6 +94,7 @@ export default {
       :is-bottom="isBottom"
       :is-hover="isHover"
       :show-comment-button="true"
+      :discussions="discussions"
       class="diff-line-num old_line"
     />
     <diff-table-cell
@@ -98,6 +104,7 @@ export default {
       :line-type="newLineType"
       :is-bottom="isBottom"
       :is-hover="isHover"
+      :discussions="discussions"
       class="diff-line-num new_line"
     />
     <td
diff --git a/app/assets/javascripts/diffs/components/inline_diff_view.vue b/app/assets/javascripts/diffs/components/inline_diff_view.vue
index 8e491d293e5..5f30cc57a59 100644
--- a/app/assets/javascripts/diffs/components/inline_diff_view.vue
+++ b/app/assets/javascripts/diffs/components/inline_diff_view.vue
@@ -20,7 +20,11 @@ export default {
     },
   },
   computed: {
-    ...mapGetters('diffs', ['commitId', 'discussionsByLineCode']),
+    ...mapGetters('diffs', [
+      'commitId',
+      'shouldRenderInlineCommentRow',
+      'singleDiscussionByLineCode',
+    ]),
     ...mapState({
       diffLineCommentForms: state => state.diffs.diffLineCommentForms,
     }),
@@ -34,18 +38,7 @@ export default {
       return window.gon.user_color_scheme;
     },
   },
-  methods: {
-    shouldRenderCommentRow(line) {
-      if (this.diffLineCommentForms[line.lineCode]) return true;
-
-      const lineDiscussions = this.discussionsByLineCode[line.lineCode];
-      if (lineDiscussions === undefined) {
-        return false;
-      }
-
-      return lineDiscussions.every(discussion => discussion.expanded);
-    },
-  },
+  methods: {},
 };
 </script>
 
@@ -64,13 +57,15 @@ export default {
           :line="line"
           :is-bottom="index + 1 === diffLinesLength"
           :key="line.lineCode"
+          :discussions="singleDiscussionByLineCode(line.lineCode)"
         />
         <inline-diff-comment-row
-          v-if="shouldRenderCommentRow(line)"
+          v-if="shouldRenderInlineCommentRow(line)"
           :diff-file-hash="diffFile.fileHash"
           :line="line"
           :line-index="index"
           :key="index"
+          :discussions="singleDiscussionByLineCode(line.lineCode)"
         />
       </template>
     </tbody>
diff --git a/app/assets/javascripts/diffs/components/parallel_diff_comment_row.vue b/app/assets/javascripts/diffs/components/parallel_diff_comment_row.vue
index 05e5cafc717..bb9a65c83fa 100644
--- a/app/assets/javascripts/diffs/components/parallel_diff_comment_row.vue
+++ b/app/assets/javascripts/diffs/components/parallel_diff_comment_row.vue
@@ -1,5 +1,5 @@
 <script>
-import { mapState, mapGetters } from 'vuex';
+import { mapState } from 'vuex';
 import diffDiscussions from './diff_discussions.vue';
 import diffLineNoteForm from './diff_line_note_form.vue';
 
@@ -21,48 +21,51 @@ export default {
       type: Number,
       required: true,
     },
+    leftDiscussions: {
+      type: Array,
+      required: false,
+      default: () => [],
+    },
+    rightDiscussions: {
+      type: Array,
+      required: false,
+      default: () => [],
+    },
   },
   computed: {
     ...mapState({
       diffLineCommentForms: state => state.diffs.diffLineCommentForms,
     }),
-    ...mapGetters('diffs', ['discussionsByLineCode']),
     leftLineCode() {
       return this.line.left.lineCode;
     },
     rightLineCode() {
       return this.line.right.lineCode;
     },
-    hasDiscussion() {
-      const discussions = this.discussionsByLineCode;
-
-      return discussions[this.leftLineCode] || discussions[this.rightLineCode];
-    },
     hasExpandedDiscussionOnLeft() {
-      const discussions = this.discussionsByLineCode[this.leftLineCode];
-
+      const discussions = this.leftDiscussions;
       return discussions ? discussions.every(discussion => discussion.expanded) : false;
     },
     hasExpandedDiscussionOnRight() {
-      const discussions = this.discussionsByLineCode[this.rightLineCode];
-
+      const discussions = this.rightDiscussions;
       return discussions ? discussions.every(discussion => discussion.expanded) : false;
     },
     hasAnyExpandedDiscussion() {
       return this.hasExpandedDiscussionOnLeft || this.hasExpandedDiscussionOnRight;
     },
     shouldRenderDiscussionsOnLeft() {
-      return this.discussionsByLineCode[this.leftLineCode] && this.hasExpandedDiscussionOnLeft;
+      return this.leftDiscussions && this.hasExpandedDiscussionOnLeft;
     },
     shouldRenderDiscussionsOnRight() {
-      return (
-        this.discussionsByLineCode[this.rightLineCode] &&
-        this.hasExpandedDiscussionOnRight &&
-        this.line.right.type
-      );
+      return this.rightDiscussions && this.hasExpandedDiscussionOnRight && this.line.right.type;
+    },
+    showRightSideCommentForm() {
+      return this.line.right.type && this.diffLineCommentForms[this.rightLineCode];
     },
     className() {
-      return this.hasDiscussion ? '' : 'js-temp-notes-holder';
+      return this.leftDiscussions.length > 0 || this.rightDiscussions.length > 0
+        ? ''
+        : 'js-temp-notes-holder';
     },
   },
 };
@@ -80,13 +83,12 @@ export default {
         class="content"
       >
         <diff-discussions
-          v-if="discussionsByLineCode[leftLineCode].length"
-          :discussions="discussionsByLineCode[leftLineCode]"
+          v-if="leftDiscussions.length"
+          :discussions="leftDiscussions"
         />
       </div>
       <diff-line-note-form
-        v-if="diffLineCommentForms[leftLineCode] &&
-        diffLineCommentForms[leftLineCode]"
+        v-if="diffLineCommentForms[leftLineCode]"
         :diff-file-hash="diffFileHash"
         :line="line.left"
         :note-target-line="line.left"
@@ -100,13 +102,12 @@ export default {
         class="content"
       >
         <diff-discussions
-          v-if="discussionsByLineCode[rightLineCode].length"
-          :discussions="discussionsByLineCode[rightLineCode]"
+          v-if="rightDiscussions.length"
+          :discussions="rightDiscussions"
         />
       </div>
       <diff-line-note-form
-        v-if="diffLineCommentForms[rightLineCode] &&
-        diffLineCommentForms[rightLineCode] && line.right.type"
+        v-if="showRightSideCommentForm"
         :diff-file-hash="diffFileHash"
         :line="line.right"
         :note-target-line="line.right"
diff --git a/app/assets/javascripts/diffs/components/parallel_diff_table_row.vue b/app/assets/javascripts/diffs/components/parallel_diff_table_row.vue
index 0031cedc68f..d4e54c2bd00 100644
--- a/app/assets/javascripts/diffs/components/parallel_diff_table_row.vue
+++ b/app/assets/javascripts/diffs/components/parallel_diff_table_row.vue
@@ -36,6 +36,16 @@ export default {
       required: false,
       default: false,
     },
+    leftDiscussions: {
+      type: Array,
+      required: false,
+      default: () => [],
+    },
+    rightDiscussions: {
+      type: Array,
+      required: false,
+      default: () => [],
+    },
   },
   data() {
     return {
@@ -116,6 +126,7 @@ export default {
       :is-hover="isLeftHover"
       :show-comment-button="true"
       :diff-view-type="parallelDiffViewType"
+      :discussions="leftDiscussions"
       class="diff-line-num old_line"
     />
     <td
@@ -136,6 +147,7 @@ export default {
       :is-hover="isRightHover"
       :show-comment-button="true"
       :diff-view-type="parallelDiffViewType"
+      :discussions="rightDiscussions"
       class="diff-line-num new_line"
     />
     <td
diff --git a/app/assets/javascripts/diffs/components/parallel_diff_view.vue b/app/assets/javascripts/diffs/components/parallel_diff_view.vue
index 8f8d6bbc818..4d97cb6d15d 100644
--- a/app/assets/javascripts/diffs/components/parallel_diff_view.vue
+++ b/app/assets/javascripts/diffs/components/parallel_diff_view.vue
@@ -21,7 +21,11 @@ export default {
     },
   },
   computed: {
-    ...mapGetters('diffs', ['commitId', 'discussionsByLineCode']),
+    ...mapGetters('diffs', [
+      'commitId',
+      'singleDiscussionByLineCode',
+      'shouldRenderParallelCommentRow',
+    ]),
     ...mapState({
       diffLineCommentForms: state => state.diffs.diffLineCommentForms,
     }),
@@ -51,32 +55,6 @@ export default {
       return window.gon.user_color_scheme;
     },
   },
-  methods: {
-    shouldRenderCommentRow(line) {
-      const leftLineCode = line.left.lineCode;
-      const rightLineCode = line.right.lineCode;
-      const discussions = this.discussionsByLineCode;
-      const leftDiscussions = discussions[leftLineCode];
-      const rightDiscussions = discussions[rightLineCode];
-      const hasDiscussion = leftDiscussions || rightDiscussions;
-
-      const hasExpandedDiscussionOnLeft = leftDiscussions
-        ? leftDiscussions.every(discussion => discussion.expanded)
-        : false;
-      const hasExpandedDiscussionOnRight = rightDiscussions
-        ? rightDiscussions.every(discussion => discussion.expanded)
-        : false;
-
-      if (hasDiscussion && (hasExpandedDiscussionOnLeft || hasExpandedDiscussionOnRight)) {
-        return true;
-      }
-
-      const hasCommentFormOnLeft = this.diffLineCommentForms[leftLineCode];
-      const hasCommentFormOnRight = this.diffLineCommentForms[rightLineCode];
-
-      return hasCommentFormOnLeft || hasCommentFormOnRight;
-    },
-  },
 };
 </script>
 
@@ -97,13 +75,17 @@ export default {
             :line="line"
             :is-bottom="index + 1 === diffLinesLength"
             :key="index"
+            :left-discussions="singleDiscussionByLineCode(line.left.lineCode)"
+            :right-discussions="singleDiscussionByLineCode(line.right.lineCode)"
           />
           <parallel-diff-comment-row
-            v-if="shouldRenderCommentRow(line)"
+            v-if="shouldRenderParallelCommentRow(line)"
             :key="`dcr-${index}`"
             :line="line"
             :diff-file-hash="diffFile.fileHash"
             :line-index="index"
+            :left-discussions="singleDiscussionByLineCode(line.left.lineCode)"
+            :right-discussions="singleDiscussionByLineCode(line.right.lineCode)"
           />
         </template>
       </tbody>
diff --git a/app/assets/javascripts/diffs/store/getters.js b/app/assets/javascripts/diffs/store/getters.js
index d3881fa1a0a..c7b9b1a16e6 100644
--- a/app/assets/javascripts/diffs/store/getters.js
+++ b/app/assets/javascripts/diffs/store/getters.js
@@ -75,19 +75,21 @@ export const discussionsByLineCode = (state, getters, rootState, rootGetters) =>
     const isDiffDiscussion = note.diff_discussion;
     const hasLineCode = note.line_code;
     const isResolvable = note.resolvable;
-    const diffRefs = diffRefsByLineCode[note.line_code];
 
-    if (isDiffDiscussion && hasLineCode && isResolvable && diffRefs) {
-      const refs = convertObjectPropsToCamelCase(note.position.formatter);
-      const originalRefs = convertObjectPropsToCamelCase(note.original_position.formatter);
+    if (isDiffDiscussion && hasLineCode && isResolvable) {
+      const diffRefs = diffRefsByLineCode[note.line_code];
+      if (diffRefs) {
+        const refs = convertObjectPropsToCamelCase(note.position.formatter);
+        const originalRefs = convertObjectPropsToCamelCase(note.original_position.formatter);
 
-      if (_.isEqual(refs, diffRefs) || _.isEqual(originalRefs, diffRefs)) {
-        const lineCode = note.line_code;
+        if (_.isEqual(refs, diffRefs) || _.isEqual(originalRefs, diffRefs)) {
+          const lineCode = note.line_code;
 
-        if (acc[lineCode]) {
-          acc[lineCode].push(note);
-        } else {
-          acc[lineCode] = [note];
+          if (acc[lineCode]) {
+            acc[lineCode].push(note);
+          } else {
+            acc[lineCode] = [note];
+          }
         }
       }
     }
@@ -96,6 +98,47 @@ export const discussionsByLineCode = (state, getters, rootState, rootGetters) =>
   }, {});
 };
 
+export const singleDiscussionByLineCode = (state, getters) => lineCode => {
+  if (!lineCode) return [];
+  const discussions = getters.discussionsByLineCode;
+  return discussions[lineCode] || [];
+};
+
+export const shouldRenderParallelCommentRow = (state, getters) => line => {
+  const leftLineCode = line.left.lineCode;
+  const rightLineCode = line.right.lineCode;
+  const leftDiscussions = getters.singleDiscussionByLineCode(leftLineCode);
+  const rightDiscussions = getters.singleDiscussionByLineCode(rightLineCode);
+  const hasDiscussion = leftDiscussions.length || rightDiscussions.length;
+
+  const hasExpandedDiscussionOnLeft = leftDiscussions.length
+    ? leftDiscussions.every(discussion => discussion.expanded)
+    : false;
+  const hasExpandedDiscussionOnRight = rightDiscussions.length
+    ? rightDiscussions.every(discussion => discussion.expanded)
+    : false;
+
+  if (hasDiscussion && (hasExpandedDiscussionOnLeft || hasExpandedDiscussionOnRight)) {
+    return true;
+  }
+
+  const hasCommentFormOnLeft = state.diffLineCommentForms[leftLineCode];
+  const hasCommentFormOnRight = state.diffLineCommentForms[rightLineCode];
+
+  return hasCommentFormOnLeft || hasCommentFormOnRight;
+};
+
+export const shouldRenderInlineCommentRow = (state, getters) => line => {
+  if (state.diffLineCommentForms[line.lineCode]) return true;
+
+  const lineDiscussions = getters.singleDiscussionByLineCode(line.lineCode);
+  if (lineDiscussions.length === 0) {
+    return false;
+  }
+
+  return lineDiscussions.every(discussion => discussion.expanded);
+};
+
 // prevent babel-plugin-rewire from generating an invalid default during karma∂ tests
 export const getDiffFileByHash = state => fileHash =>
   state.diffFiles.find(file => file.fileHash === fileHash);
diff --git a/app/assets/javascripts/gpg_badges.js b/app/assets/javascripts/gpg_badges.js
index 029fd6a67d4..efba6fc1aff 100644
--- a/app/assets/javascripts/gpg_badges.js
+++ b/app/assets/javascripts/gpg_badges.js
@@ -1,23 +1,36 @@
 import $ from 'jquery';
 import { parseQueryStringIntoObject } from '~/lib/utils/common_utils';
 import axios from '~/lib/utils/axios_utils';
-import flash from '~/flash';
+import createFlash from '~/flash';
 import { __ } from '~/locale';
 
 export default class GpgBadges {
   static fetch() {
-    const badges = $('.js-loading-gpg-badge');
     const tag = $('.js-signature-container');
+    if (tag.length === 0) {
+      return Promise.resolve();
+    }
+
+    const badges = $('.js-loading-gpg-badge');
 
     badges.html('<i class="fa fa-spinner fa-spin"></i>');
 
+    const displayError = () => createFlash(__('An error occurred while loading commit signatures'));
+
+    const endpoint = tag.data('signaturesPath');
+    if (!endpoint) {
+      displayError();
+      return Promise.reject(new Error('Missing commit signatures endpoint!'));
+    }
+
     const params = parseQueryStringIntoObject(tag.serialize());
-    return axios.get(tag.data('signaturesPath'), { params })
-    .then(({ data }) => {
-      data.signatures.forEach((signature) => {
-        badges.filter(`[data-commit-sha="${signature.commit_sha}"]`).replaceWith(signature.html);
-      });
-    })
-    .catch(() => flash(__('An error occurred while loading commits')));
+    return axios
+      .get(endpoint, { params })
+      .then(({ data }) => {
+        data.signatures.forEach(signature => {
+          badges.filter(`[data-commit-sha="${signature.commit_sha}"]`).replaceWith(signature.html);
+        });
+      })
+      .catch(displayError);
   }
 }
diff --git a/app/assets/javascripts/issue_show/components/edited.vue b/app/assets/javascripts/issue_show/components/edited.vue
index 5ff5b1630b1..05cd976f196 100644
--- a/app/assets/javascripts/issue_show/components/edited.vue
+++ b/app/assets/javascripts/issue_show/components/edited.vue
@@ -46,7 +46,7 @@
       by
       <a
         :href="updatedByPath"
-        class="author_link"
+        class="author-link"
       >
         <span>{{ updatedByName }}</span>
       </a>
diff --git a/app/assets/javascripts/lib/utils/common_utils.js b/app/assets/javascripts/lib/utils/common_utils.js
index 6b7550efff8..2f3dd6f6cbc 100644
--- a/app/assets/javascripts/lib/utils/common_utils.js
+++ b/app/assets/javascripts/lib/utils/common_utils.js
@@ -541,6 +541,26 @@ export const addSelectOnFocusBehaviour = (selector = '.js-select-on-focus') => {
   });
 };
 
+/**
+ * Method to round of values with decimal places
+ * with provided precision.
+ *
+ * Taken from https://stackoverflow.com/a/7343013/414749
+ *
+ * Eg; roundOffFloat(3.141592, 3) = 3.142
+ *
+ * Refer to spec/javascripts/lib/utils/common_utils_spec.js for
+ * more supported examples.
+ *
+ * @param {Float} number
+ * @param {Number} precision
+ */
+export const roundOffFloat = (number, precision = 0) => {
+  // eslint-disable-next-line no-restricted-properties
+  const multiplier = Math.pow(10, precision);
+  return Math.round(number * multiplier) / multiplier;
+};
+
 window.gl = window.gl || {};
 window.gl.utils = {
   ...(window.gl.utils || {}),
diff --git a/app/assets/javascripts/lib/utils/poll.js b/app/assets/javascripts/lib/utils/poll.js
index 7fca80c2fdb..91d8c30744f 100644
--- a/app/assets/javascripts/lib/utils/poll.js
+++ b/app/assets/javascripts/lib/utils/poll.js
@@ -38,7 +38,7 @@ import { normalizeHeaders } from './common_utils';
  *  } else {
  *   poll.stop();
  *  }
-* });
+ * });
  *
  * 1. Checks for response and headers before start polling
  * 2. Interval is provided by `Poll-Interval` header.
@@ -51,8 +51,8 @@ export default class Poll {
   constructor(options = {}) {
     this.options = options;
     this.options.data = options.data || {};
-    this.options.notificationCallback = options.notificationCallback ||
-      function notificationCallback() {};
+    this.options.notificationCallback =
+      options.notificationCallback || function notificationCallback() {};
 
     this.intervalHeader = 'POLL-INTERVAL';
     this.timeoutID = null;
@@ -63,6 +63,7 @@ export default class Poll {
     const headers = normalizeHeaders(response.headers);
     const pollInterval = parseInt(headers[this.intervalHeader], 10);
     if (pollInterval > 0 && response.status === httpStatusCodes.OK && this.canPoll) {
+      clearTimeout(this.timeoutID);
       this.timeoutID = setTimeout(() => {
         this.makeRequest();
       }, pollInterval);
@@ -77,11 +78,11 @@ export default class Poll {
     notificationCallback(true);
 
     return resource[method](data)
-      .then((response) => {
+      .then(response => {
         this.checkConditions(response);
         notificationCallback(false);
       })
-      .catch((error) => {
+      .catch(error => {
         notificationCallback(false);
         if (error.status === httpStatusCodes.ABORTED) {
           return;
diff --git a/app/assets/javascripts/notes/components/note_edited_text.vue b/app/assets/javascripts/notes/components/note_edited_text.vue
index 391bb2ae179..d848335022f 100644
--- a/app/assets/javascripts/notes/components/note_edited_text.vue
+++ b/app/assets/javascripts/notes/components/note_edited_text.vue
@@ -42,7 +42,7 @@ export default {
       by
       <a
         :href="editedBy.path"
-        class="js-vue-author author_link">
+        class="js-vue-author author-link">
         {{ editedBy.name }}
       </a>
     </template>
diff --git a/app/assets/javascripts/notes/index.js b/app/assets/javascripts/notes/index.js
index 6dd4c9d66ac..3aef30c608c 100644
--- a/app/assets/javascripts/notes/index.js
+++ b/app/assets/javascripts/notes/index.js
@@ -15,7 +15,7 @@ document.addEventListener('DOMContentLoaded', () => {
       const notesDataset = document.getElementById('js-vue-notes').dataset;
       const parsedUserData = JSON.parse(notesDataset.currentUserData);
       const noteableData = JSON.parse(notesDataset.noteableData);
-      const { markdownVersion } = notesDataset;
+      const markdownVersion = parseInt(notesDataset.markdownVersion, 10);
       let currentUserData = {};
 
       noteableData.noteableType = notesDataset.noteableType;
diff --git a/app/assets/javascripts/notes/stores/mutations.js b/app/assets/javascripts/notes/stores/mutations.js
index ab6a95e2601..e1b159142c9 100644
--- a/app/assets/javascripts/notes/stores/mutations.js
+++ b/app/assets/javascripts/notes/stores/mutations.js
@@ -174,27 +174,19 @@ export default {
 
   [types.UPDATE_NOTE](state, note) {
     const noteObj = utils.findNoteObjectById(state.discussions, note.discussion_id);
-
     if (noteObj.individual_note) {
       noteObj.notes.splice(0, 1, note);
     } else {
       const comment = utils.findNoteObjectById(noteObj.notes, note.id);
-      noteObj.notes.splice(noteObj.notes.indexOf(comment), 1, note);
+      Object.assign(comment, note);
     }
   },
 
   [types.UPDATE_DISCUSSION](state, noteData) {
     const note = noteData;
-    let index = 0;
-
-    state.discussions.forEach((n, i) => {
-      if (n.id === note.id) {
-        index = i;
-      }
-    });
-
+    const selectedDiscussion = state.discussions.find(n => n.id === note.id);
     note.expanded = true; // override expand flag to prevent collapse
-    state.discussions.splice(index, 1, note);
+    Object.assign(selectedDiscussion, note);
   },
 
   [types.CLOSE_ISSUE](state) {
@@ -215,12 +207,9 @@ export default {
 
   [types.SET_DISCUSSION_DIFF_LINES](state, { discussionId, diffLines }) {
     const discussion = utils.findNoteObjectById(state.discussions, discussionId);
-    const index = state.discussions.indexOf(discussion);
 
-    const discussionWithDiffLines = Object.assign({}, discussion, {
+    Object.assign(discussion, {
       truncated_diff_lines: diffLines,
     });
-
-    state.discussions.splice(index, 1, discussionWithDiffLines);
   },
 };
diff --git a/app/assets/javascripts/notes/stores/utils.js b/app/assets/javascripts/notes/stores/utils.js
index a0e096ebfaf..c4a812c5af4 100644
--- a/app/assets/javascripts/notes/stores/utils.js
+++ b/app/assets/javascripts/notes/stores/utils.js
@@ -2,13 +2,11 @@ import AjaxCache from '~/lib/utils/ajax_cache';
 
 const REGEX_QUICK_ACTIONS = /^\/\w+.*$/gm;
 
-export const findNoteObjectById = (notes, id) =>
-  notes.filter(n => n.id === id)[0];
+export const findNoteObjectById = (notes, id) => notes.find(n => n.id === id);
 
 export const getQuickActionText = note => {
   let text = 'Applying command';
-  const quickActions =
-    AjaxCache.get(gl.GfmAutoComplete.dataSources.commands) || [];
+  const quickActions = AjaxCache.get(gl.GfmAutoComplete.dataSources.commands) || [];
 
   const executedCommands = quickActions.filter(command => {
     const commandRegex = new RegExp(`/${command.name}`);
@@ -29,5 +27,4 @@ export const getQuickActionText = note => {
 
 export const hasQuickActions = note => REGEX_QUICK_ACTIONS.test(note);
 
-export const stripQuickActions = note =>
-  note.replace(REGEX_QUICK_ACTIONS, '').trim();
+export const stripQuickActions = note => note.replace(REGEX_QUICK_ACTIONS, '').trim();
diff --git a/app/assets/javascripts/pages/projects/blob/show/index.js b/app/assets/javascripts/pages/projects/blob/show/index.js
index 85c6862d629..84e5bb3c46e 100644
--- a/app/assets/javascripts/pages/projects/blob/show/index.js
+++ b/app/assets/javascripts/pages/projects/blob/show/index.js
@@ -2,6 +2,7 @@ import Vue from 'vue';
 import commitPipelineStatus from '~/projects/tree/components/commit_pipeline_status_component.vue';
 import BlobViewer from '~/blob/viewer/index';
 import initBlob from '~/pages/projects/init_blob';
+import GpgBadges from '~/gpg_badges';
 
 document.addEventListener('DOMContentLoaded', () => {
   new BlobViewer(); // eslint-disable-line no-new
@@ -26,4 +27,6 @@ document.addEventListener('DOMContentLoaded', () => {
       },
     });
   }
+
+  GpgBadges.fetch();
 });
diff --git a/app/assets/javascripts/pages/projects/show/index.js b/app/assets/javascripts/pages/projects/show/index.js
index 3b0f0f960b8..d2dc0c4570e 100644
--- a/app/assets/javascripts/pages/projects/show/index.js
+++ b/app/assets/javascripts/pages/projects/show/index.js
@@ -7,6 +7,7 @@ import TreeView from '~/tree';
 import BlobViewer from '~/blob/viewer/index';
 import Activities from '~/activities';
 import { ajaxGet } from '~/lib/utils/common_utils';
+import GpgBadges from '~/gpg_badges';
 import Star from '../../../star';
 import notificationsDropdown from '../../../notifications_dropdown';
 
@@ -38,4 +39,6 @@ document.addEventListener('DOMContentLoaded', () => {
   $(treeSlider).waitForImages(() => {
     ajaxGet(document.querySelector('.js-tree-content').dataset.logsPath);
   });
+
+  GpgBadges.fetch();
 });
diff --git a/app/assets/javascripts/pages/projects/tree/show/index.js b/app/assets/javascripts/pages/projects/tree/show/index.js
index 7ad082a5e61..33d69d891d8 100644
--- a/app/assets/javascripts/pages/projects/tree/show/index.js
+++ b/app/assets/javascripts/pages/projects/tree/show/index.js
@@ -2,6 +2,7 @@ import $ from 'jquery';
 import Vue from 'vue';
 import initBlob from '~/blob_edit/blob_bundle';
 import commitPipelineStatus from '~/projects/tree/components/commit_pipeline_status_component.vue';
+import GpgBadges from '~/gpg_badges';
 import TreeView from '../../../../tree';
 import ShortcutsNavigation from '../../../../shortcuts_navigation';
 import BlobViewer from '../../../../blob/viewer';
@@ -14,7 +15,8 @@ document.addEventListener('DOMContentLoaded', () => {
   new BlobViewer(); // eslint-disable-line no-new
   new NewCommitForm($('.js-create-dir-form')); // eslint-disable-line no-new
   $('#tree-slider').waitForImages(() =>
-    ajaxGet(document.querySelector('.js-tree-content').dataset.logsPath));
+    ajaxGet(document.querySelector('.js-tree-content').dataset.logsPath),
+  );
 
   initBlob();
   const commitPipelineStatusEl = document.querySelector('.js-commit-pipeline-status');
@@ -36,4 +38,6 @@ document.addEventListener('DOMContentLoaded', () => {
       },
     });
   }
+
+  GpgBadges.fetch();
 });
diff --git a/app/assets/javascripts/projects/tree/components/commit_pipeline_status_component.vue b/app/assets/javascripts/projects/tree/components/commit_pipeline_status_component.vue
index a4c7c143e56..1c1e17563a1 100644
--- a/app/assets/javascripts/projects/tree/components/commit_pipeline_status_component.vue
+++ b/app/assets/javascripts/projects/tree/components/commit_pipeline_status_component.vue
@@ -1,27 +1,27 @@
 <script>
-  import Visibility from 'visibilityjs';
-  import ciIcon from '~/vue_shared/components/ci_icon.vue';
-  import loadingIcon from '~/vue_shared/components/loading_icon.vue';
-  import Poll from '~/lib/utils/poll';
-  import Flash from '~/flash';
-  import { s__, sprintf } from '~/locale';
-  import tooltip from '~/vue_shared/directives/tooltip';
-  import CommitPipelineService from '../services/commit_pipeline_service';
+import Visibility from 'visibilityjs';
+import ciIcon from '~/vue_shared/components/ci_icon.vue';
+import loadingIcon from '~/vue_shared/components/loading_icon.vue';
+import Poll from '~/lib/utils/poll';
+import Flash from '~/flash';
+import { s__, sprintf } from '~/locale';
+import tooltip from '~/vue_shared/directives/tooltip';
+import CommitPipelineService from '../services/commit_pipeline_service';
 
-  export default {
-    directives: {
-      tooltip,
+export default {
+  directives: {
+    tooltip,
+  },
+  components: {
+    ciIcon,
+    loadingIcon,
+  },
+  props: {
+    endpoint: {
+      type: String,
+      required: true,
     },
-    components: {
-      ciIcon,
-      loadingIcon,
-    },
-    props: {
-      endpoint: {
-        type: String,
-        required: true,
-      },
-      /* This prop can be used to replace some of the `render_commit_status`
+    /* This prop can be used to replace some of the `render_commit_status`
       used across GitLab, this way we could use this vue component and add a
       realtime status where it makes sense
       realtime: {
@@ -29,76 +29,77 @@
         required: false,
         default: true,
       }, */
+  },
+  data() {
+    return {
+      ciStatus: {},
+      isLoading: true,
+    };
+  },
+  computed: {
+    statusTitle() {
+      return sprintf(s__('Commits|Commit: %{commitText}'), { commitText: this.ciStatus.text });
     },
-    data() {
-      return {
-        ciStatus: {},
-        isLoading: true,
-      };
-    },
-    computed: {
-      statusTitle() {
-        return sprintf(s__('Commits|Commit: %{commitText}'), { commitText: this.ciStatus.text });
-      },
+  },
+  mounted() {
+    this.service = new CommitPipelineService(this.endpoint);
+    this.initPolling();
+  },
+  methods: {
+    successCallback(res) {
+      const { pipelines } = res.data;
+      if (pipelines.length > 0) {
+        // The pipeline entity always keeps the latest pipeline info on the `details.status`
+        this.ciStatus = pipelines[0].details.status;
+      }
+      this.isLoading = false;
     },
-    mounted() {
-      this.service = new CommitPipelineService(this.endpoint);
-      this.initPolling();
+    errorCallback() {
+      this.ciStatus = {
+        text: 'not found',
+        icon: 'status_notfound',
+        group: 'notfound',
+      };
+      this.isLoading = false;
+      Flash(s__('Something went wrong on our end'));
     },
-    methods: {
-      successCallback(res) {
-        const { pipelines } = res.data;
-        if (pipelines.length > 0) {
-          // The pipeline entity always keeps the latest pipeline info on the `details.status`
-          this.ciStatus = pipelines[0].details.status;
-        }
-        this.isLoading = false;
-      },
-      errorCallback() {
-        this.ciStatus = {
-          text: 'not found',
-          icon: 'status_notfound',
-          group: 'notfound',
-        };
-        this.isLoading = false;
-        Flash(s__('Something went wrong on our end'));
-      },
-      initPolling() {
-        this.poll = new Poll({
-          resource: this.service,
-          method: 'fetchData',
-          successCallback: response => this.successCallback(response),
-          errorCallback: this.errorCallback,
-        });
+    initPolling() {
+      this.poll = new Poll({
+        resource: this.service,
+        method: 'fetchData',
+        successCallback: response => this.successCallback(response),
+        errorCallback: this.errorCallback,
+      });
+
+      if (!Visibility.hidden()) {
+        this.isLoading = true;
+        this.poll.makeRequest();
+      } else {
+        this.fetchPipelineCommitData();
+      }
 
+      Visibility.change(() => {
         if (!Visibility.hidden()) {
-          this.isLoading = true;
-          this.poll.makeRequest();
+          this.poll.restart();
         } else {
-          this.fetchPipelineCommitData();
+          this.poll.stop();
         }
-
-        Visibility.change(() => {
-          if (!Visibility.hidden()) {
-            this.poll.restart();
-          } else {
-            this.poll.stop();
-          }
-        });
-      },
-      fetchPipelineCommitData() {
-        this.service.fetchData()
-          .then(this.successCallback)
-          .catch(this.errorCallback);
-      },
+      });
     },
-    destroy() {
-      this.poll.stop();
+    fetchPipelineCommitData() {
+      this.service
+        .fetchData()
+        .then(this.successCallback)
+        .catch(this.errorCallback);
     },
-  };
+  },
+  destroy() {
+    this.poll.stop();
+  },
+};
 </script>
 <template>
-  <div>
+  <div class="ci-status-link">
     <loading-icon
       v-if="isLoading"
       label="Loading pipeline status"
@@ -113,6 +114,7 @@
         :title="statusTitle"
         :aria-label="statusTitle"
         :status="ciStatus"
+        :size="24"
         data-container="body"
       />
     </a>
diff --git a/app/assets/javascripts/reports/store/actions.js b/app/assets/javascripts/reports/store/actions.js
new file mode 100644
index 00000000000..15c077b0fd8
--- /dev/null
+++ b/app/assets/javascripts/reports/store/actions.js
@@ -0,0 +1,67 @@
+import Visibility from 'visibilityjs';
+import axios from '../../lib/utils/axios_utils';
+import Poll from '../../lib/utils/poll';
+import * as types from './mutation_types';
+
+export const setEndpoint = ({ commit }, endpoint) => commit(types.SET_ENDPOINT, endpoint);
+
+export const requestReports = ({ commit }) => commit(types.REQUEST_REPORTS);
+
+let eTagPoll;
+
+export const clearEtagPoll = () => {
+  eTagPoll = null;
+};
+
+export const stopPolling = () => {
+  if (eTagPoll) eTagPoll.stop();
+};
+
+export const restartPolling = () => {
+  if (eTagPoll) eTagPoll.restart();
+};
+
+/**
+ * We need to poll the reports endpoint while they are being parsed in the Backend.
+ * This can take up to one minute.
+ *
+ * Poll.js will handle etag response.
+ * While http status code is 204, it means it's parsing, and we'll keep polling
+ * When http status code is 200, it means parsing is done, we can show the results & stop polling
+ * When http status code is 500, it means parsing went wrong and we stop polling
+ */
+export const fetchReports = ({ state, dispatch }) => {
+  dispatch('requestReports');
+
+  eTagPoll = new Poll({
+    resource: {
+      getReports(endpoint) {
+        return axios.get(endpoint);
+      },
+    },
+    data: state.endpoint,
+    method: 'getReports',
+    successCallback: ({ data }) => dispatch('receiveReportsSuccess', data),
+    errorCallback: () => dispatch('receiveReportsError'),
+  });
+
+  if (!Visibility.hidden()) {
+    eTagPoll.makeRequest();
+  }
+
+  Visibility.change(() => {
+    if (!Visibility.hidden()) {
+      dispatch('restartPolling');
+    } else {
+      dispatch('stopPolling');
+    }
+  });
+};
+
+export const receiveReportsSuccess = ({ commit }, response) =>
+  commit(types.RECEIVE_REPORTS_SUCCESS, response);
+
+export const receiveReportsError = ({ commit }) => commit(types.RECEIVE_REPORTS_ERROR);
+
+// prevent babel-plugin-rewire from generating an invalid default during karma tests
+export default () => {};
diff --git a/app/assets/javascripts/reports/store/index.js b/app/assets/javascripts/reports/store/index.js
new file mode 100644
index 00000000000..af4f9688fb4
--- /dev/null
+++ b/app/assets/javascripts/reports/store/index.js
@@ -0,0 +1,13 @@
+import Vue from 'vue';
+import Vuex from 'vuex';
+import * as actions from './actions';
+import mutations from './mutations';
+import state from './state';
+
+Vue.use(Vuex);
+
+export default () => new Vuex.Store({
+  actions,
+  mutations,
+  state: state(),
+});
diff --git a/app/assets/javascripts/reports/store/mutation_types.js b/app/assets/javascripts/reports/store/mutation_types.js
new file mode 100644
index 00000000000..77722974c45
--- /dev/null
+++ b/app/assets/javascripts/reports/store/mutation_types.js
@@ -0,0 +1,5 @@
+export const SET_ENDPOINT = 'SET_ENDPOINT';
+
+export const REQUEST_REPORTS = 'REQUEST_REPORTS';
+export const RECEIVE_REPORTS_SUCCESS = 'RECEIVE_REPORTS_SUCCESS';
+export const RECEIVE_REPORTS_ERROR = 'RECEIVE_REPORTS_ERROR';
diff --git a/app/assets/javascripts/reports/store/mutations.js b/app/assets/javascripts/reports/store/mutations.js
new file mode 100644
index 00000000000..d9d301826cf
--- /dev/null
+++ b/app/assets/javascripts/reports/store/mutations.js
@@ -0,0 +1,26 @@
+/* eslint-disable no-param-reassign */
+import * as types from './mutation_types';
+
+export default {
+  [types.SET_ENDPOINT](state, endpoint) {
+    state.endpoint = endpoint;
+  },
+  [types.REQUEST_REPORTS](state) {
+    state.isLoading = true;
+  },
+  [types.RECEIVE_REPORTS_SUCCESS](state, response) {
+
+    state.isLoading = false;
+
+    state.summary.total = response.summary.total;
+    state.summary.resolved = response.summary.resolved;
+    state.summary.failed = response.summary.failed;
+
+    state.reports = response.suites;
+
+  },
+  [types.RECEIVE_REPORTS_ERROR](state) {
+    state.isLoading = false;
+    state.hasError = true;
+  },
+};
diff --git a/app/assets/javascripts/reports/store/state.js b/app/assets/javascripts/reports/store/state.js
new file mode 100644
index 00000000000..97f9d0a6859
--- /dev/null
+++ b/app/assets/javascripts/reports/store/state.js
@@ -0,0 +1,28 @@
+export default () => ({
+  endpoint: null,
+
+  isLoading: false,
+  hasError: false,
+
+  summary: {
+    total: 0,
+    resolved: 0,
+    failed: 0,
+  },
+
+  /**
+   * Each report will have the following format:
+   * {
+   *   name: {String},
+   *   summary: {
+   *     total: {Number},
+   *     resolved: {Number},
+   *     failed: {Number},
+   *   },
+   *   new_failures: {Array.<Object>},
+   *   resolved_failures: {Array.<Object>},
+   *   existing_failures: {Array.<Object>},
+   * }
+   */
+  reports: [],
+});
diff --git a/app/assets/javascripts/sidebar/components/assignees/assignees.vue b/app/assets/javascripts/sidebar/components/assignees/assignees.vue
index d22a1e1ac66..dd155c133ce 100644
--- a/app/assets/javascripts/sidebar/components/assignees/assignees.vue
+++ b/app/assets/javascripts/sidebar/components/assignees/assignees.vue
@@ -187,7 +187,7 @@ export default {
       <template v-else-if="hasOneUser">
         <a
           :href="assigneeUrl(firstUser)"
-          class="author_link bold"
+          class="author-link bold"
         >
           <img
             :alt="assigneeAlt(firstUser)"
diff --git a/app/assets/javascripts/sidebar/components/participants/participants.vue b/app/assets/javascripts/sidebar/components/participants/participants.vue
index 33dd6c981b6..56d57f6aac8 100644
--- a/app/assets/javascripts/sidebar/components/participants/participants.vue
+++ b/app/assets/javascripts/sidebar/components/participants/participants.vue
@@ -120,7 +120,7 @@
       >
         <a
           :href="participant.web_url"
-          class="author_link"
+          class="author-link"
         >
           <user-avatar-image
             :lazy="true"
diff --git a/app/assets/javascripts/users_select.js b/app/assets/javascripts/users_select.js
index e3d7645040d..e19bbbacf4d 100644
--- a/app/assets/javascripts/users_select.js
+++ b/app/assets/javascripts/users_select.js
@@ -206,8 +206,8 @@ function UsersSelect(currentUser, els, options = {}) {
             return $collapsedSidebar.html(collapsedAssigneeTemplate(user));
           });
       };
-      collapsedAssigneeTemplate = _.template('<% if( avatar ) { %> <a class="author_link" href="/<%- username %>"> <img width="24" class="avatar avatar-inline s24" alt="" src="<%- avatar %>"> </a> <% } else { %> <i class="fa fa-user"></i> <% } %>');
-      assigneeTemplate = _.template('<% if (username) { %> <a class="author_link bold" href="/<%- username %>"> <% if( avatar ) { %> <img width="32" class="avatar avatar-inline s32" alt="" src="<%- avatar %>"> <% } %> <span class="author"><%- name %></span> <span class="username"> @<%- username %> </span> </a> <% } else { %> <span class="no-value assign-yourself"> No assignee - <a href="#" class="js-assign-yourself"> assign yourself </a> </span> <% } %>');
+      collapsedAssigneeTemplate = _.template('<% if( avatar ) { %> <a class="author-link" href="/<%- username %>"> <img width="24" class="avatar avatar-inline s24" alt="" src="<%- avatar %>"> </a> <% } else { %> <i class="fa fa-user"></i> <% } %>');
+      assigneeTemplate = _.template('<% if (username) { %> <a class="author-link bold" href="/<%- username %>"> <% if( avatar ) { %> <img width="32" class="avatar avatar-inline s32" alt="" src="<%- avatar %>"> <% } %> <span class="author"><%- name %></span> <span class="username"> @<%- username %> </span> </a> <% } else { %> <span class="no-value assign-yourself"> No assignee - <a href="#" class="js-assign-yourself"> assign yourself </a> </span> <% } %>');
       return $dropdown.glDropdown({
         showMenuAbove: showMenuAbove,
         data: function(term, callback) {
diff --git a/app/assets/javascripts/vue_shared/components/clipboard_button.vue b/app/assets/javascripts/vue_shared/components/clipboard_button.vue
index dc5760bce28..d272bf3f55f 100644
--- a/app/assets/javascripts/vue_shared/components/clipboard_button.vue
+++ b/app/assets/javascripts/vue_shared/components/clipboard_button.vue
@@ -13,12 +13,19 @@
  * />
  */
 import tooltip from '../directives/tooltip';
+import Icon from '../components/icon.vue';
 
 export default {
   name: 'ClipboardButton',
+
   directives: {
     tooltip,
   },
+
+  components: {
+    Icon,
+  },
+
   props: {
     text: {
       type: String,
@@ -58,10 +65,6 @@ export default {
     type="button"
     class="btn"
   >
-    <i
-      aria-hidden="true"
-      class="fa fa-clipboard"
-    >
-    </i>
+    <icon name="duplicate" />
   </button>
 </template>
diff --git a/app/assets/javascripts/vue_shared/components/stacked_progress_bar.vue b/app/assets/javascripts/vue_shared/components/stacked_progress_bar.vue
index b1c2df54ef6..f44d361c47e 100644
--- a/app/assets/javascripts/vue_shared/components/stacked_progress_bar.vue
+++ b/app/assets/javascripts/vue_shared/components/stacked_progress_bar.vue
@@ -1,4 +1,5 @@
 <script>
+import { roundOffFloat } from '~/lib/utils/common_utils';
 import tooltip from '~/vue_shared/directives/tooltip';
 
 export default {
@@ -70,7 +71,7 @@ export default {
   },
   methods: {
     getPercent(count) {
-      return Math.ceil((count / this.totalCount) * 100);
+      return roundOffFloat((count / this.totalCount) * 100, 1);
     },
     barStyle(percent) {
       return `width: ${percent}%;`;
diff --git a/app/assets/stylesheets/framework/avatar.scss b/app/assets/stylesheets/framework/avatar.scss
index c1ec11e434a..94fa7993133 100644
--- a/app/assets/stylesheets/framework/avatar.scss
+++ b/app/assets/stylesheets/framework/avatar.scss
@@ -7,7 +7,7 @@
 .avatar-circle {
   float: left;
   margin-right: 15px;
-  border-radius: $avatar_radius;
+  border-radius: $avatar-radius;
   border: 1px solid $avatar-border;
   &.s16 { @include avatar-size(16px, 6px); }
   &.s18 { @include avatar-size(18px, 6px); }
@@ -110,7 +110,7 @@
   color: $white-light;
   border: 1px solid $avatar-border;
   border-radius: 1em;
-  font-family: $regular_font;
+  font-family: $regular-font;
   font-size: 9px;
   line-height: 16px;
   text-align: center;
diff --git a/app/assets/stylesheets/framework/buttons.scss b/app/assets/stylesheets/framework/buttons.scss
index 523fcb05a87..646cedd79ed 100644
--- a/app/assets/stylesheets/framework/buttons.scss
+++ b/app/assets/stylesheets/framework/buttons.scss
@@ -294,6 +294,10 @@
 .btn-clipboard {
   border: 0;
   padding: 0 5px;
+
+  svg {
+    top: auto;
+  }
 }
 
 .input-group-prepend,
diff --git a/app/assets/stylesheets/framework/common.scss b/app/assets/stylesheets/framework/common.scss
index 218e37602dd..637587de597 100644
--- a/app/assets/stylesheets/framework/common.scss
+++ b/app/assets/stylesheets/framework/common.scss
@@ -113,8 +113,6 @@ hr {
 
 .item-title { font-weight: $gl-font-weight-bold; }
 
-/** FLASH message **/
-.author_link,
 .author-link {
   color: $gl-link-color;
 }
diff --git a/app/assets/stylesheets/framework/forms.scss b/app/assets/stylesheets/framework/forms.scss
index a10ff3eecb3..d7149d93622 100644
--- a/app/assets/stylesheets/framework/forms.scss
+++ b/app/assets/stylesheets/framework/forms.scss
@@ -80,7 +80,7 @@ label {
   .form-control {
     height: 29px;
     background: $white-light;
-    font-family: $monospace_font;
+    font-family: $monospace-font;
   }
 
   .input-group-prepend .btn,
diff --git a/app/assets/stylesheets/framework/highlight.scss b/app/assets/stylesheets/framework/highlight.scss
index 813a1711ea2..452e946f95f 100644
--- a/app/assets/stylesheets/framework/highlight.scss
+++ b/app/assets/stylesheets/framework/highlight.scss
@@ -9,8 +9,8 @@
     padding: 10px 0;
     border: 0;
     border-radius: 0;
-    font-family: $monospace_font;
-    font-size: $code_font_size;
+    font-family: $monospace-font;
+    font-size: $code-font-size;
     line-height: 19px;
     margin: 0;
     overflow: auto;
@@ -22,7 +22,7 @@
     code {
       display: inline-block;
       min-width: 100%;
-      font-family: $monospace_font;
+      font-family: $monospace-font;
       white-space: normal;
       word-wrap: normal;
       padding: 0;
@@ -44,7 +44,7 @@
     float: left;
 
     a {
-      font-family: $monospace_font;
+      font-family: $monospace-font;
       display: block;
       font-size: $code_font_size !important;
       min-height: 19px;
diff --git a/app/assets/stylesheets/framework/jquery.scss b/app/assets/stylesheets/framework/jquery.scss
index 300ba4f2de6..d1360a0c0eb 100644
--- a/app/assets/stylesheets/framework/jquery.scss
+++ b/app/assets/stylesheets/framework/jquery.scss
@@ -1,5 +1,5 @@
 .ui-widget {
-  font-family: $regular_font;
+  font-family: $regular-font;
   font-size: $font-size-base;
 
   .ui-state-default {
diff --git a/app/assets/stylesheets/framework/lists.scss b/app/assets/stylesheets/framework/lists.scss
index d54490c87c6..4b67eab05b3 100644
--- a/app/assets/stylesheets/framework/lists.scss
+++ b/app/assets/stylesheets/framework/lists.scss
@@ -259,7 +259,7 @@ ul.controls {
       margin-right: 0;
     }
 
-    .author_link {
+    .author-link {
       .avatar-inline {
         margin-left: 0;
         margin-right: 0;
@@ -270,7 +270,7 @@ ul.controls {
 
   .issuable-pipeline-broken a,
   .issuable-pipeline-status a,
-  .author_link {
+  .author-link {
     display: flex;
   }
 }
diff --git a/app/assets/stylesheets/framework/mixins.scss b/app/assets/stylesheets/framework/mixins.scss
index 76ebfc22ef7..11d332be1be 100644
--- a/app/assets/stylesheets/framework/mixins.scss
+++ b/app/assets/stylesheets/framework/mixins.scss
@@ -3,13 +3,13 @@
  * Mixins with fixed values
  */
 
-@mixin str-truncated($max_width: 82%) {
+@mixin str-truncated($max-width: 82%) {
   display: inline-block;
   overflow: hidden;
   text-overflow: ellipsis;
   vertical-align: top;
   white-space: nowrap;
-  max-width: $max_width;
+  max-width: $max-width;
 }
 
 /*
diff --git a/app/assets/stylesheets/framework/sidebar.scss b/app/assets/stylesheets/framework/sidebar.scss
index 8c716400913..c4dbcf2ddc9 100644
--- a/app/assets/stylesheets/framework/sidebar.scss
+++ b/app/assets/stylesheets/framework/sidebar.scss
@@ -33,11 +33,11 @@
 
   @include media-breakpoint-up(sm) {
     &:not(.wiki-sidebar):not(.build-sidebar):not(.issuable-bulk-update-sidebar) .content-wrapper {
-      padding-right: $gutter_collapsed_width;
+      padding-right: $gutter-collapsed-width;
     }
 
     .merge-request-tabs-holder.affix {
-      right: $gutter_collapsed_width;
+      right: $gutter-collapsed-width;
     }
   }
 
@@ -67,21 +67,21 @@
 
   @include media-breakpoint-only(sm) {
     &:not(.wiki-sidebar):not(.build-sidebar):not(.issuable-bulk-update-sidebar) .content-wrapper {
-      padding-right: $gutter_collapsed_width;
+      padding-right: $gutter-collapsed-width;
     }
   }
 
   @include media-breakpoint-up(md) {
     .content-wrapper {
-      padding-right: $gutter_width;
+      padding-right: $gutter-width;
     }
 
     &:not(.with-overlay) .merge-request-tabs-holder.affix {
-      right: $gutter_width;
+      right: $gutter-width;
     }
 
     &.with-overlay .merge-request-tabs-holder.affix {
-      right: $gutter_collapsed_width;
+      right: $gutter-collapsed-width;
     }
   }
 }
diff --git a/app/assets/stylesheets/framework/stacked_progress_bar.scss b/app/assets/stylesheets/framework/stacked_progress_bar.scss
index 528ba53a48b..29a2d5881f7 100644
--- a/app/assets/stylesheets/framework/stacked_progress_bar.scss
+++ b/app/assets/stylesheets/framework/stacked_progress_bar.scss
@@ -10,7 +10,7 @@
   .status-neutral,
   .status-red, {
     height: 100%;
-    min-width: 30px;
+    min-width: 40px;
     padding: 0 5px;
     font-size: $tooltip-font-size;
     font-weight: normal;
diff --git a/app/assets/stylesheets/framework/typography.scss b/app/assets/stylesheets/framework/typography.scss
index 9874c928604..56307777a72 100644
--- a/app/assets/stylesheets/framework/typography.scss
+++ b/app/assets/stylesheets/framework/typography.scss
@@ -44,7 +44,7 @@
 
   // Single code lines should wrap
   code {
-    font-family: $monospace_font;
+    font-family: $monospace-font;
     white-space: pre-wrap;
     word-wrap: normal;
   }
@@ -321,7 +321,7 @@ h6 {
 
 /** CODE **/
 pre {
-  font-family: $monospace_font;
+  font-family: $monospace-font;
   display: block;
   padding: $gl-padding-8;
   margin: 0 0 $gl-padding-8;
@@ -342,7 +342,7 @@ code {
 }
 
 .monospace {
-  font-family: $monospace_font;
+  font-family: $monospace-font;
 }
 
 .weight-normal {
@@ -381,7 +381,7 @@ code {
  *
  */
 textarea.js-gfm-input {
-  font-family: $monospace_font;
+  font-family: $monospace-font;
   font-size: 13px;
 }
 
diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index 6c2fdbe0608..efc54196b75 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -2,9 +2,9 @@
  * Layout
  */
 $grid-size: 8px;
-$gutter_collapsed_width: 62px;
-$gutter_width: 290px;
-$gutter_inner_width: 250px;
+$gutter-collapsed-width: 62px;
+$gutter-width: 290px;
+$gutter-inner-width: 250px;
 $sidebar-transition-duration: 0.3s;
 $sidebar-breakpoint: 1024px;
 $default-transition-duration: 0.15s;
@@ -233,8 +233,8 @@ $md-area-border: #ddd;
 /*
  * Code
  */
-$code_font_size: 90%;
-$code_line_height: 1.6;
+$code-font-size: 90%;
+$code-line-height: 1.6;
 
 /*
  * Tooltips
@@ -371,9 +371,9 @@ $diff-jagged-border-gradient-color: darken($white-normal, 8%);
 /*
  * Fonts
  */
-$monospace_font: 'Menlo', 'DejaVu Sans Mono', 'Liberation Mono', 'Consolas', 'Ubuntu Mono',
+$monospace-font: 'Menlo', 'DejaVu Sans Mono', 'Liberation Mono', 'Consolas', 'Ubuntu Mono',
   'Courier New', 'andale mono', 'lucida console', monospace;
-$regular_font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell,
+$regular-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell,
   'Helvetica Neue', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
 
 /*
@@ -526,7 +526,7 @@ $issue-board-list-difference-md: $issue-board-list-difference-sm + $issue-boards
 /*
 * Avatar
 */
-$avatar_radius: 50%;
+$avatar-radius: 50%;
 $avatar-border: $gray-normal;
 $avatar-border-hover: $gray-darker;
 $avatar-background: $gray-lightest;
@@ -830,8 +830,8 @@ $secondary: $gray-light;
 $input-disabled-bg: $gray-light;
 $input-border-color: $theme-gray-200;
 $input-color: $gl-text-color;
-$font-family-sans-serif: $regular_font;
-$font-family-monospace: $monospace_font;
+$font-family-sans-serif: $regular-font;
+$font-family-monospace: $monospace-font;
 $input-line-height: 20px;
 $btn-line-height: 20px;
 $table-accent-bg: $gray-light;
diff --git a/app/assets/stylesheets/mailers/highlighted_diff_email.scss b/app/assets/stylesheets/mailers/highlighted_diff_email.scss
index 1835c4364d3..8b234a5a656 100644
--- a/app/assets/stylesheets/mailers/highlighted_diff_email.scss
+++ b/app/assets/stylesheets/mailers/highlighted_diff_email.scss
@@ -77,13 +77,13 @@ $highlighted-gc-bg: #eaf2f5;
 .code {
   background-color: $white-light;
   font-family: monospace;
-  font-size: $code_font_size;
+  font-size: $code-font-size;
   -premailer-cellpadding: 0;
   -premailer-cellspacing: 0;
   -premailer-width: 100%;
 
   > tr {
-    line-height: $code_line_height;
+    line-height: $code-line-height;
   }
 }
 
diff --git a/app/assets/stylesheets/pages/boards.scss b/app/assets/stylesheets/pages/boards.scss
index 5de53892fac..7347da2ae61 100644
--- a/app/assets/stylesheets/pages/boards.scss
+++ b/app/assets/stylesheets/pages/boards.scss
@@ -63,7 +63,7 @@
     width: 100%;
 
     &.is-compact {
-      width: calc(100% - #{$gutter_width});
+      width: calc(100% - #{$gutter-width});
     }
   }
 }
diff --git a/app/assets/stylesheets/pages/commits.scss b/app/assets/stylesheets/pages/commits.scss
index f75be4e01cd..9b51c54a0fc 100644
--- a/app/assets/stylesheets/pages/commits.scss
+++ b/app/assets/stylesheets/pages/commits.scss
@@ -79,7 +79,7 @@
 .commit-message-container {
   background-color: $body-bg;
   position: relative;
-  font-family: $monospace_font;
+  font-family: $monospace-font;
   $left: 12px;
   overflow: hidden; // See https://gitlab.com/gitlab-org/gitlab-ce/issues/13987
   .max-width-marker {
@@ -205,7 +205,7 @@
   > .ci-status-link,
   > .btn,
   > .commit-sha-group {
-    margin-left: $gl-padding-8;
+    margin-left: $gl-padding;
   }
 }
 
@@ -235,10 +235,6 @@
     fill: $gl-text-color-secondary;
   }
 
-  .fa-clipboard {
-    color: $gl-text-color-secondary;
-  }
-
   :first-child {
     border-bottom-left-radius: $border-radius-default;
     border-top-left-radius: $border-radius-default;
diff --git a/app/assets/stylesheets/pages/cycle_analytics.scss b/app/assets/stylesheets/pages/cycle_analytics.scss
index a22c666a525..e2c0a7a6225 100644
--- a/app/assets/stylesheets/pages/cycle_analytics.scss
+++ b/app/assets/stylesheets/pages/cycle_analytics.scss
@@ -368,7 +368,7 @@
 
       .fa {
         color: $gl-text-color-secondary;
-        font-size: $code_font_size;
+        font-size: $code-font-size;
       }
     }
   }
diff --git a/app/assets/stylesheets/pages/detail_page.scss b/app/assets/stylesheets/pages/detail_page.scss
index 2e007c52592..37ed5ae674a 100644
--- a/app/assets/stylesheets/pages/detail_page.scss
+++ b/app/assets/stylesheets/pages/detail_page.scss
@@ -10,7 +10,7 @@
   }
 
   .issue_created_ago,
-  .author_link {
+  .author-link {
     white-space: nowrap;
   }
 
diff --git a/app/assets/stylesheets/pages/diff.scss b/app/assets/stylesheets/pages/diff.scss
index 5e39bbb9890..b616357bb8d 100644
--- a/app/assets/stylesheets/pages/diff.scss
+++ b/app/assets/stylesheets/pages/diff.scss
@@ -56,7 +56,7 @@
 
     table {
       width: 100%;
-      font-family: $monospace_font;
+      font-family: $monospace-font;
       border: 0;
       border-collapse: separate;
       margin: 0;
@@ -73,8 +73,8 @@
       }
 
       .line_holder td {
-        line-height: $code_line_height;
-        font-size: $code_font_size;
+        line-height: $code-line-height;
+        font-size: $code-font-size;
 
         &.noteable_line {
           position: relative;
diff --git a/app/assets/stylesheets/pages/editor.scss b/app/assets/stylesheets/pages/editor.scss
index 437621299e0..ddd1f8cc98a 100644
--- a/app/assets/stylesheets/pages/editor.scss
+++ b/app/assets/stylesheets/pages/editor.scss
@@ -84,7 +84,7 @@
   .soft-wrap-toggle {
     display: inline-block;
     vertical-align: top;
-    font-family: $regular_font;
+    font-family: $regular-font;
   }
 
   .soft-wrap-toggle {
diff --git a/app/assets/stylesheets/pages/environments.scss b/app/assets/stylesheets/pages/environments.scss
index 8915b323b3c..8a074017344 100644
--- a/app/assets/stylesheets/pages/environments.scss
+++ b/app/assets/stylesheets/pages/environments.scss
@@ -478,7 +478,7 @@
     }
 
     .deploy-info-text-link {
-      font-family: $monospace_font;
+      font-family: $monospace-font;
       fill: $gl-link-color;
 
       &:hover {
diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss
index f9fd9f1ab8b..797b106de23 100644
--- a/app/assets/stylesheets/pages/issuable.scss
+++ b/app/assets/stylesheets/pages/issuable.scss
@@ -166,7 +166,7 @@
     border-bottom: 1px solid $border-gray-normal;
     // This prevents the mess when resizing the sidebar
     // of elements repositioning themselves..
-    width: $gutter_inner_width;
+    width: $gutter-inner-width;
     // --
 
     &.issuable-sidebar-header {
@@ -197,7 +197,7 @@
     }
 
     &.assignee {
-      .author_link {
+      .author-link {
         display: block;
         padding-left: 42px;
         position: relative;
@@ -290,7 +290,7 @@
   }
 
   &.right-sidebar-expanded {
-    width: $gutter_width;
+    width: $gutter-width;
 
     .value {
       line-height: 1;
@@ -377,11 +377,11 @@
       display: block;
     }
 
-    width: $gutter_collapsed_width;
+    width: $gutter-collapsed-width;
     padding: 0;
 
     .block {
-      width: $gutter_collapsed_width - 2px;
+      width: $gutter-collapsed-width - 2px;
       padding: 15px 0 0;
       border-bottom: 0;
       overflow: hidden;
@@ -486,7 +486,7 @@
       padding-bottom: 0;
       margin-bottom: 10px;
 
-      .author_link {
+      .author-link {
         padding-left: 0;
 
         .avatar {
@@ -595,7 +595,7 @@
   margin: 16px 0 0;
   font-size: 85%;
 
-  .author_link {
+  .author-link {
     color: $gray-darkest;
   }
 }
@@ -620,7 +620,7 @@
     padding-right: 0;
   }
 
-  .author_link {
+  .author-link {
     display: block;
   }
 
diff --git a/app/assets/stylesheets/pages/issues.scss b/app/assets/stylesheets/pages/issues.scss
index 19fb99bfa93..212e5979273 100644
--- a/app/assets/stylesheets/pages/issues.scss
+++ b/app/assets/stylesheets/pages/issues.scss
@@ -12,7 +12,7 @@
     }
 
     .issuable-meta {
-      .author_link {
+      .author-link {
         display: inline-block;
       }
 
diff --git a/app/assets/stylesheets/pages/merge_conflicts.scss b/app/assets/stylesheets/pages/merge_conflicts.scss
index e76525fdbf6..d26659701e1 100644
--- a/app/assets/stylesheets/pages/merge_conflicts.scss
+++ b/app/assets/stylesheets/pages/merge_conflicts.scss
@@ -1,167 +1,162 @@
 // Disabled to use the color map for creating color schemes
 // scss-lint:disable ColorVariable
 $colors: (
-  white_header_head_neutral   : #e1fad7,
-  white_line_head_neutral     : #effdec,
-  white_button_head_neutral   : #9adb84,
+  white-header-head-neutral   : #e1fad7,
+  white-line-head-neutral     : #effdec,
+  white-button-head-neutral   : #9adb84,
 
-  white_header_head_chosen    : #baf0a8,
-  white_line_head_chosen      : #e1fad7,
-  white_button_head_chosen    : #52c22d,
+  white-header-head-chosen    : #baf0a8,
+  white-line-head-chosen      : #e1fad7,
+  white-button-head-chosen    : #52c22d,
 
-  white_header_origin_neutral : #e0f0ff,
-  white_line_origin_neutral   : #f2f9ff,
-  white_button_origin_neutral : #87c2fa,
+  white-header-origin-neutral : #e0f0ff,
+  white-line-origin-neutral   : #f2f9ff,
+  white-button-origin-neutral : #87c2fa,
 
-  white_header_origin_chosen  : #add8ff,
-  white_line_origin_chosen    : #e0f0ff,
-  white_button_origin_chosen  : #268ced,
+  white-header-origin-chosen  : #add8ff,
+  white-line-origin-chosen    : #e0f0ff,
+  white-button-origin-chosen  : #268ced,
 
-  white_header_not_chosen     : #f0f0f0,
-  white_line_not_chosen       : $gray-light,
+  white-header-not-chosen     : #f0f0f0,
+  white-line-not-chosen       : $gray-light,
 
+  dark-header-head-neutral   : rgba(#3f3, .2),
+  dark-line-head-neutral     : rgba(#3f3, .1),
+  dark-button-head-neutral   : #40874f,
 
-  dark_header_head_neutral   : rgba(#3f3, .2),
-  dark_line_head_neutral     : rgba(#3f3, .1),
-  dark_button_head_neutral   : #40874f,
+  dark-header-head-chosen    : rgba(#3f3, .33),
+  dark-line-head-chosen      : rgba(#3f3, .2),
+  dark-button-head-chosen    : #258537,
 
-  dark_header_head_chosen    : rgba(#3f3, .33),
-  dark_line_head_chosen      : rgba(#3f3, .2),
-  dark_button_head_chosen    : #258537,
+  dark-header-origin-neutral : rgba(#2878c9, .4),
+  dark-line-origin-neutral   : rgba(#2878c9, .3),
+  dark-button-origin-neutral : #2a5c8c,
 
-  dark_header_origin_neutral : rgba(#2878c9, .4),
-  dark_line_origin_neutral   : rgba(#2878c9, .3),
-  dark_button_origin_neutral : #2a5c8c,
+  dark-header-origin-chosen  : rgba(#2878c9, .6),
+  dark-line-origin-chosen    : rgba(#2878c9, .4),
+  dark-button-origin-chosen  : #1d6cbf,
 
-  dark_header_origin_chosen  : rgba(#2878c9, .6),
-  dark_line_origin_chosen    : rgba(#2878c9, .4),
-  dark_button_origin_chosen  : #1d6cbf,
+  dark-header-not-chosen     : rgba(#fff, .25),
+  dark-line-not-chosen       : rgba(#fff, .1),
 
-  dark_header_not_chosen     : rgba(#fff, .25),
-  dark_line_not_chosen       : rgba(#fff, .1),
+  monokai-header-head-neutral   : rgba(#a6e22e, .25),
+  monokai-line-head-neutral     : rgba(#a6e22e, .1),
+  monokai-button-head-neutral   : #376b20,
 
+  monokai-header-head-chosen    : rgba(#a6e22e, .4),
+  monokai-line-head-chosen      : rgba(#a6e22e, .25),
+  monokai-button-head-chosen    : #39800d,
 
-  monokai_header_head_neutral   : rgba(#a6e22e, .25),
-  monokai_line_head_neutral     : rgba(#a6e22e, .1),
-  monokai_button_head_neutral   : #376b20,
+  monokai-header-origin-neutral : rgba(#60d9f1, .35),
+  monokai-line-origin-neutral   : rgba(#60d9f1, .15),
+  monokai-button-origin-neutral : #38848c,
 
-  monokai_header_head_chosen    : rgba(#a6e22e, .4),
-  monokai_line_head_chosen      : rgba(#a6e22e, .25),
-  monokai_button_head_chosen    : #39800d,
+  monokai-header-origin-chosen  : rgba(#60d9f1, .5),
+  monokai-line-origin-chosen    : rgba(#60d9f1, .35),
+  monokai-button-origin-chosen  : #3ea4b2,
 
-  monokai_header_origin_neutral : rgba(#60d9f1, .35),
-  monokai_line_origin_neutral   : rgba(#60d9f1, .15),
-  monokai_button_origin_neutral : #38848c,
+  monokai-header-not-chosen     : rgba(#76715d, .24),
+  monokai-line-not-chosen       : rgba(#76715d, .1),
 
-  monokai_header_origin_chosen  : rgba(#60d9f1, .5),
-  monokai_line_origin_chosen    : rgba(#60d9f1, .35),
-  monokai_button_origin_chosen  : #3ea4b2,
+  solarized-light-header-head-neutral   : rgba(#859900, .37),
+  solarized-light-line-head-neutral     : rgba(#859900, .2),
+  solarized-light-button-head-neutral   : #afb262,
 
-  monokai_header_not_chosen     : rgba(#76715d, .24),
-  monokai_line_not_chosen       : rgba(#76715d, .1),
+  solarized-light-header-head-chosen    : rgba(#859900, .5),
+  solarized-light-line-head-chosen      : rgba(#859900, .37),
+  solarized-light-button-head-chosen    : #94993d,
 
+  solarized-light-header-origin-neutral : rgba(#2878c9, .37),
+  solarized-light-line-origin-neutral   : rgba(#2878c9, .15),
+  solarized-light-button-origin-neutral : #60a1bf,
 
-  solarized_light_header_head_neutral   : rgba(#859900, .37),
-  solarized_light_line_head_neutral     : rgba(#859900, .2),
-  solarized_light_button_head_neutral   : #afb262,
+  solarized-light-header-origin-chosen  : rgba(#2878c9, .6),
+  solarized-light-line-origin-chosen    : rgba(#2878c9, .37),
+  solarized-light-button-origin-chosen  : #2482b2,
 
-  solarized_light_header_head_chosen    : rgba(#859900, .5),
-  solarized_light_line_head_chosen      : rgba(#859900, .37),
-  solarized_light_button_head_chosen    : #94993d,
+  solarized-light-header-not-chosen     : rgba(#839496, .37),
+  solarized-light-line-not-chosen       : rgba(#839496, .2),
 
-  solarized_light_header_origin_neutral : rgba(#2878c9, .37),
-  solarized_light_line_origin_neutral   : rgba(#2878c9, .15),
-  solarized_light_button_origin_neutral : #60a1bf,
+  solarized-dark-header-head-neutral   : rgba(#859900, .35),
+  solarized-dark-line-head-neutral     : rgba(#859900, .15),
+  solarized-dark-button-head-neutral   : #376b20,
 
-  solarized_light_header_origin_chosen  : rgba(#2878c9, .6),
-  solarized_light_line_origin_chosen    : rgba(#2878c9, .37),
-  solarized_light_button_origin_chosen  : #2482b2,
+  solarized-dark-header-head-chosen    : rgba(#859900, .5),
+  solarized-dark-line-head-chosen      : rgba(#859900, .35),
+  solarized-dark-button-head-chosen    : #39800d,
 
-  solarized_light_header_not_chosen     : rgba(#839496, .37),
-  solarized_light_line_not_chosen       : rgba(#839496, .2),
+  solarized-dark-header-origin-neutral : rgba(#2878c9, .35),
+  solarized-dark-line-origin-neutral   : rgba(#2878c9, .15),
+  solarized-dark-button-origin-neutral : #086799,
 
+  solarized-dark-header-origin-chosen  : rgba(#2878c9, .6),
+  solarized-dark-line-origin-chosen    : rgba(#2878c9, .35),
+  solarized-dark-button-origin-chosen  : #0082cc,
 
-  solarized_dark_header_head_neutral   : rgba(#859900, .35),
-  solarized_dark_line_head_neutral     : rgba(#859900, .15),
-  solarized_dark_button_head_neutral   : #376b20,
-
-  solarized_dark_header_head_chosen    : rgba(#859900, .5),
-  solarized_dark_line_head_chosen      : rgba(#859900, .35),
-  solarized_dark_button_head_chosen    : #39800d,
-
-  solarized_dark_header_origin_neutral : rgba(#2878c9, .35),
-  solarized_dark_line_origin_neutral   : rgba(#2878c9, .15),
-  solarized_dark_button_origin_neutral : #086799,
-
-  solarized_dark_header_origin_chosen  : rgba(#2878c9, .6),
-  solarized_dark_line_origin_chosen    : rgba(#2878c9, .35),
-  solarized_dark_button_origin_chosen  : #0082cc,
-
-  solarized_dark_header_not_chosen     : rgba(#839496, .25),
-  solarized_dark_line_not_chosen       : rgba(#839496, .15)
+  solarized-dark-header-not-chosen     : rgba(#839496, .25),
+  solarized-dark-line-not-chosen       : rgba(#839496, .15)
 );
 // scss-lint:enable ColorVariable
 
-
 @mixin color-scheme($color) {
   .header.line_content,
   .diff-line-num {
     &.origin {
-      background-color: map-get($colors, #{$color}_header_origin_neutral);
-      border-color: map-get($colors, #{$color}_header_origin_neutral);
+      background-color: map-get($colors, #{$color}-header-origin-neutral);
+      border-color: map-get($colors, #{$color}-header-origin-neutral);
 
       button {
-        background-color: map-get($colors, #{$color}_button_origin_neutral);
-        border-color: darken(map-get($colors, #{$color}_button_origin_neutral), 15);
+        background-color: map-get($colors, #{$color}-button-origin-neutral);
+        border-color: darken(map-get($colors, #{$color}-button-origin-neutral), 15);
       }
 
       &.selected {
-        background-color: map-get($colors, #{$color}_header_origin_chosen);
-        border-color: map-get($colors, #{$color}_header_origin_chosen);
+        background-color: map-get($colors, #{$color}-header-origin-chosen);
+        border-color: map-get($colors, #{$color}-header-origin-chosen);
 
         button {
-          background-color: map-get($colors, #{$color}_button_origin_chosen);
-          border-color: darken(map-get($colors, #{$color}_button_origin_chosen), 15);
+          background-color: map-get($colors, #{$color}-button-origin-chosen);
+          border-color: darken(map-get($colors, #{$color}-button-origin-chosen), 15);
         }
       }
 
       &.unselected {
-        background-color: map-get($colors, #{$color}_header_not_chosen);
-        border-color: map-get($colors, #{$color}_header_not_chosen);
+        background-color: map-get($colors, #{$color}-header-not-chosen);
+        border-color: map-get($colors, #{$color}-header-not-chosen);
 
         button {
-          background-color: lighten(map-get($colors, #{$color}_button_origin_neutral), 15);
-          border-color: map-get($colors, #{$color}_button_origin_neutral);
+          background-color: lighten(map-get($colors, #{$color}-button-origin-neutral), 15);
+          border-color: map-get($colors, #{$color}-button-origin-neutral);
         }
       }
     }
 
     &.head {
-      background-color: map-get($colors, #{$color}_header_head_neutral);
-      border-color: map-get($colors, #{$color}_header_head_neutral);
+      background-color: map-get($colors, #{$color}-header-head-neutral);
+      border-color: map-get($colors, #{$color}-header-head-neutral);
 
       button {
-        background-color: map-get($colors, #{$color}_button_head_neutral);
-        border-color: darken(map-get($colors, #{$color}_button_head_neutral), 15);
+        background-color: map-get($colors, #{$color}-button-head-neutral);
+        border-color: darken(map-get($colors, #{$color}-button-head-neutral), 15);
       }
 
       &.selected {
-        background-color: map-get($colors, #{$color}_header_head_chosen);
-        border-color: map-get($colors, #{$color}_header_head_chosen);
+        background-color: map-get($colors, #{$color}-header-head-chosen);
+        border-color: map-get($colors, #{$color}-header-head-chosen);
 
         button {
-          background-color: map-get($colors, #{$color}_button_head_chosen);
-          border-color: darken(map-get($colors, #{$color}_button_head_chosen), 15);
+          background-color: map-get($colors, #{$color}-button-head-chosen);
+          border-color: darken(map-get($colors, #{$color}-button-head-chosen), 15);
         }
       }
 
       &.unselected {
-        background-color: map-get($colors, #{$color}_header_not_chosen);
-        border-color: map-get($colors, #{$color}_header_not_chosen);
+        background-color: map-get($colors, #{$color}-header-not-chosen);
+        border-color: map-get($colors, #{$color}-header-not-chosen);
 
         button {
-          background-color: lighten(map-get($colors, #{$color}_button_head_neutral), 15);
-          border-color: map-get($colors, #{$color}_button_head_neutral);
+          background-color: lighten(map-get($colors, #{$color}-button-head-neutral), 15);
+          border-color: map-get($colors, #{$color}-button-head-neutral);
         }
       }
     }
@@ -169,32 +164,31 @@ $colors: (
 
   .line_content {
     &.origin {
-      background-color: map-get($colors, #{$color}_line_origin_neutral);
+      background-color: map-get($colors, #{$color}-line-origin-neutral);
 
       &.selected {
-        background-color: map-get($colors, #{$color}_line_origin_chosen);
+        background-color: map-get($colors, #{$color}-line-origin-chosen);
       }
 
       &.unselected {
-        background-color: map-get($colors, #{$color}_line_not_chosen);
+        background-color: map-get($colors, #{$color}-line-not-chosen);
       }
     }
 
     &.head {
-      background-color: map-get($colors, #{$color}_line_head_neutral);
+      background-color: map-get($colors, #{$color}-line-head-neutral);
 
       &.selected {
-        background-color: map-get($colors, #{$color}_line_head_chosen);
+        background-color: map-get($colors, #{$color}-line-head-chosen);
       }
 
       &.unselected {
-        background-color: map-get($colors, #{$color}_line_not_chosen);
+        background-color: map-get($colors, #{$color}-line-not-chosen);
       }
     }
   }
 }
 
-
 #conflicts {
 
   .white {
@@ -210,11 +204,11 @@ $colors: (
   }
 
   .solarized-light {
-    @include color-scheme('solarized_light')
+    @include color-scheme('solarized-light')
   }
 
   .solarized-dark {
-    @include color-scheme('solarized_dark')
+    @include color-scheme('solarized-dark')
   }
 
   .diff-wrap-lines .line_content {
diff --git a/app/assets/stylesheets/pages/merge_requests.scss b/app/assets/stylesheets/pages/merge_requests.scss
index c8349a4ef79..7bd0f0bf1e0 100644
--- a/app/assets/stylesheets/pages/merge_requests.scss
+++ b/app/assets/stylesheets/pages/merge_requests.scss
@@ -208,7 +208,7 @@
         position: absolute;
         content: '...';
         right: 0;
-        font-family: $regular_font;
+        font-family: $regular-font;
         background-color: $gray-light;
       }
     }
diff --git a/app/assets/stylesheets/pages/note_form.scss b/app/assets/stylesheets/pages/note_form.scss
index 5e5696b1602..dcf590e7331 100644
--- a/app/assets/stylesheets/pages/note_form.scss
+++ b/app/assets/stylesheets/pages/note_form.scss
@@ -42,7 +42,7 @@
   display: block;
   padding: 10px 0;
   color: $gl-text-color;
-  font-family: $regular_font;
+  font-family: $regular-font;
   border: 0;
 
   &:focus {
diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss
index 32d14049067..7fc2936c5e6 100644
--- a/app/assets/stylesheets/pages/notes.scss
+++ b/app/assets/stylesheets/pages/notes.scss
@@ -328,7 +328,7 @@ ul.notes {
   }
 
   .notes_holder {
-    font-family: $regular_font;
+    font-family: $regular-font;
 
     td {
       border: 1px solid $white-normal;
@@ -403,7 +403,7 @@ ul.notes {
     }
   }
 
-  .author_link {
+  .author-link {
     color: $gl-text-color;
   }
 }
diff --git a/app/assets/stylesheets/pages/repo.scss b/app/assets/stylesheets/pages/repo.scss
index 8b1227b9131..2d76f0ce004 100644
--- a/app/assets/stylesheets/pages/repo.scss
+++ b/app/assets/stylesheets/pages/repo.scss
@@ -961,7 +961,7 @@
   overflow: hidden;
 
   .note-textarea {
-    font-family: $monospace_font;
+    font-family: $monospace-font;
   }
 }
 
diff --git a/app/assets/stylesheets/snippets.scss b/app/assets/stylesheets/snippets.scss
index 0d6b0735f70..64110f9c3a0 100644
--- a/app/assets/stylesheets/snippets.scss
+++ b/app/assets/stylesheets/snippets.scss
@@ -6,9 +6,9 @@
 
   $border-style: 1px solid $border-color;
 
-  font-family: $regular_font;
+  font-family: $regular-font;
   font-size: $gl-font-size;
-  line-height: $code_line_height;
+  line-height: $code-line-height;
   color: $gl-text-color;
   margin: 20px;
   font-weight: 200;
@@ -48,9 +48,9 @@
         padding: 10px;
         border: 0;
         border-radius: 0;
-        font-family: $monospace_font;
-        font-size: $code_font_size;
-        line-height: $code_line_height;
+        font-family: $monospace-font;
+        font-size: $code-font-size;
+        line-height: $code-line-height;
         margin: 0;
         overflow: auto;
         overflow-y: hidden;
@@ -66,10 +66,10 @@
       float: left;
 
       .diff-line-num {
-        font-family: $monospace_font;
+        font-family: $monospace-font;
         display: block;
-        font-size: $code_font_size;
-        min-height: $code_line_height;
+        font-size: $code-font-size;
+        min-height: $code-line-height;
         white-space: nowrap;
         color: $black-transparent;
         min-width: 30px;