From 3c7a5bdf7b49de026793d27dc46355f9b11b3805 Mon Sep 17 00:00:00 2001
From: Dominik Prokop <dominik.prokop@grafana.com>
Date: Wed, 23 Jan 2019 14:59:43 +0100
Subject: [PATCH] Update styles of selected named color swatch

---
 .../src/components/ColorPicker/NamedColorsGroup.tsx      | 9 ++++++---
 .../src/components/ColorPicker/NamedColorsPalette.tsx    | 1 -
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/packages/grafana-ui/src/components/ColorPicker/NamedColorsGroup.tsx b/packages/grafana-ui/src/components/ColorPicker/NamedColorsGroup.tsx
index b0cccd092a1..2e015b92284 100644
--- a/packages/grafana-ui/src/components/ColorPicker/NamedColorsGroup.tsx
+++ b/packages/grafana-ui/src/components/ColorPicker/NamedColorsGroup.tsx
@@ -1,5 +1,5 @@
 import React, { FunctionComponent } from 'react';
-import { Themeable } from '../../types';
+import { Themeable, GrafanaTheme } from '../../types';
 import { ColorDefinition, getColorForTheme } from '../../utils/colorsPalette';
 import { Color } from 'csstype';
 import { find, upperFirst } from 'lodash';
@@ -11,7 +11,7 @@ export enum ColorSwatchVariant {
   Large = 'large',
 }
 
-interface ColorSwatchProps extends React.DOMAttributes<HTMLDivElement> {
+interface ColorSwatchProps extends Themeable, React.DOMAttributes<HTMLDivElement> {
   color: string;
   label?: string;
   variant?: ColorSwatchVariant;
@@ -23,17 +23,19 @@ const ColorSwatch: FunctionComponent<ColorSwatchProps> = ({
   label,
   variant = ColorSwatchVariant.Small,
   isSelected,
+  theme,
   ...otherProps
 }) => {
   const isSmall = variant === ColorSwatchVariant.Small;
   const swatchSize = isSmall ? '16px' : '32px';
+  const selectedSwatchBorder = theme === GrafanaTheme.Light ? '#ffffff' : '#1A1B1F';
   const swatchStyles = {
     width: swatchSize,
     height: swatchSize,
     borderRadius: '50%',
     background: `${color}`,
     marginRight: isSmall ? '0px' : '8px',
-    boxShadow: isSelected ? `inset 0 0 0 2px ${color}, inset 0 0 0 4px white` : 'none',
+    boxShadow: isSelected ? `inset 0 0 0 2px ${color}, inset 0 0 0 4px ${selectedSwatchBorder}` : 'none',
     cursor: isSelected ? 'default' : 'pointer',
   };
 
@@ -76,6 +78,7 @@ const NamedColorsGroup: FunctionComponent<NamedColorsGroupProps> = ({
           color={getColorForTheme(primaryColor, theme)}
           label={upperFirst(primaryColor.hue)}
           onClick={() => onColorSelect(primaryColor)}
+          theme={theme}
         />
       )}
       <div
diff --git a/packages/grafana-ui/src/components/ColorPicker/NamedColorsPalette.tsx b/packages/grafana-ui/src/components/ColorPicker/NamedColorsPalette.tsx
index c107cd91635..0932b5bde76 100644
--- a/packages/grafana-ui/src/components/ColorPicker/NamedColorsPalette.tsx
+++ b/packages/grafana-ui/src/components/ColorPicker/NamedColorsPalette.tsx
@@ -10,7 +10,6 @@ interface NamedColorsPaletteProps extends Themeable {
 
 const NamedColorsPalette = ({ color, onChange, theme }: NamedColorsPaletteProps) => {
   const swatches: JSX.Element[] = [];
-
   ColorsPalette.forEach((colors, hue) => {
     swatches.push(
       <NamedColorsGroup