1 files changed, 24 insertions, 11 deletions

diff --git a/app/assets/javascripts/behaviors/preview_markdown.js b/app/assets/javascripts/behaviors/preview_markdown.js
index dc408f5a950..bcd92d09033 100644
--- a/app/assets/javascripts/behaviors/preview_markdown.js
+++ b/app/assets/javascripts/behaviors/preview_markdown.js
@@ -121,9 +121,7 @@ MarkdownPreview.prototype.renderReferencedCommands = function (commands, $form)
 const markdownPreview = new MarkdownPreview();
 
 const previewButtonSelector = '.js-md-preview-button';
-const writeButtonSelector = '.js-md-write-button';
 lastTextareaPreviewed = null;
-const markdownToolbar = $('.md-header-toolbar');
 
 $(document).on('markdown-preview:show', (e, $form) => {
   if (!$form) {
@@ -134,13 +132,15 @@ $(document).on('markdown-preview:show', (e, $form) => {
   lastTextareaHeight = lastTextareaPreviewed.height();
 
   // toggle tabs
-  $form.find(writeButtonSelector).parent().removeClass('active');
-  $form.find(previewButtonSelector).parent().addClass('active');
+  $form.find(previewButtonSelector).val('edit');
+  $form.find(previewButtonSelector).children('span.gl-button-text').text(__('Continue editing'));
+  $form.find(previewButtonSelector).addClass('gl-shadow-none! gl-bg-transparent!');
 
   // toggle content
   $form.find('.md-write-holder').hide();
   $form.find('.md-preview-holder').show();
-  markdownToolbar.removeClass('active');
+  $form.find('.md-header-toolbar, .js-zen-enter').addClass('gl-display-none!');
+
   markdownPreview.showPreview($form);
 });
 
@@ -155,14 +155,14 @@ $(document).on('markdown-preview:hide', (e, $form) => {
   }
 
   // toggle tabs
-  $form.find(writeButtonSelector).parent().addClass('active');
-  $form.find(previewButtonSelector).parent().removeClass('active');
+  $form.find(previewButtonSelector).val('preview');
+  $form.find(previewButtonSelector).children('span.gl-button-text').text(__('Preview'));
 
   // toggle content
   $form.find('.md-write-holder').show();
   $form.find('textarea.markdown-area').focus();
   $form.find('.md-preview-holder').hide();
-  markdownToolbar.addClass('active');
+  $form.find('.md-header-toolbar, .js-zen-enter').removeClass('gl-display-none!');
 
   markdownPreview.hideReferencedCommands($form);
 });
@@ -183,13 +183,26 @@ $(document).on('markdown-preview:toggle', (e, keyboardEvent) => {
 $(document).on('click', previewButtonSelector, function (e) {
   e.preventDefault();
   const $form = $(this).closest('form');
-  $(document).triggerHandler('markdown-preview:show', [$form]);
+  const eventName = e.currentTarget.getAttribute('value') === 'preview' ? 'show' : 'hide';
+  $(document).triggerHandler(`markdown-preview:${eventName}`, [$form]);
+});
+
+$(document).on('mousedown', previewButtonSelector, function (e) {
+  e.preventDefault();
+  const $form = $(this).closest('form');
+  $form.find(previewButtonSelector).removeClass('gl-shadow-none! gl-bg-transparent!');
+});
+
+$(document).on('mouseenter', previewButtonSelector, function (e) {
+  e.preventDefault();
+  const $form = $(this).closest('form');
+  $form.find(previewButtonSelector).removeClass('gl-bg-transparent!');
 });
 
-$(document).on('click', writeButtonSelector, function (e) {
+$(document).on('mouseleave', previewButtonSelector, function (e) {
   e.preventDefault();
   const $form = $(this).closest('form');
-  $(document).triggerHandler('markdown-preview:hide', [$form]);
+  $form.find(previewButtonSelector).addClass('gl-bg-transparent!');
 });
 
 export default MarkdownPreview;