Replace button with compact tab toggle

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 (
+    return (
-        <button
+      <ul className="nav nav-tablist nav-tablist-sm logs-viewer--mode-toggle">
-          className={'btn btn-sm btn-default btn-square'}
+        <li
+          className={classnames({active: liveUpdating})}
           onClick={onChangeLiveUpdatingStatus}
         >
-          <span style={{marginRight: '10px'}} className="icon pause" />
+          <span className="icon play" />
-        </button>
+        </li>
-      )
+        <li
-    } else {
+          className={classnames({active: !liveUpdating})}
-      return (
-        <button
-          className={'btn btn-sm btn-default btn-square'}
           onClick={onChangeLiveUpdatingStatus}
         >
-          <span style={{marginRight: '10px'}} className="icon refresh" />
+          <span className="icon pause" />
-        </button>
+        </li>
-      )
+      </ul>
-    }
+    )
   }
 
   private handleChooseTimeRange = (timerange: TimeRange) => {

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;
+  }
 }