Make series overrides color picker display correctly

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

@@ -210,3 +210,18 @@ $arrowSize: 15px;
     width: 210px;
   }
 }
+
+// TODO: Remove. This is a temporary solution until color picker popovers are used
+// with Drop.js.
+.drop-popover.drop-popover--transparent {
+  .drop-content {
+    border: none;
+    background: none;
+    padding: 0;
+    max-width: none;
+
+    &:before {
+      display: none;
+    }
+  }
+}

public/app/core/angular_wrappers.ts

@@ -28,6 +28,7 @@ export function registerAngularDirectives() {
     ['onChange', { watchDepth: 'reference', wrapApply: true }],
   ]);
   react2AngularDirective('seriesColorPickerPopover', SeriesColorPickerPopover, [
+    'color',
     'series',
     'onColorChange',
     'onToggleAxis',

public/app/plugins/panel/graph/series_overrides_ctrl.ts

@@ -53,11 +53,13 @@ export function SeriesOverridesCtrl($scope, $element, popoverSrv) {
       element: $element.find('.dropdown')[0],
       position: 'top center',
       openOn: 'click',
-      template: '<series-color-picker-popover series="series" onColorChange="colorSelected" />',
+      template: '<series-color-picker-popover color="color" onColorChange="colorSelected" />',
+      classNames: 'drop-popover drop-popover--transparent',
       model: {
         autoClose: true,
         colorSelected: $scope.colorSelected,
         series: fakeSeries,
+        color,
       },
       onClose: () => {
         $scope.ctrl.render();