From 12983cc0cbfd88c57c3a4175825891f389106a64 Mon Sep 17 00:00:00 2001
From: Rupin Khandelwal <rupin@omnivore.app>
Date: Wed, 6 Jul 2022 01:46:30 +0000
Subject: [PATCH 01/12] Increase luminous for labels

---
 .../elements/LabelColorDropdown.tsx           | 30 +++++++---
 .../labels/labelColorObjects.tsx              | 58 ++++++++++++++++++-
 2 files changed, 79 insertions(+), 9 deletions(-)

diff --git a/packages/web/components/elements/LabelColorDropdown.tsx b/packages/web/components/elements/LabelColorDropdown.tsx
index 5d3ff2979..3647cb325 100644
--- a/packages/web/components/elements/LabelColorDropdown.tsx
+++ b/packages/web/components/elements/LabelColorDropdown.tsx
@@ -10,7 +10,12 @@ import {
   LabelColorObject,
   LabelOptionProps,
 } from '../../utils/settings-page/labels/types'
-import { labelColorObjects } from '../../utils/settings-page/labels/labelColorObjects'
+import {
+  getLuminanceFromRGB,
+  hextoRGB,
+  increaseBrightness,
+  labelColorObjects,
+} from '../../utils/settings-page/labels/labelColorObjects'
 import { DropdownOption } from './DropdownElements'
 import { isDarkTheme } from '../../lib/themeUpdater'
 import { LabelColor } from '../../lib/networking/fragments/labelFragment'
