Use Switch to control y-axis in series color picker

packages/grafana-ui/src/components/ColorPicker/ColorPicker.tsx

@@ -63,7 +63,7 @@ export const colorPickerFactory = <T extends ColorPickerProps>(
       };
 
       return (
-        <PopperController content={popoverElement} hideAfter={500}>
+        <PopperController content={popoverElement} hideAfter={300}>
           {(showPopper, hidePopper, popperProps) => {
             return (
               <>

packages/grafana-ui/src/components/ColorPicker/SeriesColorPickerPopover.tsx

@@ -3,6 +3,7 @@ import React, { FunctionComponent } from 'react';
 import { ColorPickerPopover } from './ColorPickerPopover';
 import { ColorPickerProps } from './ColorPicker';
 import { PopperContentProps } from '../Tooltip/PopperController';
+import { Switch } from '../Switch/Switch';
 
 export interface SeriesColorPickerPopoverProps extends ColorPickerProps, PopperContentProps {
   yaxis?: number;
@@ -19,7 +20,20 @@ export const SeriesColorPickerPopover: FunctionComponent<SeriesColorPickerPopove
       customPickers={{
         yaxis: {
           name: 'Y-Axis',
-          tabComponent: () => <div style={{ marginTop: '24px' }}>{yaxis && <AxisSelector yaxis={yaxis} onToggleAxis={onToggleAxis} />}</div>
+          tabComponent: () => (
+            <Switch
+              key="yaxisSwitch"
+              label="Use right y-axis"
+              className="ColorPicker__axisSwitch"
+              labelClass="ColorPicker__axisSwitchLabel"
+              checked={yaxis === 2}
+              onChange={() => {
+                if (onToggleAxis) {
+                  onToggleAxis();
+                }
+              }}
+            />
+          ),
         },
       }}
     />

packages/grafana-ui/src/components/ColorPicker/_ColorPicker.scss

@@ -130,12 +130,15 @@ $arrowSize: 15px;
 
 .ColorPickerPopover__content {
   width: 336px;
+  min-height: 184px;
   padding: 24px;
 }
 
 .ColorPickerPopover__tabs {
   display: flex;
   width: 100%;
+  border-radius: 3px 3px 0 0;
+  overflow: hidden;
 }
 
 .ColorPickerPopover__tab {
@@ -143,13 +146,21 @@ $arrowSize: 15px;
   text-align: center;
   padding: 8px 0;
   background: #dde4ed;
-  border-radius: 3px;
 }
 
 .ColorPickerPopover__tab--active {
   background: white;
 }
 
+.ColorPicker__axisSwitch {
+  width: 100%;
+}
+
+.ColorPicker__axisSwitchLabel {
+  display: flex;
+  flex-grow: 1;
+}
+
 .sp-replacer {
   background: inherit;
   border: none;