UX: History controls should use nav-pill styles (#13904)

app/assets/javascripts/discourse/app/controllers/history.js

@@ -211,17 +211,17 @@ export default Controller.extend(ModalFunctionality, {
 
   @discourseComputed("displayingInline")
   inlineClass(displayingInline) {
-    return displayingInline ? "btn-danger" : "btn-flat";
+    return displayingInline ? "active" : "";
   },
 
   @discourseComputed("displayingSideBySide")
   sideBySideClass(displayingSideBySide) {
-    return displayingSideBySide ? "btn-danger" : "btn-flat";
+    return displayingSideBySide ? "active" : "";
   },
 
   @discourseComputed("displayingSideBySideMarkdown")
   sideBySideMarkdownClass(displayingSideBySideMarkdown) {
-    return displayingSideBySideMarkdown ? "btn-danger" : "btn-flat";
+    return displayingSideBySideMarkdown ? "active" : "";
   },
 
   @discourseComputed("model.category_id_changes")

app/assets/javascripts/discourse/app/templates/modal/history.hbs

@@ -26,27 +26,30 @@
         {{/if}}
       {{/unless}}
     </div>
-
-    <div id="display-modes">
-      {{d-button action=(action "displayInline")
-          icon="far-square"
-          label="post.revisions.displays.inline.button"
-          title="post.revisions.displays.inline.title"
-          class=inlineClass}}
-      {{#unless site.mobileView}}
-        {{d-button action=(action "displaySideBySide")
-            icon="columns"
-            label="post.revisions.displays.side_by_side.button"
-            title="post.revisions.displays.side_by_side.title"
-            class=sideBySideClass}}
-
-        {{d-button action=(action "displaySideBySideMarkdown")
-            icon="columns"
-            label="post.revisions.displays.side_by_side_markdown.button"
-            title="post.revisions.displays.side_by_side_markdown.title"
-            class=sideBySideMarkdownClass}}
-      {{/unless}}
-    </div>
+    {{#unless site.mobileView}}
+      <div id="display-modes">
+        <ul class="nav nav-pills">
+          <li>
+            <a href class={{inlineClass}} {{action "displayInline"}} title={{i18n "post.revisions.displays.inline.title"}}>
+              {{d-icon "far-square"}}
+              {{i18n "post.revisions.displays.inline.button"}}
+            </a>
+          </li>
+          <li>
+            <a href class={{sideBySideClass}} {{action "displaySideBySide"}} title={{i18n "post.revisions.displays.side_by_side.title"}}>
+              {{d-icon "columns"}}
+              {{i18n "post.revisions.displays.side_by_side.button"}}
+            </a>
+          </li>
+          <li>
+            <a href class={{sideBySideMarkdownClass}} {{action "displaySideBySideMarkdown"}} title={{i18n "post.revisions.displays.side_by_side_markdown.title"}}>
+              {{d-icon "columns"}}
+              {{i18n "post.revisions.displays.side_by_side_markdown.button"}}
+            </a>
+          </li>
+        </ul>
+      </div>
+    {{/unless}}
   </div>
   <div id="revisions" data-post-id={{model.post_id}} class={{hiddenClasses}}>
     {{#if model.title_changes}}

app/assets/stylesheets/desktop/history.scss

@@ -20,6 +20,7 @@
   #revision {
     display: flex;
     justify-content: space-between;
+    padding-bottom: 0.5em;
   }
 
   #revisions {
@@ -28,6 +29,14 @@
       margin-top: 10px;
     }
   }
+  #display-modes {
+    .nav {
+      margin: 0;
+      padding: 0;
+      border: none;
+    }
+  }
+
   img {
     max-width: 670px;
     height: auto;

app/assets/stylesheets/mobile/history.scss

@@ -11,9 +11,6 @@
   #revisions {
     max-width: 90vw;
   }
-  #display-modes {
-    display: none;
-  }
   #revision-numbers {
     line-height: $line-height-large;
   }