updated Labels for different themes

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}

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,
     })
   }