From 5e67f54fb48ff21acdf495da85354ce58938dbce Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Enrique=20Alc=C3=A1ntara?= <ealcantara@gitlab.com>
Date: Thu, 21 Mar 2019 22:14:30 +0000
Subject: [PATCH] Remove :not pseudo-class from md-table styles

Rollback change that adds :not(js-syntax-highlight) pseudo-class
to markdown selectors to fix syntax highlight tables in
MR code suggestions. Removes redundant inclusion of
md-typography mixin as an alternative fix.
---
 app/assets/stylesheets/framework/markdown_area.scss  |  2 +-
 app/assets/stylesheets/framework/mixins.scss         |  5 ++---
 app/assets/stylesheets/framework/typography.scss     | 12 +++++++++---
 app/assets/stylesheets/pages/notes.scss              |  5 -----
 .../unreleased/57655-fix-markdown-tables-border.yml  |  5 +++++
 5 files changed, 17 insertions(+), 12 deletions(-)
 create mode 100644 changelogs/unreleased/57655-fix-markdown-tables-border.yml

diff --git a/app/assets/stylesheets/framework/markdown_area.scss b/app/assets/stylesheets/framework/markdown_area.scss
index d6c4e68f68f..6afe0d61232 100644
--- a/app/assets/stylesheets/framework/markdown_area.scss
+++ b/app/assets/stylesheets/framework/markdown_area.scss
@@ -150,7 +150,7 @@
   }
 
 
-  table:not(.js-syntax-highlight) {
+  table {
     @include markdown-table;
   }
 }
diff --git a/app/assets/stylesheets/framework/mixins.scss b/app/assets/stylesheets/framework/mixins.scss
index 955ae80cd58..9e192cbe3fc 100644
--- a/app/assets/stylesheets/framework/mixins.scss
+++ b/app/assets/stylesheets/framework/mixins.scss
@@ -29,15 +29,14 @@
   display: block;
   overflow-x: auto;
   border: 0;
-  border-color: $gl-gray-100;
 
   tr {
     th {
-      border-bottom: solid 2px $gl-gray-100;
+      border-bottom: solid 2px $gl-gray-200;
     }
 
     td {
-      border-color: $gl-gray-100;
+      border-color: $gl-gray-200;
     }
   }
 }
diff --git a/app/assets/stylesheets/framework/typography.scss b/app/assets/stylesheets/framework/typography.scss
index 55ce0d7004e..5e5e8bcc3d6 100644
--- a/app/assets/stylesheets/framework/typography.scss
+++ b/app/assets/stylesheets/framework/typography.scss
@@ -136,15 +136,21 @@
     margin: 0 0 16px;
   }
 
-  table:not(.js-syntax-highlight) {
+  table {
     @extend .table;
     @extend .table-bordered;
     margin: 16px 0;
     color: $gl-text-color;
     border: 0;
 
-    th {
-      background: $label-gray-bg;
+    tr {
+      th {
+        border-bottom: solid 2px $gl-gray-200;
+      }
+
+      td {
+        border-color: $gl-gray-200;
+      }
     }
   }
 
diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss
index faf85e151e3..88984cae513 100644
--- a/app/assets/stylesheets/pages/notes.scss
+++ b/app/assets/stylesheets/pages/notes.scss
@@ -224,14 +224,9 @@ $note-form-margin-left: 72px;
       overflow-y: hidden;
 
       .note-text {
-        @include md-typography;
         // Reset ul style types since we're nested inside a ul already
         @include bulleted-list;
         word-wrap: break-word;
-
-        table {
-          @include markdown-table;
-        }
       }
     }
 
diff --git a/changelogs/unreleased/57655-fix-markdown-tables-border.yml b/changelogs/unreleased/57655-fix-markdown-tables-border.yml
new file mode 100644
index 00000000000..6a8ba8c4353
--- /dev/null
+++ b/changelogs/unreleased/57655-fix-markdown-tables-border.yml
@@ -0,0 +1,5 @@
+---
+title: Fix markdown table header and table content borders
+merge_request: 25666
+author:
+type: fixed