@@ -78,8 +83,8 @@ const MainContainer = styled(Box, {
     border: '1px solid $grayBorderHover',
   },
   '@mdDown': {
-    width: '100%'
-  }
+    width: '100%',
+  },
 })
 
 const CustomLabelWrapper = styled(Box, {
@@ -107,10 +112,20 @@ export const LabelColorDropdown = (props: LabelColorDropdownProps) => {
   } = props
 
   const isDarkMode = isDarkTheme()
-  const iconColor = isDarkMode ? '#FFFFFF': '#0A0806'
-  const [open, setOpen] = useState<boolean | undefined>(false);
+  const iconColor = isDarkMode ? '#FFFFFF' : '#0A0806'
+  const [open, setOpen] = useState<boolean | undefined>(false)
 
   const handleCustomColorChange = (color: string) => {
+    console.log(color);
+    const rgb = hextoRGB(color)
+    const luminance = rgb && getLuminanceFromRGB(rgb)
+
+    if (luminance && luminance < 0.4) {
+      console.log('luminance', luminance);
+      color = increaseBrightness(rgb)
+    }
+    console.log('New color', color);
+
     setLabelColorHex({
       rowId: labelId,
       value: color.toUpperCase() as LabelColor,
@@ -119,7 +134,7 @@ export const LabelColorDropdown = (props: LabelColorDropdownProps) => {
 
   const handleOpen = (open: boolean) => {
     if (canEdit && open) setOpen(true)
-    else if((isCreateMode && !canEdit) && open) setOpen(true)
+    else if (isCreateMode && !canEdit && open) setOpen(true)
     else setOpen(false)
   }
 
@@ -131,7 +146,7 @@ export const LabelColorDropdown = (props: LabelColorDropdownProps) => {
           width: '100%',
           '@md': {
             minWidth: '170px',
-            width: 'auto'
+            width: 'auto',
           },
         }}
       >
@@ -296,6 +311,7 @@ function getLabelColorObject(color: LabelColor) {
   if (labelColorObjects[color]) {
     return labelColorObjects[color]
   }
+
   const colorObject: LabelColorObject = {
     colorName: 'Custom',
     text: color,
diff --git a/packages/web/utils/settings-page/labels/labelColorObjects.tsx b/packages/web/utils/settings-page/labels/labelColorObjects.tsx
index ac4f1fbe6..4ffd90cbf 100644
--- a/packages/web/utils/settings-page/labels/labelColorObjects.tsx
+++ b/packages/web/utils/settings-page/labels/labelColorObjects.tsx
@@ -47,6 +47,60 @@ export const labelColorObjects: LabelColorObjects = {
 
 export const randomLabelColorHex = () => {
   const colorHexes = Object.keys(labelColorObjects).slice(0, -1)
-  const randomColorHex = colorHexes[Math.floor(Math.random() * colorHexes.length)]
+  const randomColorHex =
+    colorHexes[Math.floor(Math.random() * colorHexes.length)]
   return randomColorHex
-}
\ No newline at end of file
+}
+
+export const hextoRGB = (hex: string) => {
+  // strip the leading # if it's there
+  hex = hex.replace(/^\s*#|\s*$/g, '')
+  // convert 3 char codes --> 6, e.g. `E0F` --> `EE00FF`
+  if (hex.length == 3) {
+    hex = hex.replace(/(.)/g, '$1$1')
+  }
+  const aRgbHex = hex.match(/.{1,2}/g)
+  if (aRgbHex) {
+    const aRgb = [
+      parseInt(aRgbHex[0], 16),
+      parseInt(aRgbHex[1], 16),
+      parseInt(aRgbHex[2], 16),
+    ]
+    return aRgb
+  }
+}
+
+// returns a hexadecimal value with increased brightness
+export const increaseBrightness = (rgb: Array<number>) => {
+  // increase brightness by 50%
+  const r = Math.round(Math.min(255, rgb[0] * 1.5))
+  const g = Math.round(Math.min(255, rgb[1] * 1.5))
+  const b = Math.round(Math.min(255, rgb[2] * 1.5))
+
+  let red = r.toString(16)
+  let green = g.toString(16)
+  let blue = b.toString(16)
+
+  if (red.length == 1) red = '0' + red
+  if (green.length == 1) green = '0' + green
+  if (blue.length == 1) blue = '0' + blue
+
+  return `#${red}${green}${blue}`
+}
+
+export const getLuminanceFromRGB = (rgb: Array<number>) => {
+  const r = rgb[0] / 255
+  const g = rgb[1] / 255
+  const b = rgb[2] / 255
+  const red = r <= 0.03928 ? r / 12.92 : Math.pow((r + 0.055) / 1.055, 2.4)
+  const green = g <= 0.03928 ? g / 12.92 : Math.pow((g + 0.055) / 1.055, 2.4)
+  const blue = b <= 0.03928 ? b / 12.92 : Math.pow((b + 0.055) / 1.055, 2.4)
+  // For the sRGB colorspace, the relative luminance of a color is defined as:
+  const luminance = 0.2126 * red + 0.7152 * green + 0.0722 * blue
+  return luminance
+}
+
+// return '#' +
+// ((0|(1<<8) + rgb[0] + (256 - rgb[0]) * percent / 100).toString(16)).substr(1) +
+// ((0|(1<<8) + rgb[1] + (256 - rgb[1]) * percent / 100).toString(16)).substr(1) +
+// ((0|(1<<8) + rgb[2] + (256 - rgb[2]) * percent / 100).toString(16)).substr(1);

From a7eb8b0c39041a34ed7a87f6a591f52eb1aa5196 Mon Sep 17 00:00:00 2001
From: Rupin Khandelwal <rupin@omnivore.app>
Date: Wed, 6 Jul 2022 12:54:17 +0000
Subject: [PATCH 02/12] cleaned up code

---
 .../web/components/elements/LabelColorDropdown.tsx | 13 +++++--------
 .../settings-page/labels/labelColorObjects.tsx     | 14 ++++----------
 2 files changed, 9 insertions(+), 18 deletions(-)

diff --git a/packages/web/components/elements/LabelColorDropdown.tsx b/packages/web/components/elements/LabelColorDropdown.tsx
index 3647cb325..abe6cff44 100644
--- a/packages/web/components/elements/LabelColorDropdown.tsx
+++ b/packages/web/components/elements/LabelColorDropdown.tsx
@@ -11,6 +11,7 @@ import {
   LabelOptionProps,
 } from '../../utils/settings-page/labels/types'
 import {
+  colorLuminance,
   getLuminanceFromRGB,
   hextoRGB,
   increaseBrightness,
@@ -116,19 +117,15 @@ export const LabelColorDropdown = (props: LabelColorDropdownProps) => {
   const [open, setOpen] = useState<boolean | undefined>(false)
 
   const handleCustomColorChange = (color: string) => {
-    console.log(color);
     const rgb = hextoRGB(color)
     const luminance = rgb && getLuminanceFromRGB(rgb)
-
-    if (luminance && luminance < 0.4) {
-      console.log('luminance', luminance);
-      color = increaseBrightness(rgb)
+    let newColor = ''
+    if (luminance && luminance < 0.5) {
+      newColor = increaseBrightness(rgb, 4)
     }
-    console.log('New color', color);
-
     setLabelColorHex({
       rowId: labelId,
-      value: color.toUpperCase() as LabelColor,
+      value: newColor.toUpperCase() as LabelColor,
     })
   }
 
diff --git a/packages/web/utils/settings-page/labels/labelColorObjects.tsx b/packages/web/utils/settings-page/labels/labelColorObjects.tsx
index 4ffd90cbf..89eb7b9a8 100644
--- a/packages/web/utils/settings-page/labels/labelColorObjects.tsx
+++ b/packages/web/utils/settings-page/labels/labelColorObjects.tsx
@@ -71,11 +71,10 @@ export const hextoRGB = (hex: string) => {
 }
 
 // returns a hexadecimal value with increased brightness
-export const increaseBrightness = (rgb: Array<number>) => {
-  // increase brightness by 50%
-  const r = Math.round(Math.min(255, rgb[0] * 1.5))
-  const g = Math.round(Math.min(255, rgb[1] * 1.5))
-  const b = Math.round(Math.min(255, rgb[2] * 1.5))
+export const increaseBrightness = (rgb: Array<number>, brightness: number) => {
+  const r = Math.round(Math.min(Math.max(0, rgb[0] + rgb[0] * brightness), 255))
+  const g = Math.round(Math.min(Math.max(0, rgb[1] + rgb[1] * brightness), 255))
+  const b = Math.round(Math.min(Math.max(0, rgb[2] + rgb[2] * brightness), 255))
 
   let red = r.toString(16)
   let green = g.toString(16)
@@ -99,8 +98,3 @@ export const getLuminanceFromRGB = (rgb: Array<number>) => {
   const luminance = 0.2126 * red + 0.7152 * green + 0.0722 * blue
   return luminance
 }
-
-// return '#' +
-// ((0|(1<<8) + rgb[0] + (256 - rgb[0]) * percent / 100).toString(16)).substr(1) +
-// ((0|(1<<8) + rgb[1] + (256 - rgb[1]) * percent / 100).toString(16)).substr(1) +
-// ((0|(1<<8) + rgb[2] + (256 - rgb[2]) * percent / 100).toString(16)).substr(1);

From 33c204aff82bfa458e93793e7abf3af3fc0041e5 Mon Sep 17 00:00:00 2001
From: Rupin Khandelwal <rupin@omnivore.app>
Date: Wed, 6 Jul 2022 14:02:16 +0000
Subject: [PATCH 03/12] Cleaning up imports

---
 packages/web/components/elements/LabelColorDropdown.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/web/components/elements/LabelColorDropdown.tsx b/packages/web/components/elements/LabelColorDropdown.tsx
index abe6cff44..6bb2d2945 100644
--- a/packages/web/components/elements/LabelColorDropdown.tsx
+++ b/packages/web/components/elements/LabelColorDropdown.tsx
@@ -11,7 +11,6 @@ import {
   LabelOptionProps,
 } from '../../utils/settings-page/labels/types'
 import {
-  colorLuminance,
   getLuminanceFromRGB,
   hextoRGB,
   increaseBrightness,

From 27ed89b375079843a775cc266b36027d92a69c62 Mon Sep 17 00:00:00 2001
From: Rupin Khandelwal <rupin@omnivore.app>
Date: Sun, 10 Jul 2022 16:10:03 +0000
Subject: [PATCH 04/12] Resetting some files + leveraging library - color2k

---
 .../elements/LabelColorDropdown.tsx           | 26 ++++++++++++-------
 packages/web/package.json                     |  1 +
 2 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/packages/web/components/elements/LabelColorDropdown.tsx b/packages/web/components/elements/LabelColorDropdown.tsx
index 6bb2d2945..ec6d8273c 100644
--- a/packages/web/components/elements/LabelColorDropdown.tsx
+++ b/packages/web/components/elements/LabelColorDropdown.tsx
@@ -2,6 +2,7 @@ import React, { useState } from 'react'
 import { styled } from '../tokens/stitches.config'
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu'
 import { HexColorPicker } from 'react-colorful'
+import {getLuminance, lighten, toHex} from 'color2k'
 import { HStack, SpanBox } from './LayoutPrimitives'
 import { CaretDown } from 'phosphor-react'
 import { StyledText } from './StyledText'
@@ -11,9 +12,6 @@ import {
   LabelOptionProps,
 } from '../../utils/settings-page/labels/types'
 import {
-  getLuminanceFromRGB,
-  hextoRGB,
-  increaseBrightness,
   labelColorObjects,
 } from '../../utils/settings-page/labels/labelColorObjects'
 import { DropdownOption } from './DropdownElements'
@@ -114,13 +112,23 @@ export const LabelColorDropdown = (props: LabelColorDropdownProps) => {
   const isDarkMode = isDarkTheme()
   const iconColor = isDarkMode ? '#FFFFFF' : '#0A0806'
   const [open, setOpen] = useState<boolean | undefined>(false)
-
   const handleCustomColorChange = (color: string) => {
-    const rgb = hextoRGB(color)
-    const luminance = rgb && getLuminanceFromRGB(rgb)
-    let newColor = ''
-    if (luminance && luminance < 0.5) {
-      newColor = increaseBrightness(rgb, 4)
+    // const { background } = getLabelColorObject(
+    //   color as LabelColor
+    // )
+    // console.log('background',toHex(background));
+
+    const luminance = getLuminance(color)
+    let newColor = color
+    if(isDarkMode){
+       if(luminance < 0.5) {
+        newColor = toHex(lighten(color, 0.5))
+       }
+    } else {
+      // light mode
+      // set color as background color
+      // If background is dark, set label color as white
+      // if background is light, set label color as black
     }
     setLabelColorHex({
       rowId: labelId,
diff --git a/packages/web/package.json b/packages/web/package.json
index 5c0eafa45..7c3f5f52f 100644
--- a/packages/web/package.json
+++ b/packages/web/package.json
@@ -29,6 +29,7 @@
     "@segment/analytics-next": "^1.33.5",
     "@sentry/nextjs": "^6.16.1",
     "@stitches/react": "^1.2.5",
+    "color2k": "^2.0.0",
     "cookie": "^0.5.0",
     "diff-match-patch": "^1.0.5",
     "graphql-request": "^3.6.1",

From 91e2a01a27bd10b6f08c23974b9c7bab6569885b Mon Sep 17 00:00:00 2001
From: Rupin Khandelwal <rupin@omnivore.app>
Date: Sun, 10 Jul 2022 16:11:40 +0000
Subject: [PATCH 05/12] removing methods

---
 .../labels/labelColorObjects.tsx              | 49 +------------------
 1 file changed, 1 insertion(+), 48 deletions(-)

diff --git a/packages/web/utils/settings-page/labels/labelColorObjects.tsx b/packages/web/utils/settings-page/labels/labelColorObjects.tsx
index 89eb7b9a8..eee587435 100644
--- a/packages/web/utils/settings-page/labels/labelColorObjects.tsx
+++ b/packages/web/utils/settings-page/labels/labelColorObjects.tsx
@@ -50,51 +50,4 @@ export const randomLabelColorHex = () => {
   const randomColorHex =
     colorHexes[Math.floor(Math.random() * colorHexes.length)]
   return randomColorHex
-}
-
-export const hextoRGB = (hex: string) => {
-  // strip the leading # if it's there
-  hex = hex.replace(/^\s*#|\s*$/g, '')
-  // convert 3 char codes --> 6, e.g. `E0F` --> `EE00FF`
-  if (hex.length == 3) {
-    hex = hex.replace(/(.)/g, '$1$1')
-  }
-  const aRgbHex = hex.match(/.{1,2}/g)
-  if (aRgbHex) {
-    const aRgb = [
-      parseInt(aRgbHex[0], 16),
-      parseInt(aRgbHex[1], 16),
-      parseInt(aRgbHex[2], 16),
-    ]
-    return aRgb
-  }
-}
-
-// returns a hexadecimal value with increased brightness
-export const increaseBrightness = (rgb: Array<number>, brightness: number) => {
-  const r = Math.round(Math.min(Math.max(0, rgb[0] + rgb[0] * brightness), 255))
-  const g = Math.round(Math.min(Math.max(0, rgb[1] + rgb[1] * brightness), 255))
-  const b = Math.round(Math.min(Math.max(0, rgb[2] + rgb[2] * brightness), 255))
-
-  let red = r.toString(16)
-  let green = g.toString(16)
-  let blue = b.toString(16)
-
-  if (red.length == 1) red = '0' + red
-  if (green.length == 1) green = '0' + green
-  if (blue.length == 1) blue = '0' + blue
-
-  return `#${red}${green}${blue}`
-}
-
-export const getLuminanceFromRGB = (rgb: Array<number>) => {
-  const r = rgb[0] / 255
-  const g = rgb[1] / 255
-  const b = rgb[2] / 255
-  const red = r <= 0.03928 ? r / 12.92 : Math.pow((r + 0.055) / 1.055, 2.4)
-  const green = g <= 0.03928 ? g / 12.92 : Math.pow((g + 0.055) / 1.055, 2.4)
-  const blue = b <= 0.03928 ? b / 12.92 : Math.pow((b + 0.055) / 1.055, 2.4)
-  // For the sRGB colorspace, the relative luminance of a color is defined as:
-  const luminance = 0.2126 * red + 0.7152 * green + 0.0722 * blue
-  return luminance
-}
+}
\ No newline at end of file

From 9541e0c32e95ae2f47b2cdda5184cc18ea7838cb Mon Sep 17 00:00:00 2001
From: Rupin Khandelwal <rupin@omnivore.app>
Date: Mon, 11 Jul 2022 21:20:57 +0000
Subject: [PATCH 06/12] updated Labels for different themes

---
 .../web/components/elements/LabelChip.tsx     | 28 +++++++++++++------
 .../elements/LabelColorDropdown.tsx           | 24 ++--------------
 2 files changed, 22 insertions(+), 30 deletions(-)

diff --git a/packages/web/components/elements/LabelChip.tsx b/packages/web/components/elements/LabelChip.tsx
index 412915a00..cfd9011d9 100644
--- a/packages/web/components/elements/LabelChip.tsx
+++ b/packages/web/components/elements/LabelChip.tsx
@@ -1,7 +1,8 @@
+import { getLuminance } from 'color2k'
 import { useRouter } from 'next/router'
 import { Button } from './Button'
 import { SpanBox } from './LayoutPrimitives'
-
+import { isDarkTheme } from '../../lib/themeUpdater'
 type LabelChipProps = {
   text: string
   color: string // expected to be a RGB hex color string
@@ -9,6 +10,7 @@ type LabelChipProps = {
 
 export function LabelChip(props: LabelChipProps): JSX.Element {
   const router = useRouter()
+
   const hexToRgb = (hex: string) => {
     const bigint = parseInt(hex.substring(1), 16)
     const r = (bigint >> 16) & 255
@@ -17,19 +19,27 @@ export function LabelChip(props: LabelChipProps): JSX.Element {
 
     return [r, g, b]
   }
+  const isDarkMode = isDarkTheme()
+  const luminance = getLuminance(props.color)
   const color = hexToRgb(props.color)
-
   return (
-    <Button style="plainIcon" onClick={(e) => {
-      router.push(`/home?q=label:"${props.text}"`)
-      e.stopPropagation()
-    }}>
+    <Button
+      style="plainIcon"
+      onClick={(e) => {
+        router.push(`/home?q=label:"${props.text}"`)
+        e.stopPropagation()
+      }}
+    >
       <SpanBox
         css={{
           display: 'inline-table',
           margin: '4px',
           borderRadius: '32px',
-          color: props.color,
+          color: isDarkMode
+            ? `rgba(${color[0]}, ${color[1]}, ${color[2]}, 1)`
+            : luminance > 0.5
+            ? '#000000'
+            : '#ffffff',
           fontSize: '12px',
           fontWeight: 'bold',
           padding: '2px 5px 2px 5px',
@@ -37,7 +47,9 @@ export function LabelChip(props: LabelChipProps): JSX.Element {
           cursor: 'pointer',
           backgroundClip: 'padding-box',
           border: `1px solid rgba(${color[0]}, ${color[1]}, ${color[2]}, 0.7)`,
-          backgroundColor: `rgba(${color[0]}, ${color[1]}, ${color[2]}, 0.08)`,
+          backgroundColor: isDarkMode
+            ? `rgba(${color[0]}, ${color[1]}, ${color[2]}, 0.08)`
+            : props.color,
         }}
       >
         {props.text}
diff --git a/packages/web/components/elements/LabelColorDropdown.tsx b/packages/web/components/elements/LabelColorDropdown.tsx
index ec6d8273c..26dbc83a8 100644
--- a/packages/web/components/elements/LabelColorDropdown.tsx
+++ b/packages/web/components/elements/LabelColorDropdown.tsx
@@ -2,7 +2,6 @@ import React, { useState } from 'react'
 import { styled } from '../tokens/stitches.config'
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu'
 import { HexColorPicker } from 'react-colorful'
-import {getLuminance, lighten, toHex} from 'color2k'
 import { HStack, SpanBox } from './LayoutPrimitives'
 import { CaretDown } from 'phosphor-react'
 import { StyledText } from './StyledText'
@@ -11,9 +10,7 @@ import {
   LabelColorObject,
   LabelOptionProps,
 } from '../../utils/settings-page/labels/types'
-import {
-  labelColorObjects,
-} from '../../utils/settings-page/labels/labelColorObjects'
+import { labelColorObjects } from '../../utils/settings-page/labels/labelColorObjects'
 import { DropdownOption } from './DropdownElements'
 import { isDarkTheme } from '../../lib/themeUpdater'
 import { LabelColor } from '../../lib/networking/fragments/labelFragment'
@@ -113,26 +110,9 @@ export const LabelColorDropdown = (props: LabelColorDropdownProps) => {
   const iconColor = isDarkMode ? '#FFFFFF' : '#0A0806'
   const [open, setOpen] = useState<boolean | undefined>(false)
   const handleCustomColorChange = (color: string) => {
-    // const { background } = getLabelColorObject(
-    //   color as LabelColor
-    // )
-    // console.log('background',toHex(background));
-
-    const luminance = getLuminance(color)
-    let newColor = color
-    if(isDarkMode){
-       if(luminance < 0.5) {
-        newColor = toHex(lighten(color, 0.5))
-       }
-    } else {
-      // light mode
-      // set color as background color
-      // If background is dark, set label color as white
-      // if background is light, set label color as black
-    }
     setLabelColorHex({
       rowId: labelId,
-      value: newColor.toUpperCase() as LabelColor,
+      value: color.toUpperCase() as LabelColor,
     })
   }
 

From 6cffbc23c78c5c25bf64c344b158fed4d66961eb Mon Sep 17 00:00:00 2001
From: Rupin Khandelwal <rupin@omnivore.app>
Date: Mon, 11 Jul 2022 22:43:15 +0000
Subject: [PATCH 07/12] reset - file

---
 .../web/components/elements/LabelColorDropdown.tsx | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/packages/web/components/elements/LabelColorDropdown.tsx b/packages/web/components/elements/LabelColorDropdown.tsx
index 26dbc83a8..5d3ff2979 100644
--- a/packages/web/components/elements/LabelColorDropdown.tsx
+++ b/packages/web/components/elements/LabelColorDropdown.tsx
@@ -78,8 +78,8 @@ const MainContainer = styled(Box, {
     border: '1px solid $grayBorderHover',
   },
   '@mdDown': {
-    width: '100%',
-  },
+    width: '100%'
+  }
 })
 
 const CustomLabelWrapper = styled(Box, {
@@ -107,8 +107,9 @@ export const LabelColorDropdown = (props: LabelColorDropdownProps) => {
   } = props
 
   const isDarkMode = isDarkTheme()
-  const iconColor = isDarkMode ? '#FFFFFF' : '#0A0806'
-  const [open, setOpen] = useState<boolean | undefined>(false)
+  const iconColor = isDarkMode ? '#FFFFFF': '#0A0806'
+  const [open, setOpen] = useState<boolean | undefined>(false);
+
   const handleCustomColorChange = (color: string) => {
     setLabelColorHex({
       rowId: labelId,
@@ -118,7 +119,7 @@ export const LabelColorDropdown = (props: LabelColorDropdownProps) => {
 
   const handleOpen = (open: boolean) => {
     if (canEdit && open) setOpen(true)
-    else if (isCreateMode && !canEdit && open) setOpen(true)
+    else if((isCreateMode && !canEdit) && open) setOpen(true)
     else setOpen(false)
   }
 
@@ -130,7 +131,7 @@ export const LabelColorDropdown = (props: LabelColorDropdownProps) => {
           width: '100%',
           '@md': {
             minWidth: '170px',
-            width: 'auto',
+            width: 'auto'
           },
         }}
       >
@@ -295,7 +296,6 @@ function getLabelColorObject(color: LabelColor) {
   if (labelColorObjects[color]) {
     return labelColorObjects[color]
   }
-
   const colorObject: LabelColorObject = {
     colorName: 'Custom',
     text: color,

From 8637651be9c1fd615c30b82c91f7ecd0a71086c7 Mon Sep 17 00:00:00 2001
From: Rupin Khandelwal <rupin@omnivore.app>
Date: Mon, 11 Jul 2022 22:53:28 +0000
Subject: [PATCH 08/12] reset file

---
 packages/web/utils/settings-page/labels/labelColorObjects.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/web/utils/settings-page/labels/labelColorObjects.tsx b/packages/web/utils/settings-page/labels/labelColorObjects.tsx
index eee587435..ac4f1fbe6 100644
--- a/packages/web/utils/settings-page/labels/labelColorObjects.tsx
+++ b/packages/web/utils/settings-page/labels/labelColorObjects.tsx
@@ -47,7 +47,6 @@ export const labelColorObjects: LabelColorObjects = {
 
 export const randomLabelColorHex = () => {
   const colorHexes = Object.keys(labelColorObjects).slice(0, -1)
-  const randomColorHex =
-    colorHexes[Math.floor(Math.random() * colorHexes.length)]
+  const randomColorHex = colorHexes[Math.floor(Math.random() * colorHexes.length)]
   return randomColorHex
 }
\ No newline at end of file

From ef31cb71990e4e085621a1c61403496a186a2a25 Mon Sep 17 00:00:00 2001
From: Rupin Khandelwal <rupin@omnivore.app>
Date: Tue, 12 Jul 2022 21:52:51 +0000
Subject: [PATCH 09/12] Added code to lighten up the labels in dark mode

---
 packages/web/components/elements/LabelChip.tsx | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/packages/web/components/elements/LabelChip.tsx b/packages/web/components/elements/LabelChip.tsx
index cfd9011d9..61ca742ac 100644
--- a/packages/web/components/elements/LabelChip.tsx
+++ b/packages/web/components/elements/LabelChip.tsx
@@ -1,8 +1,9 @@
-import { getLuminance } from 'color2k'
+import { getLuminance, lighten, toHsla } from 'color2k'
 import { useRouter } from 'next/router'
 import { Button } from './Button'
 import { SpanBox } from './LayoutPrimitives'
 import { isDarkTheme } from '../../lib/themeUpdater'
+
 type LabelChipProps = {
   text: string
   color: string // expected to be a RGB hex color string
@@ -21,7 +22,13 @@ export function LabelChip(props: LabelChipProps): JSX.Element {
   }
   const isDarkMode = isDarkTheme()
   const luminance = getLuminance(props.color)
+  const lightenColor = lighten(props.color, 0.5)
   const color = hexToRgb(props.color)
+  const darkThemeTextColor =
+    luminance > 0.4
+      ? `rgba(${color[0]}, ${color[1]}, ${color[2]}, 1)`
+      : lightenColor
+  const lightThemeTextColor = luminance > 0.5 ? '#000000' : '#ffffff'
   return (
     <Button
       style="plainIcon"
@@ -35,11 +42,7 @@ export function LabelChip(props: LabelChipProps): JSX.Element {
           display: 'inline-table',
           margin: '4px',
           borderRadius: '32px',
-          color: isDarkMode
-            ? `rgba(${color[0]}, ${color[1]}, ${color[2]}, 1)`
-            : luminance > 0.5
-            ? '#000000'
-            : '#ffffff',
+          color: isDarkMode ? darkThemeTextColor : lightThemeTextColor,
           fontSize: '12px',
           fontWeight: 'bold',
           padding: '2px 5px 2px 5px',

From 7781d096233ce04b89552104e73ea30057dc9757 Mon Sep 17 00:00:00 2001
From: Rupin Khandelwal <rupin@omnivore.app>
Date: Tue, 12 Jul 2022 22:42:39 +0000
Subject: [PATCH 10/12] Updated luminance condition for dark theme

---
 packages/web/components/elements/LabelChip.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/web/components/elements/LabelChip.tsx b/packages/web/components/elements/LabelChip.tsx
index 61ca742ac..09be32e2c 100644
--- a/packages/web/components/elements/LabelChip.tsx
+++ b/packages/web/components/elements/LabelChip.tsx
@@ -25,7 +25,7 @@ export function LabelChip(props: LabelChipProps): JSX.Element {
   const lightenColor = lighten(props.color, 0.5)
   const color = hexToRgb(props.color)
   const darkThemeTextColor =
-    luminance > 0.4
+    luminance > 0.2
       ? `rgba(${color[0]}, ${color[1]}, ${color[2]}, 1)`
       : lightenColor
   const lightThemeTextColor = luminance > 0.5 ? '#000000' : '#ffffff'

From 31d133fdf01e00f595a6d6eda22e0ce8ba98217b Mon Sep 17 00:00:00 2001
From: Rupin Khandelwal <rupin@omnivore.app>
Date: Tue, 12 Jul 2022 23:07:12 +0000
Subject: [PATCH 11/12] updating border color to match label text color

---
 packages/web/components/elements/LabelChip.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/web/components/elements/LabelChip.tsx b/packages/web/components/elements/LabelChip.tsx
index 09be32e2c..8b68e6ac6 100644
--- a/packages/web/components/elements/LabelChip.tsx
+++ b/packages/web/components/elements/LabelChip.tsx
@@ -49,7 +49,7 @@ export function LabelChip(props: LabelChipProps): JSX.Element {
           whiteSpace: 'nowrap',
           cursor: 'pointer',
           backgroundClip: 'padding-box',
-          border: `1px solid rgba(${color[0]}, ${color[1]}, ${color[2]}, 0.7)`,
+          border: isDarkMode ? `1px solid ${darkThemeTextColor}` :`1px solid rgba(${color[0]}, ${color[1]}, ${color[2]}, 0.7)`,
           backgroundColor: isDarkMode
             ? `rgba(${color[0]}, ${color[1]}, ${color[2]}, 0.08)`
             : props.color,

From b58cdc8a55d7778cba4fca1f6e2d9bb65a0492d5 Mon Sep 17 00:00:00 2001
From: Rupin Khandelwal <rupin@omnivore.app>
Date: Wed, 13 Jul 2022 00:19:02 +0000
Subject: [PATCH 12/12] reducing lighting

---
 packages/web/components/elements/LabelChip.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/web/components/elements/LabelChip.tsx b/packages/web/components/elements/LabelChip.tsx
index 8b68e6ac6..648977c84 100644
--- a/packages/web/components/elements/LabelChip.tsx
+++ b/packages/web/components/elements/LabelChip.tsx
@@ -22,7 +22,7 @@ export function LabelChip(props: LabelChipProps): JSX.Element {
   }
   const isDarkMode = isDarkTheme()
   const luminance = getLuminance(props.color)
-  const lightenColor = lighten(props.color, 0.5)
+  const lightenColor = lighten(props.color, 0.2)
   const color = hexToRgb(props.color)
   const darkThemeTextColor =
     luminance > 0.2