Improve color suggestions (#304)

* Add palettes for each type of color picker.

* Add white canvas background and black element stroke.

* Add white for element background.

src/actions/actionCanvas.tsx

@@ -11,6 +11,7 @@ export const actionChangeViewBackgroundColor: Action = {
     <>
       <h5>Canvas Background Color</h5>
       <ColorPicker
+        type="canvasBackground"
         color={appState.viewBackgroundColor}
         onChange={color => updateData(color)}
       />

src/actions/actionProperties.tsx

@@ -32,6 +32,7 @@ export const actionChangeStrokeColor: Action = {
   PanelComponent: ({ elements, appState, updateData }) => (
     <PanelColor
       title="Stroke Color"
+      colorType="elementStroke"
       onColorChange={(color: string) => {
         updateData(color);
       }}
@@ -57,6 +58,7 @@ export const actionChangeBackgroundColor: Action = {
   PanelComponent: ({ elements, updateData }) => (
     <PanelColor
       title="Background Color"
+      colorType="elementBackground"
       onColorChange={(color: string) => {
         updateData(color);
       }}

src/components/ColorPicker.tsx

@@ -8,9 +8,11 @@ const TwitterPicker = lazy(() =>
 );
 
 export function ColorPicker({
+  type,
   color,
   onChange
 }: {
+  type: "canvasBackground" | "elementBackground" | "elementStroke";
   color: string | null;
   onChange: (color: string) => void;
 }) {
@@ -26,19 +28,7 @@ export function ColorPicker({
         {isActive ? (
           <Popover onCloseRequest={() => setActive(false)}>
             <TwitterPicker
-              colors={[
+              colors={colors[type]}
-                "#000000",
-                "#ABB8C3",
-                "#FFFFFF",
-                "#FF6900",
-                "#FCB900",
-                "#00D084",
-                "#8ED1FC",
-                "#0693E3",
-                "#EB144C",
-                "#F78DA7",
-                "#9900EF"
-              ]}
               width="205px"
               color={color || undefined}
               onChange={changedColor => {
@@ -58,3 +48,45 @@ export function ColorPicker({
     </div>
   );
 }
+
+const colors = {
+  canvasBackground: [
+    "#DEE6EF",
+    "#FCEAD8",
+    "#F9E0E0",
+    "#E6F1F1",
+    "#E0EDDF",
+    "#FBF5DD",
+    "#F0E6ED",
+    "#FFEDEF",
+    "#EDE5E1",
+    "#F2F0EF",
+    "#FFFFFF"
+  ],
+  elementBackground: [
+    "#4E79A7",
+    "#F28E2C",
+    "#E15759",
+    "#76B7B2",
+    "#59A14F",
+    "#EDC949",
+    "#AF7AA1",
+    "#FF9DA7",
+    "#9C755F",
+    "#BAB0AB",
+    "#FFFFFF"
+  ],
+  elementStroke: [
+    "#324E6B",
+    "#9B5B1D",
+    "#903839",
+    "#4C7572",
+    "#396733",
+    "#AD9336",
+    "#805976",
+    "#BA737A",
+    "#725646",
+    "#88817D",
+    "#000000"
+  ]
+};

src/components/panels/PanelColor.tsx

@@ -3,12 +3,14 @@ import { ColorPicker } from "../ColorPicker";
 
 interface PanelColorProps {
   title: string;
+  colorType: "canvasBackground" | "elementBackground" | "elementStroke";
   colorValue: string | null;
   onColorChange: (value: string) => void;
 }
 
 export const PanelColor: React.FC<PanelColorProps> = ({
   title,
+  colorType,
   onColorChange,
   colorValue
 }) => {
@@ -16,6 +18,7 @@ export const PanelColor: React.FC<PanelColorProps> = ({
     <>
       <h5>{title}</h5>
       <ColorPicker
+        type={colorType}
         color={colorValue}
         onChange={color => onColorChange(color)}
       />