From 98237f4a37e1a151ab1c5241b17df1ad5b9dab32 Mon Sep 17 00:00:00 2001
From: Maximouse <51849865+mxmou@users.noreply.github.com>
Date: Tue, 30 Aug 2022 20:25:07 +0200
Subject: [PATCH] fix: hide square behind 'mixed' icon

---
 src/components/color-button/color-button.jsx | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/components/color-button/color-button.jsx b/src/components/color-button/color-button.jsx
index 07d9b8a785..fd4afce21a 100644
--- a/src/components/color-button/color-button.jsx
+++ b/src/components/color-button/color-button.jsx
@@ -10,8 +10,12 @@ import styles from './color-button.css';
 import GradientTypes from '../../lib/gradient-types';
 import log from '../../log/log';
 
+const isMixed = (color, color2, gradientType) => {
+    return color === MIXED || (gradientType !== GradientTypes.SOLID && color2 === MIXED);
+}
+
 const colorToBackground = (color, color2, gradientType) => {
-    if (color === MIXED || (gradientType !== GradientTypes.SOLID && color2 === MIXED)) return 'white';
+    if (isMixed(color, color2, gradientType)) return 'white';
     if (color === null) color = 'white';
     if (color2 === null) color2 = 'white';
     switch (gradientType) {
@@ -30,7 +34,7 @@ const ColorButtonComponent = props => (
     >
         <div
             className={classNames(styles.colorButtonSwatch, {
-                [styles.outlineSwatch]: props.outline && !(props.color === MIXED)
+                [styles.outlineSwatch]: props.outline && !isMixed(props.color, props.color2, props.gradientType)
             })}
             style={{
                 background: colorToBackground(props.color, props.color2, props.gradientType)
@@ -42,7 +46,7 @@ const ColorButtonComponent = props => (
                     draggable={false}
                     src={noFillIcon}
                 />
-            ) : ((props.color === MIXED || (props.gradientType !== GradientTypes.SOLID && props.color2 === MIXED) ? (
+            ) : ((isMixed(props.color, props.color2, props.gradientType) ? (
                 <img
                     className={styles.swatchIcon}
                     draggable={false}