From c501cfae76a61463dd0c7b858016b56abf447b8c Mon Sep 17 00:00:00 2001
From: ajnart <ajnart@pm.me>
Date: Mon, 1 Aug 2022 21:11:37 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20Fix=20keys=20attribute=20on=20Co?=
 =?UTF-8?q?lorSelector?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Settings/ColorSelector.tsx | 3 +--
 src/components/Settings/ShadeSelector.tsx | 6 ++----
 2 files changed, 3 insertions(+), 6 deletions(-)

diff --git a/src/components/Settings/ColorSelector.tsx b/src/components/Settings/ColorSelector.tsx
index cd8ed5af3..68a762989 100644
--- a/src/components/Settings/ColorSelector.tsx
+++ b/src/components/Settings/ColorSelector.tsx
@@ -44,12 +44,11 @@ export function ColorSelector({ type }: ColorControlProps) {
   };
 
   const swatches = colors.map(({ color, swatch }) => (
-    <Grid.Col span={2}>
+    <Grid.Col span={2} key={color}>
       <ColorSwatch
         component="button"
         type="button"
         onClick={() => setConfigColor(color)}
-        key={color}
         color={swatch}
         size={22}
         style={{ cursor: 'pointer' }}
diff --git a/src/components/Settings/ShadeSelector.tsx b/src/components/Settings/ShadeSelector.tsx
index f05b3dfc5..addbf0906 100644
--- a/src/components/Settings/ShadeSelector.tsx
+++ b/src/components/Settings/ShadeSelector.tsx
@@ -40,12 +40,11 @@ export function ShadeSelector() {
   };
 
   const primarySwatches = primaryShades.map(({ swatch, shade }) => (
-    <Grid.Col span={1}>
+    <Grid.Col span={1} key={Number(shade)}>
       <ColorSwatch
         component="button"
         type="button"
         onClick={() => setConfigShade(shade)}
-        key={Number(shade)}
         color={swatch}
         size={22}
         style={{ cursor: 'pointer' }}
@@ -54,12 +53,11 @@ export function ShadeSelector() {
   ));
 
   const secondarySwatches = secondaryShades.map(({ swatch, shade }) => (
-    <Grid.Col span={1}>
+    <Grid.Col span={1} key={Number(shade)}>
       <ColorSwatch
         component="button"
         type="button"
         onClick={() => setConfigShade(shade)}
-        key={Number(shade)}
         color={swatch}
         size={22}
         style={{ cursor: 'pointer' }}