From 10d8ccb0f42111a086ee3f5cfd5b6c5394667e9c Mon Sep 17 00:00:00 2001
From: Alex P <thealexpaxton@gmail.com>
Date: Fri, 1 Jun 2018 16:59:51 -0700
Subject: [PATCH] Replace button with compact tab toggle

---
 ui/src/logs/components/LogViewerHeader.tsx | 29 +++++++++++-----------
 ui/src/style/pages/logs-viewer.scss        |  9 +++++++
 2 files changed, 23 insertions(+), 15 deletions(-)

diff --git a/ui/src/logs/components/LogViewerHeader.tsx b/ui/src/logs/components/LogViewerHeader.tsx
index 26f79d08c4..cc4b1a7517 100644
--- a/ui/src/logs/components/LogViewerHeader.tsx
+++ b/ui/src/logs/components/LogViewerHeader.tsx
@@ -1,6 +1,7 @@
 import _ from 'lodash'
 import React, {PureComponent} from 'react'
 import {Source, Namespace} from 'src/types'
+import classnames from 'classnames'
 import Dropdown from 'src/shared/components/Dropdown'
 import TimeRangeDropdown from 'src/logs/components/TimeRangeDropdown'
 
@@ -62,25 +63,23 @@ class LogViewerHeader extends PureComponent<Props> {
 
   private get status(): JSX.Element {
     const {liveUpdating, onChangeLiveUpdatingStatus} = this.props
-    if (liveUpdating) {
-      return (
-        <button
-          className={'btn btn-sm btn-default btn-square'}
+
+    return (
+      <ul className="nav nav-tablist nav-tablist-sm logs-viewer--mode-toggle">
+        <li
+          className={classnames({active: liveUpdating})}
           onClick={onChangeLiveUpdatingStatus}
         >
-          <span style={{marginRight: '10px'}} className="icon pause" />
-        </button>
-      )
-    } else {
-      return (
-        <button
-          className={'btn btn-sm btn-default btn-square'}
+          <span className="icon play" />
+        </li>
+        <li
+          className={classnames({active: !liveUpdating})}
           onClick={onChangeLiveUpdatingStatus}
         >
-          <span style={{marginRight: '10px'}} className="icon refresh" />
-        </button>
-      )
-    }
+          <span className="icon pause" />
+        </li>
+      </ul>
+    )
   }
 
   private handleChooseTimeRange = (timerange: TimeRange) => {
diff --git a/ui/src/style/pages/logs-viewer.scss b/ui/src/style/pages/logs-viewer.scss
index db62bbb2dd..e6294f8fa2 100644
--- a/ui/src/style/pages/logs-viewer.scss
+++ b/ui/src/style/pages/logs-viewer.scss
@@ -234,4 +234,13 @@ $logs-viewer-gutter: 60px;
   &.debug-severity {
     @include gradient-diag-up($g5-pepper, $g6-smoke);
   }
+}
+
+// Play & Pause Toggle in Header
+.nav.nav-tablist.nav-tablist-sm.logs-viewer--mode-toggle {
+  > li {
+    padding: 0;
+    width: 26px;
+    justify-content: center;
+  }
 }
\ No newline at end of file