From 94ce1a8e4d11c837f1864c803bb3e4726cf16ff3 Mon Sep 17 00:00:00 2001
From: Gustav Hansen <gustav.hansen@strapi.io>
Date: Thu, 4 May 2023 16:04:44 +0200
Subject: [PATCH] Fix: Limit border of stage color badges to neutral0 (white)

---
 .../ReviewWorkflowsStage/ReviewWorkflowsStageEE.js  | 13 ++++++++++++-
 .../Stage/components/OptionColor/OptionColor.js     |  5 ++++-
 .../components/SingleValueColor/SingleValueColor.js |  5 ++++-
 .../pages/ReviewWorkflows/utils/colors.js           |  4 +++-
 .../ReviewWorkflows/utils/tests/colors.test.js      |  5 +++++
 5 files changed, 28 insertions(+), 4 deletions(-)

diff --git a/packages/core/admin/ee/admin/content-manager/components/DynamicTable/CellContent/ReviewWorkflowsStage/ReviewWorkflowsStageEE.js b/packages/core/admin/ee/admin/content-manager/components/DynamicTable/CellContent/ReviewWorkflowsStage/ReviewWorkflowsStageEE.js
index 929a6a735f..830e760b96 100644
--- a/packages/core/admin/ee/admin/content-manager/components/DynamicTable/CellContent/ReviewWorkflowsStage/ReviewWorkflowsStageEE.js
+++ b/packages/core/admin/ee/admin/content-manager/components/DynamicTable/CellContent/ReviewWorkflowsStage/ReviewWorkflowsStageEE.js
@@ -3,10 +3,21 @@ import PropTypes from 'prop-types';
 import { Box, Flex, Typography } from '@strapi/design-system';
 import { pxToRem } from '@strapi/helper-plugin';
 
+import { getStageColorByHex } from '../../../../../pages/SettingsPage/pages/ReviewWorkflows/utils/colors';
+
 export function ReviewWorkflowsStageEE({ color, name }) {
+  const { themeColorName } = getStageColorByHex(color);
+
   return (
     <Flex alignItems="center" gap={2} maxWidth={pxToRem(300)}>
-      <Box height={2} background={color} borderColor="neutral150" hasRadius shrink={0} width={2} />
+      <Box
+        height={2}
+        background={color}
+        borderColor={themeColorName === 'neutral0' ? 'neutral150' : 'transparent'}
+        hasRadius
+        shrink={0}
+        width={2}
+      />
 
       <Typography fontWeight="regular" textColor="neutral700" ellipsis>
         {name}
diff --git a/packages/core/admin/ee/admin/pages/SettingsPage/pages/ReviewWorkflows/components/Stages/Stage/components/OptionColor/OptionColor.js b/packages/core/admin/ee/admin/pages/SettingsPage/pages/ReviewWorkflows/components/Stages/Stage/components/OptionColor/OptionColor.js
index 57a8e7c39e..ff7c25a25a 100644
--- a/packages/core/admin/ee/admin/pages/SettingsPage/pages/ReviewWorkflows/components/Stages/Stage/components/OptionColor/OptionColor.js
+++ b/packages/core/admin/ee/admin/pages/SettingsPage/pages/ReviewWorkflows/components/Stages/Stage/components/OptionColor/OptionColor.js
@@ -3,8 +3,11 @@ import PropTypes from 'prop-types';
 import { components } from 'react-select';
 import { Flex, Typography } from '@strapi/design-system';
 
+import { getStageColorByHex } from '../../../../../utils/colors';
+
 export function OptionColor({ children, ...props }) {
   const { color } = props.data;
+  const { themeColorName } = getStageColorByHex(color);
 
   return (
     <components.Option {...props}>
@@ -12,7 +15,7 @@ export function OptionColor({ children, ...props }) {
         <Flex
           height={2}
           background={color}
-          borderColor="neutral150"
+          borderColor={themeColorName === 'neutral0' ? 'neutral150' : 'transparent'}
           hasRadius
           shrink={0}
           width={2}
diff --git a/packages/core/admin/ee/admin/pages/SettingsPage/pages/ReviewWorkflows/components/Stages/Stage/components/SingleValueColor/SingleValueColor.js b/packages/core/admin/ee/admin/pages/SettingsPage/pages/ReviewWorkflows/components/Stages/Stage/components/SingleValueColor/SingleValueColor.js
index ff785c6d3c..f8a5b63b63 100644
--- a/packages/core/admin/ee/admin/pages/SettingsPage/pages/ReviewWorkflows/components/Stages/Stage/components/SingleValueColor/SingleValueColor.js
+++ b/packages/core/admin/ee/admin/pages/SettingsPage/pages/ReviewWorkflows/components/Stages/Stage/components/SingleValueColor/SingleValueColor.js
@@ -3,8 +3,11 @@ import PropTypes from 'prop-types';
 import { components } from 'react-select';
 import { Flex, Typography } from '@strapi/design-system';
 
+import { getStageColorByHex } from '../../../../../utils/colors';
+
 export function SingleValueColor({ children, ...props }) {
   const { color } = props.data;
+  const { themeColorName } = getStageColorByHex(color);
 
   return (
     <components.SingleValue {...props}>
@@ -12,7 +15,7 @@ export function SingleValueColor({ children, ...props }) {
         <Flex
           height={2}
           background={color}
-          borderColor="neutral150"
+          borderColor={themeColorName === 'neutral0' ? 'neutral150' : 'transparent'}
           hasRadius
           shrink={0}
           width={2}
diff --git a/packages/core/admin/ee/admin/pages/SettingsPage/pages/ReviewWorkflows/utils/colors.js b/packages/core/admin/ee/admin/pages/SettingsPage/pages/ReviewWorkflows/utils/colors.js
index 0d10447f33..9abd323d70 100644
--- a/packages/core/admin/ee/admin/pages/SettingsPage/pages/ReviewWorkflows/utils/colors.js
+++ b/packages/core/admin/ee/admin/pages/SettingsPage/pages/ReviewWorkflows/utils/colors.js
@@ -6,7 +6,9 @@ export function getStageColorByHex(hex) {
   // there are multiple colors with the same hex code in the design tokens. In order to find
   // the correct one we have to find all matching colors and then check, which ones are usable
   // for stages.
-  const themeColors = Object.entries(lightTheme.colors).filter(([, value]) => value === hex);
+  const themeColors = Object.entries(lightTheme.colors).filter(
+    ([, value]) => value.toUpperCase() === hex.toUpperCase()
+  );
   const themeColorName = themeColors.reduce((acc, [name]) => {
     if (STAGE_COLORS?.[name]) {
       acc = name;
diff --git a/packages/core/admin/ee/admin/pages/SettingsPage/pages/ReviewWorkflows/utils/tests/colors.test.js b/packages/core/admin/ee/admin/pages/SettingsPage/pages/ReviewWorkflows/utils/tests/colors.test.js
index 73b198c4d5..8102e94d24 100644
--- a/packages/core/admin/ee/admin/pages/SettingsPage/pages/ReviewWorkflows/utils/tests/colors.test.js
+++ b/packages/core/admin/ee/admin/pages/SettingsPage/pages/ReviewWorkflows/utils/tests/colors.test.js
@@ -22,6 +22,11 @@ describe('Settings | Review Workflows | colors', () => {
       themeColorName: 'primary600',
     });
 
+    expect(getStageColorByHex('#4945FF')).toStrictEqual({
+      name: 'Blue',
+      themeColorName: 'primary600',
+    });
+
     expect(getStageColorByHex('random')).toStrictEqual(null);
     expect(getStageColorByHex()).toStrictEqual(null);
   });