From 8477eb20bea86b38301c6ed8b52439fd97472ca3 Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Mon, 19 Jun 2023 13:13:37 +0800
Subject: [PATCH] Outline on label colour selector

---
 .../elements/LabelColorDropdown.tsx           | 34 +++++++++++++++++--
 1 file changed, 32 insertions(+), 2 deletions(-)

diff --git a/packages/web/components/elements/LabelColorDropdown.tsx b/packages/web/components/elements/LabelColorDropdown.tsx
index 1682f66da..2ab9d258b 100644
--- a/packages/web/components/elements/LabelColorDropdown.tsx
+++ b/packages/web/components/elements/LabelColorDropdown.tsx
@@ -52,6 +52,9 @@ export const LabelColorDropdown = (props: LabelColorDropdownProps) => {
             minWidth: '170px',
             width: 'auto',
           },
+          borderRadius: '6px',
+          outlineStyle: 'solid',
+          outlineColor: open ? '$omnivoreYellow' : 'transparent',
         }}
       >
         <LabelOption
@@ -62,8 +65,35 @@ export const LabelColorDropdown = (props: LabelColorDropdownProps) => {
         />
       </DropdownMenuTrigger>
 
-      <DropdownMenuContent align="start" sideOffset={10}>
-        <TwitterPicker />
+      <DropdownMenuContent
+        align="start"
+        sideOffset={10}
+        onKeyUp={(event) => {
+          switch (event.key) {
+            case 'Escape':
+              setOpen(false)
+              event.preventDefault()
+              break
+            case 'Enter':
+              setOpen(false)
+              event.preventDefault()
+              break
+          }
+        }}
+      >
+        <TwitterPicker
+          color={labelColor}
+          onChange={(color, event) => {
+            console.log('changed to color: ', color)
+            setLabelColor(color.hex)
+            event.preventDefault()
+          }}
+          onChangeComplete={(color, event) => {
+            console.log('onChangeComplete: ', color)
+            setLabelColor(color.hex)
+            event.preventDefault()
+          }}
+        />
       </DropdownMenuContent>
     </DropdownMenu>
   )