Use tab list style for visualization type selector

ui/src/dashboards/components/OverlayControls.js

@@ -12,11 +12,11 @@ const OverlayControls = props => {
       <h3 className="overlay--graph-name">Cell Editor</h3>
       <div className="overlay-controls--right">
         <p>Visualization Type:</p>
-        <ul className="toggle toggle-sm">
+        <ul className="nav nav-tablist nav-tablist-sm">
           {graphTypes.map(graphType => (
             <li
               key={graphType.type}
-              className={classnames('toggle-btn', {
+              className={classnames({
                 active: graphType.type === selectedGraphType,
               })}
               onClick={() => onSelectGraphType(graphType.type)}

ui/src/style/pages/overlay-technology.scss

@@ -54,13 +54,16 @@ $overlay-z: 100;
       margin: 0 0 0 5px;
     }
     p {
+      width: auto;
       font-weight: 600;
       color: $g13-mist;
-      margin: 0;
+      margin: 0 6px 0 0;
       @include no-user-select;
+      white-space: nowrap;
     }
   }
   .overlay--graph-name {
+    width: auto;
     margin: 0;
     font-size: 17px;
     font-weight: 400;
@@ -78,28 +81,6 @@ $overlay-z: 100;
 .overlay-controls .confirm-buttons {
   margin-left: 32px;
 }
-.overlay-controls .confirm-buttons .btn {
-  height: 30px;
-  line-height: 30px;
-  padding: 0 9px;
-
-  & > span.icon {
-    font-size: 16px;
-  }
-}
-.overlay-controls .toggle {
-
-  .toggle-btn {
-    background-color: $overlay-controls-bg;
-
-    &:hover {
-      background-color: $g4-onyx;
-    }
-    &.active {
-      background-color: $g5-pepper;
-    }
-  }
-}
 
 /* Graph editing in Dashboards is a little smaller so the dash can be seen in the background */
 .overlay-technology .graph {