From d8a5defaf61d658d5c0f2dcdba8b4c34cef6072f Mon Sep 17 00:00:00 2001
From: Igor D <igorDykhta@users.noreply.github.com>
Date: Wed, 3 May 2023 02:55:51 +0300
Subject: [PATCH] [Fix] ColorBlock component TypeError: e.color.slice(...).join
 is not a function (#2212)

Signed-off-by: Ihor Dykhta <dikhta.igor@gmail.com>
---
 src/components/src/side-panel/layer-panel/color-selector.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/components/src/side-panel/layer-panel/color-selector.tsx b/src/components/src/side-panel/layer-panel/color-selector.tsx
index 29eadb3fd3..260f4b51b5 100644
--- a/src/components/src/side-panel/layer-panel/color-selector.tsx
+++ b/src/components/src/side-panel/layer-panel/color-selector.tsx
@@ -52,7 +52,10 @@ export const ColorBlock = styled.div<{backgroundcolor: RGBColor}>`
   width: 32px;
   height: 18px;
   border-radius: 1px;
-  background-color: ${props => `rgb(${props.backgroundcolor.slice(0, 3).join(',')})`};
+  background-color: ${props =>
+    Array.isArray(props.backgroundcolor)
+      ? `rgb(${props.backgroundcolor.slice(0, 3).join(',')})`
+      : 'transparent'};
 `;
 
 export const ColorSelectorInput = styled.div<ColorSelectorInputProps>`